/* ==========================================================================
   SMM Tiger — Perfect Panel Theme
   Dark purple design system
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Monda:wght@400;700&family=Readex+Pro:wght@500;600;700&display=swap");

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  --cdn-base: "https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev";

  /* Surfaces */
  --color-bg: #0a0518;
  --color-bg-alt: #0a0518;
  --color-surface: rgba(14, 7, 30, 0.72);
  --color-surface-raised: rgba(48, 34, 89, 0.55);
  --color-surface-panel: rgba(18, 10, 38, 0.82);
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.5);

  /* Brand */
  --color-purple: #ca23e7;
  --color-purple-light: #da32f7;
  --color-purple-mid: #8f6aff;
  --color-purple-deep: #7e3fa5;
  --color-indigo: #2c2162;

  --gradient-brand: linear-gradient(
    135deg,
    #ca23e7 0%,
    rgba(152, 167, 255, 0.75) 100%
  );
  --gradient-brand-solid: linear-gradient(135deg, #ca23e7 0%, #9867ff 100%);
  --gradient-text: linear-gradient(95deg, #da32f7 9%, #8f6aff 88%);
  --gradient-card: linear-gradient(145deg, #302259 0%, #240a34 100%);
  --gradient-hero: linear-gradient(
    135deg,
    rgba(126, 63, 165, 0.4) 0%,
    rgba(44, 33, 98, 0.4) 100%
  );
  --gradient-nav-inactive: linear-gradient(
    180deg,
    rgba(202, 35, 231, 0.14) 0%,
    rgba(202, 35, 231, 0.08) 100%
  );
  --gradient-nav-active: linear-gradient(
    135deg,
    #ca23e7 0%,
    rgba(152, 167, 255, 0.85) 100%
  );

  /* Text */
  --color-text: #ffffff;
  --color-text-muted: rgba(255, 255, 255, 0.68);
  --color-text-dim: rgba(255, 255, 255, 0.45);

  /* Typography */
  --font-sans:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --font-display: "Monda", var(--font-sans);
  --font-logo: "Readex Pro", var(--font-sans);

  /* Spacing & radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-hero: 34px;
  --page-hero-height: 154px;

  --page-gutter: 24px;
  --page-max: 1660px;

  /* Shadows */
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 0 40px rgba(202, 35, 231, 0.18);
  --shadow-dropdown: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* Images */
  --img-top-header: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/topbar.png");
  --img-hero-bg: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/hero-bg.png");
  --img-tiger: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/tiger.png");
  --img-card-bg: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/card-background.png");
  --img-how-do-work-bg: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/how-do-work-bg.png");
  --img-affiliates-bg: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/affilates-bg.png");
  --img-tab-bg: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/tab-bg.png");
  --img-icon-search: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/search.svg");
  --img-icon-arrow: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/arrow.svg");
  --img-icon-plus: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/plus.svg");
  --img-icon-up: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/up.svg");
  --img-platform-poly: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/inactive-octa.png");
  --img-platform-poly-active: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/platform-poly-active.svg");
  --img-addfund-poly: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/add-fund-icon.svg");
  --img-addfund-poly-active: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/platform-poly-active.svg");

  /* Fluid scale (minidesktop) */
  --ui-scale: 1;
  --bfnav-hide-offset: 0px;
}

/* --------------------------------------------------------------------------
   Base / reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: #0a0518;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  background: #0a0518;
  background-image: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

body.bfnav-sheet-open,
body.bfnav-drawer-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

a:hover,
a:focus,
a:active,
button:hover,
button:focus,
button:active,
.btn:hover,
.btn:focus,
.btn:active,
.btn:focus-visible {
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a,
button,
input,
select,
textarea,
summary,
[tabindex]:not([tabindex="-1"]) {
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none !important;
}

a:focus,
button:focus,
a:focus-visible,
button:focus-visible,
[role="button"]:focus,
[role="button"]:focus-visible {
  outline: none !important;
  box-shadow: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Hide default Perfect Panel navbar when custom nav is present */
body:has(.bfnav-shell) > .navbar {
  display: none !important;
}

/* Gradient text utility */
.text-gradient {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */

.container-scroller {
  position: relative;
  min-height: 100vh;
  width: 100%;
  /* Do not set overflow-x:hidden here — it breaks position:sticky for the nav. */
  background: #0a0518;
}

.page-content {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter) 40px;
}

.page-hero-wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
}

/* --------------------------------------------------------------------------
   Navigation — shell & masthead
   -------------------------------------------------------------------------- */

.bfnav-shell {
  position: sticky;
  top: 0;
  z-index: 1100;
  padding: 16px var(--page-gutter) 12px;
  max-width: var(--page-max);
  margin: 0 auto;
  /* Opaque page bg so scrolled content never shows through nav gaps */
  background: #0a0518;
  transition: top 0.32s ease;
}

/* Slide masthead off-screen via sticky top — menu stays stuck (growfollows pattern). */
.bfnav-shell.is-top-hidden {
  top: calc(-1 * var(--bfnav-hide-offset, 0px));
  padding-bottom: 12px;
  background: #0a0518;
}

.bfnav-shell.is-top-hidden .bfnav-masthead {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bfnav-shell {
    transition: none;
  }
}

.bfnav-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Top header bar — image only, max 94px, bg contain */
.bfnav-masthead {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  height: 94px;
  max-height: 94px;
  background-color: transparent;
  background-image: var(--img-top-header);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bfnav-masthead:has(.bfnav-dropdown-panel.is-open),
.bfnav-masthead-inner:has(.bfnav-dropdown-panel.is-open) {
  overflow: visible;
}

.bfnav-masthead::before {
  display: none;
}

.bfnav-top {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 94px;
  max-height: 94px;
  min-height: 0;
  padding: 20px 32px 20px 44px;
  box-sizing: border-box;
  background: none;
}

/* Logo */
.bfnav-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.bfnav-logo img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.bfnav-logo-text {
  font-family: var(--font-logo);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.35;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
}

/* Actions (balance, bell, account) — Figma header chips */
.bfnav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.bfnav-balance,
.bfnav-icon-btn {
  box-sizing: border-box;
  background: #150a34;
  border: 1px solid #ffffff17;
  box-shadow: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}

.bfnav-balance:hover,
.bfnav-icon-btn:hover {
  background: #150a34;
  border-color: #ffffff17;
  text-decoration: none;
}

.bfnav-balance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 5px 12px 5px 5px;
  border-radius: 50px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

.bfnav-balance-content {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bfnav-balance-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ca23e7 0%, #8f6aff 100%);
}

.bfnav-balance-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.bfnav-balance-amount {
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.bfnav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  text-decoration: none;
  color: #fff;
}

.bfnav-icon-btn:not(.bfnav-avatar-btn) img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.bfnav-avatar-btn {
  width: auto;
  min-width: 44px;
  height: 44px;
  padding: 5px 12px 5px 5px;
  border-radius: 50px;
  gap: 8px;
}

.bfnav-avatar-btn .bfnav-avatar-img {
  width: 32px !important;
  height: 32px !important;
}

.bfnav-avatar-img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.bfnav-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 8px;
  flex-shrink: 0;
  opacity: 0.95;
  transition: transform 0.2s ease;
}

.bfnav-chevron img {
  width: 12px;
  height: 8px;
  object-fit: contain;
  transform: none;
}

.bfnav-account-dropdown [aria-expanded="true"] .bfnav-chevron,
.bfnav-balance[aria-expanded="true"] .bfnav-chevron {
  transform: rotate(180deg);
}

.bfnav-account-dropdown [aria-expanded="true"] .bfnav-chevron img,
.bfnav-balance[aria-expanded="true"] .bfnav-chevron img {
  transform: none;
}

.bfnav-balance.dropdown-toggle::after {
  display: none;
}

.bfnav-balance.dropdown-toggle {
  text-decoration: none;
  color: inherit;
}

#balance-toggle.bfnav-balance > .badge:not(.sr-only) {
  display: none !important;
}

.bfnav-balance-dropdown.open > #currencies-list.bfnav-dropdown-panel,
.bfnav-balance-dropdown > #currencies-list.bfnav-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Dropdown panels — account + currency */
.bfnav-account-dropdown {
  position: relative;
  z-index: 1;
}

.bfnav-account-dropdown:has(.bfnav-dropdown-panel.is-open),
.bfnav-balance-dropdown:has(.bfnav-dropdown-panel.is-open),
.bfnav-more-dropdown:has(.bfnav-dropdown-panel.is-open) {
  z-index: 10050;
}

.bfnav-top:has(.bfnav-dropdown-panel.is-open),
.bfnav-actions:has(.bfnav-dropdown-panel.is-open),
.bfnav-masthead:has(.bfnav-dropdown-panel.is-open),
.bfnav-masthead-inner:has(.bfnav-dropdown-panel.is-open),
.bfnav-shell:has(.bfnav-dropdown-panel.is-open),
.bfnav-inner:has(.bfnav-dropdown-panel.is-open),
.bfnav-menu:has(.bfnav-dropdown-panel.is-open) {
  z-index: 10040;
}

.bfnav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 0;
  border-radius: 16px;
  background: #150a34;
  border: 1px solid #ffffff17;
  box-shadow: var(--shadow-dropdown);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
  z-index: 10060;
}

.bfnav-dropdown-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 10060;
}

.bfnav-menu-panel {
  min-width: 228px;
  padding: 0;
}

.bfnav-panel-list {
  display: flex;
  flex-direction: column;
  max-height: none;
  overflow: visible;
}

.bfnav-panel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid #ffffff17;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.bfnav-panel-list .bfnav-panel-item:last-child {
  border-bottom: none;
}

.bfnav-panel-item:hover,
.bfnav-panel-item.is-active {
  background: rgba(202, 35, 231, 0.14);
  color: #fff;
  text-decoration: none;
}

.bfnav-panel-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #fff;
}

.bfnav-panel-item-icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

.bfnav-panel-item-label {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.bfnav-balance-code {
  font-weight: 600;
}

.bfnav-balance-symbol {
  font-weight: 500;
  opacity: 0.85;
}

.bfnav-panel-empty {
  display: block;
  padding: 16px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

.bfnav-panel-footer {
  background: linear-gradient(
    135deg,
    rgba(202, 35, 231, 0.35) 0%,
    rgba(96, 120, 255, 0.28) 100%
  );
  border-top: 1px solid #ffffff17;
}

.bfnav-panel-footer .bfnav-panel-item {
  border-bottom: none;
}

.bfnav-panel-footer .bfnav-panel-item:hover {
  background: rgba(202, 35, 231, 0.22);
}

.bfnav-balance-panel {
  min-width: 200px;
  width: 220px;
}

/* Custom is-open toggle — override Bootstrap .dropdown-menu { display: none } */
.bfnav-balance-dropdown > #currencies-list.bfnav-dropdown-panel.dropdown-menu {
  display: flex !important;
}

.bfnav-balance-dropdown > #currencies-list.bfnav-balance-panel {
  flex-direction: column;
  float: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfnav-balance-dropdown > #currencies-list.bfnav-balance-panel > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfnav-balance-dropdown
  > #currencies-list.bfnav-balance-panel
  > li.active
  > .dropdown-item,
.bfnav-balance-dropdown
  > #currencies-list.bfnav-balance-panel
  .dropdown-item.is-active {
  background: rgba(202, 35, 231, 0.14);
}

.bfnav-balance-dropdown
  > #currencies-list.bfnav-balance-panel
  > li.bfnav-currency-empty {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfnav-balance-dropdown
  > #currencies-list.bfnav-balance-panel
  > li.bfnav-currency-empty
  .bfnav-panel-empty {
  display: block;
  padding: 18px 16px;
  cursor: default;
}

.bfnav-drawer-currency-empty {
  margin: 8px 0 0;
}

.bfnav-dropdown-panel a {
  text-decoration: none;
}

#more-panel.bfnav-more-panel,
.bfnav-more-panel {
  min-width: 228px;
  max-height: min(400px, calc(100vh - 160px));
  padding: 6px 0;
  border-radius: 8px;
  background: #150a34;
  border: 1px solid #ffffff17;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(202, 35, 231, 0.12);
  z-index: 10060;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}

#more-panel.bfnav-more-panel::-webkit-scrollbar,
.bfnav-more-panel::-webkit-scrollbar {
  width: 6px;
}

#more-panel.bfnav-more-panel::-webkit-scrollbar-track,
.bfnav-more-panel::-webkit-scrollbar-track {
  background: transparent;
}

#more-panel.bfnav-more-panel::-webkit-scrollbar-thumb,
.bfnav-more-panel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

#more-panel .bfnav-panel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: 0;
  border-bottom: none;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: transparent;
}

#more-panel .bfnav-panel-list .bfnav-panel-item:last-child {
  border-bottom: none;
}

#more-panel .bfnav-panel-item:hover {
  background: rgba(202, 35, 231, 0.16);
  color: #fff;
}

#more-panel .bfnav-panel-item.is-active {
  width: 100%;
  border-radius: 0;
  background-image: var(--gradient-nav-active);
  background-color: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
  box-shadow: none;
}

#more-panel .bfnav-panel-item-icon,
#more-panel .bfnav-panel-octagon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: #fff;
}

#more-panel .bfnav-panel-poly {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

#more-panel .bfnav-panel-poly--active {
  display: none;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-poly--inactive {
  display: none;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-poly--active {
  display: block;
}

#more-panel .bfnav-panel-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #fff;
}

#more-panel .bfnav-panel-glyph svg {
  display: block;
  width: 18px;
  height: 18px;
  color: #fff;
  stroke: currentColor;
}

#more-panel .bfnav-panel-item .bfnav-panel-glyph {
  color: rgba(255, 255, 255, 0.92);
}

#more-panel .bfnav-panel-item:hover .bfnav-panel-glyph {
  color: #fff;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph {
  color: #ca23e7;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg {
  color: #ca23e7;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg path,
#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg circle,
#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg line,
#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg polyline,
#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph svg rect {
  stroke: url(#bfnav-more-icon-grad);
}

#more-panel
  .bfnav-panel-item.is-active
  .bfnav-panel-glyph
  svg
  [fill="currentColor"] {
  fill: url(#bfnav-more-icon-grad);
  stroke: none;
}

#more-panel .bfnav-more-gradient-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

#more-panel .bfnav-panel-glyph img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
  opacity: 0.92;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

#more-panel .bfnav-panel-item.is-active .bfnav-panel-glyph img {
  filter: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Navigation — desktop menu tabs
   -------------------------------------------------------------------------- */

.bfnav-menu {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 0 4px 4px;
}

.bfnav-menu-item {
  min-width: 0;
}

.bfnav-menu-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  height: 58px;
  padding: 12px 12px 12px 10px;
  border-radius: var(--radius-md);
  background-color: transparent;
  background-image: var(--img-tab-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
  overflow: hidden;
}

.bfnav-menu-link:hover {
  filter: brightness(1.08);
  color: var(--color-text);
}

.bfnav-menu-link.is-active {
  background-color: transparent;
  background-image: var(--gradient-nav-active);
  background-size: auto;
  background-repeat: no-repeat;
  border-color: transparent;
  border-radius: 14px;
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(202, 35, 231, 0.35);
  filter: none;
}

.bfnav-nav-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}

.bfnav-nav-poly {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.bfnav-nav-poly--active {
  display: none;
}

.bfnav-menu-link.is-active .bfnav-nav-poly--inactive {
  display: none;
}

.bfnav-menu-link.is-active .bfnav-nav-poly--active {
  display: block;
}

.bfnav-nav-glyph {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.bfnav-nav-glyph img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  /* Inactive: force white */
  filter: brightness(0) invert(1);
  transition: filter 0.2s ease;
}

.bfnav-menu-link.is-active .bfnav-nav-glyph img {
  /* Active: show native SVG purple→blue gradient */
  filter: none;
}

.bfnav-menu-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  font-size: 15px;
}

/* More dropdown in nav */
.bfnav-more-dropdown {
  position: relative;
  z-index: 1;
}

.bfnav-more-dropdown:has(.bfnav-dropdown-panel.is-open) {
  z-index: 10050;
}

.bfnav-more-panel {
  left: auto;
  right: 0;
}

.bfnav-more-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0.9;
}

.bfnav-more-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Burger (mobile) */
.bfnav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bfnav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

body.bfnav-drawer-open .bfnav-burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.bfnav-drawer-open .bfnav-burger span:nth-child(2) {
  opacity: 0;
}

body.bfnav-drawer-open .bfnav-burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Navigation — mobile tabbar
   -------------------------------------------------------------------------- */

.bfnav-tabbar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 30, 0.94);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.bfnav-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: var(--radius-md);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-dim);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.bfnav-tabbar-item:focus,
.bfnav-tabbar-item:focus-visible,
.bfnav-tabbar-item:active {
  outline: none !important;
  box-shadow: none !important;
}

.bfnav-tabbar-item:not(.is-active):focus,
.bfnav-tabbar-item:not(.is-active):focus-visible,
.bfnav-tabbar-item:not(.is-active):active {
  background: transparent;
}

.bfnav-tabbar-item img,
.bfnav-tabbar-item .bfnav-nav-icon {
  width: 22px;
  height: 22px;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.bfnav-tabbar-item:not(.is-active) {
  color: rgba(255, 255, 255, 0.82);
}

.bfnav-tabbar-item:not(.is-active) img,
.bfnav-tabbar-item:not(.is-active) .bfnav-nav-icon {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.bfnav-tabbar-item.is-active {
  color: var(--color-purple-light);
  background: rgba(202, 35, 231, 0.12);
}

.bfnav-tabbar-item.is-active img,
.bfnav-tabbar-item.is-active .bfnav-nav-icon {
  opacity: 1;
  filter: none;
}

/* --------------------------------------------------------------------------
   Navigation — drawer & sheet
   -------------------------------------------------------------------------- */

.bfnav-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

body.bfnav-drawer-open .bfnav-drawer-backdrop,
body.bfnav-sheet-open .bfnav-drawer-backdrop {
  opacity: 1;
  visibility: visible;
}

.bfnav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1210;
  width: min(320px, 88vw);
  height: 100%;
  padding: 24px 20px;
  background: var(--color-bg-alt);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

body.bfnav-drawer-open .bfnav-drawer {
  transform: translateX(0);
}

.bfnav-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 1220;
  display: flex;
  flex-direction: column;
  max-height: min(
    72dvh,
    calc(100dvh - 100px - env(safe-area-inset-bottom, 0px))
  );
  padding: 0;
  overflow: hidden;
  border-radius: 24px 24px 0 0;
  background: #150a2e;
  border: 1px solid rgba(202, 35, 231, 0.35);
  border-bottom: 0;
  box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s;
}

.bfnav-sheet.is-open,
body.bfnav-sheet-open .bfnav-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.bfnav-sheet-header {
  flex-shrink: 0;
  padding: 10px 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    180deg,
    rgba(202, 35, 231, 0.12) 0%,
    transparent 100%
  );
}

.bfnav-sheet-handle {
  width: 40px;
  height: 4px;
  margin: 0 auto 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.bfnav-sheet-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 2px 16px;
}

.bfnav-sheet-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.bfnav-sheet-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ca23e7 0%, #8f6aff 100%);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(202, 35, 231, 0.35);
}

.bfnav-sheet-user-meta {
  min-width: 0;
}

.bfnav-sheet-name {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bfnav-sheet-email {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bfnav-sheet-close {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}

.bfnav-sheet-close:hover,
.bfnav-sheet-close:active {
  background: rgba(202, 35, 231, 0.28);
  color: #fff;
}

.bfnav-sheet-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 0 10px;
  -webkit-overflow-scrolling: touch;
}

.bfnav-sheet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}

.bfnav-sheet-grid a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(202, 35, 231, 0.22);
  background: rgba(255, 255, 255, 0.04);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  text-align: left;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.bfnav-sheet-grid a:focus,
.bfnav-sheet-grid a:focus-visible,
.bfnav-sheet-grid a:active {
  outline: none !important;
  box-shadow: none !important;
}

.bfnav-sheet-grid a:not(.is-active):focus,
.bfnav-sheet-grid a:not(.is-active):focus-visible,
.bfnav-sheet-grid a:not(.is-active):active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(202, 35, 231, 0.22);
}

.bfnav-sheet-item-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
}

.bfnav-sheet-item-poly {
  position: absolute;
  inset: 0;
  width: 34px;
  height: 34px;
  object-fit: contain;
  pointer-events: none;
}

.bfnav-sheet-item-poly--active {
  display: none;
}

.bfnav-sheet-item-glyph {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.bfnav-sheet-item-label {
  display: block;
  min-width: 0;
  flex: 1;
}

.bfnav-sheet-grid a:hover {
  background: rgba(202, 35, 231, 0.14);
  border-color: rgba(202, 35, 231, 0.45);
  color: #fff;
}

.bfnav-sheet-grid a.is-active,
.bfnav-sheet-grid a.is-active:hover {
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  border: none;
  color: #fff;
  box-shadow: 0 4px 18px rgba(202, 35, 231, 0.3);
}

.bfnav-sheet-grid a.is-active .bfnav-sheet-item-poly--inactive {
  display: none;
}

.bfnav-sheet-grid a.is-active .bfnav-sheet-item-poly--active {
  display: block;
}

.bfnav-sheet-grid a.is-active .bfnav-sheet-item-glyph {
  filter: none;
  opacity: 1;
}

.bfnav-sheet-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 12px 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(202, 35, 231, 0.4);
  background: rgba(202, 35, 231, 0.1);
  color: #e56bff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease;
}

.bfnav-sheet-logout:hover,
.bfnav-sheet-logout:active {
  background: rgba(202, 35, 231, 0.2);
  color: #fff !important;
}

body.bfnav-sheet-open {
  overflow: hidden;
}

body.bfnav-sheet-open .bfnav-drawer-backdrop.is-open {
  z-index: 1210;
}

/* --------------------------------------------------------------------------
   Page hero — image only, no fill / border / gradient overlay
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  margin: 20px 0 24px;
  min-height: 0;
  height: var(--page-hero-height);
  max-height: var(--page-hero-height);
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: none;
  background-image: none;
}

.page-hero::before,
.page-hero::after {
  display: none;
  content: none;
}

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

.page-hero-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* Keep text clear of the tiger without changing the figure */
  max-width: calc(100% - min(260px, 34%));
  min-height: 0;
  height: 100%;
  max-height: var(--page-hero-height);
  padding: 22px 40px;
  box-sizing: border-box;
}

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fafafb;
}

.page-hero-title .text-gradient,
.page-hero-title span {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.page-hero-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.page-hero-figure {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: min(260px, 32%);
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  pointer-events: none;
  line-height: 0;
}

.page-hero-tiger {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: contain;
  object-position: right bottom;
}

/* --------------------------------------------------------------------------
   New order page — layout
   -------------------------------------------------------------------------- */

.neworder-page {
  --neworder-panel-left: min(784px, 58%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}

/* --------------------------------------------------------------------------
   New order — stat cards (Figma 585:223862)
   Card surface = card-background.png (includes TL/BR corner strokes)
   -------------------------------------------------------------------------- */

.neworder-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.neworder-stat-card {
  position: relative;
  display: flex;
  min-height: 159px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: none;
  background-image: none;
  overflow: hidden;
  box-shadow: none;
}

/* Soft glow corner strokes — TL thinner, BR thicker */
.neworder-stat-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.1) 14%,
    transparent 30%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.neworder-stat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.7px;
  pointer-events: none;
  display: block;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 70%,
    rgba(255, 255, 255, 0.1) 86%,
    rgba(255, 255, 255, 0.22) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.neworder-stat-card-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

.neworder-stat-card-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
}

.neworder-stat-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 159px;
  padding: 26px 30px;
  box-sizing: border-box;
}

.neworder-stat-card-body--metric {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 30px;
}

/* Welcome card */
.neworder-welcome-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding-bottom: 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
}

.neworder-welcome-avatar {
  width: 58px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #d5d5d5;
}

.neworder-welcome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.neworder-welcome-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.neworder-welcome-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.neworder-welcome-name {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.neworder-balance-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.neworder-balance-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
  white-space: nowrap;
}

.neworder-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 8px;
  background: var(--gradient-brand);
  text-decoration: none;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.neworder-add-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  text-decoration: none;
}

.neworder-add-btn img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.neworder-add-btn::before {
  display: none;
}

/* Metric cards */
.neworder-stat {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-width: 0;
  flex: 1;
}

.neworder-stat-value {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.neworder-stat-label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.neworder-stat-trend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  font-size: 14px;
  font-weight: 500;
  color: #34c759;
  box-sizing: border-box;
}

.neworder-stat-trend::before {
  display: none;
  content: none;
}

.neworder-stat-trend img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.neworder-stat-trend-num {
  font-weight: 500;
  color: #34c759;
  flex-shrink: 0;
}

.neworder-stat-trend-text {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  line-height: 1.2;
  color: #d3d3d3;
}

.neworder-stat-trend.is-down,
.neworder-stat-trend.is-down .neworder-stat-trend-num {
  color: #f87171;
}

.neworder-stat-icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 12px;
  background: rgba(128, 128, 128, 0.24);
  border: 0.5px solid rgba(255, 255, 255, 0.19);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  margin-bottom: 0;
  box-sizing: border-box;
}

.neworder-stat-icon-box img {
  width: 42px;
  height: 44px;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   New order — platform bar (Figma 575:38621)
   -------------------------------------------------------------------------- */

.neworder-platforms {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  background: rgba(166, 166, 166, 0.08);
  border: none;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  box-sizing: border-box;
}

.neworder-platforms::-webkit-scrollbar {
  display: none;
}

.neworder-platform {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 84px;
  height: auto;
  padding: 12px 24px;
  border-radius: 14px;
  background: rgba(67, 67, 67, 0.3);
  border: 1px solid #4c5aa761;
  color: #fff;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.neworder-platform:hover {
  background: rgba(67, 67, 67, 0.42);
  border-color: #4c5aa7a0;
}

.neworder-platform.is-active {
  color: #fff;
  border: none;
  outline: none;
  box-shadow: 0 4px 18px rgba(202, 35, 231, 0.28);
  background: linear-gradient(
    100deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.neworder-platform.is-active:hover {
  border: none;
}

.neworder-platform-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
}

.neworder-platform-poly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
}

/* Inactive: dark octa + purple border. Active: soft white octa. */
.neworder-platform-poly--inactive {
  display: block;
}

.neworder-platform-poly--active {
  display: none;
}

.neworder-platform.is-active .neworder-platform-poly--inactive {
  display: none;
}

.neworder-platform.is-active .neworder-platform-poly--active {
  display: block;
}

.neworder-platform-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 38px;
  height: 38px;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   New order — two-column grid (Figma 575:38687)
   -------------------------------------------------------------------------- */

.neworder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.neworder-panel,
.neworder-details {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px 34px;
  border-radius: 28px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
  overflow: hidden;
  box-sizing: border-box;
}

.neworder-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  margin: 0;
  border-radius: 14px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.neworder-details-head {
  justify-content: flex-start;
  padding: 12px;
  min-height: 80px;
  border: 1px solid rgba(121, 121, 121, 0.16);
  box-sizing: border-box;
}

.neworder-panel-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #fff;
  margin: 0;
}

/* Order / details tabs */
.neworder-panel-head .neworder-tabs,
.neworder-details-head .neworder-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    128deg,
    rgba(202, 35, 231, 0.2) 0%,
    rgba(152, 167, 255, 0.15) 100%
  );
  overflow-x: auto;
  scrollbar-width: none;
}

.neworder-panel-head .neworder-tab,
.neworder-details-head .neworder-tab {
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  border: none;
  box-shadow: none;
}

.neworder-tabs::-webkit-scrollbar {
  display: none;
}

.neworder-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: #f5f6f7;
  background: transparent;
  border: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.neworder-tab:hover {
  color: #ffffff;
  background: rgba(202, 35, 231, 0.12);
}

.neworder-tab.is-active {
  color: #ffffff;
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  border: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   New order — form
   -------------------------------------------------------------------------- */

.neworder-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

.neworder-form .form-group {
  margin-bottom: 0;
}

.neworder-form .control-label,
.neworder-field-label {
  display: block;
  margin-bottom: 12px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.neworder-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.neworder-label-row .control-label {
  margin-bottom: 0;
}

.neworder-clear {
  border: none;
  background: transparent;
  color: var(--color-purple-light);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.neworder-clear[hidden] {
  display: none !important;
}

.neworder-clear:hover {
  color: #ffffff;
}

/* Search shell */
.neworder-search-group {
  margin-bottom: 0;
}

.neworder-search-shell {
  position: relative;
}

.neworder-search-shell .form-control,
.neworder-search-shell input[type="text"],
.neworder-search-shell input.select2-selection,
.neworder-search-shell
  .select2-container--default
  .select2-selection--single.form-control,
.neworder-search-shell
  .search-dropdown.select2-container
  input.select2-selection {
  padding-left: 52px !important;
  min-height: 56px !important;
  height: 56px;
}

/* Keep icon above Perfect Panel search Select2 input (opaque field covers sibling icon otherwise) */
.neworder-page
  .neworder-search-shell
  .select2-container--default
  input.select2-selection.form-control,
.neworder-page
  .neworder-search-shell
  .search-dropdown.select2-container
  input.select2-selection {
  padding: 0 18px 0 52px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.neworder-search-icon {
  position: absolute;
  top: 50%;
  left: 18px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  opacity: 1;
  pointer-events: none;
  z-index: 10;
}

.neworder-search-shell .search-dropdown,
.neworder-search-shell .search-dropdown.select2-container {
  position: relative;
  z-index: 1;
}

.neworder-search-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.neworder-search-shell .search-dropdown .input-wrapper button,
.neworder-search-shell .input-wrapper button {
  display: none !important;
}

/* Search services dropdown — same treatment as service select */
.neworder-search-shell,
.neworder-search-shell .search-dropdown,
.neworder-search-shell #select-category-container {
  position: relative;
}

.neworder-search-shell .select2-dropdown,
.neworder-search-shell .select2-dropdown.dropdown-menu,
.search-dropdown .select2-dropdown,
#select-category-container .select2-dropdown,
.neworder-page
  .neworder-search-shell
  .select2-container--open
  .select2-dropdown {
  background: rgba(14, 7, 30, 0.98) !important;
  background-color: rgba(14, 7, 30, 0.98) !important;
  border: 1px solid rgba(192, 129, 230, 0.4) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  margin: 0 !important;
  margin-top: -1px !important;
  padding: 6px 0 !important;
  overflow: hidden !important;
  color: #ffffff !important;
  z-index: 10050 !important;
}

.neworder-search-shell .select2-results__options,
.search-dropdown .select2-results__options,
#select-category-container .select2-results__options {
  max-height: 380px !important;
  height: auto !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.neworder-search-shell .select2-results,
.neworder-search-shell .select2-results > div,
.search-dropdown .select2-results,
.search-dropdown .select2-results > div,
#select-category-container .select2-results,
#select-category-container .select2-results > div,
.neworder-search-shell .select2-dropdown,
.search-dropdown .select2-dropdown,
#select-category-container .select2-dropdown {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.neworder-search-shell .select2-results__options::-webkit-scrollbar,
.search-dropdown .select2-results__options::-webkit-scrollbar,
#select-category-container .select2-results__options::-webkit-scrollbar,
.neworder-search-shell .select2-results::-webkit-scrollbar,
.neworder-search-shell .select2-results > div::-webkit-scrollbar,
.search-dropdown .select2-results::-webkit-scrollbar,
.search-dropdown .select2-results > div::-webkit-scrollbar,
#select-category-container .select2-results::-webkit-scrollbar,
#select-category-container .select2-results > div::-webkit-scrollbar,
.neworder-search-shell .select2-dropdown::-webkit-scrollbar,
.search-dropdown .select2-dropdown::-webkit-scrollbar,
#select-category-container .select2-dropdown::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

.neworder-search-shell .select2-results__option,
.search-dropdown .select2-results__option,
#select-category-container .select2-results__option {
  padding: 12px 14px !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.82) !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18) !important;
  transition:
    background-color 0.28s ease,
    color 0.28s ease !important;
  cursor: pointer;
}

.neworder-search-shell .select2-results__option:has(> a),
.neworder-search-shell .select2-results__option:has(> .select2-result-label),
.search-dropdown .select2-results__option:has(> a),
.search-dropdown .select2-results__option:has(> .select2-result-label),
#select-category-container .select2-results__option:has(> a),
#select-category-container
  .select2-results__option:has(> .select2-result-label) {
  padding: 0 !important;
}

.neworder-search-shell .select2-results__option:last-child,
.search-dropdown .select2-results__option:last-child,
#select-category-container .select2-results__option:last-child {
  border-bottom: none !important;
}

.neworder-search-shell .select2-results__option--highlighted,
.neworder-search-shell .select2-results__option--highlighted[aria-selected],
.neworder-search-shell .select2-results__option.active,
.neworder-search-shell .select2-results__option[aria-selected="true"],
.neworder-search-shell .select2-results__option:hover,
.search-dropdown .select2-results__option--highlighted,
.search-dropdown .select2-results__option.active,
.search-dropdown .select2-results__option[aria-selected="true"],
.search-dropdown .select2-results__option:hover,
#select-category-container .select2-results__option--highlighted,
#select-category-container .select2-results__option.active,
#select-category-container .select2-results__option[aria-selected="true"],
#select-category-container .select2-results__option:hover {
  background-color: rgba(202, 35, 231, 0.55) !important;
  background-image: none !important;
  color: #ffffff !important;
}

.neworder-search-shell .select2-results__option .select2-result-label,
.neworder-search-shell .select2-results__option a,
.search-dropdown .select2-results__option .select2-result-label,
.search-dropdown .select2-results__option a,
#select-category-container .select2-results__option .select2-result-label,
#select-category-container .select2-results__option a {
  display: flex !important;
  align-items: flex-start;
  width: 100% !important;
  box-sizing: border-box;
  min-height: 47px;
  padding: 12px 14px !important;
  margin: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer;
}

.neworder-search-shell .select2-results__option .neworder-service-label,
.search-dropdown .select2-results__option .neworder-service-label,
#select-category-container .select2-results__option .neworder-service-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  pointer-events: none;
}

.neworder-search-shell .select2-results__option .neworder-service-id,
.search-dropdown .select2-results__option .neworder-service-id,
#select-category-container .select2-results__option .neworder-service-id {
  margin-top: 1px;
}

.neworder-search-shell .neworder-service-id,
.search-dropdown .neworder-service-id,
#select-category-container .neworder-service-id,
.neworder-search-shell .select2-results__option .neworder-service-id,
.search-dropdown .select2-results__option .neworder-service-id,
#select-category-container .select2-results__option .neworder-service-id {
  background-color: #ca23e7 !important;
  color: #ffffff !important;
}

.neworder-search-shell .neworder-service-name,
.search-dropdown .neworder-service-name,
#select-category-container .neworder-service-name,
.neworder-search-shell .select2-results__option .neworder-service-name,
.search-dropdown .select2-results__option .neworder-service-name,
#select-category-container .select2-results__option .neworder-service-name {
  color: rgba(255, 255, 255, 0.9) !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: unset;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.35;
}

.neworder-search-shell
  .select2-results__option--highlighted
  .neworder-service-id,
.neworder-search-shell .select2-results__option.active .neworder-service-id,
.neworder-search-shell .select2-results__option:hover .neworder-service-id,
.neworder-search-shell
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
.search-dropdown .select2-results__option--highlighted .neworder-service-id,
.search-dropdown .select2-results__option.active .neworder-service-id,
.search-dropdown .select2-results__option:hover .neworder-service-id,
.search-dropdown
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
#select-category-container
  .select2-results__option--highlighted
  .neworder-service-id,
#select-category-container .select2-results__option.active .neworder-service-id,
#select-category-container .select2-results__option:hover .neworder-service-id,
#select-category-container
  .select2-results__option[aria-selected="true"]
  .neworder-service-id {
  background-color: #ffffff !important;
  color: #ca23e7 !important;
  box-shadow: none !important;
}

.neworder-search-shell .select2-container--open .select2-selection--single,
.search-dropdown .select2-container--open .select2-selection--single {
  border: 1px solid rgba(192, 129, 230, 0.4) !important;
  border-bottom-color: transparent !important;
  border-radius: 12px 12px 0 0 !important;
}

/* Service ID badge — all new-order Select2 surfaces (default + hover/selected + closed selection) */
.neworder-page .neworder-service-id,
.neworder-page .select2-results__option .neworder-service-id,
.neworder-search-shell .neworder-service-id,
.neworder-search-shell .select2-results__option .neworder-service-id,
.search-dropdown .neworder-service-id,
.search-dropdown .select2-results__option .neworder-service-id,
#select-category-container .neworder-service-id,
#select-category-container .select2-results__option .neworder-service-id,
.neworder-page .select2-selection__rendered .neworder-service-id,
.neworder-search-shell .select2-selection__rendered .neworder-service-id {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 28px !important;
  max-width: 64px !important;
  height: 22px !important;
  padding: 0 8px !important;
  border-radius: 8px !important;
  background-color: #ca23e7 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 8px rgba(202, 35, 231, 0.28) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.neworder-page .select2-results__option--highlighted .neworder-service-id,
.neworder-page .select2-results__option.active .neworder-service-id,
.neworder-page .select2-results__option:hover .neworder-service-id,
.neworder-page
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
.neworder-search-shell
  .select2-results__option--highlighted
  .neworder-service-id,
.neworder-search-shell .select2-results__option.active .neworder-service-id,
.neworder-search-shell .select2-results__option:hover .neworder-service-id,
.neworder-search-shell
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
.search-dropdown .select2-results__option--highlighted .neworder-service-id,
.search-dropdown .select2-results__option.active .neworder-service-id,
.search-dropdown .select2-results__option:hover .neworder-service-id,
.search-dropdown
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
#select-category-container
  .select2-results__option--highlighted
  .neworder-service-id,
#select-category-container .select2-results__option.active .neworder-service-id,
#select-category-container .select2-results__option:hover .neworder-service-id,
#select-category-container
  .select2-results__option[aria-selected="true"]
  .neworder-service-id,
body .select2-results__option--highlighted .neworder-service-id,
body .select2-results__option.active .neworder-service-id,
body .select2-results__option:hover .neworder-service-id,
body .select2-results__option[aria-selected="true"] .neworder-service-id {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #ca23e7 !important;
  box-shadow: none !important;
}

/* Charge bar */
.neworder-charge-group {
  margin-top: 0;
}

.neworder-charge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 30px;
  margin-bottom: 0;
  border-radius: 16px;
  background: linear-gradient(
    139deg,
    rgba(202, 35, 231, 0.1) 0.37%,
    rgba(152, 167, 255, 0.075) 99%
  );
  border: none;
  box-shadow: none;
}

.neworder-charge-label {
  flex-shrink: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.5;
}

.neworder-page .neworder-charge-bar .form-control,
.neworder-page .neworder-charge-bar #charge,
.neworder-charge-bar .form-control,
.neworder-charge-bar #charge {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  text-align: right !important;
  font-weight: 600 !important;
  font-size: 20px !important;
  letter-spacing: 0.2px !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.neworder-page .neworder-charge-bar .form-control:focus,
.neworder-page .neworder-charge-bar #charge:focus,
.neworder-charge-bar .form-control:focus,
.neworder-charge-bar #charge:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.neworder-charge-bar #charge::placeholder {
  color: #ffffff;
  opacity: 1;
}

/* Keep PP description source in DOM for the details panel, but never show it in the form */
.neworder-page #service_description {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: none !important;
  pointer-events: none !important;
}

/* Submit button */
.neworder-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 8px 24px;
  margin-top: 0;
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  border: none;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  box-shadow: none;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.neworder-submit:hover,
.neworder-submit:focus {
  opacity: 0.94;
  transform: translateY(-1px);
  color: #ffffff;
  box-shadow: none;
}

.neworder-submit:active {
  transform: translateY(0);
}

/* Paste button inside link fields */
.neworder-link-shell {
  position: relative;
  display: flex;
  align-items: center;
}

.neworder-link-shell .form-control {
  padding-right: 116px !important;
}

.neworder-paste-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    104deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  cursor: pointer;
}

.neworder-paste-btn:hover {
  opacity: 0.92;
}

/* --------------------------------------------------------------------------
   New order — details panel
   -------------------------------------------------------------------------- */

.neworder-details-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

.neworder-details-body[hidden] {
  display: none !important;
}

.neworder-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.neworder-details .neworder-field,
.neworder-details .neworder-metric {
  gap: 8px;
}

.neworder-details .neworder-field-label {
  margin-bottom: 0;
}

.neworder-field-value,
.neworder-metric-box {
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.19);
  border: 0.3px solid rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-sizing: border-box;
}

.neworder-metric-box {
  min-height: 56px;
  border: none;
}

.neworder-field-value p,
.neworder-example-row p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neworder-example-row {
  gap: 12px;
}

.neworder-example-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.neworder-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.neworder-metric {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: none;
  border: none;
}

.neworder-metric-label {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: #ffffff;
}

.neworder-metric-value {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #f5f6f7;
}

.neworder-desc-divider {
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.22);
  margin: 0;
}

.neworder-desc-field .neworder-field-label {
  color: #ebecef;
}

.neworder-desc-box {
  min-height: 259px;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(98, 98, 203, 0.22);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #f5f6f7;
  box-sizing: border-box;
}

.neworder-desc-box ul {
  margin: 0;
  padding-left: 18px;
}

.neworder-desc-box li + li {
  margin-top: 8px;
}

.neworder-read-before-field .neworder-desc-box {
  min-height: 0;
}

.neworder-read-before-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(245, 246, 247, 0.75);
}

/* Legacy info-card hooks (kept for other panels / update tab) */
.neworder-info-card {
  padding: 0;
  border: none;
  background: none;
  margin: 0;
}

/* Service label in selects */
.neworder-service-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.neworder-service-id {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  max-width: 64px;
  height: 22px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: #ca23e7;
  background-image: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(202, 35, 231, 0.28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    background-color 0.28s ease,
    color 0.28s ease,
    box-shadow 0.28s ease;
}

.neworder-service-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
}

.neworder-select-text--compact {
  font-size: 13px !important;
}

.neworder-select-text--compact-xs {
  font-size: 12px !important;
}

/* --------------------------------------------------------------------------
   Form controls (within neworder page)
   -------------------------------------------------------------------------- */

.neworder-page .form-control {
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
  border: none;
  color: #f5f6f7;
  font-size: 16px;
  line-height: 1.5;
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
  box-shadow: none;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

.neworder-page .form-control:focus {
  outline: none;
  border: none;
  background: rgba(121, 121, 121, 0.22);
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.35);
}

.neworder-page .form-control::placeholder {
  color: #f5f6f7;
  opacity: 0.85;
}

.neworder-page .form-control[readonly] {
  opacity: 1;
  cursor: default;
}

.neworder-page textarea.form-control {
  min-height: 100px;
  height: auto;
  resize: vertical;
}

.neworder-page .panel-body.border-solid {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(98, 98, 203, 0.22);
  border: none !important;
  font-size: 14px;
  line-height: 1.6;
  color: #f5f6f7;
}

.neworder-page .terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
}

.neworder-page .terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--color-purple);
  flex-shrink: 0;
}

.neworder-page .terms a {
  color: var(--color-purple-light);
  text-decoration: none;
}

.neworder-page .terms a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Alerts (within neworder page)
   -------------------------------------------------------------------------- */

.neworder-page .alert {
  padding: 16px 20px;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 14px;
  line-height: 1.5;
}

.neworder-page .alert.alert-dismissible {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.neworder-page .alert.alert-danger.alert-dismissible,
.neworder-page .alert.alert-error.alert-dismissible {
  align-items: center;
}

.neworder-page .neworder-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.neworder-page .alert.alert-dismissible .close {
  position: static;
  top: auto;
  right: auto;
  z-index: 1;
  flex: 0 0 auto;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  margin: 0;
  margin-top: -2px;
  padding: 0;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
}

.neworder-page .alert.alert-danger.alert-dismissible .close,
.neworder-page .alert.alert-error.alert-dismissible .close {
  align-self: center;
  margin-top: 0;
}

.neworder-page .alert.alert-dismissible .close span {
  line-height: 1;
}

.neworder-page .alert.alert-dismissible .close:hover {
  opacity: 1;
}

.neworder-page .alert-success {
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.3);
  color: #86efac;
}

.neworder-page .alert-danger,
.neworder-page .alert-error {
  background: rgba(248, 113, 113, 0.1);
  border-color: rgba(248, 113, 113, 0.3);
  color: #fca5a5;
}

.neworder-page .alert-warning {
  background: rgba(251, 191, 36, 0.1);
  border-color: rgba(251, 191, 36, 0.3);
  color: #fcd34d;
}

.neworder-page .alert-info {
  background: rgba(152, 167, 255, 0.1);
  border-color: rgba(152, 167, 255, 0.3);
  color: #c4b5fd;
}

.neworder-page .alert h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* Toast notifications */
.neworder-toast-stack {
  position: fixed;
  right: 20px;
  bottom: 24px;
  top: auto;
  z-index: 10080;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, calc(100vw - 32px));
}

.neworder-toast,
.neworder-toast-notify {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  background: linear-gradient(
    135deg,
    rgba(28, 14, 52, 0.98) 0%,
    rgba(18, 10, 38, 0.98) 100%
  );
  border: 1px solid rgba(202, 35, 231, 0.45);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.45),
    0 0 24px rgba(202, 35, 231, 0.18);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
  color: #ffffff;
  pointer-events: auto;
  animation: neworder-toast-in 0.3s ease;
}

.neworder-toast__body {
  flex: 1 1 auto;
  min-width: 0;
}

.neworder-toast__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.neworder-toast__close span {
  line-height: 1;
}

.neworder-toast__close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

.neworder-toast.is-leaving,
.neworder-toast-notify.is-leaving {
  animation: neworder-toast-out 0.22s ease forwards;
}

.neworder-toast-notify.is-visible {
  position: fixed;
  right: 20px;
  bottom: 24px;
  top: auto;
  left: auto;
  z-index: 10080;
  display: block !important;
  max-width: min(360px, calc(100vw - 32px));
}

@keyframes neworder-toast-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes neworder-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* --------------------------------------------------------------------------
   Select2 — dark theme overrides (neworder page)
   -------------------------------------------------------------------------- */

.neworder-page .select2-container {
  width: 100% !important;
}

.neworder-page .select2-container--default .select2-selection--single,
.neworder-page .select2-container--default .select2-selection--multiple {
  display: flex;
  align-items: center;
  min-height: 64px;
  height: 64px;
  padding: 0 48px 0 18px;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
  border: none;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  transition:
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.neworder-page
  .select2-container--default
  .select2-selection--single.form-control,
.neworder-page
  .select2-container--default
  .select2-selection--multiple.form-control {
  min-height: 64px;
  height: 64px;
  padding: 0 48px 0 18px !important;
  line-height: 1.3 !important;
  font-size: 16px;
  box-shadow: none;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  display: flex !important;
  align-items: center;
  align-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  color: #ffffff !important;
  overflow: hidden;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  > span,
.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  .neworder-category-text {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  .neworder-service-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  .neworder-service-id {
  margin-top: 0;
  align-self: center;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  .neworder-service-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.neworder-page
  .select2-container--default.select2-container--open
  .select2-selection--single,
.neworder-page
  .select2-container--default.select2-container--open
  .select2-selection--multiple,
.neworder-page
  .select2-container--default.select2-container--focus
  .select2-selection--single,
.neworder-page
  .select2-container--default.select2-container--focus
  .select2-selection--multiple {
  border: 1px solid rgba(192, 129, 230, 0.4);
  background: rgba(121, 121, 121, 0.22);
  box-shadow: none;
}

.neworder-page
  .select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single,
.neworder-page
  .select2-container--default.select2-container--open.select2-container--below
  .select2-selection--multiple {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}

.neworder-page
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single,
.neworder-page
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--multiple {
  border-radius: 0 0 12px 12px;
  border-top-color: transparent;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  img,
.neworder-page .select2-results__option img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 6px;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  width: 36px;
  right: 10px;
  top: 0;
}

.neworder-page
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  position: static !important;
  border: none !important;
  width: 12px !important;
  height: 8px !important;
  margin: 0 !important;
  background: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icontwo.png")
    center / contain no-repeat !important;
}

.neworder-page
  .select2-container--default.select2-container--open
  .select2-selection--single
  .select2-selection__arrow
  b {
  transform: rotate(180deg);
  border: none !important;
  background: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icontwo.png")
    center / contain no-repeat !important;
}

.neworder-page .select2-dropdown {
  background: rgba(14, 7, 30, 0.98);
  border: 1px solid rgba(192, 129, 230, 0.4);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  margin-top: 0;
}

.neworder-page .select2-search--dropdown {
  padding: 10px;
}

.neworder-page .select2-search--dropdown .select2-search__field {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(121, 121, 121, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 14px;
}

.neworder-page .select2-search--dropdown .select2-search__field:focus {
  outline: none;
  border-color: rgba(202, 35, 231, 0.55);
  box-shadow: 0 0 0 2px rgba(202, 35, 231, 0.18);
}

.neworder-page .select2-results__option {
  padding: 6px 14px;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
  transition:
    background-color 0.28s ease,
    color 0.28s ease;
}

.neworder-page .select2-results__option:last-child {
  border-bottom: none;
}

.neworder-page .select2-results__option--highlighted[aria-selected] {
  background-color: rgba(202, 35, 231, 0.55) !important;
  background-image: none !important;
  color: #ffffff !important;
}

.neworder-page .select2-results__option[aria-selected="true"],
.neworder-page .select2-results__option.active {
  background-color: rgba(202, 35, 231, 0.55) !important;
  background-image: none !important;
  color: #ffffff !important;
}

.neworder-page .select2-results__option--disabled {
  opacity: 0.4;
}

.neworder-page
  .select2-container--default
  .select2-results
  > .select2-results__options {
  max-height: 380px;
}

body .select2-results__options::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body .select2-results__options::-webkit-scrollbar-track,
body .select2-results__options::-webkit-scrollbar-thumb,
body .select2-results__options::-webkit-scrollbar-thumb:hover {
  display: none !important;
  background: transparent !important;
}

/*
  Select2 dropdowns are often appended to <body>, so they sit outside .neworder-page.
  Apply the same dark theme to those floating menus.
*/
body .select2-dropdown,
body .select2-dropdown.dropdown-menu,
body .select2-container--open .select2-dropdown {
  background: rgba(14, 7, 30, 0.98) !important;
  background-color: rgba(14, 7, 30, 0.98) !important;
  border: 1px solid rgba(192, 129, 230, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
  color: #ffffff !important;
  z-index: 10050;
  padding: 6px 0 !important;
  margin: 0 !important;
}

body .select2-dropdown.select2-dropdown--below,
body .select2-container--open .select2-dropdown--below {
  margin-top: -1px !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

body .select2-dropdown.select2-dropdown--above,
body .select2-container--open .select2-dropdown--above {
  margin-bottom: -1px !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
}

body .select2-dropdown.dropdown-menu > li > a,
body .select2-dropdown .dropdown-menu > li > a {
  color: rgba(255, 255, 255, 0.82) !important;
  background: transparent !important;
}

body .select2-dropdown .select2-search--dropdown {
  padding: 10px;
  background: transparent;
}

body .select2-dropdown .select2-search--dropdown .select2-search__field {
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  background: rgba(121, 121, 121, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  box-shadow: none !important;
}

body .select2-dropdown .select2-search--dropdown .select2-search__field:focus {
  outline: none !important;
  border-color: rgba(202, 35, 231, 0.55) !important;
  box-shadow: 0 0 0 2px rgba(202, 35, 231, 0.18) !important;
}

body
  .select2-dropdown
  .select2-search--dropdown
  .select2-search__field::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

body .select2-results {
  background: transparent;
  color: #ffffff;
}

body:has(.neworder-page) .select2-results__options {
  max-height: 380px !important;
  height: auto !important;
  padding: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow-y: auto;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

@media (max-width: 767.98px) {
  .neworder-search-shell .select2-results__options,
  .search-dropdown .select2-results__options,
  #select-category-container .select2-results__options,
  .neworder-page
    .select2-container--default
    .select2-results
    > .select2-results__options,
  body:has(.neworder-page) .select2-results__options {
    max-height: min(380px, 62vh) !important;
  }
}

body .select2-results__option .neworder-service-id {
  background-color: #ca23e7 !important;
  color: #ffffff !important;
}

body .select2-results__option .neworder-service-name {
  color: rgba(255, 255, 255, 0.9) !important;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: unset;
  white-space: normal !important;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.35;
}

body .select2-results__option {
  padding: 12px 14px !important;
  font-size: 14px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82) !important;
  background-color: transparent;
  background-image: none;
  border: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.18) !important;
  text-decoration: none;
  transition:
    background-color 0.28s ease,
    color 0.28s ease;
  cursor: pointer;
}

body .select2-results__option:has(> a),
body .select2-results__option:has(> .select2-result-label) {
  padding: 0 !important;
}

body .select2-results__option .select2-result-label,
body .select2-results__option a {
  display: flex !important;
  align-items: flex-start;
  width: 100% !important;
  box-sizing: border-box;
  min-height: 47px;
  padding: 12px 14px !important;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit !important;
  background: transparent !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  text-decoration: none;
  cursor: pointer;
}

body .select2-results__option .neworder-service-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  pointer-events: none;
}

body .select2-results__option .neworder-service-id {
  margin-top: 1px;
}

body .select2-results__option:last-child {
  border-bottom: none !important;
}

body .select2-results__option--highlighted,
body .select2-results__option--highlighted[aria-selected],
body .select2-results__option--highlighted[aria-selected="true"],
body .select2-results__option.active,
body .select2-results__option[aria-selected="true"],
body .select2-results__option:hover {
  background-color: rgba(202, 35, 231, 0.55) !important;
  background-image: none !important;
  color: #ffffff !important;
}

body .select2-results__option--highlighted .neworder-service-id,
body .select2-results__option.active .neworder-service-id,
body .select2-results__option:hover .neworder-service-id,
body .select2-results__option[aria-selected="true"] .neworder-service-id {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #ca23e7 !important;
  box-shadow: none !important;
}

.neworder-page .select2-results__option--highlighted .neworder-service-id,
.neworder-page .select2-results__option.active .neworder-service-id,
.neworder-page .select2-results__option:hover .neworder-service-id,
.neworder-page
  .select2-results__option[aria-selected="true"]
  .neworder-service-id {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #ca23e7 !important;
  box-shadow: none !important;
}

body .select2-results__option[aria-disabled="true"],
body .select2-results__option--disabled {
  opacity: 0.4;
  color: rgba(255, 255, 255, 0.45) !important;
}

body .select2-results__option img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  margin-right: 10px;
  vertical-align: middle;
  border-radius: 6px;
}

body .select2-results__message {
  color: rgba(255, 255, 255, 0.55) !important;
  background: transparent !important;
}

body .select2-container--default .select2-results__option--load-more {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* --------------------------------------------------------------------------
   Dripfeed & dynamic fields
   -------------------------------------------------------------------------- */

.neworder-page #fields .form-group {
  margin-bottom: 0;
}

.neworder-page #fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.neworder-page #fields .help-block,
.neworder-page #fields .help-block.min-max,
.neworder-page .help-block.min-max {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: #ffffff;
}

.neworder-page #dripfeed-options {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.neworder-page #dripfeed-options.hidden {
  display: none;
}

.neworder-page #dripfeed-options .form-group {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Flat panel markup (label/input siblings, no form-group) */
.neworder-page #dripfeed-options:not(:has(.form-group)) {
  gap: 12px;
}

.neworder-page #dripfeed-options:not(:has(.form-group)) > .form-control,
.neworder-page #dripfeed-options:not(:has(.form-group)) > input {
  margin-bottom: 12px;
}

.neworder-page #dripfeed-options:not(:has(.form-group)) > *:last-child {
  margin-bottom: 0;
}

.neworder-page #dripfeed-options .control-label,
.neworder-page #dripfeed-options > label {
  display: block;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff;
}

.neworder-page #order_check {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.neworder-page #order_check > label,
.neworder-page #order_check > .checkbox,
.neworder-page #order_check > .checkbox label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
}

.neworder-page #order_check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--color-purple);
}

.neworder-page #order_check .form-group__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.neworder-page #order_check .form-group__checkbox-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
  cursor: pointer;
}

.neworder-page #order_check .form-group__checkbox-label input[type="checkbox"] {
  display: block;
  margin: 0;
}

.neworder-page #order_check .form-group__label-title {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Mid desktop — scale down (keep two-column until 991px)
   -------------------------------------------------------------------------- */

@media (min-width: 769px) and (max-width: 1399.98px) {
  :root {
    --ui-scale: clamp(0.82, 0.72 + (100vw - 769px) / 1260, 1);
  }

  html:not(:has(.neworder-page)) {
    zoom: var(--ui-scale);
  }

  .container-scroller {
    font-size: calc(15px * var(--ui-scale));
  }
}

/* New order: shrink everything under 1400px so 2-col still fits */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .neworder-page {
    --neworder-scale: clamp(0.88, 0.8 + (100vw - 992px) / 1600, 1);
    --no-fs-title: clamp(16px, 1rem + 0.28vw, 20px);
    --no-fs-tab: clamp(13px, 0.78rem + 0.22vw, 16px);
    --no-fs-label: clamp(14px, 0.82rem + 0.18vw, 18px);
    --no-fs-body: clamp(13px, 0.78rem + 0.14vw, 16px);
    --no-fs-input: clamp(14px, 0.8rem + 0.16vw, 16px);
    --no-control-h: clamp(50px, 2.9rem + 0.45vw, 56px);
    --no-panel-pad-y: clamp(20px, 1.15rem + 0.55vw, 28px);
    --no-panel-pad-x: clamp(14px, 0.85rem + 0.35vw, 20px);
    --no-panel-gap: clamp(18px, 1rem + 0.5vw, 28px);
    --no-panel-radius: clamp(20px, 1.1rem + 0.55vw, 28px);
    zoom: var(--neworder-scale);
  }

  .neworder-grid {
    gap: clamp(12px, 0.65rem + 0.55vw, 20px);
  }

  .neworder-panel,
  .neworder-details {
    min-width: 0;
    gap: var(--no-panel-gap);
    padding: var(--no-panel-pad-y) var(--no-panel-pad-x)
      calc(var(--no-panel-pad-y) + 6px);
    border-radius: var(--no-panel-radius);
  }

  .neworder-panel-head {
    gap: clamp(10px, 0.5rem + 0.35vw, 16px);
    padding: clamp(6px, 0.35rem + 0.25vw, 8px) clamp(8px, 0.45rem + 0.3vw, 8px)
      clamp(6px, 0.35rem + 0.25vw, 8px) clamp(12px, 0.65rem + 0.35vw, 16px);
  }

  .neworder-details-head {
    min-height: clamp(64px, 3.75rem + 0.5vw, 80px);
    padding: clamp(8px, 0.45rem + 0.3vw, 12px);
  }

  .neworder-panel-title {
    font-size: var(--no-fs-title);
  }

  .neworder-panel-head .neworder-tab,
  .neworder-details-head .neworder-tab,
  .neworder-tab {
    font-size: var(--no-fs-tab);
    padding: clamp(6px, 0.35rem + 0.2vw, 8px)
      clamp(10px, 0.55rem + 0.35vw, 16px);
  }

  .neworder-panel-head .neworder-tabs,
  .neworder-details-head .neworder-tabs {
    gap: clamp(6px, 0.35rem + 0.2vw, 8px);
    padding: clamp(6px, 0.35rem + 0.2vw, 8px);
  }

  .neworder-form,
  .neworder-details-body {
    gap: clamp(16px, 0.9rem + 0.4vw, 24px);
  }

  .neworder-form .control-label,
  .neworder-field-label,
  .neworder-metric-label {
    font-size: var(--no-fs-label);
    margin-bottom: clamp(8px, 0.45rem + 0.2vw, 12px);
  }

  .neworder-page .form-control,
  .neworder-page #fields .form-control,
  .neworder-search-shell .form-control,
  .neworder-search-shell input[type="text"] {
    min-height: var(--no-control-h);
    height: var(--no-control-h);
    padding: clamp(12px, 0.65rem + 0.35vw, 16px)
      clamp(14px, 0.75rem + 0.35vw, 18px);
    font-size: var(--no-fs-input);
  }

  .neworder-search-shell .form-control,
  .neworder-search-shell input[type="text"],
  .neworder-search-shell input.select2-selection,
  .neworder-page
    .neworder-search-shell
    .search-dropdown.select2-container
    input.select2-selection {
    padding-left: 48px !important;
  }

  .neworder-page
    .neworder-search-shell
    .search-dropdown.select2-container
    input.select2-selection {
    padding: 0 clamp(14px, 0.75rem + 0.35vw, 18px) 0 48px !important;
  }

  .neworder-page .select2-container--default .select2-selection--single,
  .neworder-page .select2-container--default .select2-selection--multiple {
    min-height: var(--no-control-h);
    height: var(--no-control-h);
    padding: 0 clamp(40px, 2.2rem + 0.5vw, 48px) 0
      clamp(14px, 0.75rem + 0.35vw, 18px);
  }

  .neworder-page
    .select2-container--default
    .select2-selection--single
    .select2-selection__rendered {
    font-size: var(--no-fs-input);
    line-height: 1.35 !important;
  }

  .neworder-page
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: var(--no-control-h);
  }

  .neworder-field-value,
  .neworder-metric-box {
    min-height: var(--no-control-h);
    padding: clamp(12px, 0.65rem + 0.35vw, 16px)
      clamp(14px, 0.75rem + 0.35vw, 18px);
  }

  .neworder-field-value p,
  .neworder-example-row p,
  .neworder-metric-value {
    font-size: var(--no-fs-body);
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .neworder-metrics {
    gap: clamp(10px, 0.55rem + 0.35vw, 16px);
  }

  .neworder-metric {
    gap: clamp(8px, 0.45rem + 0.2vw, 12px);
  }

  .neworder-desc-box {
    font-size: clamp(12px, 0.72rem + 0.12vw, 14px);
    min-height: clamp(140px, 8rem + 2vw, 201px);
    padding: clamp(12px, 0.65rem + 0.35vw, 14px)
      clamp(14px, 0.75rem + 0.35vw, 18px);
  }

  .neworder-charge-label {
    font-size: var(--no-fs-label);
  }

  .neworder-page .neworder-charge-bar .form-control,
  .neworder-page .neworder-charge-bar #charge {
    min-height: var(--no-control-h);
    height: var(--no-control-h);
    font-size: var(--no-fs-input);
  }

  .neworder-submit {
    min-height: clamp(50px, 2.9rem + 0.45vw, 56px);
    font-size: clamp(15px, 0.88rem + 0.2vw, 18px);
    padding: clamp(12px, 0.65rem + 0.35vw, 16px) clamp(18px, 1rem + 0.4vw, 24px);
  }

  .neworder-paste-btn {
    min-width: clamp(84px, 4.5rem + 1vw, 100px);
    height: clamp(36px, 2.1rem + 0.35vw, 40px);
    font-size: clamp(14px, 0.82rem + 0.18vw, 18px);
  }

  .neworder-service-id {
    font-size: clamp(9px, 0.55rem + 0.08vw, 11px);
    min-width: 24px;
    max-width: 56px;
    height: 20px;
    padding: 0 6px;
  }

  .neworder-service-name {
    font-size: var(--no-fs-body);
  }

  .neworder-platforms {
    gap: 10px;
    padding: 12px 14px;
  }

  .neworder-platform {
    min-width: 64px;
    padding: 8px 10px;
  }

  .neworder-platform-icon,
  .neworder-platform-poly {
    width: 48px;
    height: 48px;
  }

  .neworder-platform-logo {
    width: 30px;
    height: 30px;
  }

  .neworder-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .neworder-stat-card,
  .neworder-stat-card-body {
    min-height: 140px;
  }

  .neworder-stat-card-body {
    padding: 20px 22px;
  }

  .neworder-stat-card-body--metric {
    padding: 24px 22px;
  }

  /* Keep 8-col nav; shrink items so they fit under 1400 */
  .bfnav-menu {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
  }

  .bfnav-menu-link {
    height: 52px;
    padding: 8px 8px 8px 8px;
    gap: 6px;
    font-size: 14px;
  }

  .bfnav-nav-icon,
  .bfnav-nav-poly {
    width: 28px;
    height: 28px;
  }

  .bfnav-nav-glyph,
  .bfnav-nav-glyph img {
    width: 15px;
    height: 15px;
  }

  .bfnav-menu-label {
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   Narrow desktop — 1200px (hero only; nav/stats stay desktop)
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  :root {
    --page-gutter: 20px;
  }

  .page-hero {
    height: auto;
    min-height: var(--page-hero-height);
    max-height: none;
  }

  .page-hero-content {
    height: auto;
    min-height: var(--page-hero-height);
    max-height: none;
  }

  .page-hero-text {
    white-space: normal;
    overflow: hidden;
    max-height: calc(1.55em * 2);
    text-overflow: clip;
  }

  .page-hero-figure {
    height: var(--page-hero-height);
    bottom: auto;
  }
}

/* --------------------------------------------------------------------------
   Break layouts — 991px
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {
  :root {
    --neworder-panel-left: 1fr;
  }

  .neworder-page {
    zoom: 1;
  }

  .neworder-grid {
    grid-template-columns: 1fr;
  }

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

  .bfnav-menu {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bfnav-menu-link {
    height: 58px;
    padding: 12px 12px 12px 10px;
    gap: 8px;
    font-size: 16px;
  }

  .bfnav-nav-icon,
  .bfnav-nav-poly {
    width: 34px;
    height: 34px;
  }

  .bfnav-nav-glyph,
  .bfnav-nav-glyph img {
    width: 18px;
    height: 18px;
  }

  .bfnav-menu-label {
    font-size: 15px;
  }

  .neworder-panel-head {
    flex-wrap: wrap;
  }

  .neworder-panel-head .neworder-tabs,
  .neworder-details-head .neworder-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .neworder-panel,
  .neworder-details {
    padding: 22px 16px 28px;
    gap: 22px;
    border-radius: 22px;
  }

  .neworder-platforms {
    gap: 10px;
  }

  .page-hero-content {
    max-width: calc(100% - 160px);
  }
}

/* --------------------------------------------------------------------------
   Mobile — 768px
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --page-gutter: 16px;
  }

  .bfnav-shell {
    padding-top: 12px;
  }

  .bfnav-masthead {
    height: 72px;
    max-height: 72px;
  }

  .bfnav-top {
    height: 72px;
    max-height: 72px;
    padding: 14px 16px 14px 20px;
  }

  .bfnav-logo-text {
    font-size: 18px;
  }

  .bfnav-actions {
    gap: 8px;
  }

  .bfnav-balance-amount {
    display: none;
  }

  .bfnav-balance {
    height: 40px;
    padding: 4px 10px 4px 4px;
    gap: 6px;
  }

  .bfnav-balance-content {
    gap: 0;
  }

  .bfnav-balance-icon {
    width: 30px;
    height: 30px;
  }

  .bfnav-balance-icon img {
    width: 22px;
    height: 22px;
  }

  .bfnav-avatar-btn {
    height: 40px;
    min-width: 40px;
    padding: 4px 10px 4px 4px;
  }

  .bfnav-avatar-btn .bfnav-avatar-img {
    width: 28px !important;
    height: 28px !important;
  }

  .bfnav-icon-btn:not(.bfnav-avatar-btn) {
    width: 40px;
    height: 40px;
  }

  /* Hide desktop nav menu */
  .bfnav-menu {
    display: none;
  }

  /* Show mobile tabbar */
  .bfnav-tabbar {
    display: grid;
  }

  .container-scroller {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  .page-content {
    padding-bottom: 8px;
  }

  .neworder-page {
    padding-bottom: 4px;
  }

  /* Hero — text stays left of tiger (no overlap) */
  .page-hero {
    min-height: var(--page-hero-height);
    height: auto;
    max-height: none;
    border-radius: 20px;
    margin: 16px 0 20px;
  }

  .page-hero-content {
    max-width: calc(100% - 150px);
    min-height: var(--page-hero-height);
    max-height: none;
    height: auto;
    padding: 16px 12px 16px 18px;
    gap: 6px;
  }

  .page-hero-title {
    font-size: 22px;
  }

  .page-hero-text {
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    max-height: calc(1.45em * 3);
    overflow: hidden;
    text-overflow: clip;
  }

  .page-hero-figure {
    width: min(160px, 46%);
    height: var(--page-hero-height);
    bottom: auto;
    overflow: visible;
    align-items: flex-end;
    justify-content: flex-end;
  }

  .page-hero-tiger {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    opacity: 1;
  }

  /* Stats — 2 per row on big mobile */
  .neworder-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .neworder-stat-card {
    min-height: auto;
  }

  .neworder-stat-card-body,
  .neworder-stat-card-body--metric {
    min-height: 0;
    padding: 20px 18px;
  }

  .neworder-stat-value {
    font-size: 22px;
  }

  /* Panels */
  .neworder-page {
    gap: 16px;
  }

  .neworder-grid {
    gap: 16px;
  }

  .neworder-panel,
  .neworder-details {
    border-radius: 20px;
    padding: 20px 14px 24px;
    gap: 16px;
  }

  .neworder-panel-head,
  .neworder-details-head {
    padding-left: 12px;
    padding-right: 12px;
  }

  .neworder-panel-head .neworder-tabs,
  .neworder-details-head .neworder-tabs {
    overflow-x: auto;
  }

  .neworder-form,
  .neworder-details-body {
    padding: 0;
    gap: 18px;
  }

  .neworder-page #fields,
  .neworder-page #dripfeed-options {
    gap: 18px;
  }

  .neworder-form .control-label {
    margin-bottom: 10px;
  }

  .neworder-details .neworder-field-label {
    margin-bottom: 0;
  }

  .neworder-form .control-label,
  .neworder-charge-label,
  .neworder-details .neworder-field-label,
  .neworder-metric-label {
    font-size: 16px;
  }

  .neworder-metrics {
    grid-template-columns: 1fr;
  }

  .neworder-paste-btn {
    min-width: 84px;
    font-size: 15px;
  }

  /* Form fields / selects / metrics — max 48px on mobile */
  .neworder-page .form-control,
  .neworder-page #fields .form-control,
  .neworder-page #dripfeed-options .form-control,
  .neworder-page #dripfeed-options input[type="text"],
  .neworder-page #dripfeed-options input[type="number"],
  .neworder-link-shell .form-control,
  .neworder-search-shell .form-control,
  .neworder-search-shell input[type="text"],
  .neworder-search-shell
    .select2-selection.select2-selection--single.form-control,
  .search-dropdown .select2-selection.select2-selection--single.form-control {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px;
  }

  .neworder-search-shell .form-control,
  .neworder-search-shell input[type="text"],
  .neworder-search-shell
    .select2-selection.select2-selection--single.form-control,
  .neworder-search-shell input.select2-selection,
  .neworder-page
    .neworder-search-shell
    .search-dropdown.select2-container
    input.select2-selection {
    padding-left: 44px !important;
    padding-right: 14px !important;
  }

  .neworder-page
    .neworder-search-shell
    .search-dropdown.select2-container
    input.select2-selection {
    padding: 0 14px 0 44px !important;
  }

  .neworder-search-icon {
    left: 14px;
  }

  .neworder-search-icon img {
    width: 20px;
    height: 20px;
  }

  .neworder-page .select2-container--default .select2-selection--single,
  .neworder-page .select2-container--default .select2-selection--multiple {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 40px 0 14px;
  }

  .neworder-page
    .select2-container--default
    .select2-selection--single.form-control,
  .neworder-page
    .select2-container--default
    .select2-selection--multiple.form-control {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 0 40px 0 14px !important;
    line-height: 1.3 !important;
  }

  .neworder-page
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 48px;
    width: 32px;
    right: 8px;
  }

  .neworder-field-value,
  .neworder-metric-box {
    min-height: 48px !important;
    height: 48px;
    max-height: 48px;
    padding: 10px 14px;
  }

  .neworder-page textarea.form-control {
    min-height: 88px !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Tickets form — match new order mobile field height (48px) */
  .tickets-input,
  .tickets-page .tickets-input.form-control,
  .tickets-page #ticket-fields .form-control,
  .tickets-page #ticket-fields select,
  .tickets-page #ticket-fields input:not([type="hidden"]):not([type="file"]) {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 15px;
    border-radius: 12px;
  }

  .tickets-page #ticket-fields select,
  .tickets-page .tickets-select.form-control,
  .tickets-select {
    padding-right: 40px !important;
  }

  .tickets-select-caret {
    right: 14px;
  }

  .tickets-textarea,
  .tickets-page .tickets-textarea.form-control,
  .tickets-page #ticket-fields textarea {
    min-height: 88px !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Platform bar — 6 per row, no horizontal scroll */
  .neworder-platforms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
    overflow: visible;
    overflow-x: visible;
  }

  .neworder-platform {
    flex: none;
    min-width: 0;
    width: 100%;
    padding: 8px 4px;
  }

  .neworder-platform-icon,
  .neworder-platform-poly {
    width: 40px;
    height: 40px;
  }

  .neworder-platform-logo {
    width: 26px;
    height: 26px;
  }

  /* Dropdown — keep inside viewport (avoid right: -8px clip on small screens) */
  .bfnav-dropdown-panel {
    right: 0;
    left: auto;
    min-width: 200px;
    max-width: calc(100vw - var(--page-gutter) * 2);
  }

  .bfnav-actions .bfnav-account-dropdown .bfnav-dropdown-panel {
    width: min(240px, calc(100vw - var(--page-gutter) * 2));
  }

  .bfnav-balance-dropdown > #currencies-list.bfnav-balance-panel {
    width: min(220px, calc(100vw - var(--page-gutter) * 2));
  }

  .bfnav-top:has(.bfnav-dropdown-panel.is-open),
  .bfnav-masthead-inner:has(.bfnav-dropdown-panel.is-open),
  .bfnav-masthead:has(.bfnav-dropdown-panel.is-open) {
    overflow: visible;
  }

  .neworder-toast-stack {
    left: 16px;
    right: 16px;
    bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* --------------------------------------------------------------------------
   Small mobile — 480px
   -------------------------------------------------------------------------- */

@media (max-width: 450.98px) {
  .neworder-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    scrollbar-width: none;
  }

  .neworder-stats::-webkit-scrollbar {
    display: none;
  }

  .neworder-stat-card {
    flex: 0 0 calc((100% - 10px) / 1.1);
    width: calc((100% - 10px) / 1.1);
    max-width: calc((100% - 10px) / 1.1);
    scroll-snap-align: start;
    min-height: 148px;
  }

  .neworder-stat-card-body,
  .neworder-stat-card-body--metric {
    min-height: 148px;
  }
}

@media (max-width: 480px) {
  .bfnav-balance {
    height: 38px;
    padding: 3px 9px 3px 3px;
  }

  .bfnav-balance-icon {
    width: 28px;
    height: 28px;
  }

  .bfnav-balance-icon img {
    width: 20px;
    height: 20px;
  }

  .bfnav-avatar-btn {
    height: 38px;
    min-width: 38px;
    padding: 3px 9px 3px 3px;
  }

  .bfnav-avatar-btn .bfnav-avatar-img {
    width: 26px !important;
    height: 26px !important;
  }

  .bfnav-icon-btn:not(.bfnav-avatar-btn) {
    width: 38px;
    height: 38px;
  }

  .page-hero-content {
    max-width: calc(100% - 136px);
    padding: 18px 10px 18px 16px;
  }

  .page-hero-figure {
    width: min(140px, 48%);
    overflow: visible;
  }

  .page-hero-tiger {
    width: auto;
    max-width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
  }

  .neworder-panel-title {
    font-size: 17px;
  }

  .neworder-charge-bar {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .neworder-submit {
    min-height: 48px;
    height: 48px;
    font-size: 15px;
  }

  .neworder-page #fields .form-group {
    padding-bottom: 0;
    border-bottom: none;
  }

  .neworder-page #fields .help-block,
  .neworder-page #fields .help-block.min-max,
  .neworder-page .help-block.min-max {
    margin-top: 4px;
  }

  .neworder-platforms {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    padding: 10px;
  }

  .neworder-platform {
    padding: 6px 2px;
  }

  .neworder-platform-icon,
  .neworder-platform-poly {
    width: 36px;
    height: 36px;
  }

  .neworder-platform-logo {
    width: 22px;
    height: 22px;
  }
}

/* --------------------------------------------------------------------------
   RTL support
   -------------------------------------------------------------------------- */

[dir="rtl"] .page-hero-figure {
  right: auto;
  left: 0;
  justify-content: flex-start;
}

[dir="rtl"] .page-hero-tiger {
  object-position: left bottom;
}

[dir="rtl"] .page-hero-content {
  text-align: right;
}

[dir="rtl"] .bfnav-dropdown-panel {
  right: auto;
  left: 0;
}

@media (max-width: 768px) {
  [dir="rtl"] .bfnav-dropdown-panel {
    left: 0;
    right: auto;
    max-width: calc(100vw - var(--page-gutter) * 2);
  }

  [dir="rtl"] .bfnav-actions .bfnav-account-dropdown .bfnav-dropdown-panel {
    left: 0;
    right: auto;
  }
}

[dir="rtl"] .bfnav-drawer {
  right: auto;
  left: 0;
  transform: translateX(-100%);
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

[dir="rtl"] body.bfnav-drawer-open .bfnav-drawer {
  transform: translateX(0);
}

[dir="rtl"] .neworder-search-icon {
  left: auto;
  right: 18px;
}

[dir="rtl"] .neworder-search-shell .form-control,
[dir="rtl"] .neworder-search-shell input[type="text"],
[dir="rtl"] .neworder-search-shell input.select2-selection,
[dir="rtl"]
  .neworder-page
  .neworder-search-shell
  .search-dropdown.select2-container
  input.select2-selection {
  padding-left: 18px !important;
  padding-right: 52px !important;
}

[dir="rtl"] .neworder-link-shell .form-control {
  padding-right: 18px !important;
  padding-left: 116px !important;
}

[dir="rtl"] .neworder-paste-btn {
  right: auto;
  left: 8px;
}

[dir="rtl"] .neworder-charge-bar #charge {
  text-align: left;
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .bfnav-shell,
  .bfnav-tabbar,
  .bfnav-drawer,
  .bfnav-drawer-backdrop,
  .bfnav-sheet,
  .neworder-toast-stack {
    display: none !important;
  }

  body {
    background: #ffffff;
    color: #000000;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   Focus — no outline rings (click / keyboard)
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: none;
}

.bfnav-menu-link:focus-visible,
.bfnav-tabbar-item:focus-visible,
.bfnav-sheet-grid a:focus-visible,
.bfnav-sheet-close:focus-visible,
.neworder-platform:focus-visible,
.neworder-tab:focus-visible,
.neworder-submit:focus-visible {
  outline: none;
}

/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */

::selection {
  background: rgba(202, 35, 231, 0.35);
  color: #ffffff;
}

/* ==========================================================================
   Add Funds / Deposits (Figma 1286:59513)
   ========================================================================== */

.addfunds-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.addfunds-methods {
  display: flex;
  flex-direction: column;
  gap: 22px;
  width: 100%;
  padding: 22px;
  border-radius: 28px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.addfunds-methods-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.addfunds-methods-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.addfunds-methods-row::-webkit-scrollbar {
  display: none;
}

.addfunds-method-chip {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 168px;
  max-width: 220px;
  height: 122px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(67, 67, 67, 0.3);
  border: 1px solid #4c5aa761;
  color: #fff;
  cursor: pointer;
  scroll-snap-align: start;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.addfunds-method-chip:hover {
  background: rgba(67, 67, 67, 0.42);
  border-color: #4c5aa7a0;
}

.addfunds-method-chip.is-active {
  color: #fff;
  border: none;
  box-shadow: 0 4px 18px rgba(202, 35, 231, 0.28);
  background: linear-gradient(
    100deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.addfunds-method-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 58px;
}

.addfunds-method-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  background-image: var(--img-addfund-poly);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.addfunds-method-chip.is-active .addfunds-method-icon {
  background-image: var(--img-addfund-poly-active);
}

.addfunds-method-icon--text {
  border-radius: 12px;
  background-color: transparent;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.addfunds-method-poly {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.addfunds-method-poly--inactive {
  display: block;
}

.addfunds-method-poly--active {
  display: none;
}

.addfunds-method-chip.is-active .addfunds-method-poly--inactive {
  display: none;
}

.addfunds-method-chip.is-active .addfunds-method-poly--active {
  display: block;
}

.addfunds-method-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  object-position: center;
}

.addfunds-method-chip.is-active .addfunds-method-logo[src*="cryptomus"] {
  filter: brightness(0);
}

.addfunds-method-label {
  display: block;
  max-width: 100%;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  word-break: break-word;
}

.addfunds-grid {
  display: grid;
  grid-template-columns: minmax(0, 997fr) minmax(280px, 566fr);
  align-items: start;
  gap: 20px;
  width: 100%;
}

.addfunds-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.addfunds-panel,
.addfunds-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px 34px;
  border-radius: 28px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  box-sizing: border-box;
}

.addfunds-panel-head,
.addfunds-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  margin: 0;
  border-radius: 14px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.addfunds-info-head {
  justify-content: flex-start;
  padding: 16px;
  min-height: 68px;
}

.addfunds-panel-title,
.addfunds-info-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #fff;
}

.addfunds-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    128deg,
    rgba(202, 35, 231, 0.2) 0%,
    rgba(152, 167, 255, 0.15) 100%
  );
  overflow-x: auto;
  scrollbar-width: none;
}

.addfunds-tabs::-webkit-scrollbar {
  display: none;
}

.addfunds-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.addfunds-tab:hover {
  color: #fff;
  background: rgba(202, 35, 231, 0.12);
}

.addfunds-tab.is-active {
  color: #fff;
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  box-shadow: none;
}

.addfunds-panel-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0;
}

.addfunds-panel-body[hidden] {
  display: none;
}

.addfunds-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.addfunds-form .form-group {
  margin-bottom: 0;
}

.addfunds-field .control-label,
.addfunds-page .addfunds-form .form-group > .control-label,
.addfunds-page .addfunds-form #amount-fields .control-label,
.addfunds-fx-field .control-label,
.addfunds-total-field .control-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.addfunds-method-field > .select2 {
  width: 100% !important;
}

.addfunds-page .addfunds-form #method + .select2 .select2-selection--single,
.addfunds-input,
.addfunds-page .addfunds-form #amount-fields .form-control,
.addfunds-page .addfunds-form input.form-control,
.addfunds-page .addfunds-form #method.form-control {
  width: 100%;
  min-height: 56px;
  height: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
  box-sizing: border-box;
}

.addfunds-page .addfunds-form #method + .select2 .select2-selection--single {
  display: flex;
  align-items: center;
  padding: 0 16px;
  min-height: 64px;
}

.addfunds-page .addfunds-form #method + .select2 .select2-selection__rendered,
.addfunds-page .addfunds-form #method + .select2 #select2-method-container {
  color: #fff !important;
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 28px 0 0;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 500;
}

.addfunds-page
  .addfunds-form
  #method
  + .select2
  .select2-selection__rendered
  img,
.addfunds-page .addfunds-form #method + .select2 #select2-method-container img,
body
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option
  img,
#select2-method-results .select2-results__option img,
body
  .select2-dropdown:has(#select2-method-results)
  .addfunds-method-select-logo,
#select2-method-results .addfunds-method-select-logo {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain;
  margin-right: 10px;
  vertical-align: middle;
  flex-shrink: 0;
}

body .select2-dropdown:has(#select2-method-results) .select2-results__option a,
#select2-method-results .select2-results__option a {
  display: flex !important;
  align-items: center;
  gap: 4px;
}

.addfunds-method-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
}

.addfunds-method-option-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.addfunds-method-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dynamic Perfect Panel fields inside #amount-fields keep addfunds styling */
.addfunds-page #amount-fields .form-group {
  margin-bottom: 0;
}

.addfunds-page #amount-fields .form-control {
  width: 100%;
  min-height: 56px;
  height: auto;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none;
  box-sizing: border-box;
}

.addfunds-page .addfunds-form #method + .select2 .select2-selection__arrow {
  height: 100%;
  top: 0;
  right: 12px;
  display: flex;
  align-items: center;
}

.addfunds-page .addfunds-form #method + .select2 .select2-selection__arrow b {
  border-color: #fff transparent transparent transparent;
}

.addfunds-page .addfunds-form #method.select2-hidden-accessible {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.addfunds-page .addfunds-form .addfunds-input::placeholder,
.addfunds-page .addfunds-form #amount-fields .form-control::placeholder,
.addfunds-page .addfunds-form input.form-control::placeholder {
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

.addfunds-page .addfunds-form .addfunds-input:focus,
.addfunds-page .addfunds-form .addfunds-input:focus-visible,
.addfunds-page .addfunds-form #amount-fields .form-control:focus,
.addfunds-page .addfunds-form #amount-fields .form-control:focus-visible,
.addfunds-page .addfunds-form input.form-control:focus,
.addfunds-page .addfunds-form input.form-control:focus-visible,
.addfunds-page .addfunds-form #method.form-control:focus,
.addfunds-page .addfunds-form #method.form-control:focus-visible,
.addfunds-page
  .addfunds-form
  #method
  + .select2.select2-container--focus
  .select2-selection--single,
.addfunds-page
  .addfunds-form
  #method
  + .select2.select2-container--open
  .select2-selection--single {
  outline: none;
  border: 1px solid rgba(192, 129, 230, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
}

.addfunds-page
  .addfunds-form
  #method
  + .select2.select2-container--open.select2-container--below
  .select2-selection--single {
  border-radius: 12px 12px 0 0;
  border-bottom-color: transparent;
}

.addfunds-page
  .addfunds-form
  #method
  + .select2.select2-container--open.select2-container--above
  .select2-selection--single {
  border-radius: 0 0 12px 12px;
  border-top-color: transparent;
}

/* Keep method dropdown visually attached to the field (same as neworder) */
body .select2-dropdown:has(#select2-method-results).select2-dropdown--below,
body
  .select2-container--open
  .select2-dropdown:has(#select2-method-results).select2-dropdown--below {
  margin-top: -1px !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  border-color: rgba(192, 129, 230, 0.4) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

body .select2-dropdown:has(#select2-method-results).select2-dropdown--above,
body
  .select2-container--open
  .select2-dropdown:has(#select2-method-results).select2-dropdown--above {
  margin-bottom: -1px !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  border-color: rgba(192, 129, 230, 0.4) !important;
}

/* Add funds payment method Select2 — override Bootstrap .dropdown-menu white panel */
.select2-dropdown.addfunds-method-dropdown,
.select2-dropdown.addfunds-method-dropdown.dropdown-menu,
body:has(.addfunds-page) .select2-dropdown.addfunds-method-dropdown,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown.dropdown-menu,
body:has(.addfunds-page) .select2-dropdown:has(#select2-method-results),
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results).dropdown-menu {
  background: rgba(14, 7, 30, 0.98) !important;
  background-color: rgba(14, 7, 30, 0.98) !important;
  border: 1px solid rgba(192, 129, 230, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55) !important;
  padding: 6px 0 !important;
}

.select2-dropdown.addfunds-method-dropdown .select2-results,
.select2-dropdown.addfunds-method-dropdown .select2-results__options,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__options,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__options,
body:has(.addfunds-page) #select2-method-results {
  background: transparent !important;
  background-color: transparent !important;
  color: #fff !important;
}

.select2-dropdown.addfunds-method-dropdown .select2-results__option,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option,
body:has(.addfunds-page) #select2-method-results .select2-results__option {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.14) !important;
}

.select2-dropdown.addfunds-method-dropdown
  .select2-results__option--highlighted,
.select2-dropdown.addfunds-method-dropdown
  .select2-results__option--highlighted[aria-selected],
.select2-dropdown.addfunds-method-dropdown
  .select2-results__option[aria-selected="true"],
.select2-dropdown.addfunds-method-dropdown .select2-results__option:hover,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option--highlighted,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option--highlighted[aria-selected],
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option[aria-selected="true"],
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option:hover,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option--highlighted,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option--highlighted[aria-selected],
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option[aria-selected="true"],
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option:hover,
body:has(.addfunds-page)
  #select2-method-results
  .select2-results__option--highlighted,
body:has(.addfunds-page)
  #select2-method-results
  .select2-results__option:hover {
  background-color: rgba(202, 35, 231, 0.45) !important;
  background-image: none !important;
  color: #fff !important;
}

.select2-dropdown.addfunds-method-dropdown .select2-results__option a,
.select2-dropdown.addfunds-method-dropdown .addfunds-method-option-label,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .select2-results__option
  a,
body:has(.addfunds-page)
  .select2-dropdown.addfunds-method-dropdown
  .addfunds-method-option-label,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .select2-results__option
  a,
body:has(.addfunds-page)
  .select2-dropdown:has(#select2-method-results)
  .addfunds-method-option-label,
body:has(.addfunds-page) #select2-method-results .addfunds-method-option-label {
  color: inherit !important;
  background: transparent !important;
}

.addfunds-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.addfunds-quick-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 61px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.addfunds-quick-bonus {
  margin-left: 4px;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.addfunds-quick-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(202, 35, 231, 0.45);
}

.addfunds-quick-chip.is-active {
  border: none;
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  box-shadow: 0 4px 16px rgba(202, 35, 231, 0.28);
}

.addfunds-quick-chip.is-active .addfunds-quick-bonus {
  color: #fff;
}

.addfunds-fx-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  align-items: end;
  gap: 16px;
  width: 100%;
}

.addfunds-fx-swap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 56px;
  margin-bottom: 0;
  opacity: 0.9;
}

.addfunds-fx-swap img {
  width: 24px;
  height: 24px;
  display: block;
}

.addfunds-total-box {
  position: relative;
}

.addfunds-total-box .addfunds-input {
  padding-right: 148px;
}

.addfunds-total-note {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
  pointer-events: none;
  white-space: nowrap;
}

.addfunds-submit {
  width: 100%;
  min-height: 56px;
  padding: 16px 32px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(
    104deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.addfunds-submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.addfunds-page .alert {
  margin-bottom: 0;
  border-radius: 12px;
}

.addfunds-page .alert.alert-danger {
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.12);
  color: #fff;
}

.addfunds-page .alert.alert-success {
  border: 1px solid rgba(72, 199, 116, 0.35);
  background: rgba(72, 199, 116, 0.12);
  color: #fff;
}

/* Perfect Panel payment modals (Bootstrap 3 uses .in; theme bootstrap.css targets .show) */
body.modal-open .modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show,
.modal-backdrop.fade.in,
.modal-backdrop.fade.show {
  display: block !important;
  opacity: 0.65 !important;
  background-color: rgba(0, 0, 0, 0.65) !important;
  z-index: 10110 !important;
}

body.modal-open .modal.in,
body.modal-open .modal.show,
.modal.in,
.modal.show {
  z-index: 10120 !important;
}

body:has(.addfunds-page) .modal-content {
  background: rgba(14, 7, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

body:has(.addfunds-page) .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

body:has(.addfunds-page) .modal-title,
body:has(.addfunds-page) .modal-body {
  color: #fff;
}

body:has(.addfunds-page) .modal-header .close {
  color: #fff;
  opacity: 0.85;
}

.addfunds-page .alert .close {
  color: #fff;
  opacity: 0.8;
}

.addfunds-info-body {
  padding: 0;
}

.addfunds-info-card {
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
  line-height: 1.55;
}

.addfunds-info-card p:last-child {
  margin-bottom: 0;
}

.addfunds-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.addfunds-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.addfunds-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}

.addfunds-step-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}

.addfunds-step-accent {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 600;
}

.addfunds-table-card {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

.addfunds-table {
  margin: 0;
  width: 100%;
  color: #fff;
}

.addfunds-page .addfunds-table-card .addfunds-table.table > thead > tr > th,
.addfunds-page .addfunds-table-card .addfunds-table.table > tbody > tr > td {
  border-color: rgba(255, 255, 255, 0.1);
  vertical-align: middle;
}

.addfunds-table > thead > tr > th {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  border-bottom-width: 1px;
  background: rgba(255, 255, 255, 0.04);
}

.addfunds-table > tbody > tr > td {
  padding: 14px 16px;
  font-size: 14px;
  color: #fff;
}

.addfunds-table > tbody > tr:hover > td {
  background: rgba(202, 35, 231, 0.08);
}

.addfunds-table-empty-row > td {
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(202, 35, 231, 0.08);
}

.addfunds-table > tbody > tr.addfunds-table-empty-row:hover > td {
  background: rgba(202, 35, 231, 0.08);
}

.addfunds-invoice-link {
  color: var(--color-purple-light);
  font-weight: 500;
  text-decoration: none;
}

.addfunds-invoice-link:hover {
  color: #fff;
  text-decoration: underline;
}

.addfunds-pagination {
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.addfunds-page .addfunds-form .form-group.instruction,
.addfunds-page .addfunds-form #instruction_instruction {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.addfunds-page .addfunds-form .form-group.instruction img,
.addfunds-page .addfunds-form #instruction_instruction img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .addfunds-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .addfunds-method-chip {
    flex: 0 0 auto;
  }
}

@media (max-width: 768px) {
  .addfunds-methods {
    padding: 16px;
    border-radius: 20px;
    gap: 16px;
  }

  .addfunds-methods-title,
  .addfunds-panel-title,
  .addfunds-info-head h2 {
    font-size: 18px;
  }

  .addfunds-method-chip {
    min-width: 118px;
    max-width: 168px;
    height: 92px;
    gap: 8px;
    padding: 10px 8px;
  }

  .addfunds-method-icons {
    min-height: 40px;
    gap: 4px;
  }

  .addfunds-method-icon {
    width: 40px;
    height: 40px;
  }

  .addfunds-method-logo {
    width: 22px;
    height: 22px;
  }

  .addfunds-method-label {
    font-size: 11px;
    line-height: 1.25;
  }

  .addfunds-page .addfunds-form #method + .select2 .select2-selection--single,
  .addfunds-input,
  .addfunds-page .addfunds-form #amount-fields .form-control,
  .addfunds-page .addfunds-form input.form-control,
  .addfunds-page .addfunds-form #method.form-control {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 10px 14px !important;
    font-size: 15px;
  }

  .addfunds-page .addfunds-form #method + .select2 .select2-selection--single {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 14px;
  }

  .addfunds-page .addfunds-form #method + .select2 .select2-selection__rendered,
  .addfunds-page .addfunds-form #method + .select2 #select2-method-container {
    font-size: 15px;
  }

  .addfunds-page
    .addfunds-form
    #method
    + .select2
    .select2-selection__rendered
    img,
  .addfunds-page
    .addfunds-form
    #method
    + .select2
    #select2-method-container
    img {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }

  .addfunds-submit {
    min-height: 48px;
    height: 48px;
    padding: 10px 24px;
    font-size: 16px;
  }

  .addfunds-total-box .addfunds-input {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
  }

  .addfunds-panel,
  .addfunds-info {
    padding: 18px 14px 22px;
    border-radius: 20px;
    gap: 20px;
  }

  .addfunds-panel-head {
    flex-direction: column;
    align-items: stretch;
    padding: 10px;
  }

  .addfunds-tabs {
    width: 100%;
    justify-content: stretch;
  }

  .addfunds-tab {
    flex: 1;
    text-align: center;
    font-size: 14px;
    padding: 8px 10px;
  }

  .addfunds-quick-field {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }

  .addfunds-quick {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
  }

  .addfunds-quick::-webkit-scrollbar {
    height: 4px;
  }

  .addfunds-quick::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  .addfunds-quick-chip {
    flex: 0 0 auto;
    min-width: 86px;
    scroll-snap-align: start;
    min-height: 52px;
    font-size: 14px;
  }

  .addfunds-fx-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .addfunds-fx-swap {
    width: 100%;
    height: 24px;
    transform: rotate(90deg);
  }

  .addfunds-total-box .addfunds-input {
    padding-right: 18px;
    padding-bottom: 34px;
  }

  .addfunds-total-note {
    top: auto;
    bottom: 10px;
    right: 18px;
    transform: none;
    font-size: 12px;
  }

  .addfunds-table > thead {
    display: none;
  }

  .addfunds-table > tbody > tr {
    display: block;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .addfunds-page .addfunds-table-card .addfunds-table.table > tbody > tr > td,
  .addfunds-table > tbody > tr > td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border: 0;
  }

  .addfunds-table > tbody > tr > td::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
  }
}

/* ==========================================================================
   Mass Order (Figma 1286:59267)
   ========================================================================== */

.massorder-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-bottom: 24px;
}

.massorder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  width: 100%;
}

.massorder-panel,
.massorder-info {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 20px 34px;
  border-radius: 28px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  box-sizing: border-box;
}

.massorder-info {
  gap: 16px;
  padding-bottom: 24px;
}

.massorder-panel-head,
.massorder-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 8px 8px 16px;
  margin: 0;
  border-radius: 14px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.massorder-info-head {
  justify-content: flex-start;
  gap: 12px;
  min-height: 72px;
  padding: 16px 12px;
}

.massorder-panel-title,
.massorder-info-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.2;
  color: #f5f6f7;
}

.massorder-info-icon {
  display: block;
  width: 25px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.massorder-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin: 0;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    128deg,
    rgba(202, 35, 231, 0.2) 0%,
    rgba(152, 167, 255, 0.15) 100%
  );
  overflow-x: auto;
  scrollbar-width: none;
}

.massorder-tabs::-webkit-scrollbar {
  display: none;
}

.massorder-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.massorder-tab:hover {
  color: #fff;
  background: rgba(202, 35, 231, 0.12);
  text-decoration: none;
}

.massorder-tab.is-active {
  color: #f5f6f7;
  background: linear-gradient(
    108deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  box-shadow: none;
}

.massorder-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.massorder-form .form-group {
  margin-bottom: 0;
}

.massorder-intro {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.massorder-intro-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.massorder-intro-text {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #f5f6f7;
}

.massorder-field .control-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.massorder-textarea {
  width: 100%;
  min-height: 407px;
  padding: 18px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.18);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  resize: vertical;
  box-shadow: none;
  box-sizing: border-box;
}

.massorder-textarea::placeholder {
  color: #f5f6f7;
  opacity: 0.85;
}

.massorder-textarea:focus,
.massorder-textarea:focus-visible {
  outline: none;
  border-color: rgba(202, 35, 231, 0.45);
  background: rgba(121, 121, 121, 0.22);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.2);
}

.massorder-submit {
  width: 100%;
  min-height: 56px;
  padding: 8px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(
    145deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.massorder-submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.massorder-page .alert {
  margin-bottom: 0;
  border-radius: 12px;
}

.massorder-page .alert.alert-danger {
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.12);
  color: #fff;
}

.massorder-page .alert.alert-success {
  border: 1px solid rgba(72, 199, 116, 0.35);
  background: rgba(72, 199, 116, 0.12);
  color: #fff;
}

.massorder-page .alert .close {
  color: #fff;
  opacity: 0.8;
}

.massorder-page .alert a {
  color: var(--color-purple-light);
}

.massorder-info-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 0;
  border-top: 0.6px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
}

.massorder-info-card {
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(98, 98, 203, 0.22);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  color: #f5f6f7;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.massorder-info-card p {
  margin: 0 0 1em;
}

.massorder-info-card p:last-child {
  margin-bottom: 0;
}

.massorder-info-card a {
  color: var(--color-purple-light);
  word-break: break-all;
}

.massorder-example {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  white-space: pre-wrap;
}

@media (max-width: 1100px) {
  .massorder-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 991.98px) {
  .massorder-panel-head {
    flex-wrap: wrap;
  }

  .massorder-panel-head .massorder-tabs {
    width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .massorder-panel,
  .massorder-info {
    padding: 18px 14px 22px;
    border-radius: 20px;
    gap: 20px;
  }

  .massorder-panel-head {
    flex-wrap: wrap;
    align-items: center;
    padding-left: 12px;
    padding-right: 12px;
  }

  .massorder-panel-head .massorder-tabs {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .massorder-tab {
    flex: 0 0 auto;
    text-align: center;
    font-size: 14px;
    padding: 8px 14px;
  }

  .massorder-tab.is-active {
    color: #fff;
  }

  .massorder-intro-title {
    font-size: 18px;
  }

  .massorder-textarea {
    min-height: 280px;
  }

  .massorder-info-head {
    min-height: 56px;
  }

  .massorder-panel-title,
  .massorder-info-title {
    font-size: 18px;
  }

  .massorder-submit {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
  }
}

/* ==========================================================================
   Services (Figma 445:23330) — growfollows behavior
   ========================================================================== */

@media (min-width: 1200px) {
  body:has(.services-page) .page-hero-content {
    max-width: calc(100% - min(240px, 30%));
  }
}

.services-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding-bottom: 24px;
}

.services-platforms {
  margin: 0;
}

.services-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-sizing: border-box;
}

.services-filter-dropdown,
.services-currency-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.services-filter-dropdown.is-open,
.services-currency-dropdown.is-open {
  z-index: 40;
}

.services-filter-tab.dropdown-toggle::after,
.services-currency-pill.dropdown-toggle::after {
  display: none;
}

.services-filter-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 180px;
  max-width: 100%;
  height: 50px;
  padding: 8px 8px 8px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: transparent;
  background-image: var(--img-tab-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
}

.services-filter-tab-main {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  position: relative;
  z-index: 2;
}

.services-filter-tab-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  filter: none;
}

.services-filter-tab-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 90px;
  color: #fff;
  font-weight: 600;
}

.services-filter-tab-caret-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.services-filter-tab-caret {
  display: block;
  width: 10px;
  height: 7px;
  object-fit: contain;
  opacity: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  filter: brightness(0) invert(1);
}

.services-filter-dropdown.is-open .services-filter-tab-caret {
  transform: rotate(180deg);
}

.services-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 50px;
  padding: 10px 8px 10px 16px;
  border-radius: 8px;
  background: rgba(64, 64, 64, 0.15);
  border: 0.5px solid rgba(143, 106, 255, 0.42);
  box-sizing: border-box;
}

.services-search-input,
.services-search .services-search-input.form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.services-search-input:focus,
.services-search .services-search-input.form-control:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
  color: #fff;
}

.services-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.services-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  cursor: pointer;
}

.services-search-submit img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.services-filter-menu,
.services-page .services-filter-menu,
.services-page .dropdown-menu.services-filter-menu,
.services-filter-dropdown .dropdown-menu.services-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  min-width: 40px;
  width: 400px;
  max-width: calc(100vw - 48px);
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  border-radius: 14px;
  background-color: #120a26;
  background-image: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-dropdown);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  scrollbar-width: thin;
  scrollbar-color: #6d5c88 #1e1235;
}

.services-filter-menu::-webkit-scrollbar,
.services-page .services-filter-menu::-webkit-scrollbar,
.services-page .dropdown-menu.services-filter-menu::-webkit-scrollbar,
.services-filter-dropdown
  .dropdown-menu.services-filter-menu::-webkit-scrollbar {
  width: 6px;
}

.services-filter-menu::-webkit-scrollbar-track,
.services-page .services-filter-menu::-webkit-scrollbar-track,
.services-page .dropdown-menu.services-filter-menu::-webkit-scrollbar-track,
.services-filter-dropdown
  .dropdown-menu.services-filter-menu::-webkit-scrollbar-track {
  background-color: #1e1235;
  border-radius: 999px;
}

.services-filter-menu::-webkit-scrollbar-thumb,
.services-page .services-filter-menu::-webkit-scrollbar-thumb,
.services-page .dropdown-menu.services-filter-menu::-webkit-scrollbar-thumb,
.services-filter-dropdown
  .dropdown-menu.services-filter-menu::-webkit-scrollbar-thumb {
  background-color: #6d5c88;
  border-radius: 999px;
  border: 1px solid #1e1235;
}

.services-filter-menu::-webkit-scrollbar-thumb:hover,
.services-page .services-filter-menu::-webkit-scrollbar-thumb:hover,
.services-page
  .dropdown-menu.services-filter-menu::-webkit-scrollbar-thumb:hover,
.services-filter-dropdown
  .dropdown-menu.services-filter-menu::-webkit-scrollbar-thumb:hover {
  background-color: #8573a3;
}

.services-filter-menu::-webkit-scrollbar-corner,
.services-page .services-filter-menu::-webkit-scrollbar-corner,
.services-page .dropdown-menu.services-filter-menu::-webkit-scrollbar-corner,
.services-filter-dropdown
  .dropdown-menu.services-filter-menu::-webkit-scrollbar-corner {
  background-color: #120a26;
}

.services-filter-dropdown.is-open .services-filter-menu,
.services-currency-dropdown.is-open .services-filter-menu,
.updates-filter-dropdown.is-open .services-filter-menu,
.updates-filter-dropdown.is-open .updates-filter-menu {
  display: block;
}

.services-page .services-filter-menu > li > a {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #f5f6f7;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.35;
  white-space: normal;
}

.services-page .services-filter-menu > li > a > span:last-child {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  flex: 1;
  min-width: 0;
}

.services-page .services-filter-menu > li > a > .fas,
.services-page .services-filter-menu > li > a > .far,
.services-page .services-filter-menu > li > a > .fab,
.services-page .services-filter-menu > li > a > [class*="fa-"],
.services-page .services-filter-menu > li > a > .services-category-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.services-page .services-filter-menu > li > a:hover,
.services-page .services-filter-menu > li.active > a,
.services-page .services-filter-menu .dropdown-item.is-active {
  background: rgba(202, 35, 231, 0.18);
  color: #fff;
}

.services-category-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.services-currency-row {
  display: flex;
  justify-content: flex-end;
}

.services-currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.services-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.services-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 180px;
  padding: 32px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(36, 26, 51, 0.59);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  box-sizing: border-box;
}

.services-empty-state[hidden] {
  display: none !important;
}

.services-empty-state-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}

.services-empty-state-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

.services-section,
.services-section-body {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.services-section.is-collapsed .services-section-body {
  display: none !important;
}

.services-category-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 8px 10px 16px;
  border: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    160deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  opacity: 0.9;
}

.services-section.is-collapsed .services-category-bar {
  border-radius: 12px;
  opacity: 1;
}

.services-category-bar-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.services-category-bar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
}

.services-category-bar-poly {
  position: absolute;
  inset: 0;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

.services-category-bar-glyph,
.services-category-bar-icon img.services-category-bar-glyph,
.services-category-bar-icon .services-category-icon {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  max-width: 22px;
  max-height: 22px;
  object-fit: contain;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.services-category-bar-title {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.services-category-bar-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #f2f2f4;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.services-category-bar-chevron-icon {
  display: block;
  width: 18px;
  height: 11px;
  object-fit: contain;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

.services-section.is-collapsed .services-category-bar-chevron-icon {
  transform: none;
}

.services-table-card,
.services-table-card.table-responsive {
  width: 100%;
  max-width: 100%;
  border: none;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  background: rgba(36, 26, 51, 0.59);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.services-section.is-collapsed .services-table-card {
  display: none;
}

.services-table {
  margin: 0;
  width: 100%;
  min-width: 1100px;
  table-layout: fixed;
  color: #ebecef;
  border-collapse: collapse;
}

.services-col-fav {
  width: 76px;
}

.services-col-id {
  width: 88px;
}

.services-col-service {
  width: auto;
}

.services-col-rate {
  width: 140px;
}

.services-col-minmax {
  width: 190px;
}

.services-col-time {
  width: 140px;
}

.services-col-actions {
  width: 140px;
}

.services-table > thead > tr > th {
  padding: 16px 14px;
  border: 0;
  border-bottom: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.services-table > tbody > tr > td {
  padding: 16px 14px;
  border: 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.21);
  vertical-align: middle;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
  background: transparent;
}

.services-table > tbody > tr:last-child > td {
  border-bottom: 0;
}

.services-table > tbody > tr:hover > td {
  background: rgba(202, 35, 231, 0.06);
}

.services-th-fav,
.services-td-fav {
  width: 76px;
  text-align: left;
}

.services-th-id,
.services-td-id {
  width: 88px;
}

.services-th-rate,
.services-td-rate {
  width: 140px;
}

.services-th-minmax,
.services-td-minmax {
  width: 190px;
  white-space: nowrap;
}

.services-th-time,
.services-td-time {
  width: 140px;
}

.services-th-actions,
.services-td-actions {
  width: 140px;
  text-align: left;
}

@media (min-width: 1440px) {
  .services-table {
    min-width: 1160px;
  }

  .services-col-rate,
  .services-th-rate,
  .services-td-rate {
    width: 180px;
  }

  .services-col-minmax,
  .services-th-minmax,
  .services-td-minmax {
    width: 240px;
  }
}

.services-favorite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 42px;
  height: 34px;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(
    98deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
}

.services-favorite-btn [data-favorite-icon] {
  font-size: 16px;
  line-height: 1;
}

.services-favorite-btn.favorite-active,
.services-favorite-btn.is-active {
  color: #fff;
  background: linear-gradient(
    98deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  border: none;
}

.services-favorite-btn.favorite-active [data-favorite-icon],
.services-favorite-btn.is-active [data-favorite-icon] {
  color: #fff;
}

.services-td-id {
  color: #ebecef;
  white-space: nowrap;
}

.services-td-service {
  min-width: 0;
}

.services-td-service .service-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  color: #ebecef;
  font-weight: 500;
  line-height: 1.4;
}

.services-minmax-sep {
  color: #ebecef;
}

.services-max {
  background-image: linear-gradient(94deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
}

.services-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: auto;
  padding: 10px 24px;
  border: 1.5px solid #cc7aff;
  border-radius: 8px;
  background: linear-gradient(
    103deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.services-view-btn:hover {
  opacity: 0.94;
  color: #fff;
}

.services-text-card {
  padding: 20px;
  border-radius: 16px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(14, 7, 30, 0.68);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.6;
}

body.services-modal-open {
  overflow: hidden;
}

.services-details-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 2, 14, 0.78);
}

.services-details-modal.is-open {
  display: flex;
}

.services-details-dialog {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(88vh, 820px);
  overflow: hidden;
  border-radius: 20px;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  background: rgba(14, 7, 30, 0.96);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.services-details-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(
    100deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.services-details-title {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.services-details-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.services-details-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
}

.services-details-body::-webkit-scrollbar {
  width: 4px;
}

.services-details-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.services-details-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.services-details-body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}

.services-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.services-details-stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.services-details-stat-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.services-details-stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.services-details-desc {
  padding: 14px;
  border-radius: 12px;
  background: rgba(98, 98, 203, 0.18);
}

.services-details-desc-label {
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}

.services-details-desc-content {
  color: #f5f6f7;
  font-size: 14px;
  line-height: 1.6;
}

.services-details-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px 20px;
}

.services-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.services-details-btn--close {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.services-details-btn--order {
  border: 0;
  background: linear-gradient(
    135deg,
    #ca23e7 0%,
    rgba(152, 167, 255, 0.75) 100%
  );
  color: #fff;
}

.services-details-btn--order:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
}

@media (max-width: 900px) {
  .services-toolbar {
    flex-wrap: wrap;
  }

  .services-filter-dropdown {
    width: 100%;
  }

  .services-filter-tab {
    width: 100%;
  }

  .services-search {
    width: 100%;
  }

  .services-details-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .services-toolbar {
    z-index: 30;
  }

  .services-filter-dropdown.is-open {
    z-index: 40;
  }

  .services-filter-tab {
    background-image: none;
    background-color: rgba(202, 35, 231, 0.14);
    border: 0.5px solid rgba(255, 255, 255, 0.18);
  }

  .services-filter-tab-label {
    max-width: none;
  }

  .services-filter-menu,
  .services-page .services-filter-menu {
    width: 100%;
    min-width: 0;
    max-height: 50vh;
  }

  .services-category-bar {
    border-radius: 12px;
    margin-bottom: 0;
  }

  .services-category-bar-title {
    font-size: 16px;
    line-height: 1.4;
  }

  .services-category-bar-chevron {
    width: 34px;
    height: 34px;
    border-radius: 6px;
  }

  .services-category-bar-chevron-icon {
    width: 14px;
    height: 9px;
  }

  .services-section.is-expanded .services-category-bar {
    border-radius: 12px 12px 0 0;
  }

  .services-table {
    min-width: 0;
  }

  .services-table > thead {
    display: none;
  }

  .services-table,
  .services-table > tbody {
    display: block;
    width: 100%;
  }

  .services-table > tbody > tr.services-row {
    display: block;
    margin: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
  }

  .services-table > tbody > tr.services-row > td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .services-table > tbody > tr.services-row > td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 120px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
  }

  .services-td-fav::before,
  .services-td-actions::before {
    display: none;
  }

  .services-td-actions {
    border-bottom: 0 !important;
    justify-content: flex-end;
  }

  .services-table > tbody > tr.services-row > td.services-td-service {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .services-table > tbody > tr.services-row > td.services-td-service::before {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .services-td-service .service-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
  }

  .services-details-footer {
    flex-direction: column-reverse;
  }

  .services-details-btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   Tickets page
   -------------------------------------------------------------------------- */

.tickets-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.tickets-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  width: 100%;
}

.tickets-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 28px 20px 34px;
  border-radius: 28px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
  overflow: hidden;
}

.tickets-history-card {
  gap: 20px;
  padding-bottom: 24px;
  min-width: 0;
  height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  min-height: 0;
}

.tickets-history-card > .tickets-panel-head,
.tickets-history-card > .tickets-search,
.tickets-history-card > .tickets-pagination {
  flex-shrink: 0;
}

.tickets-history-card .tickets-table-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 12px;
}

.tickets-history-card .tickets-table-scroller {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
}

.tickets-history-card .tickets-table-scroller::-webkit-scrollbar,
.tickets-history-card .tickets-table-body-pane::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.tickets-history-card .tickets-table-scroller::-webkit-scrollbar-track,
.tickets-history-card .tickets-table-body-pane::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.tickets-history-card .tickets-table-scroller::-webkit-scrollbar-thumb,
.tickets-history-card .tickets-table-body-pane::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
}

.tickets-history-card .tickets-table-scroller::-webkit-scrollbar-thumb:hover,
.tickets-history-card .tickets-table-body-pane::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.42);
}

.tickets-history-card .tickets-table-band {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  min-width: 640px;
  min-height: 0;
}

.tickets-history-card .tickets-table-head-pane {
  flex-shrink: 0;
}

.tickets-history-card .tickets-table-body-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
}

.tickets-history-card .tickets-table--head,
.tickets-history-card .tickets-table--body {
  width: 100%;
  margin: 0;
  table-layout: fixed;
}

.tickets-history-card .tickets-col-id {
  width: 12%;
}

.tickets-history-card .tickets-col-subject {
  width: 38%;
}

.tickets-history-card .tickets-col-status {
  width: 22%;
}

.tickets-history-card .tickets-col-updated {
  width: 28%;
}

.tickets-history-card .tickets-table--head > thead > tr {
  background: linear-gradient(139deg, #ca23e7 0.37%, #98a7ff 99%);
  box-shadow: 0 1px 0 rgba(20, 8, 40, 0.35);
}

.tickets-history-card .tickets-table--head > thead > tr > th {
  background: transparent !important;
}

.tickets-panel-head {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.tickets-panel-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.tickets-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.tickets-form-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.tickets-field,
#ticket-fields,
#ticket-fields .form-group,
#ticket-fields > div {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 0;
}

#ticket-fields {
  gap: 24px;
}

#ticket-fields .form-group,
#ticket-fields > div {
  margin-bottom: 0;
}

.tickets-label,
.tickets-page .tickets-label,
#ticket-fields label,
#ticket-fields .control-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.tickets-input,
.tickets-page .tickets-input.form-control,
.tickets-page #ticket-fields .form-control,
.tickets-page #ticket-fields select,
.tickets-page #ticket-fields input:not([type="hidden"]):not([type="file"]),
.tickets-page #ticket-fields textarea {
  width: 100%;
  min-height: 56px;
  height: 56px;
  margin: 0;
  padding: 16px 18px;
  border: none;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: none !important;
  color: #f5f6f7 !important;
  -webkit-text-fill-color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  outline: none;
}

.tickets-textarea,
.tickets-page .tickets-textarea.form-control,
.tickets-page #ticket-fields textarea {
  height: 157px;
  min-height: 157px;
  resize: vertical;
  align-items: flex-start;
}

.tickets-input::placeholder,
.tickets-page #ticket-fields .form-control::placeholder {
  color: rgba(245, 246, 247, 0.55);
  -webkit-text-fill-color: rgba(245, 246, 247, 0.55);
  opacity: 1;
}

.tickets-select-wrap {
  position: relative;
  width: 100%;
}

.tickets-select,
.tickets-page .tickets-select.form-control,
.tickets-page #ticket-fields select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  color-scheme: dark;
}

.tickets-select option,
.tickets-page .tickets-select.form-control option,
.tickets-page #ticket-fields select option {
  background-color: #14091f;
  color: #f5f6f7;
}

.tickets-select-caret {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  display: inline-flex;
  pointer-events: none;
  line-height: 0;
}

.tickets-select-caret img {
  display: block;
  width: 12px;
  height: 8px;
}

.tickets-page #ticket-fields select {
  background-image: none;
}

.tickets-form-actions {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
}

.tickets-attach {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}

.tickets-attach-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 8px 24px;
  border: 1.5px dashed #ca23e7;
  border-radius: 16px;
  background: linear-gradient(
    125deg,
    rgba(202, 35, 231, 0.12) 0.37%,
    rgba(152, 167, 255, 0.09) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.8;
  cursor: pointer;
  pointer-events: none;
}

.tickets-attach-visual img {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.tickets-form-card .tickets-uploader {
  width: 100%;
  z-index: 1;
}

.tickets-form-card .files-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  width: 100% !important;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.tickets-form-card .files-wrapper input[type="file"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.tickets-form-card #uploader-button {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  color: transparent !important;
  opacity: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  z-index: 3;
  pointer-events: auto !important;
}

.tickets-form-card .files-wrapper ul,
.tickets-form-card .files-wrapper > .files-list,
.tickets-form-card .files-wrapper > [class*="list"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent !important;
}

.tickets-form-card
  .files-wrapper
  > *:not(#uploader-button):not(input):not(ul):not(.files-list),
.tickets-form-card .files-wrapper ul > li,
.tickets-form-card .files-wrapper [class*="list"] > * {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px;
  width: auto !important;
  max-width: 100%;
  min-width: 0;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  background: rgba(36, 26, 51, 0.85) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.tickets-form-card .files-wrapper a {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #fff !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tickets-form-card .files-wrapper a:hover {
  color: #ca23e7 !important;
  text-decoration: none !important;
}

.tickets-form-card .files-wrapper span,
.tickets-form-card .files-wrapper div {
  background: transparent !important;
  box-shadow: none !important;
}

.tickets-form-card .files-wrapper > *:not(#uploader-button):not(input) span {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.tickets-form-card .files-wrapper [class*="remove"],
.tickets-form-card .files-wrapper [class*="delete"],
.tickets-form-card .files-wrapper [class*="close"],
.tickets-form-card .files-wrapper button:not(#uploader-button) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px;
  padding: 0 !important;
  border: none !important;
  border-radius: 999px !important;
  background: rgba(255, 47, 49, 0.16) !important;
  color: #ff2f31 !important;
  opacity: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.tickets-submit {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 8px 24px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(
    125deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1.35px 4.05px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.tickets-submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.tickets-alert,
.tickets-page .alert {
  margin: 0;
  border-radius: 12px;
}

.tickets-page .alert.alert-danger {
  border: 1px solid rgba(255, 77, 77, 0.35);
  background: rgba(255, 77, 77, 0.12);
  color: #fff;
}

.tickets-page .alert.alert-success {
  border: 1px solid rgba(72, 199, 116, 0.35);
  background: rgba(72, 199, 116, 0.12);
  color: #fff;
}

.tickets-page .alert.alert-dismissible {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
}

.tickets-page .alert.alert-danger.alert-dismissible {
  align-items: center;
}

.tickets-page .tickets-alert__body {
  flex: 1 1 auto;
  min-width: 0;
}

.tickets-page .alert.alert-dismissible .close {
  position: static;
  top: auto;
  right: auto;
  float: none;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
}

.tickets-page .alert.alert-danger.alert-dismissible .close {
  align-self: center;
}

.tickets-page .alert.alert-dismissible .close span {
  line-height: 1;
}

.tickets-page .alert.alert-dismissible .close:hover {
  opacity: 1;
}

.tickets-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 4px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.12);
  box-sizing: border-box;
}

.tickets-search-icon {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}

.tickets-search-icon img {
  display: block;
  width: 18px;
  height: 18px;
}

.tickets-search-input,
.tickets-page .tickets-search-input.form-control,
.tickets-page .tickets-search-input.form-control:focus {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.tickets-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
  opacity: 1;
}

.tickets-table-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
}

.tickets-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #f5f6f7;
}

.tickets-table > thead > tr {
  background: linear-gradient(139deg, #ca23e7 0.37%, #98a7ff 99%);
}

.tickets-table > thead > tr > th {
  padding: 22px 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  vertical-align: middle;
  border: none;
  background: transparent;
}

.tickets-table > thead > tr > th:first-child {
  padding-left: 24px;
  border-radius: 12px 0 0 12px;
}

.tickets-table > thead > tr > th:last-child {
  padding-right: 24px;
  border-radius: 0 12px 12px 0;
}

.tickets-table > tbody > tr > td {
  padding: 22px 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
  vertical-align: middle;
  border: none;
  border-bottom: 1px dashed #888e9c;
  background: transparent;
}

.tickets-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.tickets-table > tbody > tr > td:first-child {
  padding-left: 24px;
}

.tickets-table > tbody > tr > td:last-child {
  padding-right: 24px;
}

.tickets-table a {
  color: inherit;
  text-decoration: none;
}

.tickets-table a:hover {
  color: #fff;
  text-decoration: none;
}

.tickets-table a.is-bold,
.tickets-row.is-unread .tickets-subject-link {
  font-weight: 700;
}

.tickets-subject-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
}

.tickets-subject-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tickets-unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 20px;
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.85) 99%
  );
  box-shadow: 0 2px 8px rgba(202, 35, 231, 0.35);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}

.tickets-row.is-unread > td:first-child a {
  font-weight: 700;
}

.tickets-table > tbody > tr.tickets-row[data-href] {
  cursor: pointer;
}

.tickets-table > tbody > tr.tickets-row[data-href]:focus {
  outline: none;
}

.tickets-table > tbody > tr.tickets-row[data-href]:focus-visible > td {
  box-shadow: inset 0 0 0 2px rgba(202, 35, 231, 0.55);
}

.tickets-table > tbody > tr.tickets-row[data-href]:hover > td {
  background: rgba(255, 255, 255, 0.04);
}

.tickets-status {
  display: inline-flex;
  align-items: center;
}

.tickets-status--pending {
  color: #ffd666;
}

.tickets-status--answered {
  color: #7dffb3;
}

.tickets-status--closed {
  color: #f5f6f7;
}

.tickets-empty-row td {
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}

.tickets-pagination {
  width: 100%;
}

.tickets-pagination-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tickets-pagination-list li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.tickets-pagination-list li.is-active a {
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.tickets-text-block {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   View ticket page
   -------------------------------------------------------------------------- */

.viewticket-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.viewticket-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  align-items: stretch;
  width: 100%;
}

.viewticket-panel {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 28px 20px 34px;
  border-radius: 24px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}

.viewticket-panel-head {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.viewticket-panel-title {
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
}

.viewticket-chat-card {
  min-width: 0;
}

.viewticket-reply {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: auto;
}

.viewticket-chat {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.viewticket-chat::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.viewticket-msg {
  display: flex;
  gap: 14px;
  max-width: 92%;
}

.viewticket-msg--support {
  align-self: flex-start;
  align-items: flex-start;
}

.viewticket-msg--user {
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  gap: 10px;
}

.viewticket-msg-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.viewticket-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.viewticket-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 57px;
  height: 53px;
  border-radius: 8px;
  overflow: hidden;
}

.viewticket-avatar--support {
  background: #faf0ff;
  border: 0.5px solid #f3ddff;
}

.viewticket-avatar--support span {
  background-image: linear-gradient(92deg, #da32f7 9.35%, #8f6aff 88.44%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.viewticket-avatar--user {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #1a1230;
}

.viewticket-avatar--user span {
  color: #da32f7;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 700;
}

.viewticket-msg-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.viewticket-msg-name {
  background-image: linear-gradient(95deg, #da32f7 9.35%, #8f6aff 88.44%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.viewticket-msg-time {
  color: #fafafb;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.viewticket-msg--user .viewticket-msg-time {
  font-size: 12px;
}

.viewticket-msg-body {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  border: 0.2px solid rgba(255, 255, 255, 0.54);
  border-radius: 12px;
  background: linear-gradient(
    106deg,
    rgba(202, 35, 231, 0.14) 0.37%,
    rgba(152, 167, 255, 0.105) 99%
  );
  opacity: 0.95;
  box-sizing: border-box;
}

.viewticket-msg-body--user {
  border: none;
  background: rgba(255, 255, 255, 0.18);
  opacity: 1;
}

.viewticket-msg-text {
  color: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.viewticket-msg--user .viewticket-msg-text {
  font-family: var(--font-sans);
}

.viewticket-msg-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.viewticket-msg-files a {
  color: #da32f7;
  text-decoration: none;
  word-break: break-all;
}

.viewticket-msg-files a:hover {
  text-decoration: underline;
}

.viewticket-empty {
  padding: 32px 16px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  font-size: 14px;
}

.viewticket-composer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  border: 1px solid rgba(202, 35, 231, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(
      135deg,
      rgba(202, 35, 231, 0.1) 0%,
      rgba(152, 167, 255, 0.06) 100%
    ),
    rgba(18, 10, 38, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.viewticket-composer:focus-within {
  border-color: rgba(218, 50, 247, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(202, 35, 231, 0.16);
}

.viewticket-textarea,
.viewticket-page .viewticket-textarea.form-control,
.viewticket-page .viewticket-textarea:focus {
  width: 100% !important;
  min-height: 110px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  caret-color: #da32f7;
}

.viewticket-textarea::placeholder {
  color: rgba(255, 255, 255, 0.38) !important;
}

.viewticket-file-preview {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}

.viewticket-file-preview:not(:empty) {
  display: flex;
}

.viewticket-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(36, 26, 51, 0.85);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
}

.viewticket-file-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(14, 7, 30, 0.8);
}

.viewticket-file-name {
  overflow: hidden;
  max-width: 160px;
  color: #fff;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewticket-file-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: rgba(255, 47, 49, 0.16);
  color: #ff2f31;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.viewticket-actions {
  display: flex;
  align-items: stretch;
  gap: 30px;
  width: 100%;
  margin-top: auto;
}

.viewticket-attach {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

.viewticket-attach-hit {
  position: relative;
  width: 100%;
}

.viewticket-attach-visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: 56px;
  padding: 8px 24px;
  border: 1.5px dashed #ca23e7;
  border-radius: 12px;
  background: linear-gradient(
    124deg,
    rgba(202, 35, 231, 0.06) 0.37%,
    rgba(152, 167, 255, 0.045) 99%
  );
  color: transparent;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.9;
  cursor: pointer;
  pointer-events: auto;
}

.viewticket-attach-visual span {
  background-image: linear-gradient(
    112deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.viewticket-attach-visual img {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(24%) sepia(98%) saturate(4000%)
    hue-rotate(280deg) brightness(105%) contrast(105%);
}

.viewticket-attach-hit .tickets-uploader,
.viewticket-page .files-wrapper,
.viewticket-page #uploader-button {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  color: transparent !important;
  font-size: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.viewticket-page .files-wrapper input[type="file"] {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.viewticket-submit {
  flex: 1 1 0;
  min-width: 0;
  height: 56px;
  padding: 8px 24px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(
    124deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-shadow: 0 1.35px 4.05px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.viewticket-submit:hover {
  opacity: 0.94;
  transform: translateY(-1px);
}

.viewticket-info-card {
  gap: 20px;
}

.viewticket-info-intro {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.viewticket-detail-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
}

.viewticket-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(36, 26, 51, 0.72);
}

.viewticket-detail-label {
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.viewticket-detail-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 58%;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewticket-detail-pill--id {
  color: #f66135;
}

.viewticket-detail-pill--subject {
  color: #6cb6ff;
}

.viewticket-detail-pill--status {
  color: #4ade80;
}

.viewticket-detail-pill--status.is-closed,
.viewticket-detail-pill--priority {
  color: #ff7b7c;
}

.viewticket-detail-pill--department {
  color: #2dd4bf;
}

.viewticket-detail-pill--time {
  color: #4ade80;
}

.viewticket-note {
  margin-top: auto;
  padding: 16px 18px;
  border: 1px solid rgba(202, 35, 231, 0.55);
  border-radius: 14px;
  background: rgba(202, 35, 231, 0.1);
  color: #da32f7;
}

.viewticket-note strong {
  display: block;
  margin-bottom: 6px;
  color: #f6c445;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.viewticket-note p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}

.viewticket-alert {
  margin: 0;
}

@media (max-width: 1100px) {
  .tickets-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tickets-history-card {
    height: min(860px, calc(100vh - 90px));
    max-height: min(860px, calc(100vh - 90px));
  }

  .viewticket-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .viewticket-chat-card {
    order: 1;
  }

  .viewticket-info-card {
    order: 2;
  }
}

@media (max-width: 768px) {
  .tickets-page {
    gap: 16px;
  }

  .tickets-layout {
    gap: 16px;
  }

  .tickets-panel {
    gap: 16px;
    padding: 20px 14px 24px;
    border-radius: 20px;
  }

  .tickets-form,
  .tickets-form-fields {
    gap: 18px;
  }

  #ticket-fields {
    gap: 18px;
  }

  .tickets-field,
  #ticket-fields .form-group,
  #ticket-fields > div {
    gap: 10px;
  }

  .tickets-panel-head {
    min-height: 56px;
    border-radius: 12px;
  }

  .tickets-form-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .tickets-attach,
  .tickets-submit {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .tickets-attach-visual,
  .tickets-submit {
    width: 100%;
  }

  .tickets-attach-visual {
    height: 48px;
    min-height: 48px;
  }

  .tickets-form-card #uploader-button {
    height: 48px !important;
    min-height: 48px !important;
  }

  .tickets-submit {
    height: 48px;
    min-height: 48px;
  }

  .viewticket-page {
    gap: 16px;
  }

  .viewticket-layout {
    gap: 16px;
  }

  .viewticket-panel {
    gap: 16px;
    padding: 20px 14px 24px;
    border-radius: 20px;
    height: auto;
    min-height: 0;
  }

  .viewticket-chat-card {
    min-height: 0;
  }

  .viewticket-panel-head {
    min-height: 52px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .viewticket-panel-title {
    font-size: 17px;
  }

  .viewticket-reply {
    gap: 12px;
  }

  .viewticket-chat {
    gap: 16px;
    max-height: min(360px, 48vh);
  }

  .viewticket-msg {
    gap: 10px;
  }

  .viewticket-msg--user {
    gap: 8px;
  }

  .viewticket-msg-main {
    gap: 10px;
  }

  .viewticket-msg-row {
    gap: 10px;
  }

  .viewticket-avatar {
    width: 44px;
    height: 42px;
  }

  .viewticket-avatar--support span {
    font-size: 14px;
  }

  .viewticket-avatar--user {
    width: 40px;
    height: 40px;
  }

  .viewticket-avatar--user span {
    font-size: 15px;
  }

  .viewticket-msg-name {
    font-size: 14px;
  }

  .viewticket-msg-time {
    font-size: 12px;
  }

  .viewticket-msg--user .viewticket-msg-time {
    font-size: 11px;
  }

  .viewticket-msg-body {
    max-width: 100%;
    padding: 12px 14px;
  }

  .viewticket-msg-text {
    font-size: 14px;
    line-height: 1.45;
  }

  .viewticket-msg-files {
    margin-top: 8px;
    font-size: 13px;
  }

  .viewticket-composer {
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .viewticket-textarea,
  .viewticket-page .viewticket-textarea.form-control,
  .viewticket-page .viewticket-textarea:focus {
    min-height: 88px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  .viewticket-file-chip {
    padding: 6px 8px;
    font-size: 11px;
  }

  .viewticket-file-thumb {
    width: 28px;
    height: 28px;
  }

  .viewticket-file-name {
    max-width: 120px;
  }

  .viewticket-actions {
    flex-direction: column;
    gap: 10px;
  }

  .viewticket-attach-visual {
    height: 48px;
    min-height: 48px;
    padding: 6px 16px;
    gap: 10px;
    font-size: 14px;
    border-radius: 12px;
  }

  .viewticket-attach-visual img {
    width: 20px;
    height: 20px;
  }

  .viewticket-submit {
    height: 48px;
    min-height: 48px;
    padding: 8px 20px;
    font-size: 16px;
    border-radius: 12px;
  }

  .viewticket-msg,
  .viewticket-msg--support,
  .viewticket-msg--user {
    max-width: 100%;
  }

  .viewticket-info-card {
    gap: 16px;
  }

  .viewticket-info-intro {
    font-size: 13px;
  }

  .viewticket-detail-list {
    gap: 10px;
  }

  .viewticket-detail-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
  }

  .viewticket-detail-label {
    font-size: 13px;
  }

  .viewticket-detail-pill {
    max-width: 100%;
    font-size: 11px;
    white-space: normal;
    text-align: center;
  }

  .viewticket-note {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .viewticket-note strong {
    font-size: 13px;
  }

  .viewticket-note p {
    font-size: 12px;
    line-height: 1.5;
  }

  .tickets-form-card .files-wrapper,
  .tickets-form-card .files-wrapper ul,
  .tickets-form-card .files-wrapper > .files-list,
  .tickets-form-card .files-wrapper > [class*="list"] {
    grid-template-columns: 1fr;
  }

  .tickets-table > thead {
    display: none;
  }

  .tickets-history-card .tickets-table-head-pane {
    display: none;
  }

  .tickets-history-card .tickets-table-wrap {
    overflow: visible;
  }

  .tickets-history-card .tickets-table-scroller {
    overflow: visible;
  }

  .tickets-history-card .tickets-table-band {
    min-width: 0;
  }

  .tickets-history-card .tickets-table-body-pane {
    overflow: visible;
  }

  .tickets-history-card .tickets-table {
    min-width: 0;
  }

  .tickets-table,
  .tickets-table > tbody {
    display: block;
    width: 100%;
  }

  .tickets-table > tbody > tr.tickets-row {
    display: block;
    margin: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;
  }

  .tickets-table > tbody > tr.tickets-row[data-href]:active {
    background: rgba(255, 255, 255, 0.07);
  }

  .tickets-table > tbody > tr.tickets-row[data-href]:hover > td {
    background: transparent;
  }

  .tickets-table > tbody > tr.tickets-row > td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .tickets-table > tbody > tr.tickets-row > td:last-child {
    border-bottom: 0;
  }

  .tickets-table > tbody > tr.tickets-row > td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 120px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
  }

  .tickets-empty-row td {
    display: block;
    padding: 24px 16px;
  }
}

[dir="rtl"] .tickets-select-caret,
[dir="rtl"] .tickets-page #ticket-fields select {
  right: auto;
  left: 18px;
}

[dir="rtl"] .tickets-select,
[dir="rtl"] .tickets-page #ticket-fields select {
  padding-right: 18px;
  padding-left: 44px;
  background-position: left 18px center;
}

[dir="rtl"] .tickets-table > thead > tr > th,
[dir="rtl"] .tickets-table > tbody > tr > td {
  text-align: right;
}

[dir="rtl"] .tickets-table > thead > tr > th:first-child,
[dir="rtl"] .tickets-table > tbody > tr > td:first-child {
  padding-left: 10px;
  padding-right: 24px;
}

[dir="rtl"] .tickets-table > thead > tr > th:last-child,
[dir="rtl"] .tickets-table > tbody > tr > td:last-child {
  padding-right: 10px;
  padding-left: 24px;
}

/* --------------------------------------------------------------------------
   Orders page
   -------------------------------------------------------------------------- */

.orders-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}

.orders-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.orders-filter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 4px 12px 4px 4px;
  border: 1px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(rgba(22, 12, 40, 0.96), rgba(22, 12, 40, 0.96)) padding-box,
    linear-gradient(96deg, #ca23e7 0.37%, rgba(152, 167, 255, 0.75) 99%)
      border-box;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.orders-filter:hover,
.orders-filter.is-active {
  border: none;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.85) 99%
  );
  background-clip: border-box;
  box-shadow: 0 6px 22px rgba(202, 35, 231, 0.35);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.orders-filter:hover .orders-filter-icon,
.orders-filter.is-active .orders-filter-icon {
  position: relative;
  isolation: isolate;
  background: #fff;
  box-shadow: none;
}

/* White CDN SVGs can't be CSS-masked cross-origin — silhouette + lighten = gradient icon */
.orders-filter:hover .orders-filter-icon img,
.orders-filter.is-active .orders-filter-icon img {
  position: relative;
  z-index: 0;
  filter: brightness(0);
}

.orders-filter:hover .orders-filter-icon::after,
.orders-filter.is-active .orders-filter-icon::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 1;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  mix-blend-mode: lighten;
  pointer-events: none;
}

.orders-filter:hover .orders-filter-label,
.orders-filter.is-active .orders-filter-label {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
}

.orders-filter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  flex-shrink: 0;
  box-sizing: border-box;
}

.orders-filter-icon img {
  display: block;
  width: 24px;
  height: 24px;
}

.orders-filter-label {
  padding-right: 2px;
}

.orders-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(444px, 100%);
  min-height: 50px;
  padding: 8px 8px 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
  flex-shrink: 0;
}

.orders-search-input,
.orders-page .orders-search-input.form-control,
.orders-page .orders-search-input.form-control:focus {
  flex: 1;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  margin: 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.orders-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.75);
  opacity: 1;
}

.orders-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  cursor: pointer;
  flex-shrink: 0;
}

.orders-search-btn img {
  display: block;
  width: 24px;
  height: 24px;
}

.orders-table-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border-radius: 24px;
  background: rgba(131, 131, 131, 0.15);
  -webkit-overflow-scrolling: touch;
}

.orders-infinite-sentinel td {
  padding: 16px 12px !important;
  border: none !important;
  text-align: center;
}

.orders-infinite-status {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}

.orders-page.is-orders-loading-more .orders-infinite-status::after {
  content: "Loading more orders…";
}

.orders-page.is-orders-exhausted .orders-infinite-sentinel {
  display: none;
}

.orders-table-card.table-responsive {
  display: block;
  border: none;
  overflow-x: auto;
  overflow-y: visible;
}

.orders-table {
  margin: 0;
  border-collapse: collapse;
  color: #f5f6f7;
}

.orders-table > :not(caption) > * > * {
  background: transparent;
}

.orders-table > thead {
  background: linear-gradient(
    105deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.orders-table > thead > tr {
  background: transparent;
}

.orders-table > thead > tr > th {
  padding: 24px 12px;
  border: none;
  background: transparent !important;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.orders-table > thead > tr > th:first-child {
  padding-left: 30px;
  border-radius: 24px 0 0 0;
}

.orders-table > thead > tr > th:last-child {
  padding-right: 24px;
  border-radius: 0 24px 0 0;
}

.orders-th-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.orders-th-id-label {
  margin-right: 0;
}

.orders-th-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -4px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0.4;
  pointer-events: none;
  transition:
    opacity 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
  box-sizing: border-box;
}

.orders-th-copy:focus,
.orders-th-copy:focus-visible {
  outline: none;
}

.orders-th-copy img {
  display: block;
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
}

.orders-th-copy.is-active,
.orders-page.has-selection .orders-th-copy {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

.orders-th-copy.is-active:hover,
.orders-page.has-selection .orders-th-copy:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.75);
}

.orders-th-copy.is-copied {
  opacity: 1;
  border-color: rgba(57, 221, 11, 0.85);
  background: rgba(57, 221, 11, 0.28);
}

.orders-th-copy:disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.orders-table > tbody > tr > td {
  padding: 20px 12px;
  border: none;
  border-bottom: 1px dashed rgba(136, 142, 156, 0.55);
  color: #d3d3d3;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  vertical-align: middle;
  background: transparent;
}

.orders-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.orders-table > tbody > tr > td:first-child {
  padding-left: 30px;
  color: #f5f6f7;
}

.orders-table > tbody > tr > td:last-child {
  padding-right: 24px;
}

.orders-table > tbody > tr:last-child > td:first-child {
  border-radius: 0 0 0 24px;
}

.orders-table > tbody > tr:last-child > td:last-child {
  border-radius: 0 0 24px 0;
}

.orders-cell-inner {
  min-width: 0;
}

.orders-cell-id-main {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 21px;
  cursor: pointer;
  user-select: none;
}

.orders-id-copy,
.dripfeed-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  cursor: pointer;
  flex-shrink: 0;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.orders-id-copy img,
.dripfeed-copy-btn img {
  display: block;
  width: 11px;
  height: 11px;
  filter: brightness(0) invert(1);
}

.orders-id-copy:hover,
.dripfeed-copy-btn:hover {
  opacity: 0.9;
}

.orders-id-copy.is-copied,
.dripfeed-copy-btn.is-copied {
  background: linear-gradient(96deg, #39dd0b 0%, #7dff6a 100%);
}

.orders-row-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  box-sizing: border-box;
  pointer-events: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
  outline: none;
}

.orders-row-check.orders-check-all {
  pointer-events: auto;
  cursor: pointer;
}

.orders-row-check.is-selected {
  border-color: #00a6ff;
  background: #00a6ff;
}

.orders-row-check-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
}

.orders-row-check.is-selected .orders-row-check-icon {
  opacity: 1;
  visibility: visible;
}

.orders-row-id {
  white-space: nowrap;
  color: #f5f6f7;
}

.orders-cell-date {
  display: flex;
  flex-direction: column;
  color: #d3d3d3;
}

.orders-date-main,
.orders-date-time {
  display: block;
  line-height: 1.5;
  white-space: nowrap;
}

.orders-cell-link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 260px;
}

.orders-link-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-all;
  overflow-wrap: anywhere;
  background-image: linear-gradient(110deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  cursor: pointer;
}

.orders-link-text:hover,
.orders-link-text:focus {
  text-decoration: none;
  opacity: 0.88;
}

.orders-details-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #da32f7;
  text-decoration: none;
}

.orders-details-icon {
  width: 14px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  box-sizing: border-box;
}

.orders-cell-service {
  max-width: 280px;
}

.orders-th-link {
  width: 16%;
  max-width: 280px;
}

.orders-th-service {
  width: 22%;
  max-width: 300px;
}

.orders-cell-service-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  color: #d3d3d3;
}

.orders-cell-service.is-truncated,
.orders-cell-service-text.is-truncated {
  cursor: help;
}

.orders-cell-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 88px;
}

.orders-cell-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.orders-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 10px 8px;
  border-radius: 8px;
  background: rgba(255, 240, 240, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.orders-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
}

.orders-badge--completed {
  color: #39dd0b;
}

.orders-badge--canceled {
  color: #ff3b3b;
}

.orders-badge--inprogress {
  color: #2d7cde;
}

.orders-badge--partial {
  color: #b07cff;
}

.orders-badge--processing {
  color: #d9b412;
}

.orders-badge--pending {
  color: #ff9f2e;
}

.orders-badge--default {
  color: #f5f6f7;
}

.orders-reason-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.orders-reason-btn:hover,
.orders-reason-btn:focus-visible {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.orders-cell-order {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.orders-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 4px 10px;
  border: none;
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.orders-btn--again {
  background: linear-gradient(
    105deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
}

.orders-btn--again:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
}

.orders-btn--ghost {
  border: 1px solid rgba(202, 35, 231, 0.45);
  background: rgba(202, 35, 231, 0.1);
  color: #f5e9ff;
}

.orders-btn--ghost:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(202, 35, 231, 0.18);
}

.orders-btn--cancel {
  min-width: 78px;
  padding: 6px 14px;
  border: 1px solid rgba(255, 59, 59, 0.55);
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255, 59, 59, 0.22) 0%,
    rgba(255, 59, 59, 0.1) 100%
  );
  color: #ff6b6b;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.orders-btn--cancel:hover {
  color: #fff;
  text-decoration: none;
  border-color: rgba(255, 90, 90, 0.75);
  background: linear-gradient(
    180deg,
    rgba(255, 59, 59, 0.38) 0%,
    rgba(255, 59, 59, 0.2) 100%
  );
}

.orders-btn.is-disabled,
.orders-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.order-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.orders-action-text {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
  text-transform: capitalize;
}

.orders-td-order {
  text-align: center;
}

.orders-empty-state {
  padding: 48px 28px !important;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  border-bottom: none !important;
}

.orders-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.orders-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.orders-pagination li.is-active a {
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.copy-feedback-tooltip {
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.orders-hover-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: min(420px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(14, 7, 30, 0.96);
  border: 1px solid rgba(202, 35, 231, 0.55);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.orders-page .modal-content {
  background: rgba(14, 7, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
}

.orders-page .modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.orders-page .modal-title {
  color: #fff;
}

.orders-page .modal-header .close {
  color: #fff;
  opacity: 0.8;
  text-shadow: none;
}

.orders-page .modal-body .form-control[disabled] {
  background: rgba(121, 121, 121, 0.16);
  border: none;
  color: #f5f6f7;
  opacity: 1;
}

@media (min-width: 769px) {
  /* Beat Bootstrap `.table { width: 100% }` so wide tables scroll inside the card */
  .orders-table-card.table-responsive > .orders-table.table {
    width: max-content;
    min-width: max(100%, 1200px);
    max-width: none;
  }

  .orders-table > thead > tr > th.orders-th-truncate {
    max-width: 110px;
  }

  .orders-tooltip-target.is-truncated {
    cursor: help;
  }
}

@media (max-width: 1200px) {
  .orders-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .orders-search {
    width: 100%;
  }
}

.orders-mobile-copy-bar {
  display: none;
}

@media (max-width: 768px) {
  .orders-toolbar {
    padding: 14px;
    border-radius: 12px;
  }

  .orders-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }

  .orders-filter {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding-right: 10px;
    justify-content: flex-start;
  }

  .orders-filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .orders-filter-icon {
    width: 34px;
    height: 34px;
    padding: 5px;
  }

  .orders-filter-icon img {
    width: 20px;
    height: 20px;
  }

  .orders-table-card {
    border-radius: 16px;
    background: transparent;
    overflow: visible;
  }

  .orders-table {
    min-width: 0;
  }

  .orders-table > thead {
    display: none;
  }

  .orders-table,
  .orders-table > tbody {
    display: block;
    width: 100%;
  }

  .orders-table > tbody > tr.orders-row {
    display: block;
    margin-bottom: 14px;
    padding: 4px 0;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(14, 7, 30, 0.68);
    overflow: hidden;
  }

  .orders-table > tbody > tr.orders-row > td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    width: 100% !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .orders-table > tbody > tr.orders-row > td:last-child {
    border-bottom: 0;
  }

  .orders-table > tbody > tr.orders-row > td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 120px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
  }

  .orders-cell-link,
  .orders-cell-service,
  .orders-cell-truncate {
    max-width: none;
  }

  .orders-link-text {
    white-space: normal;
    -webkit-text-fill-color: #da32f7;
    color: #da32f7;
    background: none;
  }

  .orders-table > tbody > tr.orders-row > td.orders-td-service {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .orders-table > tbody > tr.orders-row > td.orders-td-service::before {
    flex: none;
    max-width: none;
    width: 100%;
  }

  .orders-td-service .orders-cell-service {
    width: 100%;
    max-width: none;
  }

  .orders-td-service .orders-cell-service-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
  }

  .orders-table > tbody > tr.orders-row > td.orders-td-status,
  .orders-table > tbody > tr.orders-row > td.orders-td-order {
    align-items: center;
    text-align: left;
  }

  .orders-table > tbody > tr.orders-row > td.orders-td-status::before,
  .orders-table > tbody > tr.orders-row > td.orders-td-order::before {
    text-align: left;
    align-self: center;
  }

  .orders-td-status .orders-cell-status,
  .orders-td-order .orders-cell-order {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
  }

  .orders-td-order .orders-cell-order {
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
  }

  .orders-td-order .order-actions {
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
  }

  .orders-td-order .orders-action-text {
    width: auto;
    max-width: 100%;
    text-align: right;
  }

  .orders-td-order .orders-btn--cancel {
    align-self: flex-end;
  }

  .orders-btn--again {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    flex-shrink: 0;
    padding-left: 12px;
    padding-right: 12px;
  }

  .orders-empty-state {
    display: block !important;
  }

  .orders-empty-state::before {
    display: none;
  }

  .orders-page.has-selection {
    padding-bottom: 80px;
  }

  .orders-mobile-copy-bar:not([hidden]) {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 1050;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 32px);
    padding: 10px 14px 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(18, 8, 32, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    transform: translateX(-50%);
    box-sizing: border-box;
  }

  .orders-mobile-copy-count {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.72);
    white-space: nowrap;
  }

  .orders-mobile-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 8px 16px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(
      105deg,
      #ca23e7 0.37%,
      rgba(152, 167, 255, 0.75) 99%
    );
    color: #fff;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
  }

  .orders-mobile-copy-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .orders-mobile-copy-btn img {
    display: block;
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
  }

  .orders-mobile-copy-btn.is-copied {
    background: linear-gradient(96deg, #39dd0b 0%, #7dff6a 100%);
  }
}

[dir="rtl"] .orders-filter {
  padding: 4px 4px 4px 12px;
}

[dir="rtl"] .orders-search {
  padding: 8px 16px 8px 8px;
}

[dir="rtl"] .orders-table > thead > tr > th,
[dir="rtl"] .orders-table > tbody > tr > td {
  text-align: right;
}

[dir="rtl"] .orders-table > thead > tr > th:first-child,
[dir="rtl"] .orders-table > tbody > tr > td:first-child {
  padding-left: 12px;
  padding-right: 30px;
}

[dir="rtl"] .orders-table > thead > tr > th:last-child,
[dir="rtl"] .orders-table > tbody > tr > td:last-child {
  padding-right: 12px;
  padding-left: 24px;
}

/* --------------------------------------------------------------------------
   Drip Feed page (Figma 1130:52377) — extends orders table styles
   -------------------------------------------------------------------------- */

.dripfeed-table {
  min-width: 1280px;
}

.dripfeed-id-value {
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}

.dripfeed-service-id {
  background-image: linear-gradient(97deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dripfeed-service-name {
  color: #f5f6f7;
}

.dripfeed-runs {
  white-space: nowrap;
}

.dripfeed-runs-current {
  background-image: linear-gradient(92deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  font-weight: 500;
}

a.dripfeed-runs-current:hover {
  text-decoration: none;
  opacity: 0.88;
}

.dripfeed-runs-sep,
.dripfeed-runs-all {
  color: #f5f6f7;
}

.dripfeed-status-cell {
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width: 768px) {
  .dripfeed-table {
    min-width: 0;
  }

  .dripfeed-page .dripfeed-service-text {
    white-space: normal;
    word-break: break-word;
  }

  .dripfeed-page .dripfeed-service-id,
  .dripfeed-page .dripfeed-service-name {
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Refill page — extends orders table styles
   -------------------------------------------------------------------------- */

.refill-table {
  min-width: 960px;
}

.refill-order-link {
  background-image: linear-gradient(92deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-decoration: none;
  font-weight: 500;
}

a.refill-order-link:hover {
  text-decoration: none;
  opacity: 0.88;
}

.refill-service-id {
  background-image: linear-gradient(97deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.refill-service-name {
  color: #f5f6f7;
}

@media (max-width: 768px) {
  .refill-table {
    min-width: 0;
  }

  .refill-page .orders-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refill-page .refill-service-id,
  .refill-page .refill-service-name {
    white-space: normal;
    word-break: break-word;
  }
}

/* --------------------------------------------------------------------------
   Giveaway page
   -------------------------------------------------------------------------- */

body:has(.giveaway-page) .page-hero-content {
  gap: 8px;
  padding: 22px 36px;
}

body:has(.giveaway-page) .page-hero-title {
  color: #fafafb;
}

body:has(.giveaway-page) .page-hero-text {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.giveaway-page {
  display: flex;
  flex-direction: column;
  gap: 56px;
  width: 100%;
}

.giveaway-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  width: 100%;
}

.giveaway-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 28px 24px;
  border-radius: 16px;
  border: none;
  background: linear-gradient(
    271deg,
    rgba(70, 31, 93, 0.5) 7%,
    rgba(35, 27, 79, 0.5) 108%
  );
  box-sizing: border-box;
  min-height: 260px;
  overflow: hidden;
}

/* Soft glow — top-left corner only */
.giveaway-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 12%,
    transparent 28%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Soft glow — bottom-right corner only */
.giveaway-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 72%,
    rgba(255, 255, 255, 0.22) 88%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.giveaway-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.giveaway-card-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
}

.giveaway-brand-icon {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
}

.giveaway-brand-name {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #ff3a3a;
}

.giveaway-brand-name--linkedin {
  color: #069;
  font-size: 24px;
}

.giveaway-brand-logo {
  display: block;
  width: 128px;
  height: 44px;
  object-fit: contain;
}

.giveaway-brand-logo--trustpilot {
  width: 208px;
  height: 48px;
}

.giveaway-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.giveaway-linkedin-icon {
  position: relative;
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.giveaway-linkedin-icon > img:first-child {
  display: block;
  width: 40px;
  height: 40px;
}

.giveaway-linkedin-fg {
  position: absolute;
  inset: 6px;
  width: 28px;
  height: 28px;
}

.giveaway-card-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.giveaway-card-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.giveaway-card-reward {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  background-image: linear-gradient(94deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.giveaway-card-btn {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 6px 28px;
  border-radius: 8px;
  background: linear-gradient(
    131deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.giveaway-card-btn:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  transform: translateY(-1px);
}

.giveaway-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 36px;
  border-radius: 24px;
  background: rgba(92, 92, 92, 0.11);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-sizing: border-box;
}

.giveaway-steps-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 420px;
  text-align: center;
}

.giveaway-steps-heading h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.giveaway-steps-heading h2 span {
  background-image: linear-gradient(102deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.giveaway-steps-heading p {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.giveaway-steps-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  flex-wrap: nowrap;
}

.giveaway-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: min(324px, 100%);
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(
    271deg,
    rgba(38, 10, 56, 0.5) 7%,
    rgba(76, 18, 111, 0.5) 108%
  );
  box-sizing: border-box;
}

.giveaway-step-num {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 58px;
  border-radius: 9px;
  border: none;
  background: rgba(84, 84, 84, 0.13);
  font-family: var(--font-sans);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.giveaway-step-num::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 12%,
    transparent 28%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.giveaway-step-num::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 72%,
    rgba(255, 255, 255, 0.22) 88%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.giveaway-step-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
}

.giveaway-step-connector {
  display: block;
  width: 155px;
  height: 11px;
  flex-shrink: 1;
  min-width: 40px;
  max-width: 155px;
}

.giveaway-details {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 34px;
  overflow: hidden;
  background: rgba(118, 118, 118, 0.09);
}

.giveaway-details-head {
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 24px 35px;
  background: linear-gradient(
    157deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  box-sizing: border-box;
}

.giveaway-details-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.giveaway-details-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  margin: 24px 32px 32px;
  padding: 30px;
  border-radius: 24px;
  border: 1px solid rgba(230, 230, 230, 0.16);
  background: rgba(14, 7, 30, 0.35);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-sizing: border-box;
}

.giveaway-guidelines {
  flex: 1 1 0;
  min-width: 0;
  max-width: 901px;
}

.giveaway-guidelines h3 {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.giveaway-guidelines-intro {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

.giveaway-guidelines-list {
  margin: 0;
  padding-left: 1.25em;
  color: #fafafb;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
}

.giveaway-guidelines-list li + li {
  margin-top: 0.35em;
}

.giveaway-guidelines-list strong {
  font-weight: 600;
  color: #fff;
}

.giveaway-accent {
  font-weight: 700;
  background-image: linear-gradient(93deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.giveaway-details-art {
  flex: 0 0 auto;
  width: min(467px, 100%);
  border-radius: 32px;
  overflow: hidden;
}

.giveaway-details-art img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 32px;
  object-fit: cover;
}

@media (max-width: 1200px) {
  .giveaway-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .giveaway-steps-flow {
    flex-wrap: wrap;
    justify-content: center;
  }

  .giveaway-step-connector {
    display: none;
  }

  .giveaway-details-body {
    flex-direction: column;
    gap: 28px;
    margin: 16px;
    padding: 20px;
  }
}

@media (max-width: 768px) {
  body:has(.giveaway-page) .page-hero-content {
    max-width: calc(100% - 150px);
    padding: 16px 12px 16px 18px;
  }

  body:has(.giveaway-page) .page-hero-text {
    font-size: 12px;
    line-height: 1.45;
    max-height: calc(1.45em * 3);
  }

  .giveaway-page {
    gap: 16px;
    padding-bottom: 8px;
  }

  .giveaway-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .giveaway-card {
    gap: 20px;
    min-height: 0;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .giveaway-card-top {
    gap: 20px;
  }

  .giveaway-card-reward {
    font-size: 18px;
  }

  .giveaway-brand-name {
    font-size: 18px;
  }

  .giveaway-brand-name--linkedin {
    font-size: 20px;
  }

  .giveaway-brand-logo {
    max-width: 100%;
    height: auto;
  }

  .giveaway-card-btn {
    min-height: 48px;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 12px;
  }

  .giveaway-steps {
    gap: 20px;
    padding: 20px 14px;
    border-radius: 16px;
  }

  .giveaway-steps-heading {
    gap: 12px;
    max-width: 100%;
  }

  .giveaway-steps-heading h2 {
    font-size: 22px;
  }

  .giveaway-steps-heading p {
    font-size: 14px;
  }

  .giveaway-steps-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .giveaway-step-connector {
    display: none;
  }

  .giveaway-step {
    width: 100%;
    gap: 16px;
    padding: 16px;
    border-radius: 14px;
  }

  .giveaway-step-num {
    width: 56px;
    height: 48px;
    font-size: 26px;
  }

  .giveaway-step-label {
    font-size: 16px;
    white-space: normal;
  }

  .giveaway-details {
    border-radius: 16px;
  }

  .giveaway-details-head {
    min-height: 56px;
    padding: 14px 16px;
  }

  .giveaway-details-head h2 {
    font-size: 16px;
  }

  .giveaway-details-body {
    flex-direction: column;
    gap: 16px;
    margin: 12px;
    padding: 14px;
    border-radius: 14px;
  }

  .giveaway-guidelines h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .giveaway-guidelines-intro,
  .giveaway-guidelines-list {
    font-size: 13px;
    line-height: 1.55;
  }

  .giveaway-details-art {
    width: 100%;
    border-radius: 14px;
  }

  .giveaway-details-art img {
    border-radius: 14px;
  }

  .giveaway-brand-logo--trustpilot {
    width: 170px;
    height: auto;
  }

  [dir="rtl"] .giveaway-steps-flow {
    flex-direction: column;
  }
}

[dir="rtl"] .giveaway-guidelines-list {
  padding-left: 0;
  padding-right: 1.25em;
}

[dir="rtl"] .giveaway-steps-flow {
  flex-direction: row-reverse;
}

/* --------------------------------------------------------------------------
   API page
   -------------------------------------------------------------------------- */

.page-hero--api .page-hero-content {
  max-width: min(48%, 560px);
}

.page-hero-cta {
  position: absolute;
  top: 50%;
  left: 69.25%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 278px;
  min-height: 54px;
  padding: 10px 20px;
  border-radius: 16px;
  background: linear-gradient(
    119deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transform: translateY(-50%);
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.page-hero-cta:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  transform: translateY(calc(-50% - 1px));
}

.api-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.api-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(14, 7, 30, 0.68);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-sizing: border-box;
}

.api-method-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 20px;
  gap: 30px;
}

.api-method-card .api-card-header {
  border-radius: 16px;
}

.api-method-card .api-card-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  border: none;
  background: transparent;
}

.api-card-header {
  display: flex;
  align-items: center;
  min-height: 83px;
  padding: 20px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(
    154deg,
    rgba(202, 35, 231, 0.14) 0.37%,
    rgba(152, 167, 255, 0.105) 99%
  );
  box-sizing: border-box;
}

.api-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.48;
  color: #fff;
}

.api-card-body {
  padding: 20px;
  box-sizing: border-box;
}

.api-overview-card .api-card-body {
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: rgba(14, 7, 30, 0.68);
}

.api-info-rows,
.api-params-body,
.api-params-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.api-info-row,
.api-param-row,
.api-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 20px;
  width: 100%;
}

.api-info-label,
.api-info-value,
.api-param-name,
.api-param-desc {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.api-table-head span {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
  letter-spacing: 0.02em;
}

.api-info-value,
.api-param-desc,
.api-table-head span:last-child {
  text-align: right;
}

.api-link {
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(103deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.api-link:hover {
  text-decoration: underline;
  -webkit-text-fill-color: transparent;
}

.api-row-divider {
  width: 100%;
  height: 0;
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.16);
}

.api-row-divider--params {
  margin: 0;
}

.api-table-head {
  margin-bottom: 0;
}

.api-type-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 360px;
}

.api-type-select-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #f5f6f7;
}

.api-type-select-field {
  position: relative;
  width: 100%;
}

.api-type-select,
.api-page .api-type-select.form-control {
  width: 100%;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 12px 44px 12px 16px;
  border: none;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16) !important;
  color: #f5f6f7 !important;
  -webkit-text-fill-color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 14px;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
}

.api-type-select-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
}

.api-type-select-arrow img {
  display: block;
  width: 12px;
  height: 8px;
}

.api-example {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
  width: 100%;
}

.api-example-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #f5f6f7;
}

.api-code-wrap {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
  overflow-x: auto;
}

.api-code-block {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: #ebecef;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.api-php-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  padding: 10px 20px;
  border-radius: 16px;
  background: linear-gradient(
    119deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.api-php-cta:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .page-hero-cta {
    left: auto;
    right: max(220px, 18%);
    min-width: 220px;
    font-size: 15px;
  }

  .page-hero--api .page-hero-content {
    max-width: min(50%, 480px);
  }
}

@media (max-width: 768px) {
  /* API hero — same layout as other pages (no PHP CTA in hero) */
  .page-hero--api .page-hero-content {
    max-width: calc(100% - 150px);
    min-height: var(--page-hero-height);
    padding-bottom: 16px;
  }

  .page-hero--api .page-hero-cta {
    display: none !important;
  }

  .api-php-cta {
    min-height: 48px;
    padding: 10px 16px;
    font-size: 16px;
    border-radius: 12px;
  }

  .page-hero-cta {
    top: auto;
    left: 16px;
    right: 16px;
    bottom: 16px;
    transform: none;
    min-width: 0;
    width: calc(100% - 32px);
  }

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

  .api-page {
    gap: 16px;
    padding-bottom: 16px;
  }

  .api-card {
    border-radius: 14px;
  }

  .api-card-body {
    padding: 14px;
  }

  .api-card-header {
    min-height: 56px;
    padding: 14px 16px;
    border-radius: 14px 14px 0 0;
  }

  .api-method-card .api-card-header {
    border-radius: 14px;
  }

  .api-card-title {
    font-size: 18px;
    line-height: 1.35;
  }

  .api-info-rows,
  .api-params-body,
  .api-params-panel {
    gap: 8px;
  }

  .api-info-row,
  .api-param-row,
  .api-table-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .api-info-label,
  .api-info-value,
  .api-param-name,
  .api-param-desc {
    font-size: 14px;
    line-height: 1.45;
  }

  .api-table-head span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.58);
  }

  .api-info-value,
  .api-param-desc,
  .api-table-head span:last-child {
    text-align: left;
    word-break: break-word;
  }

  .api-type-select-wrap {
    max-width: none;
    margin-bottom: 14px;
    gap: 8px;
  }

  .api-page .api-type-select.form-control {
    min-height: 48px;
    height: 48px;
    font-size: 15px;
    padding: 10px 44px 10px 14px;
  }

  .api-method-card {
    padding: 12px;
    gap: 16px;
  }

  .api-example {
    margin-top: 16px;
    gap: 8px;
  }

  .api-example-title {
    font-size: 16px;
  }

  .api-code-wrap {
    padding: 12px 14px;
  }

  .api-code-block {
    font-size: 13px;
    line-height: 1.45;
  }
}

[dir="rtl"] .api-info-value,
[dir="rtl"] .api-param-desc,
[dir="rtl"] .api-table-head span:last-child {
  text-align: left;
}

[dir="rtl"] .api-type-select,
[dir="rtl"] .api-page .api-type-select.form-control {
  padding: 12px 16px 12px 44px;
}

[dir="rtl"] .api-type-select-arrow {
  right: auto;
  left: 16px;
}

[dir="rtl"] .page-hero-cta {
  left: 24%;
  right: auto;
}

/* --------------------------------------------------------------------------
   Account page
   -------------------------------------------------------------------------- */

.account-page {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 100%;
}

.account-alerts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-alerts:empty {
  display: none;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  align-items: stretch;
}

.account-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
  padding: 28px 20px 34px;
  border-radius: 18px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
}

.account-card--full {
  width: 100%;
}

.account-card-head {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.account-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.account-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 30px;
  width: 100%;
  min-height: 0;
}

.account-form,
.account-2fa-approve {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 30px;
  width: 100%;
}

.account-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.account-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.account-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  width: 100%;
}

.account-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.account-password-wrap {
  position: relative;
  width: 100%;
}

.account-password-wrap .account-control {
  padding-right: 48px;
}

.account-password-toggle {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.account-password-toggle:hover,
.account-password-toggle:focus {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.account-password-icon {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.account-password-icon--hide {
  display: none;
}

.account-password-toggle.is-visible .account-password-icon--show {
  display: none;
}

.account-password-toggle.is-visible .account-password-icon--hide {
  display: block;
}

.account-control,
.account-page .account-control.form-control {
  display: block;
  width: 100%;
  min-height: 56px;
  height: 56px;
  margin: 0;
  padding: 16px 18px;
  border: none;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  color: #f5f6f7 !important;
  -webkit-text-fill-color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none !important;
  outline: none;
  box-sizing: border-box;
}

.account-control--static {
  display: flex;
  align-items: center;
}

.account-control--textarea {
  height: auto;
  min-height: 140px;
  resize: vertical;
  line-height: 1.5;
}

.account-select-wrap {
  position: relative;
  width: 100%;
}

.account-control--select,
.account-page .account-control--select.form-control,
.account-page select.account-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
  color-scheme: dark;
}

.account-control--select option,
.account-page .account-control--select.form-control option,
.account-page select.account-control option {
  background-color: #14091f;
  color: #f5f6f7;
}

.account-select-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
}

.account-select-arrow img {
  display: block;
  width: 12px;
  height: 8px;
}

.account-control:focus,
.account-control:focus-visible,
.account-page .account-control.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.45) !important;
}

.account-control::placeholder {
  color: rgba(245, 246, 247, 0.45);
  -webkit-text-fill-color: rgba(245, 246, 247, 0.45);
}

.account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: auto;
  padding: 8px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1.35px 4.05px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.account-btn:hover,
.account-btn:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  outline: none;
  transform: translateY(-1px);
}

.account-2fa-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-sizing: border-box;
}

.account-2fa-info-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background-image: linear-gradient(
    150deg,
    rgba(218, 50, 247, 0.81) 2%,
    #8f6aff 19%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.account-2fa-info-text,
.account-2fa-note {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #d3d3d3;
  opacity: 0.85;
}

.account-page .alert.alert-success,
.account-change-email-modal .alert.alert-success {
  border-color: rgba(72, 199, 116, 0.35);
  background-color: rgba(72, 199, 116, 0.12);
  color: #fff;
}

.account-page .alert.alert-danger,
.account-change-email-modal .alert.alert-danger {
  border-color: rgba(255, 77, 77, 0.35);
  background-color: rgba(255, 77, 77, 0.12);
  color: #fff;
}

.account-change-email-modal {
  z-index: 10120 !important;
}

.account-change-email-modal .modal-dialog {
  width: min(720px, calc(100% - 48px));
  margin: 56px auto 40px;
  overflow: visible;
  z-index: 10121;
}

body:has(#changeEmailModal.in) .modal-backdrop,
body:has(#changeEmailModal.show) .modal-backdrop {
  z-index: 10110 !important;
}

.account-change-email-modal.in,
.account-change-email-modal.show {
  overflow-x: hidden;
  overflow-y: auto;
}

.account-change-email-card {
  position: relative;
  overflow: visible;
  padding: 28px 24px 34px;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(14, 7, 30, 0.64);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: none;
  box-sizing: border-box;
}

.account-change-email-head {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 16px;
  margin: 0;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.account-change-email-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.account-change-email-close {
  position: absolute;
  top: -22px;
  right: -18px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 47px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(202, 35, 231, 0.28);
}

.account-change-email-close svg {
  display: block;
  width: 24px;
  height: 24px;
}

.account-change-email-close:hover,
.account-change-email-close:focus {
  opacity: 0.94;
  outline: none;
}

.account-change-email-body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 30px 0 0;
}

.account-change-email-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.account-change-email-modal .account-control,
.account-change-email-modal .account-control--static,
.account-change-email-modal .account-page .account-control.form-control {
  height: 56px;
  min-height: 56px;
  padding: 16px 18px;
  border: none;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  box-shadow: none;
}

.account-change-email-modal .account-control::placeholder {
  color: rgba(245, 246, 247, 0.55);
}

.account-change-email-modal .account-control:focus {
  border: none;
  outline: none;
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.45);
  background: rgba(121, 121, 121, 0.22);
}

.account-change-email-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  height: 56px;
  padding: 8px 24px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    144deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition:
    opacity 0.2s ease,
    transform 0.15s ease;
}

.account-change-email-submit:hover,
.account-change-email-submit:focus {
  opacity: 0.94;
  outline: none;
  transform: translateY(-1px);
}

@media (max-width: 991.98px) {
  .account-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .account-page {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .account-page {
    gap: 16px;
  }

  .account-grid {
    gap: 16px;
  }

  .account-card {
    padding: 20px 14px 24px;
    gap: 16px;
    border-radius: 16px;
  }

  .account-card-head {
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  .account-card-title {
    font-size: 16px;
  }

  .account-card-body,
  .account-form,
  .account-2fa-approve {
    gap: 16px;
  }

  .account-fields {
    gap: 12px;
  }

  .account-field {
    gap: 8px;
  }

  .account-field-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .account-label {
    font-size: 16px;
  }

  .account-control,
  .account-page .account-control.form-control,
  .account-control--static {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .account-control--textarea {
    min-height: 112px;
    height: auto !important;
    max-height: none;
    padding: 12px 14px;
  }

  .account-password-wrap .account-control {
    padding-right: 44px;
  }

  .account-password-toggle {
    right: 10px;
  }

  .account-btn {
    min-height: 48px;
    height: 48px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
  }

  .account-2fa-info {
    padding: 12px 14px;
  }

  .account-2fa-info-title {
    font-size: 15px;
  }

  .account-2fa-info-text,
  .account-2fa-note {
    font-size: 13px;
  }

  .account-change-email-modal .modal-dialog {
    width: calc(100% - 24px);
    margin: 40px auto 24px;
  }

  .account-change-email-card {
    padding: 22px 16px 24px;
    border-radius: 16px;
  }

  .account-change-email-close {
    top: -16px;
    right: -8px;
    width: 42px;
    height: 42px;
  }

  .account-change-email-head {
    min-height: 56px;
    padding: 10px 14px;
  }

  .account-change-email-head h2 {
    font-size: 16px;
  }

  .account-change-email-body {
    gap: 16px;
    padding-top: 16px;
  }

  .account-change-email-fields {
    gap: 12px;
  }

  .account-change-email-modal .account-control,
  .account-change-email-modal .account-control--static,
  .account-change-email-modal .account-page .account-control.form-control {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px;
    padding: 12px 14px;
  }

  .account-change-email-submit {
    min-height: 48px;
    height: 48px;
    font-size: 16px;
    border-radius: 12px;
  }
}

[dir="rtl"] .account-control--select,
[dir="rtl"] .account-page .account-control--select.form-control {
  padding-right: 18px;
  padding-left: 44px;
}

[dir="rtl"] .account-select-arrow {
  right: auto;
  left: 18px;
}

/* --------------------------------------------------------------------------
   Notifications page
   -------------------------------------------------------------------------- */

.notifications-page {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}

.notifications-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
  align-items: stretch;
}

.notifications-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

.notifications-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
  padding: 28px 20px 34px;
  border-radius: 18px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
}

.notifications-card--full {
  width: 100%;
}

.notifications-card-head {
  display: flex;
  align-items: center;
  min-height: 80px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.notifications-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: #fff;
}

.notifications-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  width: 100%;
  min-height: 0;
}

.notifications-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 24px;
  width: 100%;
}

.notifications-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-sizing: border-box;
}

.notifications-info-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: rgba(245, 246, 247, 0.85);
}

.notifications-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: auto;
  padding: 8px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(
    145deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-shadow: 0 1.35px 4.05px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.notifications-btn:hover,
.notifications-btn:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  outline: none;
  transform: translateY(-1px);
}

.notifications-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  background: rgba(121, 121, 121, 0.12);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
}

.notifications-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  background: transparent;
}

.notifications-table > thead > tr > th {
  padding: 16px 18px;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(245, 246, 247, 0.72);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.notifications-table > thead > tr > th:not(:first-child),
.notifications-table > tbody > tr > td:not(:first-child) {
  text-align: center;
}

.notifications-table > tbody > tr > td {
  padding: 18px;
  border: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  background: transparent;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
}

.notifications-table > tbody > tr:last-child > td {
  border-bottom: none;
}

.notifications-table-name {
  min-width: 180px;
}

.notifications-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.notifications-check.is-disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.notifications-check-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.notifications-check-box {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(14, 7, 30, 0.55);
  box-sizing: border-box;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  position: relative;
}

.notifications-check-box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.notifications-check-input:checked + .notifications-check-box {
  border-color: transparent;
  background: linear-gradient(
    145deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.85) 99%
  );
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.25);
}

.notifications-check-input:checked + .notifications-check-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.notifications-check-input:focus-visible + .notifications-check-box {
  box-shadow: 0 0 0 2px rgba(202, 35, 231, 0.45);
}

.notifications-page .alert {
  margin: 0;
}

@media (max-width: 900px) {
  .notifications-grid {
    grid-template-columns: 1fr;
  }

  .notifications-page {
    gap: 20px;
  }

  .notifications-card {
    gap: 22px;
    padding: 20px 14px 24px;
  }

  .notifications-card-head {
    min-height: 64px;
  }

  .notifications-card-title {
    font-size: 18px;
  }

  .notifications-btn {
    min-height: 52px;
    font-size: 16px;
  }

  .notifications-table > thead > tr > th,
  .notifications-table > tbody > tr > td {
    padding: 14px 12px;
  }
}

@media (max-width: 768px) {
  .notifications-page {
    gap: 16px;
    padding-bottom: 8px;
  }

  .notifications-grid {
    gap: 16px;
  }

  .notifications-card {
    gap: 16px;
    padding: 20px 14px 24px;
    border-radius: 16px;
  }

  .notifications-card-head {
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  .notifications-card-title {
    font-size: 16px;
  }

  .notifications-card-body,
  .notifications-form {
    gap: 16px;
  }

  .notifications-info {
    padding: 12px 14px;
    border-radius: 10px;
  }

  .notifications-info-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .notifications-btn {
    min-height: 48px;
    height: 48px;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 16px;
  }

  .notifications-table-wrap {
    border-radius: 12px;
    -webkit-overflow-scrolling: touch;
  }

  .notifications-table > thead > tr > th {
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.35;
  }

  .notifications-table > thead > tr > th:first-child {
    white-space: normal;
    min-width: 0;
  }

  .notifications-table > tbody > tr > td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .notifications-table-name {
    min-width: 0;
    max-width: 42vw;
    white-space: normal;
    word-break: break-word;
    text-align: left;
  }

  .notifications-check-box {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .notifications-check-box::after {
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
  }
}

[dir="rtl"] .notifications-table > thead > tr > th,
[dir="rtl"] .notifications-table > tbody > tr > td {
  text-align: right;
}

[dir="rtl"] .notifications-table > thead > tr > th:not(:first-child),
[dir="rtl"] .notifications-table > tbody > tr > td:not(:first-child) {
  text-align: center;
}

[dir="rtl"] .notifications-check-box::after {
  left: auto;
  right: 7px;
}

@media (max-width: 768px) {
  [dir="rtl"] .notifications-table-name {
    text-align: right;
  }

  [dir="rtl"] .notifications-check-box::after {
    right: 6px;
  }
}

/* --------------------------------------------------------------------------
   Child Panel page
   -------------------------------------------------------------------------- */

.child-panel-page {
  display: flex;
  flex-direction: column;
  gap: 38px;
  width: 100%;
}

.child-panel-layout {
  display: grid;
  grid-template-columns: minmax(0, 908fr) minmax(0, 654fr);
  gap: 38px;
  align-items: start;
  width: 100%;
}

.child-panel-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  min-width: 0;
  padding: 28px 20px 34px;
  border-radius: 24px;
  background: #0d061c;
  border: 0.5px solid rgba(255, 255, 255, 0.29);
  box-sizing: border-box;
}

.child-panel-card--instruction {
  gap: 16px;
  padding-bottom: 24px;
  border-radius: 28px;
  border-color: rgba(255, 255, 255, 0.25);
}

.child-panel-card--wide {
  width: 100%;
}

.child-panel-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 74px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-sizing: border-box;
}

.child-panel-card-head--instruction {
  min-height: 72px;
  padding: 16px 12px;
  border-radius: 14px;
}

.child-panel-instruction-icon {
  display: block;
  width: 25px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.child-panel-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.48;
  color: #fff;
}

.child-panel-card-title--sm {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #f5f6f7;
}

.child-panel-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.child-panel-field {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.child-panel-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.child-panel-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.child-panel-input,
.child-panel-page .child-panel-input.form-control {
  display: block;
  width: 100%;
  min-height: 56px;
  height: 56px;
  margin: 0;
  padding: 16px 18px;
  border: none;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16) !important;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  color: #fafafb !important;
  -webkit-text-fill-color: #fafafb;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: none !important;
  outline: none;
  box-sizing: border-box;
}

.child-panel-page .child-panel-field:first-child .child-panel-input,
.child-panel-page .child-panel-select {
  min-height: 64px;
  height: 64px;
}

.child-panel-input::placeholder {
  color: #d2d2d2;
  -webkit-text-fill-color: #d2d2d2;
}

.child-panel-input:focus,
.child-panel-page .child-panel-input.form-control:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.45) !important;
}

.child-panel-select-wrap {
  position: relative;
  width: 100%;
}

.child-panel-select,
.child-panel-page .child-panel-select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  color: #d2d2d2 !important;
  -webkit-text-fill-color: #d2d2d2;
  cursor: pointer;
}

.child-panel-select-arrow {
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  pointer-events: none;
  line-height: 0;
}

.child-panel-select-arrow img {
  display: block;
  width: 12px;
  height: 8px;
}

.child-panel-select-wrap:has(.select2-container) .child-panel-select-arrow {
  display: none;
}

.child-panel-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  margin-top: 6px;
  padding: 8px 24px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(
    149deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  text-shadow: 0 1.35px 4.05px rgba(14, 35, 22, 0.2);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.child-panel-submit:hover,
.child-panel-submit:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.94;
  outline: none;
  transform: translateY(-1px);
}

.child-panel-instruction-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.child-panel-ns {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(98, 98, 203, 0.13);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-sizing: border-box;
}

.child-panel-ns-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #f5f6f7;
}

.child-panel-ns-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #ebecef;
}

.child-panel-instruction-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 18px 18px 14px;
  border-radius: 16px;
  background: rgba(98, 98, 203, 0.13);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-sizing: border-box;
}

.child-panel-instruction-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.child-panel-instruction-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background-image: linear-gradient(116deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.child-panel-instruction-copy p,
.child-panel-instruction-list,
.child-panel-instruction-features {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  color: #c1c4cc;
}

.child-panel-instruction-list {
  padding-left: 1.2em;
  list-style: decimal;
}

.child-panel-instruction-list li + li,
.child-panel-instruction-features li + li {
  margin-top: 4px;
}

.child-panel-instruction-features {
  padding-left: 0;
  list-style: none;
}

.child-panel-instruction-features li {
  position: relative;
  padding-left: 1.4em;
}

.child-panel-instruction-features li::before {
  content: "⭐";
  position: absolute;
  left: 0;
  top: 0;
}

.child-panel-instruction-thanks {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background-image: linear-gradient(114deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.child-panel-cms {
  color: #c1c4cc;
  font-size: 14px;
  line-height: 1.5;
}

.child-panel-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: rgba(83, 80, 89, 0.11);
  box-sizing: border-box;
}

.child-panel-faq-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.child-panel-faq-item {
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(128, 128, 128, 0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.child-panel-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 13px 20px;
  border: none;
  background: transparent;
  color: #f5f6f7;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.child-panel-faq-header:focus {
  outline: none;
}

.child-panel-faq .faq-question {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.child-panel-faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.child-panel-faq-plus {
  display: block;
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.child-panel-faq-item.is-open .child-panel-faq-plus {
  transform: rotate(45deg);
}

.child-panel-faq .faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.child-panel-faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.child-panel-faq .faq-answer {
  overflow: hidden;
}

.child-panel-faq .faq-answer p {
  margin: 0;
  padding: 0 20px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #c1c4cc;
}

@media (max-width: 1100px) {
  .child-panel-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .child-panel-page {
    gap: 16px;
    padding-bottom: 16px;
  }

  .child-panel-page > .alert {
    margin-bottom: 0;
    font-size: 14px;
    border-radius: 12px;
  }

  .child-panel-layout {
    gap: 16px;
  }

  .child-panel-card {
    padding: 16px 14px 20px;
    gap: 16px;
    border-radius: 16px;
  }

  .child-panel-card--instruction {
    border-radius: 16px;
    padding-bottom: 16px;
  }

  .child-panel-card-head {
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 12px;
  }

  .child-panel-card-head--instruction {
    min-height: 56px;
    padding: 10px 14px;
  }

  .child-panel-card-title {
    font-size: 18px;
  }

  .child-panel-card-title--sm {
    font-size: 17px;
  }

  .child-panel-form {
    gap: 16px;
  }

  .child-panel-field {
    gap: 8px;
  }

  .child-panel-field-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .child-panel-label {
    font-size: 16px;
  }

  .child-panel-input,
  .child-panel-page .child-panel-input.form-control,
  .child-panel-page .child-panel-field:first-child .child-panel-input,
  .child-panel-page .child-panel-select,
  .child-panel-page .child-panel-select.form-control {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 48px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
  }

  .child-panel-page #createorderform-currency + .select2-container {
    width: 100% !important;
  }

  .child-panel-page
    #createorderform-currency
    + .select2-container
    .select2-selection--single {
    min-height: 48px !important;
    height: 48px !important;
    border: none !important;
    border-radius: 10px !important;
    background: rgba(121, 121, 121, 0.16) !important;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    box-shadow: none !important;
  }

  .child-panel-page
    #createorderform-currency
    + .select2-container
    .select2-selection--single
    .select2-selection__rendered {
    padding: 12px 14px;
    line-height: 24px;
    font-size: 14px;
    color: #d2d2d2 !important;
  }

  .child-panel-page
    #createorderform-currency
    + .select2-container
    .select2-selection--single
    .select2-selection__arrow {
    height: 48px;
    right: 12px;
  }

  .child-panel-select-arrow {
    right: 14px;
  }

  .child-panel-submit {
    min-height: 48px;
    height: 48px;
    margin-top: 0;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 16px;
  }

  .child-panel-ns {
    padding: 12px 14px;
    border-radius: 12px;
  }

  .child-panel-ns-title {
    font-size: 15px;
  }

  .child-panel-ns-value {
    font-size: 13px;
    word-break: break-all;
  }

  .child-panel-instruction-copy {
    padding: 14px;
    border-radius: 12px;
  }

  .child-panel-instruction-heading {
    font-size: 15px;
  }

  .child-panel-instruction-copy p,
  .child-panel-instruction-list,
  .child-panel-instruction-features {
    font-size: 13px;
    line-height: 1.45;
  }

  .child-panel-instruction-thanks {
    font-size: 15px;
  }

  .child-panel-cms {
    font-size: 13px;
  }

  .child-panel-faq {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
  }

  .child-panel-faq-col {
    gap: 10px;
  }

  .child-panel-faq-header {
    min-height: 0;
    padding: 12px 14px;
    gap: 10px;
  }

  .child-panel-faq .faq-question {
    font-size: 14px;
    line-height: 1.4;
  }

  .child-panel-faq-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .child-panel-faq-plus {
    width: 16px;
    height: 16px;
  }

  .child-panel-faq .faq-answer p {
    padding: 0 14px 12px;
    font-size: 13px;
  }
}

[dir="rtl"] .child-panel-select,
[dir="rtl"] .child-panel-page .child-panel-select.form-control {
  padding-right: 18px;
  padding-left: 48px;
}

[dir="rtl"] .child-panel-select-arrow {
  right: auto;
  left: 18px;
}

[dir="rtl"] .child-panel-instruction-list {
  padding-left: 0;
  padding-right: 1.2em;
}

[dir="rtl"] .child-panel-instruction-features li {
  padding-left: 0;
  padding-right: 1.4em;
}

[dir="rtl"] .child-panel-instruction-features li::before {
  left: auto;
  right: 0;
}

/* --------------------------------------------------------------------------
   Affiliates page
   -------------------------------------------------------------------------- */

.affiliates-page {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

.affiliates-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}

.affiliates-stat-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 120px;
  padding: 20px;
  overflow: hidden;
  border-radius: 16px;
  background-color: #1b0f2e;
  background-image: var(--img-affiliates-bg);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  opacity: 0.95;
  box-sizing: border-box;
}

.affiliates-stat-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.affiliates-stat-label {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
}

.affiliates-stat-value {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #d2d2d2;
  word-break: break-word;
}

.affiliates-stat-link-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.affiliates-stat-value--link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliates-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.37);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.affiliates-copy-btn img {
  display: block;
  width: 20px;
  height: 20px;
}

.affiliates-copy-btn.is-copied {
  border-color: rgba(202, 35, 231, 0.8);
  box-shadow: 0 0 0 1px rgba(202, 35, 231, 0.35);
}

.affiliates-request-payout {
  display: inline-flex;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(103deg, #da32f7 9%, #8f6aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.affiliates-request-payout:hover {
  text-decoration: underline;
  -webkit-text-fill-color: transparent;
}

.affiliates-stat-icon-wrap {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.31);
  box-sizing: border-box;
}

.affiliates-stat-icon {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.affiliates-cms-card {
  width: 100%;
  padding: 24px;
  border-radius: 18px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  color: #c1c4cc;
  font-size: 14px;
  line-height: 1.5;
}

.affiliates-how {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.affiliates-how-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.affiliates-how-line {
  display: block;
  width: 108px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #bb09da 40%, #8f6aff);
}

.affiliates-how-heading .affiliates-how-line:last-child {
  background: linear-gradient(90deg, #8f6aff, #bb09da 60%, transparent);
}

.affiliates-how-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  background-image: linear-gradient(95deg, #bb09da 1%, #8f6aff 98%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.affiliates-how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  width: 100%;
}

.affiliates-how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border-radius: 18px;
  background-color: #0f0a1e;
  background-image: var(--img-how-do-work-bg);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
}

.affiliates-how-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  min-height: 51px;
  padding: 12px 4px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
}

.affiliates-how-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #dfe0e4;
}

.affiliates-payouts {
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(14, 7, 30, 0.68);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

.affiliates-payouts-head {
  padding: 20px 24px;
  background: rgba(121, 121, 121, 0.16);
}

.affiliates-payouts-head h2 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  color: #fff;
}

.affiliates-payouts-body {
  padding: 8px 12px 16px;
  overflow-x: auto;
}

.affiliates-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}

.affiliates-table th,
.affiliates-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font-sans);
  font-size: 14px;
  color: #d2d2d2;
  text-align: left;
}

.affiliates-table th {
  color: #f5f6f7;
  font-weight: 600;
}

.affiliates-pagination {
  width: 100%;
}

.affiliates-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 16px;
  border-radius: 24px;
  background: #11081e;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-sizing: border-box;
}

.affiliates-faq-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.affiliates-faq-item {
  width: 100%;
  border-radius: 18px;
  background: rgba(79, 79, 79, 0.13);
  border: 0.8px solid transparent;
  box-sizing: border-box;
}

.affiliates-faq-item.is-open {
  border-color: rgba(104, 69, 212, 0.6);
}

.affiliates-faq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 70px;
  padding: 15px 20px;
  border: none;
  background: transparent;
  color: #ebecef;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.affiliates-faq-header:focus {
  outline: none;
}

.affiliates-faq .faq-question {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #ebecef;
}

.affiliates-faq-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 12px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.affiliates-faq-arrow {
  display: block;
  width: 26px;
  height: 26px;
  transition: transform 0.2s ease;
}

.affiliates-faq-item.is-open .affiliates-faq-arrow {
  transform: rotate(180deg);
}

.affiliates-faq .faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.2s ease;
}

.affiliates-faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.affiliates-faq .faq-answer {
  overflow: hidden;
  min-height: 0;
}

.affiliates-faq .faq-answer p {
  margin: 0;
  padding: 0 20px 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #c1c4cc;
}

@media (max-width: 1100px) {
  .affiliates-stats,
  .affiliates-how-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .affiliates-page {
    gap: 16px;
    padding-bottom: 16px;
  }

  .affiliates-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .affiliates-stat-card:first-child {
    grid-column: 1 / -1;
  }

  .affiliates-stat-card {
    min-height: 0;
    padding: 14px;
    border-radius: 14px;
    align-items: flex-start;
  }

  .affiliates-stat-label {
    font-size: 14px;
    line-height: 1.3;
  }

  .affiliates-stat-value {
    font-size: 13px;
  }

  .affiliates-stat-value--link {
    white-space: normal;
    word-break: break-all;
  }

  .affiliates-stat-link-row {
    align-items: flex-start;
  }

  .affiliates-copy-btn {
    width: 48px;
    height: 48px;
    border-radius: 10px;
  }

  .affiliates-copy-btn img {
    width: 20px;
    height: 20px;
  }

  .affiliates-stat-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  .affiliates-stat-icon {
    width: 22px;
    height: 22px;
  }

  .affiliates-request-payout {
    font-size: 12px;
  }

  .affiliates-how {
    gap: 16px;
    padding: 16px 14px;
    border-radius: 16px;
  }

  .affiliates-how-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .affiliates-how-title {
    font-size: 18px;
    white-space: normal;
  }

  .affiliates-how-line {
    width: 40px;
  }

  .affiliates-how-step {
    padding: 14px;
    border-radius: 14px;
    gap: 12px;
  }

  .affiliates-how-badge {
    width: auto;
    min-height: 0;
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 10px;
  }

  .affiliates-how-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .affiliates-cms-card {
    padding: 14px;
    border-radius: 14px;
    font-size: 13px;
  }

  .affiliates-payouts {
    border-radius: 16px;
  }

  .affiliates-payouts-head {
    padding: 14px 16px;
  }

  .affiliates-payouts-head h2 {
    font-size: 16px;
  }

  .affiliates-payouts-body {
    padding: 8px 10px 12px;
    overflow: visible;
  }

  .affiliates-table {
    min-width: 0;
  }

  .affiliates-table thead {
    display: none;
  }

  .affiliates-table,
  .affiliates-table tbody {
    display: block;
    width: 100%;
  }

  .affiliates-table tbody tr.affiliates-payout-row {
    display: block;
    margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(14, 7, 30, 0.68);
    overflow: hidden;
  }

  .affiliates-table tbody tr.affiliates-payout-row:last-child {
    margin-bottom: 0;
  }

  .affiliates-table tbody tr.affiliates-payout-row td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    text-align: right;
  }

  .affiliates-table tbody tr.affiliates-payout-row td:last-child {
    border-bottom: 0;
  }

  .affiliates-table tbody tr.affiliates-payout-row td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 120px;
    text-align: left;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  .affiliates-pagination .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .affiliates-faq {
    grid-template-columns: 1fr;
    padding: 2px;
    border-radius: 16px;
  }

  .affiliates-faq-col {
    padding: 8px;
    gap: 10px;
  }

  .affiliates-faq-header {
    min-height: 0;
    padding: 12px 14px;
    gap: 10px;
  }

  .affiliates-faq .faq-question {
    font-size: 14px;
    line-height: 1.4;
  }

  .affiliates-faq-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  .affiliates-faq-arrow {
    width: 20px;
    height: 20px;
  }

  .affiliates-faq .faq-answer p {
    padding: 0 14px 12px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .affiliates-stats {
    grid-template-columns: 1fr;
  }

  .affiliates-stat-card:first-child {
    grid-column: auto;
  }
}

/* --------------------------------------------------------------------------
   Updates page (Figma 463:26164)
   -------------------------------------------------------------------------- */

.updates-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
}

.updates-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 74px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.updates-filter-dropdown {
  position: relative;
  flex: 0 0 auto;
  z-index: 1;
}

.updates-filter-dropdown.is-open {
  z-index: 40;
}

.updates-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 220px;
  max-width: 100%;
  height: 50px;
  padding: 8px 8px 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(
    94deg,
    rgba(218, 50, 247, 0.08) 9%,
    rgba(143, 106, 255, 0.08) 88%
  );
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 0.5px rgba(210, 210, 220, 0.12),
    0 6px 18px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.updates-filter-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(220, 220, 230, 0.28) 14%,
    transparent 36%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

.updates-filter-btn--static {
  cursor: default;
}

.updates-filter-btn.dropdown-toggle::after {
  display: none;
}

.updates-filter-btn-main {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.updates-filter-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.updates-filter-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
  color: #fff;
  font-weight: 600;
}

.updates-filter-caret-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #8a88fb 0%, #d021d7 100%);
}

.updates-filter-caret {
  display: block;
  width: 10px;
  height: 8px;
  transition: transform 0.2s ease;
}

.updates-filter-dropdown.is-open .updates-filter-caret {
  transform: rotate(180deg);
}

.updates-filter-menu {
  min-width: 200px;
}

.updates-filter-menu > li > a,
.updates-page .updates-filter-menu .dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  color: #f5f6f7;
  text-decoration: none;
  font-size: 14px;
}

.updates-filter-menu > li > a:hover,
.updates-filter-menu > li.active > a,
.updates-filter-menu .dropdown-item.is-active {
  background: rgba(202, 35, 231, 0.18);
  color: #fff;
}

.updates-search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(64, 64, 64, 0.15);
  border: 0.5px solid rgba(143, 106, 255, 0.42);
  box-sizing: border-box;
}

.updates-search-input,
.updates-page .updates-search-input.form-control,
.updates-page .updates-search-input.form-control:focus {
  flex: 1;
  min-width: 0;
  height: 30px;
  margin: 0;
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  outline: none;
}

.updates-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.updates-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 3px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  cursor: pointer;
  flex-shrink: 0;
}

.updates-search-btn img {
  display: block;
  width: 20px;
  height: 20px;
}

.updates-table-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  background: rgba(36, 26, 51, 0.59);
  overflow: hidden;
}

.updates-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 14px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    158deg,
    rgba(202, 35, 231, 0.23) 0.37%,
    rgba(152, 167, 255, 0.17) 99%
  );
  box-sizing: border-box;
}

.updates-th {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  padding: 6px 10px;
  box-sizing: border-box;
}

.updates-th--service {
  flex: 1;
  min-width: 0;
}

.updates-th--date,
.updates-th--history {
  flex: 0 0 160px;
  width: 160px;
}

.updates-table-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.updates-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 14px;
  border-bottom: 1px dashed #798090;
  box-sizing: border-box;
}

.updates-row:last-child {
  border-bottom: none;
}

.updates-cell--service {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.updates-service-top {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.updates-service-id,
.updates-service-name {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #dfe0e4;
}

.updates-service-id {
  flex-shrink: 0;
}

.updates-service-dot {
  display: block;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.updates-service-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.updates-service-change {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #dfe0e4;
}

.updates-service-change--up {
  color: #d738f3;
}

.updates-service-change--down {
  color: #9572ff;
}

.updates-service-change--off {
  color: #ff7a9a;
}

.updates-service-change--neutral {
  color: #c1c4cc;
}

.updates-cell--date {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 160px;
  width: 160px;
  padding: 6px 10px;
  color: #dfe0e4;
  font-family: var(--font-sans);
  font-size: 14px;
  box-sizing: border-box;
}

.updates-date-day {
  font-weight: 500;
  line-height: 1.5;
}

.updates-date-time {
  font-weight: 400;
  line-height: 1.2;
}

.updates-cell--history {
  display: flex;
  align-items: center;
  flex: 0 0 160px;
  width: 160px;
  padding: 6px 10px;
  box-sizing: border-box;
}

.updates-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 98px;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1.5px solid #cc7aff;
  background: linear-gradient(
    107deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  box-sizing: border-box;
}

.updates-history-btn:hover,
.updates-history-btn:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.92;
}

.updates-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 14px;
}

.updates-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 0.2px solid rgba(69, 69, 69, 0.14);
  box-sizing: border-box;
}

.updates-pager-rows {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.updates-pager-rows-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ebebeb;
  color: #f5f6f7;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.updates-pager-rows-btn img {
  display: block;
  width: 24px;
  height: 24px;
}

.updates-pager-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
  white-space: nowrap;
}

.updates-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 13px;
}

.updates-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dfe0e4;
  background: transparent;
  text-decoration: none;
  box-sizing: border-box;
}

.updates-pager-btn img {
  display: block;
  width: 24px;
  height: 24px;
}

.updates-pager-btn--next {
  border: none;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.updates-pager-btn--disabled {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .updates-th--date,
  .updates-th--history,
  .updates-cell--date,
  .updates-cell--history {
    flex-basis: 130px;
    width: 130px;
  }
}

@media (max-width: 900px) {
  .updates-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .updates-filter-btn,
  .updates-filter-btn--static {
    width: 100%;
  }

  .updates-table-head {
    display: none;
  }

  .updates-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .updates-cell--date,
  .updates-cell--history {
    flex: none;
    width: 100%;
    padding: 0;
  }

  .updates-pager {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

@media (max-width: 768px) {
  .updates-page {
    gap: 16px;
    padding-bottom: 16px;
  }

  .updates-toolbar {
    z-index: 30;
    gap: 12px;
    padding: 14px;
    min-height: 0;
    border-radius: 12px;
  }

  .updates-filter-dropdown {
    width: 100%;
  }

  .updates-filter-dropdown.is-open {
    z-index: 40;
  }

  .updates-filter-btn,
  .updates-filter-btn--static {
    width: 100%;
    height: 48px;
    padding: 8px 8px 8px 14px;
  }

  .updates-filter-label {
    max-width: none;
    font-size: 16px;
  }

  .updates-filter-caret-wrap {
    width: 32px;
    height: 32px;
  }

  .updates-filter-menu,
  .updates-page .updates-filter-menu,
  .updates-filter-dropdown .dropdown-menu.services-filter-menu {
    width: 100%;
    min-width: 0;
    max-height: 50vh;
  }

  .updates-search {
    width: 100%;
    height: 48px;
    padding: 8px 12px;
    border-radius: 10px;
  }

  .updates-search-input,
  .updates-page .updates-search-input.form-control {
    height: auto;
    font-size: 16px;
  }

  .updates-search-btn {
    width: 36px;
    height: 36px;
  }

  .updates-table-card {
    border-radius: 16px;
    background: transparent;
    overflow: visible;
  }

  .updates-table-body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .updates-row {
    display: block;
    margin-bottom: 14px;
    padding: 0;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(14, 7, 30, 0.68);
    overflow: hidden;
    border-bottom: none;
  }

  .updates-row:last-child {
    margin-bottom: 0;
    border-bottom: none;
  }

  .updates-cell--service {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .updates-cell--service::before {
    content: attr(data-label);
    display: block;
    width: 100%;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  .updates-service-top {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .updates-service-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
    word-break: break-word;
  }

  .updates-service-change {
    font-size: 13px;
  }

  .updates-cell--date,
  .updates-cell--history {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex: none;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .updates-cell--history {
    border-bottom: 0;
    flex-wrap: wrap;
  }

  .updates-cell--date::before,
  .updates-cell--history::before {
    content: attr(data-label);
    flex: 0 0 38%;
    max-width: 120px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
  }

  .updates-cell--date {
    flex-direction: row;
    align-items: center;
  }

  .updates-date-day,
  .updates-date-time {
    font-size: 13px;
    text-align: right;
  }

  .updates-history-btn {
    min-height: 48px;
    min-width: 0;
    padding: 10px 20px;
    font-size: 16px;
    margin-left: auto;
  }

  .updates-pager {
    width: 100%;
    margin-left: 0;
    padding: 10px 12px;
    border-radius: 12px;
    gap: 16px;
  }

  .updates-pager-label {
    font-size: 13px;
  }

  .updates-pager-btn {
    padding: 8px;
  }

  .updates-pager-btn img {
    width: 20px;
    height: 20px;
  }

  .updates-empty {
    padding: 28px 16px;
    font-size: 13px;
  }
}

@media (max-width: 560px) {
  .updates-pager {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .updates-pager-nav {
    justify-content: flex-end;
  }
}

/* --------------------------------------------------------------------------
   Refunds page (Figma 1286:59516)
   -------------------------------------------------------------------------- */

.refunds-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 100%;
}

.refunds-alert {
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(143, 106, 255, 0.12);
  border: 1px solid rgba(143, 106, 255, 0.28);
  color: #ebecef;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.refunds-table-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 12px;
  background: rgba(36, 26, 51, 0.59);
  overflow: hidden;
}

.refunds-table-head {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.1fr) minmax(180px, 1.4fr) minmax(160px, 1.2fr)
    minmax(180px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 14px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    158deg,
    rgba(202, 35, 231, 0.23) 0.37%,
    rgba(152, 167, 255, 0.17) 99%
  );
  box-sizing: border-box;
}

.refunds-th {
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  box-sizing: border-box;
}

.refunds-table-body {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.refunds-row {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.1fr) minmax(180px, 1.4fr) minmax(160px, 1.2fr)
    minmax(180px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 14px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.15);
  box-sizing: border-box;
}

.refunds-row:last-child {
  border-bottom: none;
}

.refunds-cell {
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
  box-sizing: border-box;
  min-width: 0;
}

.refunds-cell--id {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refunds-order-id {
  color: #ebecef;
  text-decoration: none;
  white-space: nowrap;
}

.refunds-order-id:hover,
.refunds-order-id:focus {
  color: #fff;
  text-decoration: none;
}

.refunds-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 3.5px;
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  cursor: pointer;
  flex-shrink: 0;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.refunds-copy-btn img {
  display: block;
  width: 10px;
  height: 10px;
}

.refunds-copy-btn:hover {
  opacity: 0.9;
}

.refunds-copy-btn.is-copied {
  transform: scale(0.92);
}

.refunds-cell--amount {
  white-space: nowrap;
}

.refunds-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-radius: 6px;
  white-space: nowrap;
}

.refunds-status-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #c1c4cc;
}

.refunds-status--canceled {
  color: rgba(239, 100, 100, 0.86);
}

.refunds-status--canceled .refunds-status-dot {
  background: #ef6464;
}

.refunds-status--partial {
  color: rgba(255, 170, 80, 0.92);
}

.refunds-status--partial .refunds-status-dot {
  background: #ffaa50;
}

.refunds-status--default {
  color: #ebecef;
}

.refunds-empty {
  padding: 40px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
  font-size: 14px;
}

.refunds-pager {
  margin-left: auto;
}

@media (max-width: 900px) {
  .refunds-table-head {
    display: none;
  }

  .refunds-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .refunds-cell {
    padding: 0;
  }

  .refunds-cell--id::before,
  .refunds-cell--amount::before,
  .refunds-cell--status::before,
  .refunds-cell--date::before {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .refunds-cell--id::before {
    content: "Order ID";
  }
  .refunds-cell--amount::before {
    content: "Refund Amount";
  }
  .refunds-cell--status::before {
    content: "Order Status";
  }
  .refunds-cell--date::before {
    content: "Date";
  }
}

/* --------------------------------------------------------------------------
   Dashboard page
   -------------------------------------------------------------------------- */

.dashboard-page {
  display: flex;
  flex-direction: column;
  gap: 29px;
  width: 100%;
  padding-top: 8px;
}

.dashboard-top,
.dashboard-mid,
.dashboard-lower,
.dashboard-bottom {
  display: grid;
  gap: 29px;
  width: 100%;
  align-items: stretch;
}

.dashboard-top {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.55fr);
}

.dashboard-mid {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
}

.dashboard-lower {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-bottom {
  grid-template-columns: minmax(0, 2.35fr) minmax(280px, 1fr);
}

.dashboard-welcome {
  position: relative;
  overflow: hidden;
  min-height: 176px;
  padding: 50px 220px 40px 27px;
  border-radius: 24px;
  background: none;
  box-sizing: border-box;
}

.dashboard-welcome-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border-radius: inherit;
}

.dashboard-welcome-copy {
  position: relative;
  z-index: 2;
  max-width: 643px;
}

.dashboard-welcome-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
  color: #fafafb;
}

.dashboard-welcome-text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #ebecef;
}

.dashboard-welcome-tiger {
  position: absolute;
  right: -12px;
  top: 0;
  z-index: 1;
  width: 212px;
  height: 199px;
  object-fit: cover;
  opacity: 0.9;
  transform: scaleX(-1);
  pointer-events: none;
}

.dashboard-userinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-radius: 24px;
  border: 0.6px solid rgba(255, 255, 255, 0.14);
  background: rgba(42, 42, 42, 0.04);
  box-sizing: border-box;
}

.dashboard-userinfo-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
}

.dashboard-userinfo-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 70px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 0.5px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(
    92deg,
    rgba(70, 31, 93, 0.5) 7%,
    rgba(35, 27, 79, 0.5) 108%
  );
  box-sizing: border-box;
  overflow: hidden;
}

/* Soft glow — top-left corner only */
.dashboard-userinfo-cell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 12%,
    transparent 28%,
    transparent 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* Soft glow — bottom-right corner only */
.dashboard-userinfo-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 0.6px;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 72%,
    rgba(255, 255, 255, 0.22) 88%,
    rgba(255, 255, 255, 0.55) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.dashboard-userinfo-label {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #d2d2d2;
}

.dashboard-userinfo-value {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-userinfo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}

.dashboard-mid-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-mini {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 139px;
  padding: 0;
  border: none;
  border-radius: 20px;
  background: none;
  box-sizing: border-box;
}

.dashboard-mini-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  border-radius: inherit;
}

.dashboard-mini-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  min-height: 139px;
  padding: 18px 24px;
  box-sizing: border-box;
}

.dashboard-mini-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dashboard-mini-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  border: 0.5px solid #ffffff2e;
  background: linear-gradient(180deg, #5b2d8a 0%, #302259 55%, #240a34 100%);
  overflow: hidden;
}

.dashboard-mini-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.dashboard-mini-label {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #d2d2d2;
}

.dashboard-mini-value {
  margin: 0;
  position: relative;
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-level {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px;
  border-radius: 12px;
  background: linear-gradient(
    93deg,
    rgba(38, 10, 56, 0.5) 7%,
    rgba(76, 18, 111, 0.5) 108%
  );
  box-sizing: border-box;
}

.dashboard-level-labels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.dashboard-level-names {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-level-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.dashboard-level-name img {
  width: 29px;
  height: 28px;
  object-fit: contain;
}

.dashboard-level-name--next img {
  width: 26px;
  height: 28px;
}

.dashboard-progress {
  position: relative;
  width: 100%;
  height: 36px;
  border-radius: 100px;
  background: rgba(214, 214, 214, 0.23);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  overflow: hidden;
}

.dashboard-progress-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: var(--dashboard-progress, 0%);
  min-width: 56px;
  height: 100%;
  padding: 0 4px;
  border-radius: 100px;
  background: var(--gradient-brand);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
  transition: width 0.35s ease;
}

.dashboard-progress-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 28px;
  padding: 0 8px;
  border-radius: 50px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #1a1a1a;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.02);
}

.dashboard-level-hint {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.dashboard-vip {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 28px 20px 24px;
  border-radius: 28px;
  border: 0.5px solid rgba(255, 255, 255, 0.32);
  background: #130e20;
  box-sizing: border-box;
}

.dashboard-vip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dashboard-vip-user {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.dashboard-vip-avatar-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}

.dashboard-vip-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.dashboard-vip-avatar-bg {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #7a4ab8;
}

.dashboard-vip-avatar {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 1;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  background: #7a4ab8;
}

.dashboard-vip-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dashboard-vip-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-vip-name {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-vip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ffbf4d 0%, #b07918 100%);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.dashboard-vip-spent {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.dashboard-vip-crown {
  width: 85px;
  height: 81px;
  object-fit: contain;
  flex-shrink: 0;
}

.dashboard-vip-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: transparent;
  overflow: visible;
}

.dashboard-vip-row {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(70px, 1.1fr) minmax(60px, 0.9fr) minmax(70px, 1fr)
    minmax(90px, 1.1fr);
  gap: 8px;
  align-items: center;
  padding: 16px 14px 16px 24px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
  border-bottom: 1px dashed #404a60;
  background: rgba(53, 53, 53, 0.15);
}

.dashboard-vip-row:last-child {
  border-bottom: 0;
  border-radius: 0 0 14px 14px;
}

.dashboard-vip-row--head {
  margin-bottom: 8px;
  padding: 12px 14px 12px 24px;
  font-size: 18px;
  color: #fff;
  background: var(--gradient-brand);
  border-bottom: 0;
  border-radius: 12px;
}

.dashboard-vip-row--head + .dashboard-vip-row {
  border-radius: 14px 14px 0 0;
}

.dashboard-vip-row--head + .dashboard-vip-row:last-child {
  border-radius: 14px;
}

.dashboard-vip-row.is-current {
  background: linear-gradient(
    136deg,
    rgba(202, 35, 231, 0.2) 0%,
    rgba(152, 167, 255, 0.15) 99%
  );
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  border-bottom: 0;
}

.dashboard-vip-row.is-current::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 33px;
  border-radius: 50px;
  background: #fff;
  transform: translateY(-50%);
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 28px;
  border: 0.5px solid rgba(255, 255, 255, 0.25);
  background: rgba(14, 7, 30, 0.68);
  box-sizing: border-box;
}

.dashboard-card-head {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 16px;
  background: rgba(121, 121, 121, 0.16);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dashboard-card-head--sm {
  min-height: 50px;
  border-radius: 14px;
}

.dashboard-card-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.48;
  color: #fff;
}

.dashboard-card-title--sm {
  font-size: 18px;
  line-height: 1.5;
}

.dashboard-referral-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dashboard-referral-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 0.6px solid rgba(255, 255, 255, 0.1);
  background: rgba(251, 251, 255, 0.08);
}

.dashboard-referral-url {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.dashboard-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--gradient-brand);
  cursor: pointer;
  flex-shrink: 0;
}

.dashboard-copy-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.dashboard-copy-btn.is-copied {
  box-shadow: 0 0 0 2px rgba(57, 221, 11, 0.55);
}

.dashboard-kv-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.dashboard-kv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px dashed #13203b;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.dashboard-refill .dashboard-kv-row {
  border-bottom-color: #343e56;
  font-family: var(--font-sans);
  font-size: 14px;
}

.dashboard-kv-row--last {
  border-bottom: 0;
}

.dashboard-lower-right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.dashboard-telegram {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: linear-gradient(
    93deg,
    rgba(38, 10, 56, 0.3) 7%,
    rgba(76, 18, 111, 0.3) 108%
  );
  text-decoration: none;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.dashboard-telegram:hover,
.dashboard-telegram:focus-visible {
  border-color: rgba(202, 35, 231, 0.55);
  text-decoration: none;
  transform: translateY(-1px);
}

.dashboard-telegram-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 119px;
  height: 112px;
  flex-shrink: 0;
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.91);
  box-sizing: border-box;
}

.dashboard-telegram-icon img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.dashboard-telegram-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.dashboard-telegram-title {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.48;
  color: #fff;
}

.dashboard-telegram-text {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #dfe0e4;
}

.dashboard-refill {
  gap: 12px;
}

.dashboard-chart-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 520px;
  padding: 34px 40px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #0d061c;
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  box-sizing: border-box;
}

.dashboard-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.dashboard-chart-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.dashboard-chart-legend {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dashboard-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #ebecef;
}

.dashboard-chart-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-chart-dot--amount {
  background: #ca23e7;
  box-shadow: 0 0 0 3px rgba(202, 35, 231, 0.25);
}

.dashboard-chart-dot--days {
  background: #8fb0ff;
  box-shadow: 0 0 0 3px rgba(143, 176, 255, 0.25);
}

.dashboard-chart-wrap {
  position: relative;
  width: 100%;
  min-height: 360px;
  flex: 1;
}

.dashboard-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 420px;
}

.dashboard-chart-axis {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.dashboard-logins {
  gap: 12px;
}

.dashboard-logins-intro {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #dfe0e4;
}

.dashboard-logins-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dashboard-login-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #343e56;
}

.dashboard-login-row:last-child {
  border-bottom: 0;
}

.dashboard-login-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dashboard-login-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
}

.dashboard-login-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dashboard-login-ip {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

.dashboard-login-when {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dashboard-login-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 116px;
}

.dashboard-login-country {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #fff;
}

.dashboard-login-flag {
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  color: rgba(243, 85, 85, 0.86);
  cursor: pointer;
  text-align: left;
}

.dashboard-login-flag:hover,
.dashboard-login-flag:focus-visible {
  text-decoration: underline;
}

@media (max-width: 1199.98px) {
  .dashboard-top,
  .dashboard-mid,
  .dashboard-lower,
  .dashboard-bottom {
    grid-template-columns: 1fr;
  }

  .dashboard-welcome {
    padding-right: 180px;
  }

  .dashboard-vip-crown {
    width: 72px;
    height: 68px;
  }
}

@media (max-width: 900px) {
  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-welcome {
    min-height: 0;
    height: auto;
    padding: 20px 112px 20px 18px;
  }

  .dashboard-welcome-copy {
    max-width: 100%;
  }

  .dashboard-welcome-tiger {
    display: block;
    top: auto;
    bottom: 0;
    right: 0;
    width: 104px;
    height: 98px;
    max-height: calc(100% - 6px);
    object-fit: contain;
    object-position: right bottom;
  }

  .dashboard-welcome-title {
    font-size: 20px;
  }

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

  .dashboard-userinfo-center {
    width: 56px;
    height: 56px;
  }

  .dashboard-vip-row,
  .dashboard-vip-row--head {
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
  }

  .dashboard-vip-row--head span:nth-child(n + 3),
  .dashboard-vip-row span:nth-child(n + 3) {
    display: none;
  }

  .dashboard-telegram {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .dashboard-telegram-icon {
    width: 88px;
    height: 88px;
    padding: 12px;
  }

  .dashboard-telegram-icon img {
    width: 56px;
    height: 56px;
  }

  .dashboard-telegram-title,
  .dashboard-card-title {
    font-size: 20px;
  }

  .dashboard-chart-card {
    padding: 24px 18px;
    min-height: 0;
  }

  .dashboard-chart-wrap {
    min-height: 280px;
  }

  .dashboard-login-side {
    width: auto;
  }
}

@media (max-width: 768px) {
  .dashboard-page {
    gap: 16px;
    padding-top: 0;
    padding-bottom: 8px;
  }

  .dashboard-top,
  .dashboard-mid,
  .dashboard-lower,
  .dashboard-bottom {
    gap: 16px;
  }

  .dashboard-welcome {
    min-height: 0;
    height: auto;
    padding: 14px 108px 14px 14px;
    border-radius: 16px;
  }

  .dashboard-welcome-copy {
    max-width: 100%;
  }

  .dashboard-welcome-title {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 6px;
  }

  .dashboard-welcome-text {
    font-size: 12px;
    line-height: 1.45;
  }

  .dashboard-welcome-tiger {
    display: block;
    top: auto;
    bottom: 0;
    right: 0;
    width: 96px;
    height: 90px;
    max-height: calc(100% - 4px);
    object-fit: contain;
    object-position: right bottom;
    opacity: 1;
  }

  .dashboard-userinfo {
    padding: 10px;
    border-radius: 16px;
  }

  .dashboard-userinfo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .dashboard-userinfo-cell {
    min-height: 56px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .dashboard-userinfo-label {
    font-size: 12px;
  }

  .dashboard-userinfo-value {
    font-size: 14px;
  }

  .dashboard-userinfo-center {
    width: 48px;
    height: 48px;
  }

  .dashboard-mid-left {
    gap: 12px;
  }

  .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
  }

  .dashboard-mini {
    display: flex;
    flex-direction: column;
    min-height: 92px;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.1);
    background: rgba(14, 7, 30, 0.45);
  }

  .dashboard-mini-bg {
    object-fit: cover;
  }

  .dashboard-mini-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    gap: 2px;
    padding: 10px 8px 8px;
  }

  .dashboard-mini-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
    width: 100%;
  }

  .dashboard-mini-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex-shrink: 0;
  }

  .dashboard-mini-icon img {
    width: 15px;
    height: 15px;
  }

  .dashboard-mini-label {
    flex: 1;
    min-width: 0;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
  }

  .dashboard-mini-value {
    margin: -2px 0 0;
    width: 100%;
    font-size: 15px;
    line-height: 1.2;
    word-break: break-word;
  }

  .dashboard-level {
    gap: 6px;
    padding: 14px 16px;
    border-radius: 10px;
  }

  .dashboard-level-labels {
    font-size: 12px;
  }

  .dashboard-level-name {
    font-size: 15px;
    gap: 6px;
  }

  .dashboard-level-name img {
    width: 22px;
    height: 22px;
  }

  .dashboard-progress {
    height: 30px;
  }

  .dashboard-progress-pill {
    min-width: 44px;
    height: 24px;
    font-size: 13px;
  }

  .dashboard-level-hint {
    font-size: 11px;
  }

  .dashboard-vip {
    gap: 16px;
    padding: 16px 14px;
    border-radius: 16px;
  }

  .dashboard-vip-avatar-wrap {
    width: 64px;
    height: 64px;
  }

  .dashboard-vip-ring {
    width: 64px;
    height: 64px;
  }

  .dashboard-vip-avatar-bg,
  .dashboard-vip-avatar {
    left: 8px;
    top: 8px;
    width: 48px;
    height: 48px;
  }

  .dashboard-vip-name {
    font-size: 16px;
  }

  .dashboard-vip-badge {
    min-width: 52px;
    font-size: 13px;
    padding: 3px 6px;
  }

  .dashboard-vip-spent {
    font-size: 13px;
  }

  .dashboard-vip-crown {
    width: 56px;
    height: 52px;
  }

  .dashboard-vip-row,
  .dashboard-vip-row--head {
    padding: 12px 10px 12px 16px;
    font-size: 13px;
    gap: 8px 12px;
  }

  .dashboard-vip-row--head {
    font-size: 15px;
    padding: 10px 12px;
  }

  .dashboard-vip-row.is-current::before {
    width: 4px;
    height: 28px;
    left: 6px;
  }

  .dashboard-card {
    gap: 12px;
    padding: 14px;
    border-radius: 16px;
  }

  .dashboard-card-head {
    padding: 10px 14px;
    border-radius: 12px;
    min-height: 0;
  }

  .dashboard-card-title,
  .dashboard-card-title--sm,
  .dashboard-telegram-title {
    font-size: 16px;
    line-height: 1.35;
  }

  .dashboard-referral-link {
    padding: 10px 12px;
    gap: 10px;
  }

  .dashboard-referral-url {
    font-size: 13px;
  }

  .dashboard-copy-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .dashboard-kv-row {
    padding: 12px;
    font-size: 14px;
    gap: 12px;
  }

  .dashboard-refill .dashboard-kv-row {
    font-size: 13px;
  }

  .dashboard-lower-right {
    gap: 16px;
  }

  .dashboard-telegram {
    padding: 16px;
    border-radius: 16px;
    gap: 12px;
  }

  .dashboard-telegram-icon {
    width: 72px;
    height: 72px;
    padding: 10px;
    border-radius: 16px;
  }

  .dashboard-telegram-icon img {
    width: 48px;
    height: 48px;
  }

  .dashboard-telegram-text {
    font-size: 13px;
    line-height: 1.55;
  }

  .dashboard-chart-card {
    gap: 16px;
    padding: 16px 14px;
    border-radius: 16px;
    min-height: 0;
  }

  .dashboard-chart-head {
    gap: 12px;
  }

  .dashboard-chart-title {
    font-size: 16px;
  }

  .dashboard-chart-legend {
    gap: 12px;
  }

  .dashboard-chart-legend-item {
    font-size: 12px;
  }

  .dashboard-chart-dot {
    width: 12px;
    height: 12px;
  }

  .dashboard-chart-wrap {
    min-height: 220px;
  }

  .dashboard-chart-axis {
    font-size: 14px;
  }

  .dashboard-logins-intro {
    font-size: 13px;
  }

  .dashboard-login-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px 0;
  }

  .dashboard-login-avatar {
    width: 44px;
    height: 44px;
  }

  .dashboard-login-ip,
  .dashboard-login-when,
  .dashboard-login-country {
    font-size: 13px;
  }

  .dashboard-login-side {
    width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .dashboard-login-flag {
    font-size: 13px;
    line-height: 1.4;
  }
}

@media (max-width: 560px) {
  .dashboard-page {
    gap: 16px;
  }

  .dashboard-top,
  .dashboard-mid,
  .dashboard-lower,
  .dashboard-bottom {
    gap: 16px;
  }

  .dashboard-stats {
    gap: 8px;
  }

  .dashboard-userinfo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .dashboard-userinfo-center {
    width: 40px;
    height: 40px;
  }

  .dashboard-userinfo-cell {
    min-height: 52px;
    padding: 8px 10px;
  }

  .dashboard-welcome {
    padding: 12px 100px 12px 12px;
  }

  .dashboard-welcome-tiger {
    width: 88px;
    height: 82px;
  }

  .dashboard-mini {
    min-height: 88px;
  }

  .dashboard-mini-body {
    padding: 9px 14px 7px;
    gap: 2px;
  }

  .dashboard-mini-label {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
  }

  .dashboard-mini-value {
    margin-top: 5px;
    font-size: 14px;
  }

  .dashboard-vip-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .dashboard-vip-crown {
    display: none;
  }

  .dashboard-referral-url {
    font-size: 13px;
  }
}

[dir="rtl"] .dashboard-welcome-tiger {
  right: auto;
  left: -12px;
  transform: none;
}

[dir="rtl"] .dashboard-vip-row.is-current::before {
  left: auto;
  right: 8px;
}

[dir="rtl"] .dashboard-login-side,
[dir="rtl"] .dashboard-login-flag {
  text-align: right;
  align-items: flex-end;
}

@media (max-width: 768px) {
  [dir="rtl"] .dashboard-vip-row.is-current::before {
    right: 6px;
  }

  [dir="rtl"] .dashboard-login-side {
    flex-direction: row;
  }
}

/* --------------------------------------------------------------------------
   Signup / auth page
   -------------------------------------------------------------------------- */

body:has(.signup-page) {
  background: #120615;
  min-height: 100vh;
}

body:has(.signup-page) > .container,
body:has(.signup-page) > .container-fluid {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.signup-page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #f5f6f7;
  font-family: var(--font-sans);
  box-sizing: border-box;
}

.signup-page__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
}

.auth-nav {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, calc(100% - 48px));
  margin: 36px auto 0;
  padding: 14px 24px;
  border-radius: 18px;
  background: rgba(198, 198, 198, 0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-sizing: border-box;
}

.auth-nav__brand {
  flex-shrink: 0;
  font-family: var(--font-logo);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.3px;
  text-decoration: none;
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.auth-nav__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  min-width: 0;
}

.auth-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
  text-decoration: none;
  white-space: nowrap;
}

.auth-nav__link:hover,
.auth-nav__link.is-active {
  color: #fff;
  text-decoration: none;
}

.auth-nav__chevron {
  display: block;
  width: 18px;
  height: 18px;
  transform: rotate(180deg);
  opacity: 0.9;
}

.auth-nav__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  border: 0.2px solid rgba(255, 255, 255, 0.56);
  background: linear-gradient(
    104deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
}

.auth-nav__cta:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
}

.signup-page__body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 5vw, 72px);
  width: min(1400px, calc(100% - 48px));
  margin: 48px auto 64px;
  box-sizing: border-box;
}

.signup-page__visual {
  flex: 0 1 503px;
  max-width: 503px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.signup-page__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(714px, 72vh);
  object-fit: contain;
  object-position: bottom center;
}

.signup-card {
  flex: 0 1 686px;
  width: min(686px, 100%);
  padding: 48px 32px;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(39, 39, 39, 0.33);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
}

.signup-card__intro {
  margin: 0 0 34px;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.signup-card__intro span {
  background-image: linear-gradient(90deg, #936fff 0%, #d516f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.signup-card__title {
  margin: 0 0 34px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  color: #ebecef;
}

.signup-card__title span {
  background-image: linear-gradient(106deg, #da32f7 9%, #5f2aff 88%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.signup-card .alert {
  margin-bottom: 20px;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.signup-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.auth-field__label {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.auth-field__control {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 12px;
  border: 0.4px solid rgba(255, 255, 255, 0.08);
  background: #9898981c;
  box-sizing: border-box;
}

.auth-field__control--password {
  padding-right: 48px;
}

.auth-field__icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  object-fit: contain;
  pointer-events: none;
}

.auth-field__input {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
}

.auth-field__input::placeholder {
  color: rgba(255, 255, 255, 0.72);
}

.auth-field__input:focus {
  outline: 0;
  box-shadow: none;
}

.auth-field__input:-webkit-autofill,
.auth-field__input:-webkit-autofill:hover,
.auth-field__input:-webkit-autofill:focus,
.auth-field__input:-webkit-autofill:active {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #9898981c inset;
  transition: background-color 99999s ease-out 0s;
}

.auth-field__toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.9;
}

.auth-field__toggle img {
  display: block;
  width: 18px;
  height: 18px;
}

.auth-field__toggle.is-visible {
  opacity: 1;
}

.auth-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.auth-agree__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auth-agree__box {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  background: #f5f5f5;
  box-sizing: border-box;
}

.auth-agree__input:checked + .auth-agree__box {
  background: linear-gradient(135deg, #ca23e7 0%, #8f6aff 100%);
  border-color: transparent;
}

.auth-agree__input:checked + .auth-agree__box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.auth-agree__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.auth-agree__link {
  font-weight: 500;
  text-decoration: none;
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.auth-agree__link:hover {
  text-decoration: underline;
}

.signup-form__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  width: 100%;
  margin-top: 0;
}

.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: calc(50% - 7.5px);
  min-height: 52px;
  padding: 6px 28px;
  border-radius: 12px;
  border: 1px solid rgba(230, 230, 230, 0.08);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #f5f6f7;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.auth-btn:hover {
  color: #f5f6f7;
  text-decoration: none;
  opacity: 0.94;
}

.auth-btn--primary {
  border: none;
  background: linear-gradient(
    122deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99%
  );
}

.auth-btn--google {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    rgba(143, 106, 255, 0.11) 0%,
    rgba(180, 50, 202, 0.11) 100%
  );
}

.auth-btn--google img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.signup-page__google-wrap,
.hero-form__google-wrap {
  padding: 0;
  cursor: pointer;
}

.signup-page__google-wrap #g_id_onload,
.hero-form__google-wrap #g_id_onload {
  display: none;
}

/* Invisible Google widget stretched over the full custom button */
.signup-page__google-wrap .g_id_signin,
.hero-form__google-wrap .g_id_signin {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100% !important;
  height: 100% !important;
  opacity: 0.001;
  overflow: hidden;
  cursor: pointer;
}

.signup-page__google-wrap .g_id_signin > div,
.signup-page__google-wrap .g_id_signin > div > div,
.hero-form__google-wrap .g_id_signin > div,
.hero-form__google-wrap .g_id_signin > div > div {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.signup-page__google-wrap .g_id_signin iframe,
.hero-form__google-wrap .g_id_signin iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  transform: none !important;
  cursor: pointer !important;
}

.hero-form__google-face {
  pointer-events: none;
}

.auth-btn--google-face {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  min-height: 52px;
  pointer-events: none;
}

.signup-form__footer {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #f5f6f7;
}

.signup-form__footer a {
  font-weight: 600;
  line-height: 1.5;
  text-decoration: underline;
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.signup-form__captcha {
  width: 100%;
}

@media (max-width: 1100px) {
  .auth-nav__links {
    display: none;
  }

  .signup-page__body {
    flex-direction: column;
    margin-top: 28px;
  }

  .signup-page__visual {
    display: none;
  }
}

@media (max-width: 720px) {
  .auth-nav {
    width: calc(100% - 24px);
    margin-top: 16px;
    padding: 12px 14px;
  }

  .auth-nav__brand {
    font-size: 22px;
  }

  .signup-page__body {
    width: calc(100% - 24px);
    margin: 24px auto 40px;
  }

  .signup-card {
    padding: 28px 18px;
    border-radius: 24px;
  }

  .signup-card__intro {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .signup-card__title {
    font-size: 26px;
    margin-bottom: 24px;
  }

  .signup-form__grid {
    grid-template-columns: 1fr;
  }

  .signup-form__actions {
    flex-direction: column;
  }

  .auth-btn {
    width: 100%;
  }

  .auth-agree__text {
    white-space: normal;
  }
}

[dir="rtl"] .auth-field__control--password {
  padding-right: 20px;
  padding-left: 48px;
}

[dir="rtl"] .auth-field__toggle {
  right: auto;
  left: 16px;
}

[dir="rtl"] .signup-page__body {
  flex-direction: row-reverse;
}

@media (max-width: 1100px) {
  [dir="rtl"] .signup-page__body {
    flex-direction: column;
  }
}

/* Sign-in page tweaks (shares signup layout) */
.signin-page .signin-form__grid {
  grid-template-columns: 1fr;
}

.signin-page .auth-field {
  position: relative;
}

.signin-form__forgot {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.signin-form__forgot:hover {
  text-decoration: underline;
}

.signin-auth-text {
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.6;
  color: #f5f6f7;
}

.signin-auth-text a {
  background-image: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Reset password page (shares signup layout) */
.resetpassword-page .resetpassword-form__grid {
  grid-template-columns: 1fr;
}

.resetpassword-form__actions {
  justify-content: stretch;
}

.auth-btn--full,
.resetpassword-form__actions .auth-btn {
  width: 100%;
}

/* Set new password page (shares signup layout) */
.setnewpassword-form {
  gap: 20px;
}

.setnewpassword-form__identity {
  width: 100%;
}

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

.setnewpassword-form__actions {
  justify-content: stretch;
  margin-top: 14px;
}

.setnewpassword-form__actions .auth-btn {
  width: 100%;
}

@media (max-width: 720px) {
  .setnewpassword-form__passwords {
    grid-template-columns: 1fr;
  }
}

/* 2FA page (shares signup layout) */
.twofa-page__hint {
  margin: -18px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(245, 246, 247, 0.75);
  text-align: center;
}

.twofa-form {
  gap: 34px;
}

.twofa-otp {
  display: flex;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.twofa-otp__digit {
  flex: 1 1 0;
  min-width: 0;
  height: 52px;
  padding: 0;
  border-radius: 12px;
  border: 0.4px solid rgba(255, 255, 255, 0.17);
  background: #9898981c;
  box-shadow: none;
  outline: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  caret-color: #da32f7;
}

.twofa-otp__digit:focus {
  border-color: rgba(218, 50, 247, 0.65);
  box-shadow: 0 0 0 1px rgba(218, 50, 247, 0.25);
}

.twofa-form__actions {
  justify-content: stretch;
}

.twofa-form__actions .auth-btn {
  width: 100%;
}

@media (max-width: 480px) {
  .twofa-otp {
    gap: 6px;
  }

  .twofa-otp__digit {
    height: 46px;
    font-size: 18px;
  }
}

/* ==========================================================================
   Marketing site styles (merged from incoming branch)
   ========================================================================== */

@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    :root,
    :host {
      --shimmer-angle: 20deg;
    }
    *,
    :before,
    :after,
    ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --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-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: 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-animation-delay: 0s;
      --tw-animation-direction: normal;
      --tw-animation-duration: initial;
      --tw-animation-fill-mode: none;
      --tw-animation-iteration-count: 1;
      --tw-enter-blur: 0;
      --tw-enter-opacity: 1;
      --tw-enter-rotate: 0;
      --tw-enter-scale: 1;
      --tw-enter-translate-x: 0;
      --tw-enter-translate-y: 0;
      --tw-exit-blur: 0;
      --tw-exit-opacity: 1;
      --tw-exit-rotate: 0;
      --tw-exit-scale: 1;
      --tw-exit-translate-x: 0;
      --tw-exit-translate-y: 0;
      --scroll-fade-t: 0px;
      --scroll-fade-b: 0px;
      --scroll-fade-s: 0px;
      --scroll-fade-e: 0px;
      --scroll-fade-mask: initial;
      --shimmer-image: initial;
      --shimmer-text-fill: initial;
    }
  }
}
@layer theme {
  :root,
  :host {
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-4xl: 56rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.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);
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 0.15s;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-inter);
    --default-mono-font-family: var(--font-geist-mono);
    --font-watermark: var(--font-monda);
  }
}
@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;
    -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: -0.25em;
  }
  sup {
    top: -0.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;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-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;
  }
  * {
    border-color: var(--border);
    outline-color: var(--ring);
  }
  @supports (color: color-mix(in lab, red, red)) {
    * {
      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  body {
    background-color: var(--background);
    font-family: var(--font-inter);
    color: var(--foreground);
  }
  html {
    font-family: var(--font-inter);
  }
  h1,
  h2 {
    font-family: var(--font-parkinsons);
  }
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-inter);
  }
}
@layer components;
@layer utilities {
  .pointer-events-none {
    pointer-events: none;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .inset-0 {
    inset: 0;
  }
  .inset-x-0 {
    inset-inline: 0;
  }
  .inset-y-0 {
    inset-block: 0;
  }
  .-top-12 {
    top: calc(var(--spacing) * -12);
  }
  .top-0 {
    top: 0;
  }
  .top-\[-19px\] {
    top: -19px;
  }
  .top-\[33px\] {
    top: 33px;
  }
  .top-\[calc\(100\%\+0\.75rem\)\] {
    top: calc(100% + 0.75rem);
  }
  .-right-12 {
    right: calc(var(--spacing) * -12);
  }
  .right-0 {
    right: 0;
  }
  .right-\[-28px\] {
    right: -28px;
  }
  .-bottom-12 {
    bottom: calc(var(--spacing) * -12);
  }
  .bottom-0 {
    bottom: 0;
  }
  .bottom-\[-17\.5px\] {
    bottom: -17.5px;
  }
  .-left-12 {
    left: calc(var(--spacing) * -12);
  }
  .left-1\/2 {
    left: 50%;
  }
  .left-\[64\.4\%\] {
    left: 64.4%;
  }
  .isolate {
    isolation: isolate;
  }
  .z-0 {
    z-index: 0;
  }
  .z-1 {
    z-index: 1;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-25 {
    z-index: 25;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-50 {
    z-index: 50;
  }
  .z-\[1\] {
    z-index: 1;
  }
  .z-\[2\] {
    z-index: 2;
  }
  .col-span-2 {
    grid-column: span 2 / span 2;
  }
  .col-start-1 {
    grid-column-start: 1;
  }
  .row-start-1 {
    grid-row-start: 1;
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-auto {
    margin-block: auto;
  }
  .-mt-4 {
    margin-top: calc(var(--spacing) * -4);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-\[0\.93px\] {
    margin-top: 0.93px;
  }
  .-ml-4 {
    margin-left: calc(var(--spacing) * -4);
  }
  .ml-0 {
    margin-left: 0;
  }
  .ml-\[265px\] {
    margin-left: 265px;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .inline-grid {
    display: inline-grid;
  }
  .table {
    display: table;
  }
  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }
  .size-5\.5 {
    width: calc(var(--spacing) * 5.5);
    height: calc(var(--spacing) * 5.5);
  }
  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }
  .size-7 {
    width: calc(var(--spacing) * 7);
    height: calc(var(--spacing) * 7);
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-9 {
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 9);
  }
  .size-10 {
    width: calc(var(--spacing) * 10);
    height: calc(var(--spacing) * 10);
  }
  .size-\[18px\] {
    width: 18px;
    height: 18px;
  }
  .size-\[19\.5px\] {
    width: 19.5px;
    height: 19.5px;
  }
  .size-\[26px\] {
    width: 26px;
    height: 26px;
  }
  .size-\[46px\] {
    width: 46px;
    height: 46px;
  }
  .h-\(--accordion-panel-height\) {
    height: var(--accordion-panel-height);
  }
  .h-5 {
    height: calc(var(--spacing) * 5);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-\[9px\] {
    height: 9px;
  }
  .h-\[45px\] {
    height: 45px;
  }
  .h-\[50px\] {
    height: 50px;
  }
  .h-\[77px\] {
    height: 77px;
  }
  .h-\[78px\] {
    height: 78px;
  }
  .h-\[125px\] {
    height: 125px;
  }
  .h-\[198px\] {
    height: 198px;
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .min-h-\[72px\] {
    min-height: 72px;
  }
  .min-h-\[320px\] {
    min-height: 320px;
  }
  .min-h-\[620px\] {
    min-height: 620px;
  }
  .min-h-full {
    min-height: 100%;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-\[14\.5px\] {
    width: 14.5px;
  }
  .w-\[22px\] {
    width: 22px;
  }
  .w-\[95px\] {
    width: 95px;
  }
  .w-\[160px\] {
    width: 160px;
  }
  .w-\[180px\] {
    width: 180px;
  }
  .w-\[202px\] {
    width: 202px;
  }
  .w-\[279px\] {
    width: 279px;
  }
  .w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem);
  }
  .w-\[min\(100\%\,1917px\)\] {
    width: min(100%, 1917px);
  }
  .w-\[min\(323px\,36\%\)\] {
    width: min(323px, 36%);
  }
  .w-\[min\(calc\(100vw-3rem\)\,20rem\)\] {
    width: min(100vw - 3rem, 20rem);
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .max-w-4xl {
    max-width: var(--container-4xl);
  }
  .max-w-\[224px\] {
    max-width: 224px;
  }
  .max-w-\[351px\] {
    max-width: 351px;
  }
  .max-w-\[380px\] {
    max-width: 380px;
  }
  .max-w-\[815px\] {
    max-width: 815px;
  }
  .max-w-\[863px\] {
    max-width: 863px;
  }
  .max-w-\[996px\] {
    max-width: 996px;
  }
  .max-w-\[1440px\] {
    max-width: 1440px;
  }
  .max-w-\[1600px\] {
    max-width: 1600px;
  }
  .min-w-0 {
    min-width: 0;
  }
  .flex-1 {
    flex: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .grow-0 {
    flex-grow: 0;
  }
  .basis-\[min\(100\%\,380px\)\] {
    flex-basis: min(100%, 380px);
  }
  .basis-full {
    flex-basis: 100%;
  }
  .-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);
  }
  .-scale-y-100 {
    --tw-scale-y: calc(100% * -1);
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }
  .rotate-90 {
    rotate: 90deg;
  }
  .rotate-180 {
    rotate: 180deg;
  }
  .rotate-\[-10deg\] {
    rotate: -10deg;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,)
      var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .touch-manipulation {
    touch-action: manipulation;
  }
  .resize {
    resize: both;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .place-items-start {
    place-items: start;
  }
  .items-center {
    align-items: center;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }
  .gap-11 {
    gap: calc(var(--spacing) * 11);
  }
  .gap-\[14px\] {
    gap: 14px;
  }
  .gap-\[15px\] {
    gap: 15px;
  }
  .gap-\[18px\] {
    gap: 18px;
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-y-1 {
    row-gap: var(--spacing);
  }
  .gap-y-8 {
    row-gap: calc(var(--spacing) * 8);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-clip {
    overflow-x: clip;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: calc(var(--radius) * 1.8);
  }
  .rounded-4xl {
    border-radius: calc(var(--radius) * 2.6);
  }
  .rounded-\[4px\] {
    border-radius: 4px;
  }
  .rounded-\[10px\] {
    border-radius: 10px;
  }
  .rounded-\[12px\] {
    border-radius: 12px;
  }
  .rounded-\[13px\] {
    border-radius: 13px;
  }
  .rounded-\[14px\] {
    border-radius: 14px;
  }
  .rounded-\[18px\] {
    border-radius: 18px;
  }
  .rounded-\[24px\] {
    border-radius: 24px;
  }
  .rounded-full {
    border-radius: 3.40282e38px;
  }
  .rounded-none {
    border-radius: 0;
  }
  .rounded-xl {
    border-radius: calc(var(--radius) * 1.4);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }
  .border-\[0\.3px\] {
    border-style: var(--tw-border-style);
    border-width: 0.3px;
  }
  .border-\[0\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 0.5px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b-\[0\.6px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.6px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-\[\#979ca8\] {
    border-color: #979ca8;
  }
  .border-\[\#ca23e7\] {
    border-color: #ca23e7;
  }
  .border-border {
    border-color: var(--border);
  }
  .border-brand-white\/30 {
    border-color: var(--brand-white);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-brand-white\/30 {
      border-color: color-mix(in oklab, var(--brand-white) 30%, transparent);
    }
  }
  .border-transparent {
    border-color: #0000;
  }
  .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\/11 {
    border-color: #ffffff1c;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/11 {
      border-color: color-mix(in oklab, var(--color-white) 11%, transparent);
    }
  }
  .border-white\/15 {
    border-color: #ffffff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/15 {
      border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }
  .border-white\/45 {
    border-color: #ffffff73;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/45 {
      border-color: color-mix(in oklab, var(--color-white) 45%, transparent);
    }
  }
  .border-white\/50 {
    border-color: #ffffff80;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-white\/50 {
      border-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }
  .border-b-white\/15 {
    border-bottom-color: #ffffff26;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .border-b-white\/15 {
      border-bottom-color: color-mix(
        in oklab,
        var(--color-white) 15%,
        transparent
      );
    }
  }
  .bg-\(--hero-input-surface\) {
    background-color: var(--hero-input-surface);
  }
  .bg-\[\#120615\] {
    background-color: #120615;
  }
  .bg-\[rgba\(31\,14\,41\,0\.7\)\] {
    background-color: #1f0e29b3;
  }
  .bg-\[rgba\(48\,8\,62\,0\.31\)\] {
    background-color: #30083e4f;
  }
  .bg-\[rgba\(65\,2\,88\,0\.29\)\] {
    background-color: #4102584a;
  }
  .bg-\[rgba\(103\,50\,112\,0\.21\)\] {
    background-color: #67327036;
  }
  .bg-background {
    background-color: var(--background);
  }
  .bg-black\/12 {
    background-color: #0000001f;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/12 {
      background-color: color-mix(
        in oklab,
        var(--color-black) 12%,
        transparent
      );
    }
  }
  .bg-brand-bg,
  .bg-brand-bg\/55 {
    background-color: var(--brand-bg);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-brand-bg\/55 {
      background-color: color-mix(in oklab, var(--brand-bg) 55%, transparent);
    }
  }
  .bg-destructive\/10 {
    background-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-destructive\/10 {
      background-color: color-mix(
        in oklab,
        var(--destructive) 10%,
        transparent
      );
    }
  }
  .bg-input\/30 {
    background-color: var(--input);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-input\/30 {
      background-color: color-mix(in oklab, var(--input) 30%, transparent);
    }
  }
  .bg-primary {
    background-color: var(--primary);
  }
  .bg-transparent {
    background-color: #0000;
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/18 {
    background-color: #ffffff2e;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/18 {
      background-color: color-mix(
        in oklab,
        var(--color-white) 18%,
        transparent
      );
    }
  }
  .bg-white\/\[0\.06\] {
    background-color: #ffffff0f;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/\[0\.06\] {
      background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
    }
  }
  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }
  .bg-\[linear-gradient\(90deg\,rgba\(154\,28\,175\,0\.92\)_0\%\,rgba\(74\,65\,140\,0\.95\)_100\%\)\] {
    background-image: linear-gradient(90deg, #9a1cafeb 0%, #4a418cf2 100%);
  }
  .bg-\[linear-gradient\(96\.12deg\,\#ca23e7_0\.37\%\,rgba\(152\,167\,255\,0\.75\)_99\.18\%\)\] {
    background-image: linear-gradient(
      96.12deg,
      #ca23e7 0.37%,
      #98a7ffbf 99.18%
    );
  }
  .bg-\[linear-gradient\(111\.12deg\,rgba\(202\,35\,231\,0\.16\)_0\.37\%\,rgba\(152\,167\,255\,0\.12\)_99\.18\%\)\] {
    background-image: linear-gradient(
      111.12deg,
      #ca23e729 0.37%,
      #98a7ff1f 99.18%
    );
  }
  .from-white {
    --tw-gradient-from: var(--color-white);
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .to-\[rgba\(255\,249\,249\,0\.8\)\] {
    --tw-gradient-to: #fff9f9cc;
    --tw-gradient-stops: var(
      --tw-gradient-via-stops,
      var(--tw-gradient-position),
      var(--tw-gradient-from) var(--tw-gradient-from-position),
      var(--tw-gradient-to) var(--tw-gradient-to-position)
    );
  }
  .bg-clip-padding {
    background-clip: padding-box;
  }
  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-fill {
    object-fit: fill;
  }
  .object-bottom {
    object-position: bottom;
  }
  .object-center {
    object-position: center;
  }
  .object-top {
    object-position: top;
  }
  .p-0 {
    padding: 0;
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-\[3\.25px\] {
    padding: 3.25px;
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-\[18px\] {
    padding-inline: 18px;
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }
  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }
  .py-84 {
    padding-block: calc(var(--spacing) * 84);
  }
  .py-\[10px\] {
    padding-block: 10px;
  }
  .pt-0 {
    padding-top: 0;
  }
  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }
  .pt-\[18px\] {
    padding-top: 18px;
  }
  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }
  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }
  .pb-\[18px\] {
    padding-bottom: 18px;
  }
  .pb-\[var\(--footer-bottom-reserve\,14rem\)\] {
    padding-bottom: var(--footer-bottom-reserve, 14rem);
  }
  .pl-0 {
    padding-left: 0;
  }
  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .font-heading {
    font-family: var(--font-parkinsons);
  }
  .font-sans,
  .font-subheading {
    font-family: var(--font-inter);
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[12px\] {
    font-size: 12px;
  }
  .text-\[13px\] {
    font-size: 13px;
  }
  .text-\[14px\] {
    font-size: 14px;
  }
  .text-\[15px\] {
    font-size: 15px;
  }
  .text-\[16px\] {
    font-size: 16px;
  }
  .text-\[18px\] {
    font-size: 18px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-\[22px\] {
    font-size: 22px;
  }
  .text-\[30px\] {
    font-size: 30px;
  }
  .leading-6 {
    --tw-leading: calc(var(--spacing) * 6);
    line-height: calc(var(--spacing) * 6);
  }
  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }
  .leading-\[1\.6\] {
    --tw-leading: 1.6;
    line-height: 1.6;
  }
  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }
  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .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-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.2px\] {
    --tw-tracking: 0.2px;
    letter-spacing: 0.2px;
  }
  .tracking-\[0\.3px\] {
    --tw-tracking: 0.3px;
    letter-spacing: 0.3px;
  }
  .tracking-\[0\.4px\] {
    --tw-tracking: 0.4px;
    letter-spacing: 0.4px;
  }
  .tracking-\[0\.48px\] {
    --tw-tracking: 0.48px;
    letter-spacing: 0.48px;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-line {
    white-space: pre-line;
  }
  .text-\(--hero-error\) {
    color: var(--hero-error);
  }
  .text-\[\#cecece\] {
    color: #cecece;
  }
  .text-\[\#eac8ff\] {
    color: #eac8ff;
  }
  .text-\[\#ebecef\] {
    color: #ebecef;
  }
  .text-\[\#efedf1\] {
    color: #efedf1;
  }
  .text-brand-magenta {
    color: var(--brand-magenta);
  }
  .text-brand-white {
    color: var(--brand-white);
  }
  .text-destructive {
    color: var(--destructive);
  }
  .text-neutral-n30 {
    color: var(--neutral-n30);
  }
  .text-neutral-n40 {
    color: var(--neutral-n40);
  }
  .text-primary {
    color: var(--primary);
  }
  .text-primary-foreground {
    color: var(--primary-foreground);
  }
  .text-transparent {
    color: #0000;
  }
  .text-white {
    color: var(--color-white);
  }
  .underline-offset-4 {
    text-underline-offset: 4px;
  }
  .antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .accent-brand-magenta {
    accent-color: var(--brand-magenta);
  }
  .opacity-0 {
    opacity: 0;
  }
  .opacity-70 {
    opacity: 0.7;
  }
  .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,);
  }
  .drop-shadow-\[0_4px_4px_rgba\(0\,0\,0\,0\.25\)\] {
    --tw-drop-shadow-size: drop-shadow(
      0 4px 4px var(--tw-drop-shadow-color, #00000040)
    );
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    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,);
  }
  .backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[10px\] {
    --tw-backdrop-blur: blur(10px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[12px\] {
    --tw-backdrop-blur: blur(12px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,)
      var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,)
      var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,)
      var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,)
      var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,)
      var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,)
      var(--tw-backdrop-sepia,);
  }
  .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,
      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-\[background-color\,border-color\,color\] {
    transition-property: background-color, border-color, color;
    transition-timing-function: var(
      --tw-ease,
      var(--default-transition-timing-function)
    );
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    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-opacity {
    transition-property: opacity;
    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-200 {
    --tw-duration: 0.2s;
    transition-duration: 0.2s;
  }
  .duration-500 {
    --tw-duration: 0.5s;
    transition-duration: 0.5s;
  }
  .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;
  }
  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }
  .paused {
    animation-play-state: paused;
  }
  .not-last\:border-b:not(:last-child) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .not-last\:border-b-0:not(:last-child) {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }
  @media (hover: hover) {
    .group-hover\/sign-in\:translate-x-0:is(:where(.group\/sign-in):hover *) {
      --tw-translate-x: 0;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    .group-hover\/sign-in\:border-brand-magenta:is(
      :where(.group\/sign-in):hover *
    ) {
      border-color: var(--brand-magenta);
    }
    .group-hover\/sign-in\:bg-transparent:is(:where(.group\/sign-in):hover *) {
      background-color: #0000;
    }
    .group-hover\/sign-in\:text-\[\#eccbff\]:is(
        :where(.group\/sign-in):hover *
      ) {
      color: #eccbff;
    }
    .group-hover\/sign-in\:text-brand-magenta:is(
      :where(.group\/sign-in):hover *
    ) {
      color: var(--brand-magenta);
    }
  }
  .group-aria-expanded\/accordion-trigger\:hidden:is(
    :where(.group\/accordion-trigger)[aria-expanded="true"] *
  ) {
    display: none;
  }
  .group-aria-expanded\/accordion-trigger\:inline:is(
    :where(.group\/accordion-trigger)[aria-expanded="true"] *
  ) {
    display: inline;
  }
  .group-aria-expanded\/accordion-trigger\:rotate-180:is(
    :where(.group\/accordion-trigger)[aria-expanded="true"] *
  ) {
    rotate: 180deg;
  }
  .placeholder\:text-neutral-n30::placeholder {
    color: var(--neutral-n30);
  }
  @media (hover: hover) {
    .hover\:bg-\[rgba\(103\,50\,112\,0\.32\)\]:hover {
      background-color: #67327052;
    }
    .hover\:bg-brand-white\/10:hover {
      background-color: var(--brand-white);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-brand-white\/10:hover {
        background-color: color-mix(
          in oklab,
          var(--brand-white) 10%,
          transparent
        );
      }
    }
    .hover\:bg-destructive\/20:hover {
      background-color: var(--destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-destructive\/20:hover {
        background-color: color-mix(
          in oklab,
          var(--destructive) 20%,
          transparent
        );
      }
    }
    .hover\:bg-input\/50:hover {
      background-color: var(--input);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-input\/50:hover {
        background-color: color-mix(in oklab, var(--input) 50%, transparent);
      }
    }
    .hover\:bg-muted:hover {
      background-color: var(--muted);
    }
    .hover\:bg-primary\/80:hover {
      background-color: var(--primary);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/80:hover {
        background-color: color-mix(in oklab, var(--primary) 80%, transparent);
      }
    }
    .hover\:bg-transparent:hover {
      background-color: #0000;
    }
    .hover\:bg-\[linear-gradient\(111\.12deg\,rgba\(202\,35\,231\,0\.24\)_0\.37\%\,rgba\(152\,167\,255\,0\.18\)_99\.18\%\)\]:hover {
      background-image: linear-gradient(
        111.12deg,
        #ca23e73d 0.37%,
        #98a7ff2e 99.18%
      );
    }
    .hover\:text-foreground:hover {
      color: var(--foreground);
    }
    .hover\:no-underline:hover {
      text-decoration-line: none;
    }
    .hover\:underline:hover {
      text-decoration-line: underline;
    }
    .hover\:opacity-80:hover {
      opacity: 0.8;
    }
    .hover\:opacity-90:hover {
      opacity: 0.9;
    }
    .hover\:opacity-100:hover {
      opacity: 1;
    }
  }
  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }
  .focus-visible\:border-brand-white\/50:focus-visible {
    border-color: var(--brand-white);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-brand-white\/50:focus-visible {
      border-color: color-mix(in oklab, var(--brand-white) 50%, transparent);
    }
  }
  .focus-visible\:border-destructive\/40:focus-visible {
    border-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:border-destructive\/40:focus-visible {
      border-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }
  .focus-visible\:border-ring:focus-visible {
    border-color: var(--ring);
  }
  .focus-visible\:ring-\[3px\]:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .focus-visible\:ring-brand-magenta\/40:focus-visible {
    --tw-ring-color: var(--brand-magenta);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-brand-magenta\/40:focus-visible {
      --tw-ring-color: color-mix(
        in oklab,
        var(--brand-magenta) 40%,
        transparent
      );
    }
  }
  .focus-visible\:ring-brand-white\/20:focus-visible {
    --tw-ring-color: var(--brand-white);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-brand-white\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--brand-white) 20%, transparent);
    }
  }
  .focus-visible\:ring-destructive\/20:focus-visible {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-destructive\/20:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  .focus-visible\:ring-ring\/50:focus-visible {
    --tw-ring-color: var(--ring);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .focus-visible\:ring-ring\/50:focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
    }
  }
  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }
  .active\:not-aria-\[haspopup\]\:translate-y-px:active:not([aria-haspopup]) {
    --tw-translate-y: 1px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }
  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }
  .has-data-\[icon\=inline-end\]\:pr-2:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 2);
  }
  .has-data-\[icon\=inline-end\]\:pr-2\.5:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 2.5);
  }
  .has-data-\[icon\=inline-end\]\:pr-3:has([data-icon="inline-end"]) {
    padding-right: calc(var(--spacing) * 3);
  }
  .has-data-\[icon\=inline-start\]\:pl-2:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 2);
  }
  .has-data-\[icon\=inline-start\]\:pl-2\.5:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 2.5);
  }
  .has-data-\[icon\=inline-start\]\:pl-3:has([data-icon="inline-start"]) {
    padding-left: calc(var(--spacing) * 3);
  }
  .aria-disabled\:pointer-events-none[aria-disabled="true"] {
    pointer-events: none;
  }
  .aria-disabled\:opacity-50[aria-disabled="true"] {
    opacity: 0.5;
  }
  .aria-expanded\:bg-muted[aria-expanded="true"] {
    background-color: var(--muted);
  }
  .aria-expanded\:text-foreground[aria-expanded="true"] {
    color: var(--foreground);
  }
  .aria-invalid\:border-destructive[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  .aria-invalid\:ring-\[3px\][aria-invalid="true"] {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0
      calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow:
      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .aria-invalid\:ring-destructive\/20[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
    }
  }
  .data-ending-style\:h-0[data-ending-style],
  .data-starting-style\:h-0[data-starting-style] {
    height: 0;
  }
  :is(
    .\*\*\:data-\[slot\=accordion-trigger-icon\]\:ml-auto *
  )[data-slot="accordion-trigger-icon"] {
    margin-left: auto;
  }
  :is(
    .\*\*\:data-\[slot\=accordion-trigger-icon\]\:hidden *
  )[data-slot="accordion-trigger-icon"] {
    display: none;
  }
  :is(
    .\*\*\:data-\[slot\=accordion-trigger-icon\]\:size-4 *
  )[data-slot="accordion-trigger-icon"] {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  :is(
    .\*\*\:data-\[slot\=accordion-trigger-icon\]\:text-muted-foreground *
  )[data-slot="accordion-trigger-icon"] {
    color: var(--muted-foreground);
  }
  @media (prefers-reduced-motion: reduce) {
    .motion-reduce\:transition-none {
      transition-property: none;
    }
  }
  @media (min-width: 40rem) {
    .sm\:size-8 {
      width: calc(var(--spacing) * 8);
      height: calc(var(--spacing) * 8);
    }
    .sm\:w-\[160px\] {
      width: 160px;
    }
    .sm\:w-auto {
      width: auto;
    }
    .sm\:basis-\[380px\] {
      flex-basis: 380px;
    }
    .sm\:flex-row {
      flex-direction: row;
    }
    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }
    .sm\:gap-x-6 {
      column-gap: calc(var(--spacing) * 6);
    }
    .sm\:gap-y-10 {
      row-gap: calc(var(--spacing) * 10);
    }
    .sm\:px-5 {
      padding-inline: calc(var(--spacing) * 5);
    }
    .sm\:px-8 {
      padding-inline: calc(var(--spacing) * 8);
    }
    .sm\:py-\[15px\] {
      padding-block: 15px;
    }
    .sm\:text-\[13px\] {
      font-size: 13px;
    }
    .sm\:text-\[18px\] {
      font-size: 18px;
    }
  }
  @media (min-width: 48rem) {
    .md\:h-\[50px\] {
      height: 50px;
    }
    .md\:min-h-\[400px\] {
      min-height: 400px;
    }
    .md\:min-h-\[680px\] {
      min-height: 680px;
    }
    .md\:gap-12 {
      gap: calc(var(--spacing) * 12);
    }
    .md\:gap-\[34px\] {
      gap: 34px;
    }
    .md\:gap-x-10 {
      column-gap: calc(var(--spacing) * 10);
    }
    .md\:gap-y-12 {
      row-gap: calc(var(--spacing) * 12);
    }
    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }
    .md\:px-\[18px\] {
      padding-inline: 18px;
    }
    .md\:py-12 {
      padding-block: calc(var(--spacing) * 12);
    }
    .md\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }
    .md\:pt-14 {
      padding-top: calc(var(--spacing) * 14);
    }
    .md\:pt-16 {
      padding-top: calc(var(--spacing) * 16);
    }
    .md\:text-base {
      font-size: var(--text-base);
      line-height: var(--tw-leading, var(--text-base--line-height));
    }
  }
  @media (min-width: 64rem) {
    .lg\:block {
      display: block;
    }
    .lg\:flex {
      display: flex;
    }
    .lg\:hidden {
      display: none;
    }
    .lg\:inline-flex {
      display: inline-flex;
    }
    .lg\:h-\[57px\] {
      height: 57px;
    }
    .lg\:min-h-\[469px\] {
      min-height: 469px;
    }
    .lg\:min-h-\[var\(--footer-artboard-h\,756px\)\] {
      min-height: var(--footer-artboard-h, 756px);
    }
    .lg\:w-\[160px\] {
      width: 160px;
    }
    .lg\:w-\[180px\] {
      width: 180px;
    }
    .lg\:w-\[280px\] {
      width: 280px;
    }
    .lg\:w-\[351px\] {
      width: 351px;
    }
    .lg\:max-w-\[280px\] {
      max-width: 280px;
    }
    .lg\:max-w-\[784px\] {
      max-width: 784px;
    }
    .lg\:flex-1 {
      flex: 1;
    }
    .lg\:shrink-0 {
      flex-shrink: 0;
    }
    .lg\:flex-row {
      flex-direction: row;
    }
    .lg\:items-start {
      align-items: flex-start;
    }
    .lg\:justify-between {
      justify-content: space-between;
    }
    .lg\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }
    .lg\:p-4 {
      padding: calc(var(--spacing) * 4);
    }
    .lg\:px-16 {
      padding-inline: calc(var(--spacing) * 16);
    }
    .lg\:py-16 {
      padding-block: calc(var(--spacing) * 16);
    }
    .lg\:py-20 {
      padding-block: calc(var(--spacing) * 20);
    }
    .lg\:pt-8 {
      padding-top: calc(var(--spacing) * 8);
    }
    .lg\:pt-20 {
      padding-top: calc(var(--spacing) * 20);
    }
    .lg\:text-lg {
      font-size: var(--text-lg);
      line-height: var(--tw-leading, var(--text-lg--line-height));
    }
    .lg\:text-\[14px\] {
      font-size: 14px;
    }
    .lg\:text-\[15px\] {
      font-size: 15px;
    }
    .lg\:text-\[16px\] {
      font-size: 16px;
    }
    .lg\:text-\[18px\] {
      font-size: 18px;
    }
    .lg\:text-\[20px\] {
      font-size: 20px;
    }
    .lg\:text-\[22px\] {
      font-size: 22px;
    }
    .lg\:text-\[40px\] {
      font-size: 40px;
    }
    .lg\:text-\[48px\] {
      font-size: 48px;
    }
  }
  @media (min-width: 80rem) {
    .xl\:flex {
      display: flex;
    }
    .xl\:hidden {
      display: none;
    }
  }
  .dark\:bg-destructive\/20:is(.dark *) {
    background-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .dark\:bg-destructive\/20:is(.dark *) {
      background-color: color-mix(
        in oklab,
        var(--destructive) 20%,
        transparent
      );
    }
  }
  @media (hover: hover) {
    .dark\:hover\:bg-destructive\/30:is(.dark *):hover {
      background-color: var(--destructive);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-destructive\/30:is(.dark *):hover {
        background-color: color-mix(
          in oklab,
          var(--destructive) 30%,
          transparent
        );
      }
    }
    .dark\:hover\:bg-muted\/50:is(.dark *):hover {
      background-color: var(--muted);
    }
    @supports (color: color-mix(in lab, red, red)) {
      .dark\:hover\:bg-muted\/50:is(.dark *):hover {
        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
      }
    }
  }
  .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }
  .dark\:aria-invalid\:border-destructive\/50:is(.dark *)[aria-invalid="true"] {
    border-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:border-destructive\/50:is(
        .dark *
      )[aria-invalid="true"] {
      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
    }
  }
  .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
    --tw-ring-color: var(--destructive);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
    }
  }
  .data-open\:animate-accordion-down:where([data-state="open"]),
  .data-open\:animate-accordion-down:where(
    [data-open]:not([data-open="false"])
  ) {
    animation: accordion-down
      var(--tw-animation-duration, var(--tw-duration, 0.2s))
      var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .data-open\:bg-muted\/50:where([data-state="open"]),
  .data-open\:bg-muted\/50:where([data-open]:not([data-open="false"])) {
    background-color: var(--muted);
  }
  @supports (color: color-mix(in lab, red, red)) {
    .data-open\:bg-muted\/50:where([data-state="open"]),
    .data-open\:bg-muted\/50:where([data-open]:not([data-open="false"])) {
      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
    }
  }
  .data-open\:bg-white\/\[0\.08\]:where([data-state="open"]),
  .data-open\:bg-white\/\[0\.08\]:where([data-open]:not([data-open="false"])) {
    background-color: #ffffff14;
  }
  @supports (color: color-mix(in lab, red, red)) {
    .data-open\:bg-white\/\[0\.08\]:where([data-state="open"]),
    .data-open\:bg-white\/\[0\.08\]:where(
        [data-open]:not([data-open="false"])
      ) {
      background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
    }
  }
  .data-closed\:animate-accordion-up:where([data-state="closed"]),
  .data-closed\:animate-accordion-up:where(
    [data-closed]:not([data-closed="false"])
  ) {
    animation: accordion-up
      var(--tw-animation-duration, var(--tw-duration, 0.2s))
      var(--tw-ease, ease-out) var(--tw-animation-delay, 0s)
      var(--tw-animation-iteration-count, 1)
      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
  }
  .\[\&_a\]\:underline a {
    text-decoration-line: underline;
  }
  .\[\&_a\]\:underline-offset-3 a {
    text-underline-offset: 3px;
  }
  @media (hover: hover) {
    .\[\&_a\]\:hover\:text-foreground a:hover {
      color: var(--foreground);
    }
  }
  .\[\&_p\:not\(\:last-child\)\]\:mb-4 p:not(:last-child) {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
  }
  .\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
  }
  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 3);
    height: calc(var(--spacing) * 3);
  }
  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }
  .info-container {
    width: min(100% - 1.5rem, 1600px);
    min-width: 0;
    margin-inline: auto;
  }
  .navbar-container {
    width: min(100% - 1.5rem, 1120px);
    min-width: 0;
    margin-inline: auto;
  }
  .hero-section {
    --hero-scale: min(1, 100vw / 1920);
    --hero-mobile-scale: clamp(0.72, 100vw / 390, 1);
    --hero-title-size: clamp(1.375rem, 0.95rem + 2.8vw, 2.75rem);
    --hero-body-size: clamp(0.9375rem, 0.84rem + 0.45vw, 1.125rem);
    --hero-content-gap: clamp(1.25rem, 0.75rem + 2vw, 1.75rem);
    --hero-text-gap: clamp(1rem, 0.5rem + 2vw, 1.5rem);
    --hero-tiger-width: clamp(11.5rem, 86vw, 41.5625rem);
    width: min(100%, 1920px);
    margin-inline: auto;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .hero-section {
      --hero-mobile-scale: clamp(0.88, 100vw / 768, 1);
      --hero-title-size: clamp(2rem, 1.35rem + 2.2vw, 2.5rem);
      --hero-tiger-width: clamp(18rem, 52vw, 41.5625rem);
    }
  }
  @media (min-width: 1025px) {
    .hero-section {
      --hero-mobile-scale: 1;
      --hero-title-size: 2.75rem;
      --hero-body-size: 1.125rem;
      --hero-tiger-width: clamp(17.5rem, 34.64vw, 41.5625rem);
      height: 916px;
      min-height: 916px;
      max-height: 916px;
    }
  }
  .hero-section-bg {
    background-color: var(--brand-bg);
    height: 100%;
    max-height: none;
    inset: 0;
    min-height: inherit;
  }
  .hero-section-bg-image {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
    display: block;
  }
  @media (max-width: 1024px) {
    .hero-section-bg {
      min-height: 100%;
    }
    .hero-section-bg-image {
      min-height: 100%;
    }
  }
  @media (min-width: 1025px) {
    .hero-section-bg {
      height: 100%;
      min-height: 916px;
    }
  }
  @media (min-width: 1025px) and (max-width: 1519px) {
    .hero-section-bg-image {
      object-fit: fill;
      object-position: center top;
    }
  }
  @media (min-width: 1520px) {
    .hero-section-bg {
      height: 100%;
      min-height: 916px;
      inset: 0;
    }
    .hero-section-bg-image {
      object-fit: fill;
      object-position: center top;
      width: 100%;
      height: 100%;
      min-height: 100%;
    }
  }
  .hero-content {
    z-index: 10;
    isolation: isolate;
    align-items: flex-start;
    gap: var(--hero-content-gap);
    flex-direction: column;
    width: min(100% - clamp(1rem, 4vw, 1.5rem), 875px);
    margin-inline: auto;
    padding: clamp(5.25rem, 3.75rem + 8vw, 7rem) clamp(0.75rem, 2vw, 1rem)
      clamp(2rem, 1rem + 4vw, 4rem);
    display: flex;
    position: relative;
  }
  .hero-text-block {
    z-index: 2;
    gap: var(--hero-text-gap);
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: min(873px, 100%);
    display: flex;
    position: relative;
  }
  .hero-description {
    z-index: 4;
    width: 100%;
    font-size: var(--hero-body-size);
    color: var(--neutral-n40);
    font-weight: 400;
    line-height: 1.5;
    position: relative;
  }
  .hero-section--about {
    --hero-content-gap: clamp(1.25rem, 0.75rem + 2vw, 2.125rem);
    --hero-text-gap: clamp(1rem, 0.5rem + 2vw, 1.75rem);
    --hero-about-content-max: 826px;
    --hero-about-description-max: 676px;
  }
  .hero-section--about .hero-content {
    width: min(
      calc(100% - clamp(1rem, 4vw, 1.5rem)),
      var(--hero-about-content-max)
    );
    max-width: var(--hero-about-content-max);
  }
  .hero-section--about .hero-text-block,
  .hero-section--about .hero-title,
  .hero-section--about .hero-title__group,
  .hero-section--about .hero-title__headline,
  .hero-section--about .hero-actions {
    width: 100%;
    max-width: var(--hero-about-content-max);
  }
  .hero-section--about .hero-title__headline {
    white-space: normal;
    flex-wrap: wrap;
  }
  .hero-section--about .hero-title__suffix .text-metallic-sheen {
    display: inline;
    line-height: inherit;
    vertical-align: baseline;
  }
  .hero-section--about .hero-description {
    max-width: min(var(--hero-about-description-max), 100%);
  }
  .hero-title {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }
  .hero-title__group {
    z-index: 2;
    isolation: isolate;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.125rem, 0.75vw, 0.375rem);
    width: 100%;
    max-width: 100%;
    margin-top: clamp(2.25rem, 9vw, 3.25rem);
    display: flex;
    position: relative;
  }
  .hero-title__row {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(0.125rem, 0.75vw, 0.375rem);
    width: 100%;
    max-width: 100%;
    display: flex;
  }
  .hero-title__break {
    display: none;
  }
  .hero-title__badge {
    --hero-title-design: 2.75rem;
    --badge-scale: calc(var(--hero-title-size) / var(--hero-title-design));
    --badge-width: calc(279px * var(--badge-scale));
    z-index: 3;
    width: var(--badge-width);
    height: calc(78px * var(--badge-scale));
    flex-shrink: 0;
    position: relative;
    overflow: visible;
  }
  .hero-title__badge-inner {
    width: 279px;
    height: 78px;
    transform: scale(var(--badge-scale));
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .hero-title__badge-accent,
  .hero-title__badge-edge {
    z-index: 1;
    position: relative;
  }
  .hero-title__badge-label {
    z-index: 2;
    text-align: center;
    width: 279px;
    height: 78px;
    font-size: var(--hero-title-size);
    letter-spacing: 0.01em;
    color: var(--hero-badge-text);
    justify-content: center;
    align-items: center;
    margin: 0;
    font-weight: 700;
    line-height: 1.35;
    display: flex;
    position: relative;
  }
  .hero-title__suffix {
    z-index: 1;
    font-size: var(--hero-title-size);
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #0000;
    background-image: linear-gradient(90deg, #efefef 0%, #ffffffc9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    flex-shrink: 0;
    margin-left: 0;
    font-weight: 700;
    line-height: 1.35;
    position: relative;
  }
  .hero-title__headline {
    z-index: 1;
    font-size: var(--hero-title-size);
    letter-spacing: 0.01em;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(0.25rem, 0.75vw, 0.5rem);
    font-weight: 700;
    line-height: 1.35;
    display: flex;
    position: relative;
  }
  .hero-form {
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.5rem, 0.75rem + 3vw, 2rem);
    width: 100%;
    display: flex;
    position: relative;
  }
  .hero-form__inputs {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1rem, 0.5rem + 2vw, 1.5rem);
    width: 100%;
    display: flex;
  }
  .hero-form__meta {
    z-index: 2;
    width: 100%;
    color: var(--brand-white);
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    display: flex;
    position: relative;
  }
  .hero-form__meta a {
    color: var(--hero-error);
  }
  .hero-form__remember-desktop,
  .hero-form__forgot-desktop {
    display: none;
  }
  @media (min-width: 1025px) {
    .hero-form__inputs {
      flex-direction: row;
      align-items: flex-start;
      gap: 1.5rem;
      width: fit-content;
    }
    .hero-form__meta {
      display: none;
    }
    .hero-form__remember-desktop,
    .hero-form__forgot-desktop {
      display: flex;
    }
    .hero-form__forgot-desktop {
      display: block;
    }
    .hero-form__field {
      flex: 0 0 307px;
      width: 307px;
      max-width: 307px;
    }
    .hero-form__field > .hero-form__input {
      width: 100%;
      height: 3.5rem;
    }
    .hero-form__remember-desktop {
      width: fit-content;
      height: auto;
    }
    .hero-form {
      gap: 1.25rem;
    }
  }
  .hero-form__field {
    flex-direction: column;
    gap: 0.6875rem;
    width: 100%;
    max-width: 100%;
    display: flex;
  }
  .hero-form__remember {
    width: fit-content;
  }
  .hero-form__remember-checkbox {
    appearance: none;
    background-color: #ffffff2e;
  }
  .hero-form__remember-checkbox:checked {
    background-color: var(--brand-magenta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 9.25L7.75 12.5L13.5 6.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 12px 12px;
  }
  .hero-form__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1rem, 0.5rem + 2vw, 1.125rem);
    width: 100%;
    display: flex;
  }
  .hero-form__buttons {
    flex-direction: row;
    align-items: stretch;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    width: 100%;
    display: flex;
  }
  .hero-form__button {
    border-radius: 0.75rem;
    flex: 1 1 0;
    align-items: center;
    width: auto;
    min-width: 0;
    max-width: none;
    height: clamp(3rem, 2.75rem + 1vw, 3.5rem);
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1rem);
    font-weight: 600;
    line-height: 1.4;
    display: flex;
  }
  .hero-actions {
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: flex;
    position: relative;
  }
  .hero-actions__buttons {
    flex-flow: wrap;
    align-items: center;
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
    width: 100%;
    display: flex;
  }
  .hero-actions__button {
    border-radius: 0.75rem;
    flex: none;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: clamp(3rem, 2.75rem + 1vw, 3.125rem);
    padding: 0.625rem 1.125rem;
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1rem);
    font-weight: 600;
    line-height: 1.5;
    transition: opacity 0.2s;
    display: inline-flex;
    position: relative;
    overflow: visible;
  }
  .hero-actions__button:hover {
    opacity: 0.92;
  }
  .hero-actions__button--primary {
    background-image: var(--gradient-hero-cta);
    color: var(--brand-white);
    border: 1.5px solid #cc7aff;
  }
  .hero-actions__button--secondary {
    color: var(--brand-white);
    background: #6f6f6f17;
    border: 0.5px solid #6d60ae82;
    transition:
      background 0.28s ease,
      border-color 0.28s ease,
      box-shadow 0.28s ease,
      transform 0.28s ease,
      color 0.28s ease,
      opacity 0.28s ease;
  }
  .hero-actions__button--secondary:hover,
  .hero-actions__button--secondary:focus-visible {
    border-color: #e07cff;
    background: linear-gradient(
      120.46deg,
      rgba(202, 35, 231, 0.22) 0.37%,
      rgba(152, 167, 255, 0.16) 99.18%
    );
    box-shadow:
      0 10px 24px rgba(202, 35, 231, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateY(-2px);
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-actions__button--secondary:hover,
    .hero-actions__button--secondary:focus-visible {
      transform: none;
    }
  }
  .hero-form__button-shine,
  .button-shine {
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(90deg, #0000, #fffc, #0000);
    width: 100%;
    height: 100%;
    animation: 2s linear infinite button-shine-sweep;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    will-change: transform;
  }
  .hero-form__button-label {
    z-index: 2;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
  }
  @keyframes button-shine-sweep {
    0% {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-form__button-shine,
    .button-shine {
      animation: none;
      display: none;
    }
  }
  .hero-tiger-mobile {
    z-index: 5;
    width: var(--hero-tiger-width);
    aspect-ratio: 665/731;
    margin-inline: auto;
    margin-top: clamp(1.5rem, 0.5rem + 4vw, 2.5rem);
    padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 4rem);
    position: relative;
  }
  @media (max-width: 767px) {
    .hero-title__badge-label {
      font-size: calc(26px / var(--badge-scale));
    }
  }
  @media (min-width: 1025px) {
    .hero-title__badge {
      margin-top: 0;
    }
    .hero-title__group {
      gap: 0.625rem;
      margin-top: 0;
    }
    .hero-title__row {
      flex-flow: wrap;
      align-items: center;
      gap: 0;
      width: auto;
    }
    .hero-title__break {
      content: "";
      flex-basis: 100%;
      width: 0;
      height: 0;
      display: block;
      overflow: hidden;
    }
    .hero-title__badge-label {
      text-align: left;
      width: 5.5em;
      height: 1.25em;
      font-size: var(--hero-title-size);
      letter-spacing: 0.01em;
      margin-top: 0.136em;
      margin-left: 0.409em;
      display: block;
    }
    .hero-title__suffix {
      letter-spacing: 0.01em;
      margin-left: 0;
    }
    .hero-title__headline {
      white-space: nowrap;
      letter-spacing: 0.44px;
      flex-wrap: nowrap;
      gap: 0.875rem;
    }
    .hero-content {
      z-index: 10;
      width: min(875px, 100% - clamp(2rem, 16.666%, 20rem));
      height: auto;
      min-height: 0;
      max-height: none;
      margin-inline: 0;
      padding: 0;
      position: absolute;
      top: clamp(11rem, 29.8%, 17.0625rem);
      left: clamp(1rem, 8.333%, 10rem);
    }
    .hero-text-block {
      width: min(873px, 100%);
    }
    .hero-section--about .hero-content {
      width: min(
        var(--hero-about-content-max),
        calc(100% - clamp(2rem, 16.666%, 20rem))
      );
      max-width: var(--hero-about-content-max);
    }
    .hero-section--about .hero-text-block {
      width: 100%;
      max-width: var(--hero-about-content-max);
    }
    .hero-section--about .hero-title__headline {
      white-space: normal;
      flex-wrap: wrap;
    }
    .hero-form__button {
      flex: 0 0 307px;
      width: 307px;
      max-width: 307px;
    }
  }
  @media (min-width: 1520px) {
    .hero-title__suffix {
      margin-left: 2rem;
    }
  }
  @media (min-width: 1025px) and (max-width: 1439px) {
    .hero-section {
      --hero-title-size: clamp(2.25rem, 1.5rem + 1.75vw, 2.75rem);
    }
  }
  @media (min-width: 1360px) and (max-width: 1519px) {
    .hero-section {
      --hero-title-size: 2.25rem;
      --hero-body-size: 1rem;
      --hero-content-gap: 1.25rem;
      --hero-text-gap: 1.125rem;
      --hero-tiger-width: 50%;
    }
    .hero-title__badge-label {
      text-align: center;
      width: 279px;
      height: 78px;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .hero-title__suffix {
      margin-left: 0.75rem;
    }
    .hero-title__headline {
      white-space: normal;
      flex-wrap: wrap;
      gap: 0.625rem;
    }
    .hero-content {
      gap: var(--hero-content-gap);
      width: 45%;
      max-width: 45%;
      top: 12.5rem;
      left: 5%;
    }
    .hero-text-block {
      width: 100%;
      max-width: 100%;
    }
    .hero-section--about .hero-content {
      width: min(var(--hero-about-content-max), 45%);
      max-width: var(--hero-about-content-max);
    }
    .hero-section--about .hero-text-block,
    .hero-section--about .hero-title,
    .hero-section--about .hero-title__group,
    .hero-section--about .hero-title__headline,
    .hero-section--about .hero-actions {
      max-width: 100%;
    }
    .hero-section--about .hero-description {
      max-width: min(var(--hero-about-description-max), 100%);
    }
    .hero-form {
      gap: 1.125rem;
      width: 100%;
    }
    .hero-form__inputs {
      gap: 1rem;
      width: 100%;
    }
    .hero-form__field {
      flex: calc(50% - 0.5rem);
      width: calc(50% - 0.5rem);
      max-width: calc(50% - 0.5rem);
    }
    .hero-form__field > .hero-form__input {
      height: 3.25rem;
    }
    .hero-form__buttons {
      gap: 1rem;
      width: 100%;
    }
    .hero-form__button {
      flex: calc(50% - 0.5rem);
      width: calc(50% - 0.5rem);
      max-width: calc(50% - 0.5rem);
      height: 3.25rem;
    }
    .hero-tiger {
      width: 50%;
      max-width: 50%;
      left: 50%;
      right: 0;
    }
  }
  @media (max-width: 1024px) {
    .hero-tiger {
      display: none;
    }
  }
  @media (min-width: 1025px) {
    .hero-tiger-mobile {
      display: none;
    }
  }
  .hero-tiger {
    pointer-events: none;
  }
  @media (min-width: 1024px) {
    .hero-tiger {
      z-index: 5;
      width: min(665px, 42vw);
      height: min(731px, 80%);
      position: absolute;
      bottom: 0;
      right: max(0px, 50% - 800px);
    }
  }
  .hero-tiger-image {
    max-width: 100%;
    height: auto;
    display: block;
  }
  .bg-button-2 {
    background-image: var(--gradient-button-2);
  }
  .bg-gradient-text-2 {
    background-image: var(--gradient-text-2);
  }
  .bg-gradient-stock {
    background-image: var(--gradient-stock);
  }
  .text-gradient-2 {
    background-image: var(--gradient-text-2);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .text-gradient-highlight {
    background-image: var(--gradient-title-highlight);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .text-metallic-sheen,
  .section-badge__label,
  .section-heading-badge > .text-gradient-2,
  .blog-details-hero-title__accent.text-metallic-sheen,
  .blog-details-block__title.text-metallic-sheen,
  a.text-footer-brand.font-logo {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      90deg,
      #f4b2ff 0%,
      #be00df 25%,
      #ffe6ff 50%,
      #be00df 75%,
      #f4b2ff 100%
    );
    background-position: 100%;
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: 2.8s linear infinite text-metallic-sheen;
    display: inline-block;
  }
  @keyframes text-metallic-sheen {
    0% {
      background-position: 100%;
    }
    to {
      background-position: 0%;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .text-metallic-sheen,
    .section-badge__label,
    .section-heading-badge > .text-gradient-2,
    .blog-details-hero-title__accent.text-metallic-sheen,
    .blog-details-block__title.text-metallic-sheen,
    a.text-footer-brand.font-logo {
      background-image: linear-gradient(90deg, #f4b2ff 0%, #be00df 100%);
      background-position: 0%;
      background-size: 100% 100%;
      animation: none;
    }
  }
  .section-badge {
    width: var(--section-badge-width, 8.53125rem);
    flex-shrink: 0;
    height: 2.8125rem;
    position: relative;
  }
  .section-badge__accent {
    width: var(--section-badge-accent-width, 8.28125rem);
    height: 2.8125rem;
    position: absolute;
    inset: 0;
    transform: scaleY(-1) rotate(180deg);
  }
  .section-badge__edge {
    top: 0;
    left: var(--section-badge-edge-left, 7.59375rem);
    width: var(--section-badge-edge-width, 0.9375rem);
    height: 2.8125rem;
    position: absolute;
    transform: scaleY(-1) rotate(180deg);
  }
  .section-badge__label {
    top: 0.4375rem;
    left: var(--section-badge-label-left, 1.15625rem);
    white-space: nowrap;
    padding-right: 0.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.45;
    position: absolute;
  }
  .font-logo {
    font-family: var(--font-readex-pro), "Readex Pro", sans-serif;
  }
  .nav-link {
    color: var(--neutral-n20);
    transition:
      color 0.2s,
      background-image 0.2s;
  }
  .nav-link:hover,
  .nav-link--active {
    background-image: var(--gradient-text-2);
    color: #0000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .hero-section > header.site-header,
  .blog-details-section__header.site-header,
  .marketing-public-shell__header header.site-header {
    pointer-events: none;
  }
  .site-header .navbar-container {
    pointer-events: auto;
  }
  .hero-section > header.site-header--pinned,
  .blog-details-section__header.site-header--pinned,
  .marketing-public-shell__header header.site-header--pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    padding-top: 33px;
    box-sizing: border-box;
  }
  .site-header--pinned:not(.site-header--reveal) .navbar-container {
    transform: translate3d(0, calc(-100% - 1.25rem), 0);
    opacity: 0;
    pointer-events: none;
  }
  .site-header--pinned.site-header--reveal .navbar-container {
    animation: site-header-slide-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
    pointer-events: auto;
  }
  @keyframes site-header-slide-in {
    0% {
      transform: translate3d(0, calc(-100% - 1.25rem), 0);
      opacity: 0;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  .site-header--pinned .nav-glass-surface {
    transition: box-shadow 0.45s ease;
    box-shadow:
      0 16px 48px rgba(0, 0, 0, 0.28),
      inset 0 1px #ffffff1f,
      inset 0 -1px #ffffff0a;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header--pinned.site-header--reveal .navbar-container {
      animation: none;
      will-change: auto;
    }
    .site-header--pinned .nav-glass-surface {
      transition: none;
    }
  }
  @media (max-width: 767px) {
    .blog-details-section__header.site-header--pinned {
      padding-top: 16px;
    }
  }
  .nav-glass-surface {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #ffffff0f;
    border: 1px solid #ffffff1f;
    overflow: hidden;
    box-shadow:
      0 8px 32px #0000001a,
      inset 0 1px #ffffff1f,
      inset 0 -1px #ffffff0a,
      inset 0 0 6px 3px #ffffff0f;
  }
  .nav-glass-surface:before {
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, #0000, #ffffff2e, #0000);
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .nav-glass-surface:after {
    content: "";
    pointer-events: none;
    background: linear-gradient(#ffffff2e, #0000, #ffffff0f);
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .nav-mobile-menu-trigger {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    background: #ffffff0f;
    border: 1px solid #ffffff24;
    position: relative;
    box-shadow:
      0 8px 24px #00000014,
      inset 0 1px #ffffff1f;
  }
  .nav-mobile-menu-icon {
    width: 18px;
    height: 14px;
    display: block;
    position: relative;
  }
  .nav-mobile-menu-icon__line {
    background: linear-gradient(135deg, #cd36e7 0%, #7574cf 100%);
    border-radius: 999px;
    width: 100%;
    height: 2px;
    transition:
      transform 0.25s,
      top 0.25s,
      opacity 0.25s;
    position: absolute;
    left: 0;
  }
  .nav-mobile-menu-icon__line:first-child {
    top: 0;
  }
  .nav-mobile-menu-icon__line:nth-child(2) {
    top: 6px;
  }
  .nav-mobile-menu-icon__line:nth-child(3) {
    top: 12px;
  }
  .nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:first-child {
    top: 6px;
    transform: rotate(45deg);
  }
  .nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:nth-child(2) {
    opacity: 0;
  }
  .nav-mobile-menu-trigger--open .nav-mobile-menu-icon__line:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }
  .nav-mobile-menu-panel {
    animation: 0.2s nav-mobile-menu-enter;
  }
  @keyframes nav-mobile-menu-enter {
    0% {
      opacity: 0;
      transform: translateY(-0.35rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .bg-navbar-cta {
    background-image: var(--gradient-navbar-cta);
  }
  .bg-hero-cta {
    background-image: var(--gradient-hero-cta);
  }
  .bg-hero-cta-secondary {
    background-image: var(--gradient-hero-cta-secondary);
  }
  .text-hero-title-white {
    background-image: var(--gradient-hero-title-white);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .text-footer-brand {
    background-image: var(--gradient-footer-brand);
    color: #0000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .hero-tiger {
    z-index: 5;
    width: var(--hero-tiger-width);
    aspect-ratio: 665/731;
    pointer-events: none;
    background: 0 0;
    height: auto;
    position: absolute;
    bottom: 0;
    right: max(0.75rem, 8.333%);
  }
  .text-footer-watermark {
    background-image: var(--gradient-footer-watermark);
    color: #0000;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
  .number-section {
    background-color: #17091c;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .number-section-bg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    inset: 0;
  }
  @media (min-width: 1920px) {
    .number-section {
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
  }
  .number-section__inner {
    z-index: 1;
    padding-block: clamp(3rem, 4vw, 5.25rem);
    position: relative;
  }
  .number-section__panel {
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    background: #76767629;
    border-radius: 1.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    place-items: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    padding: 0.75rem 1rem;
    display: grid;
  }
  .number-section__item {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    max-width: 16.25rem;
    padding: 1.25rem 0.625rem;
    display: flex;
  }
  .number-section__icon {
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    display: flex;
    position: relative;
  }
  .number-section__icon-frame {
    pointer-events: none;
    width: 5rem;
    height: 5rem;
    position: absolute;
    inset: 0;
  }
  .number-section__icon-frame-inner {
    position: absolute;
    inset: 1.24%;
  }
  .number-section__icon-frame-image {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .number-section__icon-glyph {
    z-index: 1;
    flex-shrink: 0;
    width: 2.68894rem;
    height: 2.75rem;
    position: relative;
  }
  .number-section__icon-image {
    object-fit: cover;
    object-position: center;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .number-section__copy {
    text-align: center;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    display: flex;
  }
  .number-section__value {
    color: var(--neutral-n20);
    font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    font-weight: 600;
    line-height: 1;
  }
  .number-section__label {
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .number-section__divider {
    display: none;
  }
  .number-section__divider-line {
    background: linear-gradient(#cd36e700 0%, #cd36e7 50%, #cd36e700 100%);
    flex: none;
    width: 1px;
    height: 4.375rem;
  }
  @media (min-width: 1920px) {
    .number-section__divider-line {
      width: 2px;
    }
  }
  @media (min-width: 1024px) {
    .number-section__panel {
      flex-flow: row;
      justify-content: space-between;
      gap: 0;
      display: flex;
    }
    .number-section__item {
      flex-shrink: 0;
      width: 16.25rem;
      max-width: 16.25rem;
    }
    .number-section__divider {
      z-index: 2;
      flex: 0 0 1px;
      justify-content: center;
      align-self: center;
      align-items: center;
      width: 1px;
      min-width: 1px;
      height: 4.375rem;
      display: flex;
      position: relative;
    }
    @media (min-width: 1920px) {
      .number-section__divider {
        flex-basis: 2px;
        width: 2px;
        min-width: 2px;
      }
    }
  }
  .about-us {
    background-color: #190a21;
    width: 100%;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    position: relative;
    overflow: hidden;
  }
  .about-us__bg {
    background-color: #190a21;
    width: 100%;
    height: 100%;
    inset: 0;
  }
  .about-us__bg-image {
    z-index: 0;
    object-fit: cover;
    object-position: center center;
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    position: relative;
  }
  .about-us__bg-veil {
    pointer-events: none;
    z-index: 1;
    display: none;
    position: absolute;
  }
  .about-us__bg-veil--right {
    background: radial-gradient(
      circle at 100% 0,
      #190a21 0%,
      #190a21f0 20%,
      #190a219e 36%,
      #0000 62%
    );
    width: min(46vw, 44rem);
    height: min(46vw, 44rem);
    top: 0;
    right: 0;
  }
  .about-us__bg-veil--bottom {
    background: radial-gradient(
      circle at 50% 100%,
      #140a1a 0%,
      #140a1aeb 18%,
      #140a1a94 34%,
      #0000 56%
    );
    width: min(40vw, 36rem);
    height: min(36vw, 32rem);
    bottom: 0;
    left: 50%;
    translate: -50%;
  }
  .about-us__pattern {
    pointer-events: none;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    position: absolute;
  }
  .about-us__pattern--right {
    background-image: url(../icons/about-us/pattern-right.webp);
    width: min(40vw, 40rem);
    height: min(40vw, 40rem);
    top: -12rem;
    right: -4rem;
    display: block;
  }
  @media (max-width: 1359px) {
    .about-us__pattern--right {
      width: 40vw;
      height: 40vw;
      top: -14.1176vw;
      right: -4.7059vw;
    }
  }
  .about-us__pattern--bottom {
    opacity: 0.48;
    background-image: url(../icons/about-us/pattern-bottom.svg);
    width: min(30vw, 30rem);
    height: min(30vw, 30rem);
    bottom: 0;
    left: 50%;
    translate: -50%;
    -webkit-mask-image: radial-gradient(
      circle at 50% 100%,
      #000 0%,
      #000000b8 16%,
      #00000047 32%,
      #0000 52%
    );
    mask-image: radial-gradient(
      circle at 50% 100%,
      #000 0%,
      #000000b8 16%,
      #00000047 32%,
      #0000 52%
    );
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  @media (min-width: 1360px) {
    .about-us__bg-veil,
    .about-us__pattern {
      display: block;
    }
  }
  @media (min-width: 1520px) {
    .about-us__pattern--right {
      width: min(36vw, 38rem);
      height: min(36vw, 38rem);
      top: -10rem;
      right: -3rem;
    }
    .about-us__pattern--bottom {
      width: min(28vw, 28rem);
      height: min(28vw, 28rem);
    }
  }
  .about-us__inner {
    z-index: 1;
    position: relative;
  }
  .about-us__layout {
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1rem + 3vw, 3rem);
    display: flex;
  }
  .about-us__content {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.5rem, 1rem + 2vw, 2.375rem);
    width: 100%;
    max-width: 51.5rem;
    display: flex;
  }
  .about-us__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem);
    width: 100%;
    display: flex;
  }
  .about-us__title-block {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    max-width: 39.8125rem;
    display: flex;
  }
  .about-us__title-break {
    display: none;
  }
  .about-us__title-row {
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    display: flex;
  }
  .about-us__title-text {
    color: #0000;
    letter-spacing: 0.01em;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .about-us__title-line {
    letter-spacing: 0.01em;
    margin: 0;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .about-us__title-line .about-us__title-text,
  .about-us__title-line .about-us__title-highlight {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
  }
  .about-us__title-line .about-us__title-highlight {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(101.41deg, #da32f7 9.35%, #8f6aff 88.44%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .about-us__growth-icon {
    aspect-ratio: 68/67;
    object-fit: contain;
    flex-shrink: 0;
    width: clamp(2.5rem, 2rem + 1.5vw, 4.25rem);
    height: auto;
  }
  .about-us__description {
    max-width: 48rem;
    color: var(--neutral-n50, #c1c4cc);
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .about-us__features {
    flex-direction: column;
    gap: 1.125rem;
    width: 100%;
    max-width: 42rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .about-us__feature {
    color: var(--neutral-n40);
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.25rem);
    font-weight: 500;
    line-height: 1.35;
    display: flex;
  }
  .about-us__feature-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
  }
  .about-us__stats {
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(1rem, 0.5rem + 2vw, 2.125rem);
    display: flex;
  }
  .about-us__stat-group {
    align-items: center;
    gap: clamp(1rem, 0.5rem + 2vw, 2.125rem);
    display: flex;
  }
  .about-us__stat {
    align-items: center;
    gap: 0.875rem;
    display: flex;
  }
  .about-us__stat-divider {
    background: linear-gradient(#cd36e700 0%, #cd36e7b3 50%, #cd36e700 100%);
    flex-shrink: 0;
    width: 1px;
    height: 3.4375rem;
    display: none;
  }
  .about-us__stat-ring {
    flex-shrink: 0;
    width: clamp(4.5rem, 3.5rem + 2vw, 6.3125rem);
    height: clamp(4.5rem, 3.5rem + 2vw, 6.3125rem);
    position: relative;
    overflow: visible;
  }
  .about-us__stat-ring-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }
  .about-us__stat-ring-progress {
    shape-rendering: geometricprecision;
  }
  .about-us__stat-value {
    color: #fff;
    place-items: center;
    font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
    display: grid;
    position: absolute;
    inset: 0;
  }
  .about-us__stat-label {
    color: var(--neutral-n40);
    white-space: nowrap;
    margin: 0;
    font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
  }
  .about-us__cta {
    color: #fff;
    background-image: linear-gradient(
      111.82deg,
      #ca23e7 0.37%,
      #98a7ffbf 99.18%
    );
    border: 1.5px solid #cc7aff;
    border-radius: 0.625rem;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 3.25rem;
    padding: 0.625rem 1.125rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: opacity 0.2s;
    display: inline-flex;
    position: relative;
    overflow: hidden;
  }
  .about-us__cta > span {
    align-items: center;
    line-height: 1;
    display: inline-flex;
  }
  .about-us__cta:hover {
    opacity: 0.92;
  }
  .about-us__cta-icon {
    object-fit: contain;
    flex-shrink: 0;
    align-self: center;
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }
  .about-us__media {
    width: 100%;
    max-width: 41.375rem;
    padding-bottom: clamp(0.75rem, 2vw, 1.5rem);
  }
  .about-us__media-frame {
    aspect-ratio: 662/707;
    border-radius: clamp(1.5rem, 1rem + 2vw, 3rem);
    width: 100%;
    position: relative;
    overflow: visible;
    container: about-us-artboard/inline-size;
  }
  .about-us__media-art {
    border-radius: inherit;
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    background: #211627f0;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .about-us__tiger {
    object-fit: cover;
    object-position: center top;
    width: 89.6%;
    max-width: none;
    height: 140%;
    position: absolute;
    top: 1%;
    left: 6.65%;
  }
  .about-us__social-bar {
    z-index: 2;
    width: min(27rem, 100% - 14.375rem);
    height: 5.5rem;
    position: absolute;
    bottom: 1.375rem;
    left: 50%;
    overflow: visible;
    translate: -50%;
  }
  .about-us__social-bar-bg {
    -webkit-backdrop-filter: blur(2.5px) saturate(150%);
    backdrop-filter: blur(2.5px) saturate(150%);
    background: #ffffff29;
    border: 1px solid #6060ab;
    border-radius: 1.125rem;
    position: absolute;
    inset: 0;
    overflow: hidden;
    box-shadow: 12px 12px 40px #0000000f;
  }
  .about-us__social-bar-row {
    z-index: 10;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 1.1875rem 1.375rem;
    display: flex;
    position: relative;
    overflow: visible;
  }
  .about-us__social-icon-link {
    outline: none;
    flex-shrink: 0;
    place-items: center;
    width: 3.125rem;
    height: 3.125rem;
    display: grid;
    position: relative;
    overflow: visible;
  }
  .about-us__social-icon-link[data-hovered="true"] {
    z-index: 50;
  }
  .about-us__social-icon-float,
  .about-us__social-icon-hover,
  .about-us__social-icon-wiggle {
    will-change: transform;
    place-items: center;
    display: grid;
  }
  .about-us__social-icon-float {
    width: 100%;
    height: 100%;
  }
  .about-us__social-icon-hover,
  .about-us__social-icon-wiggle {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .about-us__social-icon-glow {
    z-index: 0;
    background: radial-gradient(
      circle,
      var(--social-glow-color) 0%,
      transparent 70%
    );
    filter: blur(6px);
    pointer-events: none;
    border-radius: 50%;
    position: absolute;
    inset: -25%;
  }
  .about-us__social-icon-image {
    z-index: 1;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px #0000004d);
    width: 3.125rem;
    height: 3.125rem;
    position: relative;
  }
  .about-us__social-tooltip {
    z-index: 50;
    color: #fff;
    white-space: nowrap;
    pointer-events: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: #000c;
    border: 1px solid #ffffff1f;
    border-radius: 0.375rem;
    width: max-content;
    max-width: 16rem;
    padding: 0.35em 0.65em;
    font-size: 0.625rem;
    font-weight: 500;
    line-height: 1.2;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    translate: -50%;
    box-shadow: 0 8px 24px #00000073;
  }
  @media (max-width: 767px) {
    .about-us {
      padding-block: clamp(2rem, 12.8vw, 2.75rem);
    }
    .about-us__layout {
      gap: clamp(1.25rem, 6.4vw, 1.75rem);
    }
    .about-us__content {
      gap: clamp(0.875rem, 4.2667vw, 1rem);
    }
    .about-us__intro {
      gap: clamp(0.625rem, 3.2vw, 0.75rem);
    }
    .about-us__intro .section-badge {
      align-self: center;
    }
    .about-us__title-block {
      align-items: center;
      gap: 0.25rem;
      text-align: center;
    }
    .about-us__title-row {
      flex-wrap: nowrap;
      justify-content: center;
      gap: clamp(0.25rem, 1.6vw, 0.5rem);
      max-width: 100%;
    }
    .about-us__title-row .about-us__title-text,
    .about-us__title-line,
    .about-us__title-line .about-us__title-text,
    .about-us__title-line .about-us__title-highlight {
      white-space: nowrap;
      font-size: clamp(1.125rem, 5.8667vw, 1.75rem);
      font-weight: 700;
      line-height: 1.2;
    }
    .about-us__growth-icon {
      flex-shrink: 0;
      width: clamp(1.75rem, 9.6vw, 2.5rem);
    }
    @media (max-width: 375px) {
      .about-us__title-block {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        gap: 1.0667vw;
      }
      .about-us__title-row,
      .about-us__title-line {
        display: contents;
      }
      .about-us__title-break {
        display: block;
        flex: 0 0 100%;
        width: 0;
        height: 0;
        margin: 0;
        overflow: hidden;
      }
      .about-us__title-row > .about-us__title-text,
      .about-us__title-line .about-us__title-text,
      .about-us__title-line .about-us__title-highlight {
        font-size: 4.5333vw;
        line-height: 1.2;
        white-space: nowrap;
      }
      .about-us__growth-icon {
        width: 7.2vw;
      }
    }
    .about-us__description {
      font-size: clamp(0.8125rem, 4vw, 0.9375rem);
      line-height: 1.35;
    }
    .about-us__features {
      gap: clamp(0.5rem, 2.6667vw, 0.625rem);
    }
    .about-us__feature {
      font-size: clamp(0.8125rem, 3.7333vw, 0.9375rem);
      line-height: 1.25;
    }
    .about-us__feature-icon {
      width: clamp(1rem, 4.8vw, 1.25rem);
      height: clamp(1rem, 4.8vw, 1.25rem);
    }
    .about-us__stats {
      flex-wrap: nowrap;
      justify-content: center;
      width: 100%;
      max-width: 100%;
      gap: clamp(0.375rem, 2.1333vw, 0.75rem);
    }
    .about-us__stat-group {
      flex-shrink: 1;
      min-width: 0;
      gap: clamp(0.375rem, 2.1333vw, 0.75rem);
    }
    .about-us__stat {
      flex-shrink: 1;
      min-width: 0;
      gap: clamp(0.25rem, 1.6vw, 0.625rem);
    }
    .about-us__stat-divider {
      display: block;
      height: clamp(1.875rem, 8.5333vw, 2.75rem);
    }
    .about-us__stat-ring {
      width: clamp(2.375rem, 11.7333vw, 3.25rem);
      height: clamp(2.375rem, 11.7333vw, 3.25rem);
    }
    .about-us__stat-value,
    .about-us__stat-label {
      font-size: clamp(0.625rem, 2.6667vw, 0.8125rem);
      line-height: 1.3;
    }
    @media (max-width: 425px) {
      .about-us__stats {
        justify-content: space-between;
        gap: 0.25rem;
      }
      .about-us__stat-group {
        flex: 1 1 0;
        min-width: 0;
        gap: 0.25rem;
      }
      .about-us__stat {
        gap: 0.25rem;
        max-width: 100%;
      }
      .about-us__stat-divider {
        height: clamp(1.5rem, 6.9333vw, 2rem);
      }
      .about-us__stat-ring {
        width: clamp(1.875rem, 8.5333vw, 2.25rem);
        height: clamp(1.875rem, 8.5333vw, 2.25rem);
      }
      .about-us__stat-value {
        font-size: clamp(0.5rem, 2.1333vw, 0.625rem);
        line-height: 1.2;
      }
      .about-us__stat-label {
        flex: 1;
        min-width: 0;
        font-size: clamp(0.5rem, 2.1333vw, 0.625rem);
        line-height: 1.15;
        white-space: normal;
      }
    }
    .about-us__cta {
      height: clamp(2.5rem, 11.7333vw, 3rem);
      padding-inline: clamp(0.75rem, 3.7333vw, 1rem);
      font-size: clamp(0.8125rem, 3.7333vw, 0.9375rem);
    }
    .about-us__cta-icon {
      width: clamp(1rem, 4.8vw, 1.25rem);
      height: clamp(1rem, 4.8vw, 1.25rem);
    }
    .about-us__media {
      padding-bottom: clamp(0.375rem, 2.1333vw, 0.5rem);
    }
    .about-us__media-frame {
      border-radius: clamp(1rem, 6.4vw, 1.5rem);
    }
    @container about-us-artboard (min-width: 0) {
      .about-us__social-bar {
        width: 65.26%;
        height: calc(88px * 100cqi / 662px);
        bottom: calc(22px * 100cqi / 662px);
      }
      .about-us__social-bar-bg {
        border-radius: calc(18px * 100cqi / 662px);
      }
      .about-us__social-bar-row {
        padding: calc(19px * 100cqi / 662px) calc(22px * 100cqi / 662px);
      }
      .about-us__social-icon-link,
      .about-us__social-icon-image {
        width: calc(50px * 100cqi / 662px);
        height: calc(50px * 100cqi / 662px);
      }
    }
  }
  @media (min-width: 320px) and (max-width: 440px) {
    .about-us__title-block {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      width: 100%;
      max-width: 100%;
      gap: 0.35rem 0.5rem;
      text-align: center;
      transform: none;
      margin-bottom: 0;
    }
    .about-us__title-row,
    .about-us__title-line {
      display: contents;
    }
    .about-us__title-break {
      display: block;
      flex: 0 0 100%;
      width: 0;
      height: 0;
      margin: 0;
      overflow: hidden;
    }
    .about-us__title-row > .about-us__title-text,
    .about-us__title-line .about-us__title-text,
    .about-us__title-line .about-us__title-highlight {
      white-space: nowrap;
      font-size: 26px;
      line-height: 1.2;
    }
  }
  @media (min-width: 768px) {
    .about-us__stats {
      flex-wrap: nowrap;
    }
    .about-us__stat-divider {
      display: block;
    }
  }
  @media (min-width: 768px) and (max-width: 959px) {
    .about-us__layout {
      flex-direction: column;
      align-items: center;
      gap: clamp(1.5rem, 2.5vw, 2.5rem);
    }
    .about-us__content {
      flex: none;
      width: 100%;
      max-width: 51.5rem;
      padding-left: max(0px, calc((100% - min(100%, 41.375rem)) / 2));
    }
    .about-us__media {
      flex: none;
      width: 100%;
      max-width: 41.375rem;
    }
  }
  @media (min-width: 768px) and (max-width: 1024px) {
    .about-us {
      padding-block: clamp(2.5rem, 4vw, 3.5rem);
    }
    .about-us__content {
      gap: clamp(1.125rem, 2.2vw, 1.75rem);
    }
    .about-us__intro {
      gap: clamp(0.875rem, 1.8vw, 1.375rem);
    }
    .about-us__title-block {
      max-width: 100%;
    }
    .about-us__title-row .about-us__title-text,
    .about-us__title-line,
    .about-us__title-line .about-us__title-text,
    .about-us__title-line .about-us__title-highlight {
      font-size: clamp(1.375rem, 3.5156vw, 2rem);
      font-weight: 700;
      line-height: 1.35;
    }
    .about-us__growth-icon {
      width: clamp(2rem, 4.6875vw, 3rem);
    }
    .about-us__description {
      max-width: 100%;
      font-size: clamp(0.875rem, 1.5625vw, 1.0625rem);
    }
    .about-us__features {
      max-width: 100%;
      gap: 0.875rem;
    }
    .about-us__feature {
      font-size: clamp(0.8125rem, 1.4648vw, 1rem);
    }
    .about-us__feature-icon {
      width: clamp(1.125rem, 1.9531vw, 1.375rem);
      height: clamp(1.125rem, 1.9531vw, 1.375rem);
    }
    .about-us__stats {
      gap: clamp(0.625rem, 1.8vw, 1.25rem);
    }
    .about-us__stat-group {
      gap: clamp(0.625rem, 1.8vw, 1.25rem);
    }
    .about-us__stat-ring {
      width: clamp(3.5rem, 6.6406vw, 4.75rem);
      height: clamp(3.5rem, 6.6406vw, 4.75rem);
    }
    .about-us__stat-value,
    .about-us__stat-label {
      font-size: clamp(0.8125rem, 1.3672vw, 1rem);
    }
    .about-us__stat-divider {
      height: clamp(2.5rem, 4.2969vw, 3.25rem);
    }
    .about-us__cta {
      height: clamp(2.625rem, 4.8828vw, 3.125rem);
      padding-inline: clamp(0.75rem, 1.5vw, 1.125rem);
      font-size: clamp(0.875rem, 1.4648vw, 1.0625rem);
    }
    .about-us__cta-icon {
      width: clamp(1.125rem, 1.9531vw, 1.375rem);
      height: clamp(1.125rem, 1.9531vw, 1.375rem);
    }
    .about-us__media {
      padding-bottom: 0.5rem;
    }
    .about-us__media-frame {
      border-radius: clamp(1.125rem, 2.5vw, 1.75rem);
    }
    .about-us__social-bar {
      width: min(calc(100% - 2rem), 42.1875vw);
      height: clamp(3.25rem, 6.6406vw, 4.5rem);
      bottom: clamp(0.75rem, 1.5vw, 1.125rem);
    }
    .about-us__social-bar-row {
      padding: clamp(0.75rem, 1.5vw, 1.125rem) clamp(0.875rem, 1.8vw, 1.25rem);
    }
    .about-us__social-icon-link,
    .about-us__social-icon-image {
      width: clamp(2rem, 4.1016vw, 2.75rem);
      height: clamp(2rem, 4.1016vw, 2.75rem);
    }
  }
  @media (min-width: 960px) and (max-width: 1024px) {
    .about-us__layout {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: clamp(1rem, 1.5vw, 2rem);
    }
    .about-us__content {
      flex: 1 1 0;
      min-width: 0;
      width: 52%;
      max-width: 51.5rem;
      padding-left: 0;
      gap: 0.75rem;
    }
    .about-us__media {
      flex: 1 1 0;
      min-width: 0;
      width: 45%;
      max-width: 41.375rem;
    }
    .about-us__intro {
      gap: 0.875rem;
    }
    .about-us__title-text,
    .about-us__title-line {
      font-size: 3.125vw;
    }
    .about-us__growth-icon {
      width: 4.2969vw;
    }
    .about-us__description {
      font-size: 1.4648vw;
    }
    .about-us__features {
      gap: 0.625rem;
    }
    .about-us__feature {
      font-size: 1.3672vw;
    }
    .about-us__stats {
      gap: 0.5rem;
    }
    .about-us__stat-group {
      gap: 0.5rem;
    }
    .about-us__stat {
      gap: 0.625rem;
    }
    .about-us__stat-ring {
      width: 4.6875vw;
      height: 4.6875vw;
    }
    .about-us__stat-divider {
      height: 3.5156vw;
    }
    .about-us__stat-value,
    .about-us__stat-label {
      font-size: 1.1719vw;
    }
    .about-us__cta {
      height: 4.6875vw;
      font-size: 1.3672vw;
    }
    @container about-us-artboard (min-width: 0) {
      .about-us__social-bar {
        width: 65.26%;
        height: calc(88px * 100cqi / 662px);
        bottom: calc(22px * 100cqi / 662px);
      }
      .about-us__social-bar-bg {
        border-radius: calc(18px * 100cqi / 662px);
      }
      .about-us__social-bar-row {
        padding: calc(19px * 100cqi / 662px) calc(22px * 100cqi / 662px);
      }
      .about-us__social-icon-link,
      .about-us__social-icon-image {
        width: calc(50px * 100cqi / 662px);
        height: calc(50px * 100cqi / 662px);
      }
    }
  }
  @media (min-width: 1025px) {
    .about-us__layout {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    }
    .about-us__content {
      flex: 1 1 0;
      flex-shrink: 0;
      min-width: 0;
      width: min(51.5rem, 52%);
      max-width: 51.5rem;
    }
    .about-us__media {
      flex: 1 1 0;
      flex-shrink: 0;
      min-width: 0;
      width: min(41.375rem, 45%);
      max-width: 41.375rem;
    }
    .about-us__stats {
      gap: 2.125rem;
    }
  }
  @media (min-width: 1360px) and (max-width: 1519px) {
    .about-us__title-text,
    .about-us__title-line {
      font-size: 2.25rem;
    }
    .about-us__description {
      font-size: 1.125rem;
    }
    .about-us__feature {
      font-size: 1.0625rem;
    }
    .about-us__media {
      width: min(38rem, 46%);
    }
  }
  @media (min-width: 1520px) {
    .about-us__title-block {
      gap: 0.5rem;
      max-width: 39.8125rem;
    }
    .about-us__title-row {
      flex-wrap: nowrap;
      align-items: center;
      gap: 0.75rem;
      width: max-content;
      max-width: 100%;
    }
    .about-us__title-text,
    .about-us__title-line {
      letter-spacing: 0.01em;
      white-space: nowrap;
      font-size: 2.25rem;
      line-height: 1.35;
    }
    .about-us__growth-icon {
      aspect-ratio: 68/67;
      flex-shrink: 0;
      width: 3.25rem;
      height: auto;
    }
  }
  .our-services {
    background-color: #190a21;
    width: 100%;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    position: relative;
    overflow: hidden;
  }
  .our-services__bg {
    pointer-events: none;
    z-index: 0;
    background-image: url(../images/pages/home/our-services/section-background.webp);
    background-position: 100% 0;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    inset: 0;
  }
  .our-services__pattern {
    pointer-events: none;
    z-index: 1;
    opacity: 0.9;
    background: url(../images/pages/home/our-services/background-pattern.svg)
      50% / contain no-repeat;
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: -6.875rem;
    left: -7.0625rem;
  }
  .our-services__inner {
    z-index: 2;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    display: flex;
    position: relative;
  }
  .our-services__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .our-services__title {
    letter-spacing: 0.01em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .our-services__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .our-services__title-highlight {
    white-space: nowrap;
  }
  .our-services__description {
    max-width: 62.25rem;
    color: var(--neutral-n40);
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .our-services__panel {
    flex-direction: column;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem);
    width: 100%;
    display: flex;
    overflow: visible;
  }
  .our-services__tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    display: grid;
  }
  .our-services__tab {
    min-width: 0;
    color: var(--neutral-n30);
    cursor: pointer;
    background: #6f6f6f17;
    border: 0.5px solid #6d60ae82;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    transition:
      background 0.28s ease,
      border-color 0.28s ease,
      box-shadow 0.28s ease,
      transform 0.28s ease,
      color 0.28s ease;
    display: flex;
  }
  .our-services__tab:hover:not(.our-services__tab--active),
  .our-services__tab:focus-visible:not(.our-services__tab--active) {
    border-color: #e07cff;
    background: linear-gradient(
      120.46deg,
      rgba(202, 35, 231, 0.22) 0.37%,
      rgba(152, 167, 255, 0.16) 99.18%
    );
    box-shadow:
      0 10px 24px rgba(202, 35, 231, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.16);
    color: #fff;
    transform: translateY(-2px);
  }
  .our-services__tab:hover .our-services__tab-label,
  .our-services__tab:focus-visible .our-services__tab-label {
    color: #fff;
  }
  .our-services__tab:hover .our-services__tab-icon,
  .our-services__tab:focus-visible .our-services__tab-icon {
    transform: translate(-50%, -50%) scale(1.08);
  }
  .our-services__tab--active {
    isolation: isolate;
    background-image: var(--gradient-hero-cta);
    border: none;
    position: relative;
    overflow: hidden;
  }
  .our-services__tab--active:hover,
  .our-services__tab--active:focus-visible {
    border: none;
    box-shadow: 0 12px 28px rgba(202, 35, 231, 0.4);
    transform: translateY(-2px);
  }
  @media (prefers-reduced-motion: reduce) {
    .our-services__tab:hover,
    .our-services__tab:focus-visible,
    .our-services__tab--active:hover,
    .our-services__tab--active:focus-visible {
      transform: none;
    }
  }
  .our-services__tab-content {
    z-index: 2;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    display: flex;
    position: relative;
  }
  .our-services__tab-icon-wrap {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    position: relative;
  }
  .our-services__tab-frame {
    pointer-events: none;
    width: 38px;
    max-width: none;
    height: 38px;
    display: block;
    position: absolute;
    inset: 0;
  }
  .our-services__tab-icon {
    z-index: 1;
    object-fit: fill;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.28s ease;
  }
  .our-services__tab-label {
    white-space: nowrap;
    color: var(--neutral-n30);
    font-size: clamp(0.9375rem, 0.875rem + 0.25vw, 1.125rem);
    font-weight: 600;
    line-height: 1.5;
  }
  .our-services__tab-label-break {
    display: none;
  }
  .our-services__card {
    border: 1px solid #ffffff2b;
    border-radius: 2rem;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(1.5rem, 1rem + 2vw, 2rem);
    width: 100%;
    padding: 1.75rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .our-services__card-glow {
    pointer-events: none;
    z-index: 0;
    aspect-ratio: 1;
    width: clamp(9rem, 17.5vw, 16.9375rem);
    position: absolute;
  }
  .our-services__card-glow--top {
    top: 0;
    right: 0;
    transform: translate(42%, -58%);
  }
  .our-services__card-glow--bottom {
    bottom: 0;
    right: 0;
    transform: translate(38%, 58%);
  }
  .our-services__card-glow-spread {
    position: absolute;
    inset: -147.6%;
  }
  .our-services__card-glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .our-services__card-media {
    z-index: 1;
    aspect-ratio: 628/496;
    background: #342e3652;
    border-radius: 1.5rem;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .our-services__card-image {
    object-fit: contain;
    object-position: center bottom;
    width: min(65%, 25.4375rem);
    max-width: none;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -46%;
  }
  .our-services__card-content {
    z-index: 1;
    flex-direction: column;
    flex: 1;
    gap: 2.125rem;
    display: flex;
    position: relative;
  }
  .our-services__card-copy {
    flex-direction: column;
    gap: clamp(1.5rem, 1.25rem + 0.6vw, 2rem);
    display: flex;
  }
  .our-services__card-title {
    letter-spacing: 0;
    margin: 0;
    font-size: clamp(1.375rem, 1.125rem + 0.8vw, 1.75rem);
    font-weight: 600;
    line-height: 1.35;
  }
  .our-services__card-title-gradient {
    -webkit-text-fill-color: transparent;
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
    max-width: 100%;
    padding-bottom: 0.1875rem;
    display: inline-block;
  }
  .our-services__card-description {
    color: var(--neutral-n30);
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .our-services__features {
    gap: 1.25rem;
    display: grid;
  }
  .our-services__feature-list {
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .our-services__feature {
    color: var(--neutral-n30);
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
  }
  .our-services__feature-icon {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
  }
  .our-services__cta {
    background-image: var(--gradient-hero-cta);
    color: #fff;
    border-radius: 0.625rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    height: 3.125rem;
    padding: 0.625rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity 0.2s;
    display: inline-flex;
    position: relative;
  }
  .our-services__cta:hover {
    opacity: 0.92;
  }
  .our-services__cta-icon-wrap {
    z-index: 1;
    background: #fff;
    border-radius: 0.375rem;
    place-items: center;
    width: 1.75rem;
    height: 1.625rem;
    display: grid;
    position: relative;
    box-shadow: 0 2px 2px #dadada24;
  }
  .our-services__cta-label {
    z-index: 1;
    position: relative;
  }
  .our-services__cta-icon {
    width: 1rem;
    height: 1rem;
    display: block;
  }
  @media (min-width: 640px) {
    .our-services__tabs {
      gap: 0.625rem;
    }
  }
  @media (min-width: 1024px) {
    .our-services__inner,
    .our-services__panel {
      gap: 3rem;
    }
    .our-services__tabs {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 1.125rem;
    }
    .our-services__tab-label {
      font-size: 1.125rem;
    }
    .our-services__features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
    }
    .our-services__card {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 1.75rem 2rem 1.75rem 1.75rem;
    }
    .our-services__card-media {
      aspect-ratio: auto;
      flex-shrink: 0;
      width: 39.25rem;
      height: 31rem;
    }
    .our-services__card-image {
      object-fit: cover;
      object-position: left top;
      width: 25.4375rem;
      height: 45.3125rem;
      top: 0.8125rem;
      left: 6.5625rem;
      translate: none;
    }
    .our-services__card-content {
      gap: 2.125rem;
      width: min(54.1875rem, 52%);
    }
    .our-services__card-title {
      font-size: 1.75rem;
      line-height: normal;
    }
    .our-services__card-glow {
      width: 16.9375rem;
    }
    .our-services__card-glow--top {
      top: -15.25rem;
      left: 88.37%;
      right: auto;
      transform: translate(-50%);
    }
    .our-services__card-glow--bottom {
      inset: 91.67% auto auto 87.65%;
      transform: translate(-50%, -50%);
    }
  }
  @media (max-width: 767px) {
    .our-services__card-image {
      object-fit: cover;
      object-position: center top;
      top: 0;
      left: 50%;
      translate: -50% 0;
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .our-services__card {
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
    }
    .our-services__card-media {
      aspect-ratio: auto;
      flex-shrink: 0;
      align-self: stretch;
      width: 100%;
      max-width: none;
      height: 31rem;
    }
    .our-services__card-image {
      object-fit: cover;
      object-position: center top;
      width: 25.4375rem;
      height: auto;
      top: 0;
      left: 50%;
      translate: -50% 0;
    }
    .our-services__card-content {
      width: 100%;
    }
    .our-services__features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.25rem;
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    #our-services-tab-website-traffic .our-services__tab-label {
      white-space: normal;
      line-height: 1.15;
    }
    #our-services-tab-website-traffic .our-services__tab-label-break {
      display: block;
    }
    .our-services__card {
      flex-direction: column;
      justify-content: flex-start;
      align-items: stretch;
      padding: 1.75rem;
    }
    .our-services__card-media {
      aspect-ratio: auto;
      flex-shrink: 0;
      align-self: stretch;
      width: 100%;
      max-width: none;
      height: 31rem;
    }
    .our-services__card-image {
      object-fit: cover;
      object-position: center top;
      width: 25.4375rem;
      height: auto;
      top: 0;
      left: 50%;
      translate: -50% 0;
    }
    .our-services__card-content {
      width: 100%;
    }
  }
  @media (min-width: 1440px) and (max-width: 1440px) {
    .our-services__features {
      align-items: start;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .our-services__feature-list {
      gap: 0.75rem;
    }
    .our-services__feature {
      align-items: center;
      min-height: 0;
      line-height: 1.5;
    }
    .our-services__feature-icon {
      margin-top: 0;
    }
  }
  .testimonials {
    background-color: #0c050f;
    width: 100%;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    position: relative;
    overflow: hidden;
  }
  .testimonials__bg {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    inset: 0;
    overflow: hidden;
  }
  .testimonials__bg-image {
    object-fit: cover;
    object-position: right center;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .testimonials__inner {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
    display: flex;
    position: relative;
  }
  .testimonials__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .testimonials__title {
    letter-spacing: 0.01em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .testimonials__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .testimonials__title-highlight {
    white-space: nowrap;
  }
  .testimonials__description {
    max-width: 62.25rem;
    color: var(--neutral-n40);
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .testimonials__panel {
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
    width: 100%;
    display: flex;
  }
  .testimonials__tab-shell {
    background: #cb74ff14;
    border: 0.6px solid #210a2f;
    border-radius: 0.75rem;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.5rem;
    display: flex;
    overflow-x: auto;
  }
  .testimonials__tab {
    color: #fff;
    white-space: nowrap;
    cursor: pointer;
    background: 0 0;
    border: 0.3px solid #d18dfa;
    border-radius: 0.5rem;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    transition: background 0.2s;
    display: inline-flex;
  }
  .testimonials__tab--active {
    isolation: isolate;
    background-image: var(--gradient-hero-cta);
    position: relative;
    overflow: hidden;
  }
  .testimonials__tab-content {
    z-index: 2;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    display: inline-flex;
    position: relative;
  }
  .testimonials__tab:not(.testimonials__tab--active) {
    background: #ffffff0f;
  }
  .testimonials__tab-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: block;
  }
  @media (max-width: 767px) {
    .testimonials__tab-shell {
      gap: clamp(0.375rem, 2.1333vw, 0.75rem);
      width: 100%;
      max-width: 100%;
      padding: clamp(0.25rem, 1.6vw, 0.5rem);
      overflow: hidden;
    }
    .testimonials__tab {
      flex: 1 1 0;
      flex-shrink: 1;
      min-width: 0;
      gap: clamp(0.125rem, 1.0667vw, 0.25rem);
      padding: clamp(0.5rem, 2.6667vw, 0.75rem)
        clamp(0.375rem, 2.1333vw, 1.25rem);
      font-size: clamp(0.6875rem, 3.4667vw, 1rem);
    }
    .testimonials__tab-content {
      min-width: 0;
      gap: clamp(0.125rem, 1.0667vw, 0.25rem);
    }
    .testimonials__tab-icon {
      width: clamp(1rem, 4.8vw, 1.5rem);
      height: clamp(1rem, 4.8vw, 1.5rem);
    }
  }
  @media (max-width: 375px) {
    .testimonials__tab-shell {
      gap: 0.25rem;
      padding: 0.25rem;
    }
    .testimonials__tab {
      gap: 0.125rem;
      padding: 0.4375rem 0.25rem;
      font-size: 0.6875rem;
    }
    .testimonials__tab-content {
      justify-content: center;
      width: 100%;
      gap: 0.125rem;
    }
    .testimonials__tab-icon {
      width: 0.875rem;
      height: 0.875rem;
    }
  }
  .testimonials__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    width: 100%;
    display: grid;
  }
  #testimonials-panel-video {
    pointer-events: none;
    touch-action: none;
    user-select: none;
  }
  #testimonials-panel-video .testimonials__play {
    pointer-events: auto;
  }
  .testimonials__video-card,
  .testimonials__quote-card {
    aspect-ratio: 1;
    border-radius: 1.1175rem;
    width: 100%;
    position: relative;
  }
  .testimonials__video-card {
    isolation: isolate;
  }
  .testimonials__quote-card {
    aspect-ratio: auto;
    background: #ffffff0a;
    border: 0.6px solid #d18dfa47;
    flex-direction: column;
    justify-content: space-between;
    min-height: 20rem;
    padding: 1.25rem;
    display: flex;
    overflow: hidden;
  }
  .testimonials__video-cover {
    border-radius: inherit;
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .testimonials__video-scrim {
    border-radius: inherit;
    background: #00000024;
    position: absolute;
    inset: 0;
  }
  .testimonials__video-fade {
    z-index: 1;
    -webkit-backdrop-filter: blur(2.9px);
    backdrop-filter: blur(2.9px);
    background: linear-gradient(#fff0 0%, #0000000f 100%);
    border-radius: 0 0 1.1175rem 1.1175rem;
    width: 98.8%;
    height: 23.2%;
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50%;
  }
  .testimonials__rating {
    z-index: 2;
    color: #fff;
    background: #ffffff1a;
    border-radius: 0.42rem;
    align-items: center;
    gap: 0.28rem;
    padding: 0.42rem 0.56rem;
    font-size: 0.838rem;
    font-weight: 700;
    line-height: normal;
    display: inline-flex;
    position: absolute;
    top: 0.768rem;
    left: 0.7rem;
  }
  .testimonials__rating--quote {
    position: static;
  }
  .testimonials__rating-star {
    width: 1.1175rem;
    height: 1.1175rem;
    display: block;
  }
  .testimonials__play {
    z-index: 3;
    cursor: pointer;
    background: 0 0;
    border: 0;
    border-radius: 50%;
    place-items: center;
    width: 2.934rem;
    height: 2.934rem;
    margin-top: -1.467rem;
    margin-left: -1.467rem;
    padding: 0;
    display: grid;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .testimonials__play-glass {
    pointer-events: none;
    z-index: 0;
    -webkit-backdrop-filter: blur(4px) saturate(140%);
    backdrop-filter: blur(4px) saturate(140%);
    background: #ffffff24;
    border-radius: 50%;
    position: absolute;
    inset: 0;
  }
  .testimonials__play:hover .testimonials__play-glass {
    background: #fff3;
  }
  .testimonials__play-icon {
    z-index: 1;
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
  }
  .testimonials__person {
    z-index: 2;
    align-items: center;
    gap: 0.56rem;
    display: flex;
    position: absolute;
    bottom: 1.1rem;
    left: 0.84rem;
  }
  .testimonials__person--quote {
    position: static;
  }
  .testimonials__avatar {
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
    width: 3.5625rem;
    height: 3.5625rem;
    display: block;
  }
  .testimonials__person-copy {
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    display: flex;
  }
  .testimonials__person-name-row {
    align-items: center;
    gap: 0.28rem;
    display: flex;
  }
  .testimonials__person-name {
    color: #fff;
    margin: 0;
    font-size: 0.978rem;
    font-weight: 700;
    line-height: normal;
  }
  .testimonials__verified {
    flex-shrink: 0;
    width: 1.257rem;
    height: 1.257rem;
    display: block;
  }
  .testimonials__person-role {
    color: var(--neutral-n40);
    margin: 0;
    font-size: 0.838rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .testimonials__quote-text {
    color: var(--neutral-n30);
    margin: 1.25rem 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }
  @media (min-width: 640px) {
    .testimonials__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.125rem;
    }
  }
  @media (max-width: 767px) {
    .testimonials__grid {
      --testimonials-card-width: min(20rem, calc(100% - 1.5rem));
      --testimonials-track-pad: max(
        0.75rem,
        calc((100% - var(--testimonials-card-width)) / 2)
      );
      display: flex !important;
      align-self: stretch !important;
      align-items: stretch !important;
      gap: 1rem !important;
      width: 100% !important;
      max-width: 100% !important;
      margin-inline: auto !important;
      box-sizing: border-box !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      scroll-padding-inline: var(--testimonials-track-pad) !important;
      padding-inline: var(--testimonials-track-pad) !important;
      scrollbar-width: none !important;
    }
    .testimonials__grid::-webkit-scrollbar {
      display: none;
    }
    .testimonials__video-card,
    .testimonials__quote-card {
      flex: 0 0 var(--testimonials-card-width) !important;
      width: var(--testimonials-card-width) !important;
      max-width: 23.75rem !important;
      scroll-snap-align: center !important;
      margin-inline: 0 !important;
    }
    .testimonials__grid--loop {
      scroll-snap-type: none;
    }
    .testimonials__grid--loop > .testimonials__video-card,
    .testimonials__grid--loop > .testimonials__quote-card {
      scroll-snap-align: none;
    }
  }
  @media (min-width: 1100px) {
    .testimonials__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(0.7rem, 1.1vw, 1.666rem);
    }
    .testimonials__video-card,
    .testimonials__quote-card {
      justify-self: center;
      max-width: 23.75rem;
    }
  }
  .working-process {
    background-color: #17091c;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .working-process__shell {
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: 100%;
    min-height: 76.25rem;
    padding-block: 5.25rem;
    display: flex;
    position: relative;
  }
  .working-process__glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .working-process__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .working-process__glow-spread--soft {
    inset: -209.42%;
  }
  .working-process__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .working-process__glow--top {
    width: 20.75rem;
    height: 20.75rem;
    top: -19.0625rem;
    left: calc(50% - 10.125rem);
  }
  .working-process__glow--left {
    mix-blend-mode: plus-lighter;
    width: 20.75rem;
    height: 20.75rem;
    top: -9.3125rem;
    left: calc(50% - 64.6875rem);
  }
  .working-process__glow--right {
    mix-blend-mode: plus-lighter;
    width: 20.75rem;
    height: 20.75rem;
    top: -10.75rem;
    left: calc(50% + 46.9375rem);
  }
  .working-process__glow--bottom-left {
    mix-blend-mode: plus-lighter;
    width: 11.9375rem;
    height: 11.9375rem;
    top: 58.875rem;
    left: calc(50% - 18.75rem);
  }
  .working-process__glow--bottom-right {
    mix-blend-mode: plus-lighter;
    width: 11.9375rem;
    height: 11.9375rem;
    top: 60.9375rem;
    left: calc(50% + 8.0625rem);
  }
  .working-process__pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    width: 60rem;
    height: 60rem;
    position: absolute;
    top: -20.9375rem;
    left: calc(50% + 20rem);
    -webkit-mask-image: url(../images/pages/home/working-process/pattern-mask.svg);
    mask-image: url(../images/pages/home/working-process/pattern-mask.svg);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 60rem 60rem;
    mask-size: 60rem 60rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .working-process__pattern-inner {
    width: 60rem;
    height: 60rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .working-process__pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .working-process__frame {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: min(100% - 1.5rem, 81.25rem);
    display: flex;
    position: relative;
  }
  .working-process__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .working-process__title {
    letter-spacing: 0.025em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .working-process__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .working-process__title-highlight {
    white-space: nowrap;
  }
  .working-process__description {
    color: #dfe0e4;
    max-width: 62.25rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .working-process__description {
      width: min(100%, calc(62.25rem * 1024 / 1440));
      max-width: calc(62.25rem * 1024 / 1440);
    }
    .working-process__pattern {
      left: calc(100% - 25rem);
    }
    .working-process__glow--left {
      left: -19.6875rem;
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .working-process__pattern {
      left: calc(100% - 25rem);
    }
    .working-process__glow--left {
      left: -19.6875rem;
    }
  }
  @media (max-width: 767px) {
    .working-process__pattern {
      width: 125vw;
      height: 125vw;
      top: -43.6198vw;
      left: calc(100% - 52.0833vw);
      -webkit-mask-size: 125vw 125vw;
      mask-size: 125vw 125vw;
    }
    .working-process__pattern-inner {
      width: 100%;
      height: 100%;
    }
    .working-process__glow--left {
      width: 43.2292vw;
      height: 43.2292vw;
      top: -19.401vw;
      left: -41.0156vw;
    }
  }
  @media (max-width: 425px) {
    .working-process__pattern {
      z-index: 0;
      width: 60rem;
      height: 60rem;
      top: -20.9375rem;
      right: auto;
      left: calc(100% - 25rem);
      -webkit-mask-size: 60rem 60rem;
      mask-size: 60rem 60rem;
    }
    .working-process__pattern-inner {
      width: 60rem;
      height: 60rem;
    }
    .working-process__glow--left {
      z-index: 2;
      width: 10.5rem;
      height: 10.5rem;
      top: 0;
      left: -3rem;
    }
  }
  .working-process__diagram {
    aspect-ratio: 1300/801;
    width: 100%;
    max-width: 81.25rem;
    position: relative;
    container-type: inline-size;
  }
  .working-process__diagram-canvas {
    width: 1300px;
    height: 801px;
    transform: scale(calc(100cqw / 1300));
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .working-process__line {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .working-process__line-inset {
    position: absolute;
  }
  .working-process__line-inset img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .working-process__line--top {
    width: 926px;
    height: 137px;
    top: 75px;
    left: 187px;
  }
  .working-process__line-inset--top {
    inset: -0.73% -0.11% 0;
  }
  .working-process__line--vertical {
    width: 0;
    height: 399px;
    top: 75px;
    left: 651px;
  }
  .working-process__line-inset--vertical {
    inset: 0 -1px;
  }
  .working-process__line--bottom-left {
    width: 175px;
    height: 51px;
    top: 471px;
    left: 476px;
  }
  .working-process__line-inset--bottom {
    inset: -1.96% -0.57%;
  }
  .working-process__line--bottom-right {
    justify-content: center;
    align-items: center;
    width: 185px;
    height: 51px;
    display: flex;
    top: 471px;
    left: 651px;
  }
  .working-process__line-flip {
    flex: none;
    width: 185px;
    height: 51px;
    position: relative;
    transform: scaleY(-1) rotate(180deg);
  }
  .working-process__line-inset--bottom-right {
    inset: -1.96% -0.54%;
  }
  .working-process__hub {
    z-index: 2;
    width: 144.775px;
    height: 143.853px;
    position: absolute;
    top: 0;
    left: 578.11px;
  }
  .working-process__hub-ring {
    max-width: none;
    display: block;
    position: absolute;
  }
  .working-process__hub-ring--4 {
    width: 144.775px;
    height: 143.853px;
    top: 0;
    left: 0;
  }
  .working-process__hub-ring--3 {
    width: 135.495px;
    height: 134.632px;
    top: 4.68px;
    left: 4.64px;
  }
  .working-process__hub-ring--2 {
    width: 126.214px;
    height: 125.41px;
    top: 9.36px;
    left: 9.28px;
  }
  .working-process__hub-ring--1 {
    width: 116.934px;
    height: 116.189px;
    top: 14.04px;
    left: 13.92px;
  }
  .working-process__hub-core {
    z-index: 1;
    background-image: linear-gradient(
      96.1754deg,
      #ca23e7 0.36902%,
      #98a7ffbf 99.183%
    );
    border: 1.404px solid #ca23e7;
    border-radius: 163.507px;
    place-items: center;
    width: 111.365px;
    height: 110.436px;
    display: grid;
    position: absolute;
    top: 16.85px;
    left: 16.7px;
  }
  .working-process__hub-core img {
    width: 60px;
    height: 60px;
    display: block;
  }
  .working-process__card {
    z-index: 1;
    box-sizing: border-box;
    background-color: #0000;
    background-image: url(../images/pages/home/working-process/card-bg.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: none;
    border-radius: 24px;
    flex-direction: column;
    align-items: flex-start;
    width: 374.828px;
    height: 252px;
    padding: 60px 40px 30px;
    display: flex;
    position: absolute;
  }
  .working-process__card--gap-24 {
    gap: 24px;
  }
  .working-process__card--gap-22 {
    gap: 22px;
  }
  .working-process__card--account {
    top: 228px;
    left: 0;
  }
  .working-process__card--funds {
    top: 228px;
    left: 925.17px;
  }
  .working-process__card--service {
    top: 549px;
    left: 251.99px;
  }
  .working-process__card--order {
    top: 549px;
    left: 680.99px;
  }
  .working-process__card-sparkles {
    width: 310px;
    height: 12.778px;
    position: absolute;
    top: 32px;
    left: 40px;
  }
  .working-process__card--funds .working-process__card-sparkles {
    top: 31px;
    left: 39px;
  }
  .working-process__card-title {
    color: #fff;
    width: 100%;
    font-family: var(--font-monda), "Monda", sans-serif;
    text-align: center;
    flex-direction: column;
    align-items: center;
    margin: 0;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3;
    display: flex;
  }
  .working-process__card-description {
    color: #dfe0e4;
    text-align: center;
    align-self: center;
    width: 100%;
    max-width: 310px;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
  }
  .working-process__card--service .working-process__card-description {
    max-width: 317px;
  }
  .working-process__step-icon {
    z-index: 3;
    box-sizing: border-box;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-image: linear-gradient(
      96.1754deg,
      #ca23e7 0.36902%,
      #98a7ffbf 99.183%
    );
    border: 0.962px solid #ca23e7;
    border-radius: 111.991px;
    place-items: center;
    width: 76.278px;
    height: 75.641px;
    display: grid;
    position: absolute;
  }
  .working-process__step-icon--account {
    top: 188.54px;
    left: 149.28px;
  }
  .working-process__step-icon--funds {
    top: 189.54px;
    left: 1074.45px;
  }
  .working-process__step-icon--service {
    top: 507px;
    left: 407px;
  }
  .working-process__step-icon--order {
    top: 507px;
    left: 830px;
  }
  .working-process__step-icon img {
    width: 40px;
    height: 40px;
    display: block;
  }
  @media (max-width: 1099px) {
    .working-process__shell {
      min-height: 0;
    }
    .working-process__diagram {
      aspect-ratio: auto;
      height: auto;
    }
    .working-process__diagram-canvas {
      flex-direction: column;
      align-items: center;
      gap: 2.5rem;
      width: 100%;
      height: auto;
      display: flex;
      position: relative;
      transform: none;
    }
    .working-process__line {
      display: none;
    }
    .working-process__hub {
      flex-shrink: 0;
      position: relative;
      top: auto;
      left: auto;
    }
    .working-process__card,
    .working-process__step-icon {
      position: relative;
      top: auto;
      left: auto;
    }
    .working-process__card {
      align-items: center;
      width: min(100%, 374.828px);
      height: auto;
      min-height: 252px;
    }
    .working-process__step-icon {
      margin-bottom: -2.4rem;
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .working-process__diagram {
      aspect-ratio: 1300/801;
      width: 100%;
      max-width: 81.25rem;
      height: auto;
    }
    .working-process__diagram-canvas {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      width: 1300px;
      height: 801px;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(calc(100cqw / 1300));
      transform-origin: 0 0;
    }
    .working-process__line {
      display: block;
    }
    .working-process__hub {
      position: absolute;
      top: 0;
      left: 578.11px;
    }
    .working-process__card,
    .working-process__step-icon {
      position: absolute;
      top: unset;
      left: unset;
    }
    .working-process__card {
      align-items: flex-start;
      width: 374.828px;
      height: 252px;
      min-height: 0;
    }
    .working-process__card--account {
      top: 228px;
      left: 0;
    }
    .working-process__card--funds {
      top: 228px;
      left: 925.17px;
    }
    .working-process__card--service {
      top: 549px;
      left: 251.99px;
    }
    .working-process__card--order {
      top: 549px;
      left: 680.99px;
    }
    .working-process__step-icon {
      margin-bottom: 0;
    }
    .working-process__step-icon--account {
      top: 188.54px;
      left: 149.28px;
    }
    .working-process__step-icon--funds {
      top: 189.54px;
      left: 1074.45px;
    }
    .working-process__step-icon--service {
      top: 507px;
      left: 407px;
    }
    .working-process__step-icon--order {
      top: 507px;
      left: 830px;
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .working-process__diagram {
      aspect-ratio: 1300/801;
      width: 100%;
      max-width: 81.25rem;
      height: auto;
    }
    .working-process__diagram-canvas {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      width: 1300px;
      height: 801px;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      transform: scale(calc(100cqw / 1300));
      transform-origin: 0 0;
    }
    .working-process__line {
      display: block;
    }
    .working-process__hub {
      position: absolute;
      top: 0;
      left: 578.11px;
    }
    .working-process__card,
    .working-process__step-icon {
      position: absolute;
      top: unset;
      left: unset;
    }
    .working-process__card {
      align-items: flex-start;
      width: 374.828px;
      height: 252px;
      min-height: 0;
    }
    .working-process__card--account {
      top: 228px;
      left: 0;
    }
    .working-process__card--funds {
      top: 228px;
      left: 925.17px;
    }
    .working-process__card--service {
      top: 549px;
      left: 251.99px;
    }
    .working-process__card--order {
      top: 549px;
      left: 680.99px;
    }
    .working-process__step-icon {
      margin-bottom: 0;
    }
    .working-process__step-icon--account {
      top: 188.54px;
      left: 149.28px;
    }
    .working-process__step-icon--funds {
      top: 189.54px;
      left: 1074.45px;
    }
    .working-process__step-icon--service {
      top: 507px;
      left: 407px;
    }
    .working-process__step-icon--order {
      top: 507px;
      left: 830px;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .working-process__diagram {
      aspect-ratio: 1300/961;
      width: 100%;
      max-width: 81.25rem;
      height: auto;
      overflow: visible;
    }
    .working-process__diagram-canvas {
      flex-direction: row;
      align-items: stretch;
      gap: 0;
      width: 1300px;
      height: 801px;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      overflow: visible;
      transform: scale(calc(100cqw / 1300));
      transform-origin: 0 0;
    }
    .working-process__line {
      display: block;
    }
    .working-process__hub {
      position: absolute;
      top: 0;
      left: 578.11px;
    }
    .working-process__card,
    .working-process__step-icon {
      position: absolute;
      top: unset;
      left: unset;
    }
    .working-process__card {
      align-items: flex-start;
      width: 374.828px;
      height: 252px;
      min-height: 0;
    }
    .working-process__card--account {
      top: 228px;
      left: 128px;
    }
    .working-process__card--funds {
      top: 228px;
      left: 797.17px;
    }
    .working-process__card--service {
      top: 709px;
      left: 131.905px;
    }
    .working-process__card--order {
      top: 709px;
      left: 801.075px;
    }
    .working-process__step-icon {
      margin-bottom: 0;
    }
    .working-process__step-icon--account {
      top: 188.54px;
      left: 277.28px;
    }
    .working-process__step-icon--funds {
      top: 189.54px;
      left: 946.45px;
    }
    .working-process__step-icon--service {
      top: 667px;
      left: 286.915px;
    }
    .working-process__step-icon--order {
      top: 667px;
      left: 950.085px;
    }
    .working-process__line--top {
      width: 670px;
      left: 315px;
    }
    .working-process__line--vertical {
      height: 559px;
    }
    .working-process__line--bottom-left {
      top: 631px;
      left: 355.915px;
      width: 295.085px;
    }
    .working-process__line--bottom-right {
      top: 631px;
      width: 305.085px;
    }
    .working-process__line--bottom-right .working-process__line-flip {
      width: 305.085px;
    }
    .working-process__wire-flow-path--account {
      d: path(
        "M129.28 129.162V65.2965C129.981 29.5842 159.132 1 194.851 1H464.631"
      );
    }
    .working-process__wire-flow-path--funds {
      d: path("M798.72 138V67.8828C798.72 30.9445 768.776 1 731.837 1H464.631");
    }
    .working-process__wire-flow-path--service {
      d: path(
        "M325.05 705 L355.92 682 H623 C638.464 682 651 669.464 651 654 V631 L652 631 V76"
      );
    }
    .working-process__wire-flow-path--order {
      d: path(
        "M988.22 705 L956.09 682 H679 C664.536 682 651 669.464 651 654 V631 L652 631 V76"
      );
    }
    .working-process__electric-node--account {
      cx: 315px;
    }
    .working-process__electric-node--funds {
      cx: 986px;
    }
    .working-process__electric-node--service {
      cx: 325px;
      cy: 705px;
    }
    .working-process__electric-node--order {
      cx: 988px;
      cy: 705px;
    }
  }
  .why-choose-us {
    background-color: #110816;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .why-choose-us__shell {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-block: 5rem;
    display: flex;
    position: relative;
  }
  .why-choose-us__glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .why-choose-us__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .why-choose-us__glow-spread--br {
    inset: -152.67%;
  }
  .why-choose-us__glow-spread--right {
    inset: -229.01%;
  }
  .why-choose-us__glow-spread--tr {
    inset: -97.56%;
  }
  .why-choose-us__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .why-choose-us__glow--br {
    width: 24.5625rem;
    height: 24.5625rem;
    top: 72rem;
    left: calc(50% + 54.9375rem);
  }
  .why-choose-us__glow--right {
    width: 16.375rem;
    height: 16.375rem;
    top: 41.625rem;
    left: calc(50% + 36.8125rem);
  }
  .why-choose-us__glow--left {
    mix-blend-mode: plus-lighter;
    width: 20.75rem;
    height: 20.75rem;
    top: -10.6875rem;
    left: calc(50% - 67.625rem);
  }
  .why-choose-us__glow--top {
    width: 20.75rem;
    height: 20.75rem;
    top: -19.375rem;
    left: calc(50% - 10.875rem);
  }
  .why-choose-us__glow--tr {
    width: 25.625rem;
    height: 25.625rem;
    top: -9.3125rem;
    left: calc(50% + 42rem);
  }
  .why-choose-us__pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: -16rem;
    left: calc(50% + 27.25rem);
    -webkit-mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 40rem 40rem;
    mask-size: 40rem 40rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .why-choose-us__pattern-inner {
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .why-choose-us__pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .why-choose-us__frame {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: min(100% - 2rem, 100rem);
    display: flex;
    position: relative;
  }
  .why-choose-us__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 65.75rem);
    display: flex;
  }
  .why-choose-us__title {
    letter-spacing: 0.025em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  @media (min-width: 1280px) {
    .why-choose-us__title {
      font-size: 2.5rem;
    }
    .why-choose-us__description {
      font-size: 1.125rem;
    }
  }
  .why-choose-us__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .why-choose-us__title-highlight {
    white-space: nowrap;
  }
  .why-choose-us__description {
    color: #dfe0e4;
    max-width: 65.75rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .why-choose-us__diagram {
    aspect-ratio: 1600/694;
    width: 100%;
    max-width: 100rem;
    position: relative;
    container-type: inline-size;
  }
  .why-choose-us__diagram-canvas {
    width: 1600px;
    height: 694px;
    transform: scale(calc(100cqw / 1600));
    transform-origin: 0 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  .why-choose-us__connector {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .why-choose-us__connector-inset {
    position: absolute;
  }
  .why-choose-us__connector-inset img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .why-choose-us__connector-inset--branch {
    inset: -0.55% -0.5%;
  }
  .why-choose-us__connector-inset--h {
    inset: -1px -2.3%;
  }
  .why-choose-us__connector--top {
    width: 200px;
    height: 183px;
    top: 108px;
    left: 700px;
  }
  .why-choose-us__connector--bottom {
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 183px;
    display: flex;
    top: 401px;
    left: 700px;
  }
  .why-choose-us__connector-flip {
    width: 200px;
    height: 183px;
    position: relative;
    transform: scaleY(-1);
  }
  .why-choose-us__connector--h-left {
    width: 43.5px;
    height: 0;
    top: 350px;
    left: 701px;
  }
  .why-choose-us__connector--h-right {
    justify-content: center;
    align-items: center;
    width: 43.5px;
    height: 0;
    display: flex;
    top: 350px;
    left: 856px;
  }
  .why-choose-us__connector-flip-h {
    width: 43.5px;
    height: 0;
    position: relative;
    transform: scaleY(-1) rotate(180deg);
  }
  .why-choose-us__hub {
    z-index: 2;
    width: 110.705px;
    height: 110px;
    position: absolute;
    top: 292px;
    left: 745px;
  }
  .why-choose-us__hub-ring {
    max-width: none;
    display: block;
    position: absolute;
  }
  .why-choose-us__hub-ring--4 {
    width: 110.705px;
    height: 110px;
    top: 0;
    left: 0;
  }
  .why-choose-us__hub-ring--3 {
    width: 103.609px;
    height: 102.949px;
    top: 3.58px;
    left: 3.55px;
  }
  .why-choose-us__hub-ring--2 {
    width: 96.512px;
    height: 95.897px;
    top: 7.16px;
    left: 7.1px;
  }
  .why-choose-us__hub-ring--1 {
    width: 89.416px;
    height: 88.846px;
    top: 10.73px;
    left: 10.64px;
  }
  .why-choose-us__hub-core {
    z-index: 1;
    background-image: linear-gradient(
      96.1754deg,
      #ca23e7 0.36902%,
      #98a7ffbf 99.183%
    );
    border: 1.073px solid #ca23e7;
    border-radius: 125.029px;
    place-items: center;
    width: 85.158px;
    height: 84.447px;
    display: grid;
    position: absolute;
    top: 12.88px;
    left: 12.77px;
  }
  .why-choose-us__hub-core img {
    width: 45.88px;
    height: 45.88px;
    display: block;
  }
  .why-choose-us__card {
    z-index: 1;
    box-sizing: border-box;
    background-color: #190624;
    background-image: url(../images/pages/home/why-choose-us/card-bg.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0.7px solid #ffffff20;
    border-radius: 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    width: 700px;
    height: 218px;
    padding: 14px 16px;
    display: flex;
    position: absolute;
    overflow: hidden;
  }
  .why-choose-us__card--l1 {
    top: 0;
    left: 0;
  }
  .why-choose-us__card--l2 {
    top: 238px;
    left: 0;
  }
  .why-choose-us__card--l3 {
    top: 476px;
    left: 0;
  }
  .why-choose-us__card--r1 {
    top: 0;
    left: 900px;
  }
  .why-choose-us__card--r2 {
    top: 238px;
    left: 900px;
  }
  .why-choose-us__card--r3 {
    top: 476px;
    left: 900px;
  }
  .why-choose-us__card-body {
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    display: flex;
    position: relative;
  }
  .why-choose-us__card-icon {
    flex-shrink: 0;
    place-items: center;
    width: 58px;
    height: 58px;
    display: grid;
    position: relative;
  }
  .why-choose-us__card-icon-seal {
    width: 97.44%;
    max-width: none;
    height: 97.44%;
    display: block;
    position: absolute;
    top: 1.28%;
    left: 1.28%;
  }
  .why-choose-us__card-icon-image {
    z-index: 1;
    object-fit: contain;
    width: 36px;
    height: 36px;
    display: block;
    position: relative;
  }
  .why-choose-us__card-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    display: flex;
  }
  .why-choose-us__card-title-row {
    align-items: center;
    gap: 6px;
    display: flex;
  }
  .why-choose-us__card-dot {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    display: block;
  }
  .why-choose-us__card-title {
    color: #fff;
    white-space: nowrap;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    line-height: normal;
  }
  .why-choose-us__card-description {
    color: #fff;
    width: 100%;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
  }
  @media (max-width: 1099px) {
    .why-choose-us__diagram {
      aspect-ratio: auto;
      height: auto;
    }
    .why-choose-us__diagram-canvas {
      flex-direction: column;
      align-items: stretch;
      gap: 1.25rem;
      width: 100%;
      height: auto;
      display: flex;
      position: relative;
      transform: none;
    }
    .why-choose-us__connector,
    .why-choose-us__hub {
      display: none;
    }
    .why-choose-us__card {
      background-size: cover;
      width: 100%;
      height: auto;
      min-height: 218px;
      position: relative;
      top: auto;
      left: auto;
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .why-choose-us__diagram-canvas {
      align-items: center;
      width: 100%;
      transform: none !important;
    }
    .why-choose-us__card {
      width: min(100%, 43.75rem);
      margin-inline: auto;
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .why-choose-us__diagram-canvas {
      align-items: center;
      width: 100%;
      transform: none !important;
    }
    .why-choose-us__card {
      width: min(100%, 43.75rem);
      margin-inline: auto;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .why-choose-us__diagram-canvas {
      align-items: center;
      width: 100%;
      transform: none !important;
    }
    .why-choose-us__card {
      width: min(100%, 43.75rem);
      margin-inline: auto;
    }
  }
  @media (min-width: 1280px) {
    .why-choose-us__card {
      padding: 16px;
    }
  }
  .advantages {
    background-image: url(../images/pages/home/advantages/section-bg-fill.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .advantages__shell {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-block: 5rem;
    display: flex;
    position: relative;
  }
  .advantages__frame {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: min(100% - 2rem, 100rem);
    display: flex;
    position: relative;
  }
  .advantages__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .advantages__title {
    letter-spacing: 0.025em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  @media (min-width: 1280px) {
    .advantages__title {
      font-size: 2.5rem;
    }
    .advantages__description {
      font-size: 1.125rem;
    }
  }
  .advantages__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .advantages__title-highlight {
    white-space: nowrap;
  }
  .advantages__description {
    color: #c1c4cc;
    max-width: 62.25rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .advantages__body {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2.375rem;
    width: 100%;
    max-width: 78.375rem;
    display: flex;
    position: relative;
  }
  .advantages__media {
    background-color: #1a0a22;
    border-radius: 3rem;
    flex-shrink: 0;
    width: 38rem;
    height: 32.25rem;
    position: relative;
    overflow: hidden;
  }
  .advantages__media-image {
    pointer-events: none;
    width: 28.3125rem;
    height: 51.0625rem;
    position: absolute;
    top: 0;
    left: 3.9375rem;
    overflow: hidden;
  }
  .advantages__media-image img {
    object-fit: cover;
    width: 119.16%;
    max-width: none;
    height: 100.06%;
    display: block;
    position: absolute;
    top: -0.03%;
    left: -9.47%;
  }
  .advantages__stat {
    z-index: 2;
    width: 14.8125rem;
    height: 6.75rem;
    position: absolute;
    top: 24.125rem;
    left: 22.0625rem;
  }
  .advantages__stat-shape {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .advantages__stat:before {
    content: "";
    z-index: 0;
    -webkit-backdrop-filter: blur(16px);
    background: #ffffff0f;
    border-radius: 1rem;
    position: absolute;
    inset: 0;
    -webkit-mask-image: url(../icons/advantages/stat-badge.svg);
    mask-image: url(../icons/advantages/stat-badge.svg);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .advantages__stat-copy {
    z-index: 1;
    color: #fff;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    width: 11.226rem;
    display: flex;
    position: absolute;
    top: 1.4375rem;
    left: 1.2475rem;
  }
  .advantages__stat-value {
    width: 100%;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1;
  }
  .advantages__stat-label {
    white-space: nowrap;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
  }
  .advantages__stat-arrow {
    z-index: 2;
    justify-content: center;
    align-items: center;
    width: 2.262rem;
    height: 2.262rem;
    display: flex;
    position: absolute;
    top: 0;
    left: 10.8125rem;
  }
  .advantages__stat-arrow-ring {
    border: 0.783px solid #fff;
    border-radius: 1.125rem;
    justify-content: center;
    align-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.635875rem;
    display: flex;
    transform: rotate(-89.68deg);
  }
  .advantages__stat-arrow-icon {
    width: 0.97825rem;
    height: 0.97825rem;
    display: block;
    transform: rotate(148.63deg);
  }
  .advantages__list-panel {
    flex-shrink: 0;
    align-items: flex-start;
    height: 32.25rem;
    display: flex;
    position: relative;
  }
  .advantages__list {
    touch-action: pan-x;
    width: 38rem;
    height: 32.25rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#0000 0%, #000 14% 86%, #0000 100%);
    mask-image: linear-gradient(#0000 0%, #000 14% 86%, #0000 100%);
  }
  .advantages__list-inner {
    touch-action: pan-x;
    flex-direction: column;
    height: calc(100% + 1.125rem);
    margin-top: -1.125rem;
    display: flex;
  }
  .advantages__slide {
    box-sizing: border-box;
    flex: 0 0 11.125rem;
    align-items: stretch;
    min-height: 0;
    padding-top: 1.125rem;
    display: flex;
  }
  .advantages__card {
    z-index: 1;
    box-sizing: border-box;
    opacity: 0.8;
    filter: blur(4px);
    background-image: linear-gradient(144.33deg, #4e1170 0.97%, #1f092b 25.58%);
    border: 0.7px solid #ffffff61;
    border-radius: 1.5rem;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    align-items: flex-start;
    gap: 0.625rem;
    width: 38rem;
    height: 10rem;
    padding: 1.75rem 1.5rem;
    transition:
      filter 0.3s,
      border-color 0.3s,
      box-shadow 0.3s,
      opacity 0.3s;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .advantages__card--active {
    z-index: 20;
    opacity: 1;
    filter: none;
    box-shadow: none;
    border-color: #ffffff30;
  }
  .advantages__card--inactive {
    z-index: 1;
    opacity: 0.8;
    filter: blur(4px);
    box-shadow: none;
    border-color: #ffffff6e;
  }
  @media (prefers-reduced-motion: reduce) {
    .advantages__card {
      filter: none;
      transition: none;
    }
    .advantages__card--inactive {
      filter: none;
      opacity: 0.7;
    }
  }
  .advantages__card-body {
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
    width: 100%;
    display: flex;
    position: relative;
  }
  .advantages__card-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
    display: flex;
    position: relative;
  }
  .advantages__card-title-row {
    align-items: center;
    gap: 0.375rem;
    display: flex;
  }
  .advantages__card-dot {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    display: block;
  }
  .advantages__card-title {
    color: #fff;
    font-family: var(--font-monda), "Monda", sans-serif;
    white-space: nowrap;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }
  .advantages__card-description {
    color: #fff;
    width: 100%;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.2;
  }
  .advantages__card-pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    width: 30rem;
    height: 30rem;
    position: absolute;
    top: -21.1875rem;
    left: 12.5rem;
    -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
    mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
    -webkit-mask-size: 30rem 30rem;
    mask-size: 30rem 30rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .advantages__card-pattern-inner {
    position: absolute;
    inset: 0;
  }
  .advantages__card-pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .advantages__card-glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .advantages__card-glow--tr {
    mix-blend-mode: plus-lighter;
    width: 11.5625rem;
    height: 11.5625rem;
    top: -6.625rem;
    left: 23.4375rem;
  }
  .advantages__card-glow--mid {
    mix-blend-mode: plus-lighter;
    width: 6.6875rem;
    height: 2.1875rem;
    top: 5.5625rem;
    left: 4.1875rem;
  }
  .advantages__card-glow--bl {
    mix-blend-mode: plus-lighter;
    width: 2.5625rem;
    height: 13.8125rem;
    top: 14.3313rem;
    left: -1.23125rem;
  }
  .advantages__card-glow-spread--tr {
    position: absolute;
    inset: -108.11%;
  }
  .advantages__card-glow-spread--mid {
    position: absolute;
    inset: -571.43% -186.92%;
  }
  .advantages__card-glow-spread--bl {
    position: absolute;
    inset: -90.5% -487.8%;
  }
  .advantages__card-glow-spread--tr img,
  .advantages__card-glow-spread--mid img,
  .advantages__card-glow-spread--bl img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .advantages__nav {
    z-index: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: 2.5rem;
    display: none;
    position: absolute;
    top: 50%;
    right: -4.4375rem;
    translate: 0 -50%;
  }
  @media (min-width: 1024px) {
    .advantages__nav {
      display: flex;
    }
  }
  .advantages__nav-btn {
    cursor: pointer;
    background: 0 0;
    border: 0;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    transition: transform 0.3s;
    display: flex;
  }
  .advantages__nav-btn:hover {
    transform: scale(1.05);
  }
  .advantages__nav-btn-face {
    background:
      radial-gradient(
        110% 55% at 50% -5%,
        #c696ffd9 0%,
        #a05ae659 35%,
        #13030600 70%
      ),
      #130306e0;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .advantages__nav-btn--down .advantages__nav-btn-face {
    background:
      radial-gradient(
        110% 55% at 50% 105%,
        #c696ffd9 0%,
        #a05ae659 35%,
        #13030600 70%
      ),
      #130306e0;
  }
  .advantages__nav-btn-face:before {
    content: "";
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    -webkit-mask-composite: xor;
    -webkit-mask-composite: xor;
    -webkit-mask-source-type: auto, auto;
    -webkit-mask-composite: xor;
    -webkit-mask-source-type: auto, auto;
    background: linear-gradient(#ffffffde 0%, #ffffff73 55%, #fff0 100%);
    padding: 0.5px;
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
    -webkit-mask-position:
      0 0,
      0 0;
    mask-position:
      0 0,
      0 0;
    -webkit-mask-size: auto, auto;
    mask-size: auto, auto;
    -webkit-mask-repeat: repeat, repeat;
    mask-repeat: repeat, repeat;
    -webkit-mask-clip: content-box, border-box;
    mask-clip: content-box, border-box;
    -webkit-mask-origin: content-box, border-box;
    mask-origin: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    -webkit-mask-source-type: auto, auto;
    mask-mode: match-source, match-source;
  }
  .advantages__nav-btn--down .advantages__nav-btn-face:before {
    background: linear-gradient(#fff0 0%, #ffffff73 45%, #ffffffde 100%);
  }
  .advantages__nav-icon {
    z-index: 1;
    object-fit: contain;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    position: relative;
  }
  .advantages__nav-btn--up .advantages__nav-icon {
    transform: rotate(-90deg);
  }
  .advantages__nav-btn--down .advantages__nav-icon {
    transform: rotate(90deg);
  }
  @media (max-width: 1279px) {
    .advantages__body {
      flex-wrap: wrap;
    }
    .advantages__media {
      aspect-ratio: 608/516;
      width: min(100%, 38rem);
      height: auto;
    }
    .advantages__list-panel {
      width: min(100%, 38rem);
      height: 32.25rem;
    }
    .advantages__list {
      width: 100%;
      height: 32.25rem;
    }
    .advantages__slide,
    .advantages__card {
      width: 100%;
    }
    .advantages__card-title {
      white-space: normal;
    }
  }
  @media (max-width: 767px) {
    .advantages__card-copy {
      gap: 10px;
    }
    .advantages__card-title {
      font-size: 16px;
      line-height: 1.35;
      white-space: normal;
    }
    .advantages__card-description {
      font-size: 13px;
      line-height: 1.45;
    }
    .advantages__card-dot {
      width: 10px;
      height: 10px;
    }
    .advantages__shell {
      padding-block: 3.5rem;
    }
    .advantages__frame {
      gap: 2rem;
    }
    .advantages__stat {
      width: 12rem;
      height: 5.5rem;
      inset: auto 1rem 1rem auto;
    }
    .advantages__stat-copy {
      gap: 0.75rem;
      width: auto;
      top: 1rem;
      left: 1rem;
    }
    .advantages__stat-value {
      font-size: 1.25rem;
    }
    .advantages__stat-label {
      font-size: 0.875rem;
    }
    .advantages__stat-arrow {
      display: none;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .advantages__media {
      container-type: inline-size;
      aspect-ratio: 608/516;
      border-radius: calc(3rem * 100cqw / 38rem);
      width: 100%;
      max-width: 38rem;
      height: auto;
    }
    .advantages__media-image {
      width: calc(28.3125rem * 100cqw / 38rem);
      height: calc(51.0625rem * 100cqw / 38rem);
      top: 0;
      left: calc(3.9375rem * 100cqw / 38rem);
    }
    .advantages__stat {
      width: calc(14.8125rem * 100cqw / 38rem);
      height: calc(6.75rem * 100cqw / 38rem);
      top: calc(24.125rem * 100cqw / 38rem);
      right: auto;
      bottom: auto;
      left: calc(22.0625rem * 100cqw / 38rem);
    }
    .advantages__stat-copy {
      gap: calc(1.25rem * 100cqw / 38rem);
      width: calc(11.226rem * 100cqw / 38rem);
      top: calc(1.4375rem * 100cqw / 38rem);
      left: calc(1.2475rem * 100cqw / 38rem);
    }
    .advantages__stat-value {
      font-size: calc(1.5rem * 100cqw / 38rem);
    }
    .advantages__stat-label {
      font-size: calc(1rem * 100cqw / 38rem);
    }
    .advantages__stat-arrow {
      display: flex;
      width: calc(2.262rem * 100cqw / 38rem);
      height: calc(2.262rem * 100cqw / 38rem);
      top: 0;
      left: calc(10.8125rem * 100cqw / 38rem);
    }
    .advantages__stat-arrow-ring {
      border-width: calc(0.783px * 100cqw / 38rem);
      border-radius: calc(1.125rem * 100cqw / 38rem);
      width: calc(2.25rem * 100cqw / 38rem);
      height: calc(2.25rem * 100cqw / 38rem);
      padding: calc(0.635875rem * 100cqw / 38rem);
    }
    .advantages__stat-arrow-icon {
      width: calc(0.97825rem * 100cqw / 38rem);
      height: calc(0.97825rem * 100cqw / 38rem);
    }
  }
  @media (min-width: 320px) and (max-width: 440px) {
    .advantages__list-panel {
      order: -1;
    }
    .advantages__media {
      order: 1;
    }
  }
  .payment-methods {
    background-color: #16081d;
    width: 100%;
    padding-block: 5rem;
    padding-inline: clamp(1rem, 8.333vw, 10rem);
    position: relative;
    overflow: hidden;
  }
  .payment-methods__shell {
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
  }
  .payment-methods__pattern {
    pointer-events: none;
    z-index: 0;
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: -14.9375rem;
    right: -17.875rem;
  }
  .payment-methods__pattern img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .payment-methods__glow {
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: plus-lighter;
    position: absolute;
  }
  .payment-methods__glow--tr {
    width: 30.125rem;
    height: 30.125rem;
    top: -17.5rem;
    right: -8rem;
  }
  .payment-methods__glow-spread {
    position: absolute;
    inset: -120%;
  }
  .payment-methods__glow-spread--tr {
    inset: -83%;
  }
  .payment-methods__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .payment-methods__shield {
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    filter: drop-shadow(0 1rem 2rem #cd36e73d);
    transform-origin: 50%;
    width: 12.1925rem;
    height: 13.966rem;
    position: absolute;
    top: -3.75rem;
    left: -7.5rem;
    transform: rotate(-16.63deg);
  }
  .payment-methods__shield img {
    object-fit: contain;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .payment-methods__frame {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: 3.75rem;
    width: min(100%, 100rem);
    display: flex;
    position: relative;
  }
  .payment-methods__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
    position: relative;
  }
  .payment-methods__header-glow {
    pointer-events: none;
    z-index: 0;
    width: 20.75rem;
    height: 20.75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -20%;
  }
  .payment-methods__header-glow:before {
    content: "";
    background: radial-gradient(
      circle at 50% 45%,
      #da32f705 0%,
      #8f6aff03 40%,
      #0000 70%
    );
    border-radius: 50%;
    position: absolute;
    inset: -120.48%;
  }
  .payment-methods__header-glow-spread {
    opacity: 0.15;
    position: absolute;
    inset: -120.48%;
  }
  .payment-methods__header-glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .payment-methods__header > :not(.payment-methods__header-glow) {
    z-index: 1;
    position: relative;
  }
  .payment-methods__title {
    letter-spacing: 0.025em;
    max-width: 100%;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .payment-methods__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .payment-methods__title-highlight {
    white-space: nowrap;
  }
  .payment-methods__description {
    color: #dfe0e4;
    max-width: 62.25rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .payment-methods__diagram {
    aspect-ratio: 1570/387;
    width: 100%;
    max-width: 98.125rem;
    position: relative;
    container-type: inline-size;
    overflow: hidden;
  }
  .payment-methods__diagram-canvas {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    inset: 0;
  }
  .payment-methods__diagram-scaler {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 1570px;
    height: 387px;
    align-items: center;
    justify-content: center;
    gap: 36px;
    transform: scale(calc(100cqw / 1570));
    transform-origin: 0 0;
  }
  .payment-methods__diagram-fallback {
    display: none;
  }
  .payment-methods__wing {
    flex-shrink: 0;
    width: 624px;
    height: 387px;
    position: relative;
  }
  .payment-methods__wing-rings {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .payment-methods__wing-mirror {
    flex-shrink: 0;
    display: flex;
    transform: scaleY(-1) rotate(180deg);
  }
  .payment-methods__bubble,
  .payment-methods__bubble--inner {
    z-index: 2;
    box-sizing: border-box;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
    padding: 19px 18px 18px 19px;
    display: flex;
    position: absolute;
  }
  .payment-methods__bubble-glow {
    pointer-events: none;
    z-index: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .payment-methods__bubble > :not(.payment-methods__bubble-glow),
  .payment-methods__bubble--inner > :not(.payment-methods__bubble-glow) {
    z-index: 1;
    position: relative;
  }
  .payment-methods__bubble--inner {
    position: relative;
    inset: auto;
  }
  .payment-methods__bubble-flip {
    z-index: 2;
    justify-content: center;
    align-items: center;
    width: 65px;
    height: 65px;
    display: flex;
    position: absolute;
    transform: scaleY(-1) rotate(180deg);
  }
  .payment-methods__bubble--l1 {
    top: 157px;
    left: 403px;
  }
  .payment-methods__bubble--l2 {
    top: 213px;
    left: 274px;
  }
  .payment-methods__bubble--l3 {
    top: 257px;
    left: 137px;
  }
  .payment-methods__bubble--l4 {
    top: 92px;
    left: 274px;
  }
  .payment-methods__bubble--l5 {
    top: 59px;
    left: 137px;
  }
  .payment-methods__bubble--pay-label {
    gap: 0.125rem;
  }
  .payment-methods__pay-text {
    color: #fff;
    font-family: var(--font-monda), "Monda", sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.35;
  }
  .payment-methods__chip {
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: block;
    position: relative;
    overflow: hidden;
  }
  .payment-methods__chip--white {
    background: #fff;
  }
  .payment-methods__chip-img {
    object-fit: cover;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
    position: absolute;
    inset: 0;
  }
  .payment-methods__chip-img--bird {
    width: 279%;
    height: 147%;
    top: -23%;
    left: -90%;
  }
  .payment-methods__chip--upay {
    background: 0 0;
    border-radius: 0;
    width: 32px;
    height: 34px;
  }
  .payment-methods__chip-img--upay {
    width: 142%;
    height: 132%;
    top: -14%;
    left: -21%;
  }
  .payment-methods__logo {
    object-fit: contain;
    max-width: none;
    display: block;
  }
  .payment-methods__logo--mc {
    width: 46px;
    height: 28px;
  }
  .payment-methods__logo--visa {
    width: 47px;
    height: 26px;
  }
  .payment-methods__logo--sq {
    object-fit: cover;
    border-radius: 7px;
    width: 34px;
    height: 34px;
  }
  .payment-methods__logo--apple {
    object-fit: cover;
    object-position: center;
    width: 22px;
    height: 24px;
  }
  .payment-methods__hub {
    z-index: 3;
    flex-shrink: 0;
    width: 249.59px;
    height: 248px;
    position: relative;
  }
  .payment-methods__hub-ring {
    max-width: none;
    display: block;
    position: absolute;
  }
  .payment-methods__hub-ring--4 {
    width: 249.59px;
    height: 248px;
    top: 0;
    left: 0;
  }
  .payment-methods__hub-ring--3 {
    width: 233.59px;
    height: 232.1px;
    top: 8.07px;
    left: 8px;
  }
  .payment-methods__hub-ring--2 {
    width: 217.59px;
    height: 216.2px;
    top: 16.13px;
    left: 16px;
  }
  .payment-methods__hub-ring--1 {
    width: 201.59px;
    height: 200.3px;
    top: 24.2px;
    left: 24px;
  }
  .payment-methods__hub-core {
    background-image: linear-gradient(
      96.18deg,
      #ca23e7 0.37%,
      #98a7ffbf 99.18%
    );
    border: 2.42px solid #ca23e7;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 191.99px;
    height: 190.39px;
    display: flex;
    position: absolute;
    top: 29.04px;
    left: 28.8px;
    box-shadow:
      0 0 40px #ca23e773,
      inset 0 0 24px #98a7ff40;
  }
  .payment-methods__hub-stack {
    width: 94px;
    max-width: none;
    height: 94px;
    display: block;
  }
  .payment-methods__notice {
    background-color: #589723a8;
    border: 1px solid #ffffff30;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: min(100%, 55rem);
    padding: 1.5rem 2.5rem;
    display: flex;
  }
  .payment-methods__notice-text {
    color: #fff;
    width: 100%;
    max-width: 50rem;
    font-family: var(--font-monda), "Monda", sans-serif;
    text-align: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }
  @media (max-width: 1279px) {
    .payment-methods__shield {
      display: none;
    }
    .payment-methods__pattern {
      width: 28rem;
      height: 28rem;
      top: -10rem;
      right: -12rem;
    }
    .payment-methods__frame {
      gap: 2.5rem;
    }
    .payment-methods__diagram {
      aspect-ratio: auto;
      height: auto;
    }
    .payment-methods__diagram-canvas {
      display: none;
    }
    .payment-methods__diagram-fallback {
      width: 100%;
      max-width: none;
      height: auto;
      display: block;
    }
  }
  @media (min-width: 1440px) and (max-width: 1440px) {
    .payment-methods__diagram {
      aspect-ratio: 1570/387;
      width: 100%;
      max-width: 98.125rem;
      height: auto;
    }
    .payment-methods__diagram-canvas {
      display: block;
    }
    .payment-methods__diagram-fallback {
      display: none;
    }
    .payment-methods__diagram-scaler {
      width: 1570px;
      height: 387px;
      transform: scale(calc(100cqw / 1570));
      transform-origin: 0 0;
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .payment-methods__diagram {
      aspect-ratio: 1570/387;
      width: 100%;
      max-width: 98.125rem;
      height: auto;
    }
    .payment-methods__diagram-canvas {
      display: block;
    }
    .payment-methods__diagram-fallback {
      display: none;
    }
    .payment-methods__diagram-scaler {
      width: 1570px;
      height: 387px;
      transform: scale(calc(100cqw / 1570));
      transform-origin: 0 0;
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .payment-methods__diagram {
      aspect-ratio: 1570/387;
      width: 100%;
      max-width: 98.125rem;
      height: auto;
    }
    .payment-methods__diagram-canvas {
      display: block;
    }
    .payment-methods__diagram-fallback {
      display: none;
    }
    .payment-methods__diagram-scaler {
      width: 1570px;
      height: 387px;
      transform: scale(calc(100cqw / 1570));
      transform-origin: 0 0;
    }
  }
  @media (max-width: 767px) {
    .payment-methods {
      padding-block: 3.5rem;
      padding-inline: 1rem;
    }
    .payment-methods__notice {
      padding: 1.25rem;
    }
    .payment-methods__notice-text {
      font-size: 0.875rem;
    }
    .payment-methods__pattern {
      opacity: 0.85;
      width: 20rem;
      height: 20rem;
      top: -6rem;
      right: -8rem;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .payment-methods__diagram {
      aspect-ratio: 1570/387;
      width: 100%;
      max-width: 98.125rem;
      height: auto;
    }
    .payment-methods__diagram-canvas {
      display: block;
    }
    .payment-methods__diagram-fallback {
      display: none;
    }
    .payment-methods__diagram-scaler {
      width: 1570px;
      height: 387px;
      transform: scale(calc(100cqw / 1570));
      transform-origin: 0 0;
    }
  }
  @media (min-width: 1440px) and (max-width: 1440px),
    (min-width: 1024px) and (max-width: 1024px),
    (min-width: 768px) and (max-width: 768px),
    (min-width: 360px) and (max-width: 440px) {
    .payment-methods__shield {
      display: block;
      width: calc(100vw * 195.08 / 1920);
      height: calc(100vw * 223.456 / 1920);
      top: calc(100vw * -60 / 1920);
      left: calc(100vw * -120 / 1920);
      filter: drop-shadow(
        0 calc(100vw * 16 / 1920) calc(100vw * 32 / 1920) #cd36e73d
      );
      transform: rotate(-16.63deg);
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .payment-methods__shield {
      top: -3.75rem;
      left: calc(1.875rem - clamp(1rem, 8.333vw, 10rem));
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .payment-methods__shield {
      top: -3.5rem;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .payment-methods__shield {
      width: calc(100vw * 195.08 / 1920 * 1.25);
      height: calc(100vw * 223.456 / 1920 * 1.25);
      top: calc(100vw * -60 / 1920 - 1.5rem);
      left: calc(100vw * -120 / 1920 + 1.5rem);
    }
  }
  [data-footer] {
    --footer-artboard-h: 756px;
    --footer-min-clearance: 3.5rem;
    --footer-stack-gap: 1rem;
    --footer-copyright-offset: 0;
    --footer-copyright-h: 5.1875rem;
    --footer-copyright-pad: 1.5rem;
    --footer-copyright-size: 1.125rem;
    --footer-watermark-size: clamp(4rem, 12vw, 14.375rem);
    --footer-watermark-tracking: clamp(0.5rem, 1.2vw, 1.4375rem);
    --footer-watermark-glow-blur: 40px;
    --footer-watermark-lift: 0;
    --footer-watermark-offset-y: -2.75rem;
    --footer-bars-zone-h: calc(var(--footer-watermark-size) * 1.01);
    --footer-bottom-reserve: 14rem;
  }
  @media (min-width: 1280px) {
    [data-footer] {
      --footer-min-clearance: 4rem;
      --footer-bottom-reserve: 15rem;
    }
  }
  @media (min-width: 1600px) {
    [data-footer] {
      --footer-watermark-size: 14.375rem;
      --footer-watermark-tracking: 1.4375rem;
      --footer-watermark-offset-y: -2.875rem;
      --footer-bars-zone-h: 14.5188rem;
    }
  }
  @media (min-width: 1536px) {
    [data-footer] {
      --footer-min-clearance: 4.5rem;
      --footer-bottom-reserve: 15.5rem;
    }
  }
  @media (max-width: 1023px) {
    [data-footer] {
      --footer-artboard-h: 680px;
      --footer-stack-gap: 0.875rem;
      --footer-copyright-h: 4.75rem;
      --footer-copyright-pad: 1.25rem;
      --footer-copyright-size: 1rem;
      --footer-watermark-size: clamp(2.75rem, 9.5vw, 7rem);
      --footer-watermark-tracking: clamp(0.25rem, 0.9vw, 0.75rem);
      --footer-watermark-glow-blur: 28px;
      --footer-watermark-offset-y: -2.125rem;
      --footer-bottom-reserve: 11rem;
    }
  }
  @media (max-width: 767px) {
    [data-footer] {
      --footer-artboard-h: 580px;
      --footer-stack-gap: 0.75rem;
      --footer-copyright-h: 4.5rem;
      --footer-copyright-pad: 1rem;
      --footer-copyright-size: 0.875rem;
      --footer-watermark-size: clamp(2rem, 11.5vw, 4.5rem);
      --footer-watermark-tracking: clamp(0.12rem, 0.7vw, 0.45rem);
      --footer-watermark-glow-blur: 22px;
      --footer-watermark-offset-y: -1.75rem;
      --footer-bottom-reserve: 9rem;
    }
  }
  @media (max-width: 479px) {
    [data-footer] {
      --footer-artboard-h: 500px;
      --footer-stack-gap: 0.625rem;
      --footer-copyright-h: 4.25rem;
      --footer-copyright-pad: 0.875rem;
      --footer-copyright-size: 0.75rem;
      --footer-watermark-size: clamp(1.625rem, 13vw, 3.25rem);
      --footer-watermark-tracking: clamp(0.08rem, 0.55vw, 0.3rem);
      --footer-watermark-glow-blur: 18px;
      --footer-watermark-offset-y: -1.5rem;
      --footer-bottom-reserve: 7.5rem;
    }
  }
  .footer-backdrop-image {
    object-position: center bottom;
  }
  @media (max-width: 1023px) {
    .footer-backdrop-image {
      object-position: center 88%;
    }
  }
  @media (max-width: 767px) {
    .footer-backdrop-image {
      object-position: center 92%;
    }
  }
  .footer-bottom-stack {
    gap: var(--footer-stack-gap);
    padding-bottom: var(--footer-watermark-lift);
  }
  .footer-watermark-anchor {
    margin-top: 0;
    line-height: 1;
    transform: translateY(var(--footer-watermark-offset-y, 0));
  }
  .footer-copyright-text {
    font-size: var(--footer-copyright-size);
    white-space: nowrap;
    line-height: 1.5;
  }
  @media (max-width: 479px) {
    .footer-copyright-text {
      white-space: normal;
    }
  }
  .footer-watermark-text {
    font-family: var(--font-watermark), sans-serif;
    font-size: var(--footer-watermark-size);
    letter-spacing: var(--footer-watermark-tracking);
    white-space: nowrap;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 700;
    line-height: normal;
  }
  .footer-watermark-glow {
    color: #f5b8ff;
    opacity: 0.55;
    filter: blur(var(--footer-watermark-glow-blur));
    transform: translateZ(0);
  }
  .footer-glass-bar {
    -webkit-filter: blur(12px);
    background: linear-gradient(
      90deg,
      #ffffff29 0%,
      #ffffff0f 50%,
      #ffffff29 100%
    );
  }
  @media (min-width: 1024px) {
    .footer-watermark-zone {
      overflow: visible;
    }
    [data-footer-bars="watermark"] .footer-glass-bar {
      height: 33.2954%;
      top: auto;
    }
    [data-footer-bars="watermark"] .footer-glass-bar[data-bar-index="0"] {
      bottom: 66.7046%;
    }
    [data-footer-bars="watermark"] .footer-glass-bar[data-bar-index="1"] {
      bottom: 46.0206%;
    }
    [data-footer-bars="watermark"] .footer-glass-bar[data-bar-index="2"] {
      bottom: 24.832%;
    }
    [data-footer-bars="watermark"] .footer-glass-bar[data-bar-index="3"] {
      bottom: 4.14801%;
    }
    [data-footer-bars="watermark"] .footer-glass-bar[data-bar-index="4"] {
      bottom: -17.0363%;
    }
  }
  .footer-copyright-bar {
    box-sizing: border-box;
    height: var(--footer-copyright-h);
    min-height: var(--footer-copyright-h);
    margin-top: var(--footer-copyright-offset, 0);
    padding: var(--footer-copyright-pad);
    -webkit-backdrop-filter: blur(2px);
    background-color: #ffffff12;
    border-radius: 100px 1000px;
    flex-shrink: 0;
  }
  .brand-cta-card {
    background-image: var(--gradient-brand-cta-card);
    -webkit-backdrop-filter: blur(4px);
    box-shadow:
      inset 1.5px 1.5px #ffffff38,
      inset -1px -1px #8e69ff24,
      inset 0 0 0 1px #ffffff14;
  }
  .brand-cta-glow {
    -webkit-filter: blur(150px);
    mix-blend-mode: plus-lighter;
  }
  .blog-section {
    background-color: #0000;
  }
  .blog-section-icon {
    width: 168px;
    height: 163px;
    top: 3.25rem;
    left: 0.5rem;
    transform-origin: 50% 50%;
  }
  @media (max-width: 1023px) {
    .blog-section-icon {
      display: none;
    }
  }
  @media (min-width: 1400px) {
    .blog-section-icon {
      width: 220px;
      height: 214px;
      top: 2rem;
      left: max(0.5rem, 50% - 800px);
    }
  }
  @media (min-width: 1600px) {
    .blog-section-icon {
      width: 260px;
      height: 253px;
      top: 0.5rem;
      left: calc(50% - 800px - 7.5rem);
    }
  }
  @media (min-width: 1920px) {
    .blog-section-icon {
      width: 300px;
      height: 292px;
      top: 0.5rem;
      left: calc(50% - 800px - 7.5rem);
    }
  }
  .blog-card {
    background-image: var(--gradient-blog-card);
  }
  .faq-section {
    background-color: #0000;
  }
  .faq-item {
    -webkit-backdrop-filter: blur(12px);
    background-color: #ffffff0f;
    box-shadow:
      inset 0 1px #ffffff2e,
      inset 1px 0 #ffffff1a,
      inset 0 -1px #ffffff0a,
      inset -1px 0 #ffffff0a;
  }
  .faq-item[data-open] {
    background-color: #ffffff14;
  }
  .faq-accordion-chevron {
    background-color: #ca23e7;
    background-image: linear-gradient(
      96.12deg,
      #ca23e7 0.37%,
      #98a7ffbf 99.18%
    );
  }
  .section-heading-badge__shape {
    clip-path: polygon(9px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
    opacity: 0.6;
    background: linear-gradient(90deg, #cd36e7ad 0%, #7919a517 100%);
    transform: scaleX(-1);
  }
  .section-heading-badge__slash {
    clip-path: polygon(5px 0, 0 0, 9.9px 45px, 14.5px 45px);
    background: #c851ff;
  }
  .pricing {
    background-color: #120916;
    width: 100%;
    padding-block: 5rem;
    padding-inline: clamp(1rem, 8.333vw, 10rem);
    position: relative;
    overflow: hidden;
  }
  .pricing__glow {
    pointer-events: none;
    z-index: 0;
    mix-blend-mode: plus-lighter;
    width: 20.75rem;
    height: 20.75rem;
    position: absolute;
  }
  .pricing__glow--tl {
    top: -11rem;
    left: -11.1875rem;
  }
  .pricing__glow--br {
    inset: auto -5.8125rem -17.125rem auto;
  }
  .pricing__glow--bc {
    opacity: 0.48;
    width: 36rem;
    height: 22rem;
    top: auto;
    bottom: -12rem;
    left: 50%;
    translate: -50%;
  }
  .pricing__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .pricing__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .pricing__shell {
    z-index: 1;
    isolation: isolate;
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
  }
  .pricing__pattern {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .pricing__pattern img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .pricing__pattern--tl {
    opacity: 0.4;
    width: 60rem;
    height: 60rem;
    top: -48.6875rem;
    left: -41.0625rem;
  }
  .pricing__pattern--bl {
    opacity: 0.14;
    width: 60rem;
    height: 60rem;
    top: 42.875rem;
    left: -45.625rem;
  }
  .pricing__pattern--mid {
    width: 40rem;
    height: 40rem;
    top: -17.1875rem;
    left: -21.6875rem;
  }
  .pricing__wave {
    pointer-events: none;
    z-index: 0;
    width: 200.563rem;
    height: 88.625rem;
    position: absolute;
    top: 7rem;
    left: -29.0625rem;
  }
  .pricing__wave img {
    object-fit: fill;
    mix-blend-mode: plus-lighter;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .pricing__frame {
    z-index: 1;
    isolation: isolate;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: min(100%, 100rem);
    display: flex;
    position: relative;
  }
  .pricing__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 73.375rem);
    display: flex;
  }
  .pricing__title {
    letter-spacing: 0.025em;
    max-width: 60.0625rem;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .pricing__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .pricing__description {
    color: #dfe0e4;
    max-width: 73.375rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .pricing__visual {
    width: min(100%, 50rem);
    position: relative;
  }
  .pricing__visual-fallback {
    width: 100%;
    max-width: none;
    height: auto;
    display: none;
  }
  .pricing__browser {
    background: 0 0;
    border-radius: 1rem 1rem 3rem 3rem;
    width: 100%;
    height: 35.75rem;
    position: relative;
    overflow: hidden;
  }
  .pricing__browser:before {
    content: "";
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
    -webkit-backdrop-filter: blur(20px);
    background: #8b8b8b24;
    position: absolute;
    inset: 0;
  }
  .pricing__chrome {
    z-index: 2;
    flex-direction: column;
    width: 100%;
    display: flex;
    position: relative;
  }
  .pricing__toolbar {
    background-image: linear-gradient(
      157.83deg,
      #ca23e7 0.37%,
      #98a7ffbf 99.18%
    );
    height: 2.18563rem;
    position: relative;
  }
  .pricing__controls {
    width: 2.706rem;
    height: 0.6245rem;
    position: absolute;
    top: 50%;
    left: 0.676rem;
    translate: 0 -50%;
  }
  .pricing__tabs {
    align-items: center;
    gap: 0.416rem;
    display: flex;
    position: absolute;
    top: 0.416rem;
    left: 4.06rem;
  }
  .pricing__tab {
    justify-content: center;
    align-items: flex-end;
    display: flex;
  }
  .pricing__tab-body {
    background: #fff;
    border-radius: 0.416rem 0.416rem 0 0;
    align-items: center;
    gap: 0.416rem;
    padding: 0.416rem 0.208rem 0.416rem 0.625rem;
    display: flex;
    overflow: hidden;
  }
  .pricing__tab-label {
    color: #0000;
    font-family: var(--font-readex-pro), "Readex Pro", sans-serif;
    letter-spacing: 0.00625em;
    white-space: nowrap;
    background-image: linear-gradient(94.63deg, #da32f7 9.35%, #8f6aff 88.44%);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.35;
  }
  .pricing__tab-curve-r {
    display: flex;
    transform: scaleY(-1) rotate(180deg);
  }
  .pricing__urlbar {
    background: #fff;
    border-bottom: 0.833px solid #dadce0;
    align-items: center;
    height: 1.9775rem;
    display: flex;
    position: relative;
  }
  .pricing__url-nav {
    align-items: center;
    gap: 0.780625rem;
    display: flex;
    position: absolute;
    top: 50%;
    left: 0.624rem;
    translate: 0 -50%;
  }
  .pricing__url-field {
    background: #f1f3f4;
    border-radius: 0.832625rem;
    justify-content: space-between;
    align-items: center;
    padding: 0.312rem 0.520375rem;
    display: flex;
    position: absolute;
    top: 0.252rem;
    left: 7rem;
    right: 2.0625rem;
  }
  .pricing__url-left {
    align-items: center;
    gap: 0.520375rem;
    display: flex;
  }
  .pricing__url-text {
    color: #5f5f5f;
    letter-spacing: 0.013em;
    white-space: nowrap;
    font-size: 0.7285rem;
    line-height: normal;
  }
  .pricing__url-more {
    position: absolute;
    top: 50%;
    right: 0.729rem;
    translate: 0 -50%;
  }
  .pricing__card {
    z-index: 1;
    box-sizing: border-box;
    isolation: isolate;
    border: 1px solid #ffffff24;
    border-radius: 2.5rem;
    width: 43.875rem;
    max-width: calc(100% - 5.875rem);
    height: 27rem;
    padding: 2.125rem 2.5rem;
    position: absolute;
    top: 6.125rem;
    left: 2.9375rem;
    box-shadow:
      0 3px 1.5px #0000001a,
      0 7.77px 8px #0000000f;
  }
  .pricing__card-fill {
    z-index: 0;
    border-radius: inherit;
    background-color: #89279b;
    background-image: linear-gradient(#89279b 12.73%, #7d59b0 100%);
    position: absolute;
    inset: 0;
  }
  .pricing__card-inset {
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    position: absolute;
    inset: -0.5px;
    box-shadow:
      inset 0 4px #fff9,
      inset 0 -8px #0000000d;
  }
  .pricing__card-inner {
    z-index: 1;
    flex-direction: column;
    gap: 1.875rem;
    width: 100%;
    display: flex;
    position: relative;
  }
  .pricing__card-heading {
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 6.9375rem;
    width: 100%;
    display: flex;
  }
  .pricing__plan {
    flex-direction: column;
    flex-shrink: 0;
    gap: 1.375rem;
    width: 19.4375rem;
    display: flex;
  }
  .pricing__plan-name {
    color: #fff;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    display: flex;
  }
  .pricing__price-row {
    color: #fff;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    display: flex;
  }
  .pricing__price {
    letter-spacing: 0.01em;
    font-size: 3.625rem;
    font-weight: 700;
    line-height: 1.28;
  }
  .pricing__price-suffix {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
  }
  .pricing__cta {
    flex-shrink: 0;
    box-shadow:
      0 12.522px 5.009px #ffffff24,
      0 6.65px 2.66px #ffffff21,
      0 2.767px 1.107px #ffffff1f,
      inset 0 1px #ffffff4d,
      inset 0 -3px #f8f8f8;
    background: #fafafb !important;
    border-radius: 6.25rem !important;
    width: auto !important;
    height: 3.25rem !important;
    padding-inline: 1.5rem !important;
  }
  .pricing__cta:hover {
    opacity: 0.92;
  }
  .pricing__cta-label {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(
      124.47deg,
      #ac48e8 40.03%,
      #d122f0 72.04%
    );
    -webkit-background-clip: text;
    background-clip: text;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .pricing__divider {
    width: 100%;
    max-width: none;
    height: auto;
    display: block;
  }
  .pricing__card-body {
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    display: flex;
  }
  .pricing__included {
    color: #fff;
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.25rem;
    width: 19.0625rem;
    display: flex;
  }
  .pricing__included-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
  }
  .pricing__included-desc {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
  }
  .pricing__features {
    flex-direction: column;
    flex-shrink: 0;
    gap: 0.5rem;
    width: 16.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .pricing__feature {
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    display: flex;
  }
  .pricing__feature-check {
    background: #fff;
    border-radius: 100px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
  }
  .pricing__feature-label {
    color: #fff;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
  }
  @media (max-width: 1199px) {
    .pricing__glow--br {
      inset: auto -8rem -6rem auto;
    }
    .pricing__browser {
      height: auto;
      min-height: 0;
    }
    .pricing__card {
      width: min(100% - 2rem, 43.875rem);
      max-width: none;
      height: auto;
      min-height: 27rem;
      margin: 1.25rem auto 2rem;
      position: relative;
      top: auto;
      left: auto;
    }
    .pricing__card-heading {
      flex-wrap: wrap;
      gap: 1.5rem;
    }
    .pricing__plan,
    .pricing__included,
    .pricing__features {
      width: min(100%, 19.4375rem);
    }
    .pricing__card-body {
      flex-wrap: wrap;
    }
    .pricing__price {
      font-size: clamp(2.5rem, 2rem + 2vw, 3.625rem);
    }
    .pricing__price-suffix {
      font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    }
  }
  @media (max-width: 767px) {
    .pricing {
      padding-block: 3.5rem;
      padding-inline: 1rem;
    }
    .pricing__frame {
      gap: 2.5rem;
    }
    .pricing__browser {
      display: none;
    }
    .pricing__visual-fallback {
      display: block;
    }
    .pricing__pattern--tl,
    .pricing__pattern--mid {
      opacity: 0.25;
    }
    .pricing__wave {
      opacity: 0.85;
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .pricing__visual {
      container-type: inline-size;
      width: 100%;
      max-width: none;
      height: calc(35.75rem * (100cqi / 50rem));
      overflow: hidden;
    }
    .pricing__browser {
      display: block;
      width: 50rem;
      height: 35.75rem;
      background: transparent;
      transform: scale(calc(100cqi / 50rem));
      transform-origin: top left;
    }
    .pricing__visual-fallback {
      display: none;
    }
    .pricing__card {
      width: 43.875rem;
      max-width: calc(100% - 5.875rem);
      height: 27rem;
      min-height: 0;
      margin: 0;
      position: absolute;
      top: 6.125rem;
      left: 2.9375rem;
    }
    .pricing__card-heading {
      flex-wrap: nowrap;
      gap: 6.9375rem;
    }
    .pricing__plan {
      width: 19.4375rem;
    }
    .pricing__included {
      width: 19.0625rem;
    }
    .pricing__features {
      width: 16.125rem;
    }
    .pricing__card-body {
      flex-wrap: nowrap;
    }
    .pricing__price {
      font-size: 3.625rem;
    }
    .pricing__price-suffix {
      font-size: 1.5rem;
    }
  }
  .global-reach {
    background-color: #17091c;
    width: 100%;
    padding-block: 5.25rem;
    padding-inline: clamp(1rem, 8.333vw, 10rem);
    position: relative;
    overflow: hidden;
  }
  .global-reach__shell {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    width: 100%;
    display: flex;
    position: relative;
  }
  .global-reach__pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    width: 60rem;
    height: 60rem;
    position: absolute;
    top: -22.9375rem;
    left: calc(50% + 20.875rem);
    -webkit-mask-image: url(../images/pages/home/global-reach/bg-pattern-mask.svg);
    mask-image: url(../images/pages/home/global-reach/bg-pattern-mask.svg);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 60rem 60rem;
    mask-size: 60rem 60rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .global-reach__pattern-inner {
    width: 59.375rem;
    height: 59.375rem;
    position: absolute;
    top: 0.3125rem;
    left: 0.3125rem;
  }
  .global-reach__pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .global-reach__glow {
    pointer-events: none;
    z-index: 0;
    width: 20.75rem;
    height: 20.75rem;
    position: absolute;
  }
  .global-reach__glow--mid {
    top: -19.0625rem;
    left: calc(50% - 10.125rem);
  }
  .global-reach__glow--tl {
    mix-blend-mode: plus-lighter;
    top: -9.3125rem;
    left: -4.6875rem;
  }
  .global-reach__glow--tr {
    mix-blend-mode: plus-lighter;
    top: -10.75rem;
    left: calc(50% + 46.9375rem);
  }
  .global-reach__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .global-reach__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .global-reach__header {
    z-index: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 81.25rem);
    margin-bottom: 4rem;
    display: flex;
    position: relative;
  }
  .global-reach__title-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: min(100%, 60.0625rem);
    display: flex;
  }
  .global-reach__title {
    letter-spacing: 0.025em;
    max-width: 60.0625rem;
    margin: 0;
    font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .global-reach__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .global-reach__description {
    color: #dfe0e4;
    max-width: 60rem;
    margin: 0;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  @media (min-width: 320px) and (max-width: 440px) {
    .our-services__title,
    .testimonials__title,
    .working-process__title,
    .why-choose-us__title,
    .advantages__title,
    .payment-methods__title,
    .pricing__title,
    .global-reach__title,
    .faq-section h2,
    .blog-section h2 {
      font-size: 26px;
    }
    .hero-description,
    .about-us__description,
    .about-us__feature,
    .our-services__description,
    .our-services__card-description,
    .our-services__feature,
    .testimonials__description,
    .working-process__description,
    .why-choose-us__description,
    .advantages__description,
    .payment-methods__description,
    .payment-methods__notice-text,
    .pricing__description,
    .global-reach__description,
    .faq-section p.text-\[13px\],
    .blog-section p.text-\[13px\],
    .brand-cta-card p.text-\[13px\],
    footer p.text-\[14px\] {
      font-size: 14px;
    }
    .section-badge__label,
    .faq-section .section-heading-badge > .text-gradient-2,
    .blog-section .section-heading-badge > .text-gradient-2 {
      font-size: 20px;
    }
    .about-us__intro .section-badge,
    .our-services__header .section-badge,
    .testimonials__header .section-badge,
    .working-process__header .section-badge,
    .why-choose-us__header .section-badge,
    .advantages__header .section-badge,
    .payment-methods__header .section-badge,
    .pricing__header .section-badge,
    .global-reach__title-group .section-badge,
    .faq-section .section-heading-badge,
    .blog-section .section-heading-badge {
      align-self: center;
      margin-inline: auto;
    }
    .section-badge__label {
      top: 50%;
      left: 50%;
      right: auto;
      width: max-content;
      max-width: 100%;
      padding-right: 0;
      text-align: center;
      transform: translate(-50%, -50%);
    }
    .faq-section .section-heading-badge,
    .blog-section .section-heading-badge {
      justify-content: center;
      align-items: center;
    }
    .faq-section .section-heading-badge > .text-gradient-2,
    .blog-section .section-heading-badge > .text-gradient-2 {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding-inline: 18px;
      text-align: center;
    }
  }
  .global-reach__stage {
    z-index: 1;
    justify-content: center;
    align-items: center;
    width: min(100%, 100rem);
    height: 51.875rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .global-reach__globe {
    pointer-events: none;
    z-index: 0;
    opacity: 0.72;
    width: 54rem;
    height: 52.757rem;
    position: absolute;
    top: calc(50% - 0.013125rem);
    left: 50%;
    translate: -50% -50%;
  }
  .global-reach__globe-canvas,
  .global-reach__globe-fallback {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .global-reach__globe-fallback {
    object-fit: contain;
  }
  .global-reach__globe-canvas {
    background: 0 0;
  }
  .global-reach__grid {
    z-index: 1;
    grid-template-columns: repeat(3, 25rem);
    justify-content: center;
    gap: 1.75rem;
    width: min(100%, 78.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    position: relative;
  }
  .global-reach__grid > li {
    justify-content: center;
    width: 100%;
    display: flex;
  }
  .global-reach__item {
    width: 100%;
    max-width: 25rem;
  }
  .global-reach__card {
    background: rgba(13, 3, 19, 0.55);
    border: 1px solid rgba(186, 140, 230, 0.38);
    border-radius: 1.5rem;
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(130, 70, 190, 0.12),
      inset 0 1px 0 rgba(255, 220, 255, 0.22),
      inset 1px 0 0 rgba(210, 170, 255, 0.14),
      inset 0 -1px 0 rgba(90, 40, 140, 0.25);
    -webkit-backdrop-filter: blur(100px) saturate(100%);
    backdrop-filter: blur(100px) saturate(100%);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 25rem;
    height: auto;
    min-height: 9rem;
    max-height: 11.25rem;
    aspect-ratio: 400 / 180;
    padding: clamp(1.5rem, 1rem + 2vw, 3.125rem)
      clamp(1rem, 0.5rem + 2vw, 2.0625rem);
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .global-reach__card-blur {
    pointer-events: none;
    z-index: 0;
    background: rgba(32, 12, 48, 0.35);
    -webkit-backdrop-filter: blur(34px) saturate(160%);
    backdrop-filter: blur(34px) saturate(160%);
    border-radius: inherit;
    position: absolute;
    inset: 0;
  }
  .global-reach__card-bg {
    pointer-events: none;
    z-index: 1;
    background:
      linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 34%,
        rgba(220, 170, 255, 0.16) 48%,
        rgba(255, 255, 255, 0.1) 56%,
        rgba(255, 255, 255, 0) 68%,
        rgba(255, 255, 255, 0) 100%
      ),
      linear-gradient(
        160deg,
        rgba(95, 42, 140, 0.32) 0%,
        rgba(36, 14, 52, 0.2) 42%,
        rgba(16, 6, 24, 0.5) 100%
      );
    border-radius: inherit;
    position: absolute;
    inset: 0;
  }
  .global-reach__card::before {
    content: "";
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(
      145deg,
      rgba(230, 190, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.05) 18%,
      rgba(255, 255, 255, 0) 42%
    );
    position: absolute;
    inset: 0;
  }
  .global-reach__card::after {
    content: "";
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(200, 150, 255, 0.12);
    position: absolute;
    inset: 0;
  }
  .global-reach__card-inner {
    z-index: 3;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    display: flex;
    position: relative;
  }
  .global-reach__flag {
    background: #d9d9d9;
    border-radius: 0.5rem;
    flex-shrink: 0;
    width: 8.3265rem;
    height: 4rem;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  }
  .global-reach__flag img {
    object-fit: cover;
    object-position: center;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .global-reach__country {
    color: #fff;
    text-align: center;
    white-space: nowrap;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.45;
  }
  @media (min-width: 1280px) {
    .global-reach__item {
      max-width: none;
    }
    .global-reach__card {
      width: 25rem;
      max-width: none;
      height: 11.25rem;
      min-height: 11.25rem;
      max-height: 11.25rem;
      aspect-ratio: auto;
      padding: 3.125rem 2.0625rem;
    }
  }
  @media (max-width: 1279px) {
    .global-reach__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      width: 100%;
      max-width: 52rem;
    }
    .global-reach__stage {
      height: auto;
      min-height: 40rem;
      padding-block: 2rem;
    }
  }
  @media (max-width: 1199px) {
    .global-reach__glow--mid {
      left: 50%;
      translate: -50%;
    }
    .global-reach__glow--tr {
      left: auto;
      right: -6rem;
    }
    .global-reach__pattern {
      opacity: 0.28;
      left: auto;
      right: -18rem;
    }
  }
  @media (max-width: 767px) {
    .global-reach {
      padding-block: 3.5rem;
      padding-inline: 1rem;
    }
    .global-reach__header {
      margin-bottom: 2.5rem;
    }
    .global-reach__stage {
      min-height: 0;
      padding-block: 1.5rem;
    }
    .global-reach__grid {
      grid-template-columns: 1fr;
      gap: 1rem;
      max-width: 25rem;
    }
    .global-reach__country {
      white-space: normal;
      font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
    }
    .global-reach__globe {
      opacity: 0.52;
      width: min(128%, 30rem);
      height: auto;
    }
  }
  @media (min-width: 1440px) and (max-width: 1440px) {
    .global-reach__stage {
      container-type: inline-size;
      width: 100%;
      height: calc(51.875rem * (100cqi / 1256px));
      overflow: hidden;
    }
    .global-reach__grid {
      grid-template-columns: repeat(3, 25rem);
      gap: 1.75rem;
      width: 78.5rem;
      max-width: none;
      transform: scale(calc(100cqi / 1256px));
      transform-origin: center center;
    }
    .global-reach__globe {
      transform: scale(calc(100cqi / 1256px));
    }
  }
  @media (min-width: 1024px) and (max-width: 1024px) {
    .global-reach__stage {
      container-type: inline-size;
      width: 100%;
      height: calc(51.875rem * (100cqi / 1256px));
      min-height: 0;
      padding-block: 0;
      overflow: hidden;
    }
    .global-reach__grid {
      grid-template-columns: repeat(3, 25rem);
      gap: 1.75rem;
      width: 78.5rem;
      max-width: none;
      transform: scale(calc(100cqi / 1256px));
      transform-origin: center center;
    }
    .global-reach__item {
      max-width: none;
    }
    .global-reach__card {
      width: 25rem;
      max-width: none;
      height: 11.25rem;
      min-height: 11.25rem;
      max-height: 11.25rem;
      aspect-ratio: auto;
      padding: 3.125rem 2.0625rem;
    }
    .global-reach__globe {
      opacity: 0.72;
      width: 54rem;
      height: 52.757rem;
      transform: scale(calc(100cqi / 1256px));
    }
  }
  @media (min-width: 768px) and (max-width: 768px) {
    .global-reach__stage {
      container-type: inline-size;
      width: 100%;
      height: calc(51.875rem * (100cqi / 1256px));
      min-height: 0;
      padding-block: 0;
      overflow: hidden;
    }
    .global-reach__grid {
      grid-template-columns: repeat(3, 25rem);
      gap: 1.75rem;
      width: 78.5rem;
      max-width: none;
      transform: scale(calc(100cqi / 1256px));
      transform-origin: center center;
    }
    .global-reach__item {
      max-width: none;
    }
    .global-reach__card {
      width: 25rem;
      max-width: none;
      height: 11.25rem;
      min-height: 11.25rem;
      max-height: 11.25rem;
      aspect-ratio: auto;
      padding: 3.125rem 2.0625rem;
    }
    .global-reach__globe {
      opacity: 0.72;
      width: 54rem;
      height: 52.757rem;
      transform: scale(calc(100cqi / 1256px));
    }
  }
  @media (min-width: 360px) and (max-width: 440px) {
    .global-reach__stage {
      container-type: inline-size;
      width: 100%;
      height: calc(51.875rem * (100cqi / 1256px));
      min-height: 0;
      padding-block: 0;
      overflow: hidden;
    }
    .global-reach__grid {
      grid-template-columns: repeat(3, 25rem);
      gap: 1.75rem;
      width: 78.5rem;
      max-width: none;
      transform: scale(calc(100cqi / 1256px));
      transform-origin: center center;
    }
    .global-reach__item {
      max-width: none;
    }
    .global-reach__card {
      width: 25rem;
      max-width: none;
      height: 11.25rem;
      min-height: 11.25rem;
      max-height: 11.25rem;
      aspect-ratio: auto;
      padding: 3.125rem 2.0625rem;
    }
    .global-reach__country {
      white-space: nowrap;
      font-size: 1.5rem;
    }
    .global-reach__globe {
      opacity: 0.72;
      width: 54rem;
      height: 52.757rem;
      transform: scale(calc(100cqi / 1256px));
    }
  }
  .about-achievements {
    background-color: var(--brand-bg);
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 1920px) {
    .about-achievements {
      width: 100vw;
      margin-inline: calc(50% - 50vw);
    }
  }
  .about-achievements__inner {
    z-index: 1;
    padding-block: clamp(3rem, 4vw, 5rem);
    position: relative;
  }
  .about-achievements__panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.75rem, 1.5vw, 1.5rem);
    width: 100%;
    display: grid;
  }
  .about-achievements__card {
    background-color: #220930;
    border: 0.5px solid #ffffff29;
    border-radius: 1.125rem;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-width: 0;
    padding: 1.5rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .about-achievements__card:last-child:nth-child(odd) {
    grid-column: 1/-1;
    justify-self: center;
    max-width: 20rem;
  }
  .about-achievements__card-bg {
    pointer-events: none;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    inset: 0;
  }
  .about-achievements__card-content {
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    display: flex;
    position: relative;
  }
  .about-achievements__icon {
    flex-shrink: 0;
    position: relative;
  }
  .about-achievements__icon-image {
    object-fit: contain;
    object-position: center;
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .about-achievements__copy {
    text-align: center;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    display: flex;
  }
  .about-achievements__value {
    color: var(--neutral-n20);
    font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
    font-weight: 600;
    line-height: 1;
  }
  .about-achievements__label {
    letter-spacing: 0.0125em;
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.25rem);
    font-weight: 600;
    line-height: 1.5;
  }
  @media (min-width: 1024px) {
    .about-achievements__panel {
      flex-flow: row;
      align-items: stretch;
      gap: 1.5rem;
      display: flex;
    }
    .about-achievements__card {
      flex: 1 0 0;
      min-width: 0;
    }
    .about-achievements__card:last-child:nth-child(odd) {
      grid-column: auto;
      justify-self: auto;
      max-width: none;
    }
  }
  .content-split-section {
    background-color: var(--brand-bg);
    width: 100%;
    position: relative;
  }
  .content-split-section__inner {
    z-index: 1;
    padding-block: clamp(3rem, 2.5rem + 3vw, 4.0625rem);
    position: relative;
  }
  .content-split-section__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 1.25rem + 3vw, 4.875rem);
    width: 100%;
    display: grid;
  }
  .content-split-section__media,
  .content-split-section__content {
    min-width: 0;
  }
  .content-split-section__content {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.75rem, 1.25rem + 2vw, 2.375rem);
    width: 100%;
    display: flex;
  }
  .content-split-section__media-frame {
    aspect-ratio: 701/615;
    background-color: #281e2b;
    border-radius: clamp(1.5rem, 1rem + 2vw, 3rem);
    width: 100%;
    max-width: 43.8125rem;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
  }
  .content-split-section__media-art {
    pointer-events: none;
    position: absolute;
    inset: clamp(0.625rem, 0.35rem + 1vw, 0.8125rem);
    overflow: hidden;
  }
  .content-split-section__media-image {
    object-fit: cover;
    object-position: center top;
    width: 102.36%;
    max-width: none;
    height: 102%;
    display: block;
    position: absolute;
    top: -2%;
    left: -2.27%;
  }
  .content-split-section__copy {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem);
    width: 100%;
    max-width: 48.75rem;
    display: flex;
  }
  .content-split-section__intro {
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(1rem, 0.75rem + 1vw, 2rem);
    width: 100%;
    display: flex;
  }
  .content-split-section__title {
    letter-spacing: 0.025em;
    max-width: 46.5rem;
    margin: 0;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .content-split-section__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .content-split-section__descriptions {
    flex-direction: column;
    gap: clamp(1rem, 0.75rem + 1vw, 2rem);
    width: 100%;
    display: flex;
  }
  .content-split-section__description {
    color: var(--neutral-n50, #c1c4cc);
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
  }
  .content-split-section__features {
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 33.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }
  .content-split-section__feature {
    color: var(--neutral-n40);
    align-items: center;
    gap: 0.75rem;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
    font-weight: 500;
    line-height: 1.5;
    display: flex;
  }
  .content-split-section__feature-icon {
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
    width: 1.2225rem;
    height: 1.75rem;
  }
  .content-split-section__cta {
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 1024px) {
    .content-split-section__grid {
      grid-template-columns: minmax(0, 0.899fr) minmax(0, 1fr);
      align-items: start;
    }
    .content-split-section__grid--reverse .content-split-section__media {
      order: 2;
    }
    .content-split-section__grid--reverse .content-split-section__content {
      order: 1;
    }
    .content-split-section__media-frame {
      margin-inline: 0;
    }
    .content-split-section__content {
      padding-top: 0.625rem;
    }
  }
  .about-why-choose-us {
    background-color: #110816;
    width: 100%;
    position: relative;
    overflow: hidden;
  }
  .about-why-choose-us__shell {
    position: relative;
    width: 100%;
    padding-block: clamp(3rem, 5vw, 5rem);
  }
  .about-why-choose-us__glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .about-why-choose-us__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .about-why-choose-us__glow-spread--tr {
    inset: -97.56%;
  }
  .about-why-choose-us__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .about-why-choose-us__glow--left {
    mix-blend-mode: plus-lighter;
    width: 20.75rem;
    height: 20.75rem;
    top: -10.6875rem;
    left: calc(50% - 67.625rem);
  }
  .about-why-choose-us__glow--top {
    width: 20.75rem;
    height: 20.75rem;
    top: -19.375rem;
    left: calc(50% - 10.875rem);
  }
  .about-why-choose-us__glow--tr {
    width: 25.625rem;
    height: 25.625rem;
    top: -9.3125rem;
    left: calc(50% + 42rem);
  }
  .about-why-choose-us__pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: -16rem;
    left: calc(50% + 27.25rem);
    -webkit-mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 40rem 40rem;
    mask-size: 40rem 40rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .about-why-choose-us__pattern-inner {
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .about-why-choose-us__pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .about-why-choose-us__inner {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    display: flex;
    position: relative;
  }
  .about-why-choose-us__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .about-why-choose-us__title-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    display: flex;
  }
  .about-why-choose-us__title {
    letter-spacing: 0.025em;
    margin: 0;
    font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .about-why-choose-us__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .about-why-choose-us__description {
    color: #dfe0e4;
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .about-why-choose-us__grid {
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    display: flex;
  }
  .about-why-choose-us__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    width: 100%;
    display: grid;
  }
  .about-why-choose-us__card {
    box-sizing: border-box;
    background-color: #190624;
    border: 0.7px solid #ffffff61;
    border-radius: 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 18.125rem;
    padding: 1.5rem;
    display: flex;
    position: relative;
    overflow: hidden;
  }
  .about-why-choose-us__card-body {
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.125rem;
    width: 100%;
    display: flex;
    position: relative;
  }
  .about-why-choose-us__card-icon {
    flex-shrink: 0;
    width: 3.625rem;
    height: 3.625rem;
  }
  .about-why-choose-us__card-icon img {
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 100%;
    display: block;
  }
  .about-why-choose-us__card-copy {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    display: flex;
    position: relative;
  }
  .about-why-choose-us__card-title-row {
    align-items: center;
    gap: 0.375rem;
    display: flex;
  }
  .about-why-choose-us__card-dot {
    flex-shrink: 0;
    width: 0.75rem;
    height: 0.75rem;
    display: block;
  }
  .about-why-choose-us__card-title {
    color: #fff;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1;
  }
  .about-why-choose-us__card-description {
    color: #ebecef;
    width: 100%;
    margin: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
  }
  .about-why-choose-us__card-pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.3;
    width: 30rem;
    height: 30rem;
    position: absolute;
    top: -22.875rem;
    left: 54.5%;
    -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
    mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
    -webkit-mask-size: 30rem 30rem;
    mask-size: 30rem 30rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .about-why-choose-us__card-pattern-inner {
    position: absolute;
    inset: 0;
  }
  .about-why-choose-us__card-pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .about-why-choose-us__card-glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
    mix-blend-mode: plus-lighter;
  }
  .about-why-choose-us__card-glow--tr {
    width: 13.8125rem;
    height: 13.8125rem;
    top: -12.3125rem;
    left: 87.4%;
  }
  .about-why-choose-us__card-glow--bl {
    width: 2.5625rem;
    height: 13.8125rem;
    top: 12.51875rem;
    left: -1.60625rem;
  }
  .about-why-choose-us__card-glow-spread--tr {
    position: absolute;
    inset: -90.5%;
  }
  .about-why-choose-us__card-glow-spread--bl {
    position: absolute;
    inset: -90.5% -487.8%;
  }
  .about-why-choose-us__card-glow-spread--tr img,
  .about-why-choose-us__card-glow-spread--bl img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  @media (min-width: 768px) {
    .about-why-choose-us__row--top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-why-choose-us__row--bottom {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-why-choose-us__row--bottom .about-why-choose-us__card:last-child {
      grid-column: 1 / -1;
      max-width: calc(50% - 0.875rem);
      justify-self: center;
    }
  }
  @media (min-width: 1024px) {
    .about-why-choose-us__row--top {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .about-why-choose-us__row--bottom {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .about-why-choose-us__row--bottom .about-why-choose-us__card:last-child {
      grid-column: auto;
      max-width: none;
      justify-self: stretch;
    }
    .about-why-choose-us__card {
      min-height: 18.125rem;
    }
  }
  @media (max-width: 1023px) {
    .about-why-choose-us__glow,
    .about-why-choose-us__pattern {
      display: none;
    }
    .about-why-choose-us__card {
      min-height: auto;
    }
    .about-why-choose-us__card-pattern,
    .about-why-choose-us__card-glow {
      display: none;
    }
  }
  .use-cases {
    background-color: #110816;
    width: 100%;
    position: relative;
    overflow-x: clip;
    overflow-y: visible;
  }
  .use-cases__shell {
    position: relative;
    width: 100%;
    padding-block: clamp(3rem, 5vw, 5rem);
  }
  .use-cases__glow {
    pointer-events: none;
    z-index: 0;
    position: absolute;
  }
  .use-cases__glow-spread {
    position: absolute;
    inset: -120.48%;
  }
  .use-cases__glow-spread--tr {
    inset: -97.56%;
  }
  .use-cases__glow-spread img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .use-cases__glow--top {
    width: 20.75rem;
    height: 20.75rem;
    top: -19.75rem;
    left: calc(50% - 10.875rem);
  }
  .use-cases__glow--tr {
    width: 25.625rem;
    height: 25.625rem;
    top: -9.3125rem;
    left: calc(50% + 42rem);
  }
  .use-cases__pattern {
    pointer-events: none;
    z-index: 0;
    opacity: 0.2;
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: -16rem;
    left: calc(50% + 27.25rem);
    -webkit-mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    mask-image: url(../images/pages/home/why-choose-us/pattern-mask.svg);
    -webkit-mask-position: 50%;
    mask-position: 50%;
    -webkit-mask-size: 40rem 40rem;
    mask-size: 40rem 40rem;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .use-cases__pattern-inner {
    width: 40rem;
    height: 40rem;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
  }
  .use-cases__pattern-inner img {
    width: 100%;
    max-width: none;
    height: 100%;
    display: block;
  }
  .use-cases__inner {
    z-index: 1;
    flex-direction: column;
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    display: flex;
    position: relative;
  }
  .use-cases__header {
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    width: min(100%, 62.25rem);
    display: flex;
  }
  .use-cases__title-group {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    display: flex;
  }
  .use-cases__title {
    letter-spacing: 0.025em;
    margin: 0;
    font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.35;
  }
  .use-cases__title-text {
    color: #0000;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .use-cases__description {
    color: #dfe0e4;
    margin: 0;
    font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .use-cases__slider {
    width: min(100%, 82.5rem);
    min-width: 0;
    overflow: visible;
  }
  .use-cases__viewport {
    width: 100%;
    overflow: visible;
  }
  .use-cases__deck {
    isolation: isolate;
    height: 32.5rem;
    max-width: 82.5rem;
    position: relative;
    overflow: visible;
  }
  .use-cases__card {
    pointer-events: none;
    width: 100%;
    height: 100%;
    transition: opacity 0.7s cubic-bezier(0.45, 0, 0.2, 1);
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
  }
  .use-cases__card-stack {
    transform-origin: top left;
    will-change: transform;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1);
  }
  .use-cases__card--no-transition .use-cases__card-stack {
    transition: none !important;
  }
  .use-cases__card--depth-0 {
    z-index: 40;
    pointer-events: auto;
    opacity: 1;
  }
  .use-cases__card--depth-0 .use-cases__card-stack {
    transform: none;
  }
  .use-cases__card--depth-1 {
    z-index: 30;
    pointer-events: none;
    opacity: 1;
  }
  .use-cases__card--depth-1 .use-cases__card-stack {
    transform: translate3d(-2.8125rem, 0.9375rem, 0) scale(1.0682, 0.942);
  }
  .use-cases__card--depth-2 {
    z-index: 20;
    pointer-events: none;
    opacity: 1;
  }
  .use-cases__card--depth-2 .use-cases__card-stack {
    transform: translate3d(-5.6875rem, 2.75rem, 0) scale(1.1386, 0.834);
  }
  .use-cases__card--depth-3 {
    z-index: 10;
    pointer-events: none;
    opacity: 0;
  }
  .use-cases__card--depth-3 .use-cases__card-stack {
    transform: translate3d(-5.6875rem, 2.75rem, 0) scale(1.1386, 0.834);
  }
  .use-cases__card--active {
    z-index: 40;
    pointer-events: auto;
  }
  .use-cases__card-layout {
    transition:
      opacity 0.25s cubic-bezier(0.45, 0, 0.2, 1),
      visibility 0.25s cubic-bezier(0.45, 0, 0.2, 1);
  }
  .use-cases__card:not(.use-cases__card--depth-0) .use-cases__card-layout {
    opacity: 0;
    visibility: hidden;
  }
  .use-cases__card--depth-0 .use-cases__card-layout {
    opacity: 1;
    visibility: visible;
    transition-delay: 0.2s;
  }
  .use-cases__card:not(.use-cases__card--depth-0) .use-cases__card-nav {
    visibility: hidden;
    pointer-events: none;
  }
  .use-cases__card-surface {
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 1.25rem;
    background:
      linear-gradient(transparent, transparent) padding-box,
      linear-gradient(
          180deg,
          rgba(154, 65, 249, 0.9) 0%,
          rgba(167, 138, 255, 0) 100%
        )
        border-box;
    -webkit-background-clip: padding-box, border-box;
    background-clip: padding-box, border-box;
    width: 100%;
    height: 100%;
    padding: clamp(1.5rem, 1rem + 2vw, 5rem)
      clamp(1.25rem, 0.75rem + 2vw, 7.5rem);
    position: relative;
    overflow: hidden;
  }
  .use-cases__card-surface::before {
    content: "";
    pointer-events: none;
    z-index: 0;
    border-radius: calc(1.25rem - 1px);
    -webkit-backdrop-filter: blur(22.542px);
    backdrop-filter: blur(22.542px);
    background-color: #170622;
    background-image: linear-gradient(
      180deg,
      #170622 0%,
      rgba(25, 8, 35, 0) 103.65%
    );
    position: absolute;
    inset: 1px;
  }
  .use-cases__card-surface::after {
    content: "";
    pointer-events: none;
    z-index: 1;
    border-radius: calc(1.25rem - 1px);
    position: absolute;
    inset: 1px;
    box-shadow:
      inset 0.902px 0.721px 0.721px rgba(255, 255, 255, 0.25),
      inset -0.361px -0.361px 0.541px rgba(0, 0, 0, 0.36);
  }
  .use-cases__card--depth-1 .use-cases__card-surface {
    border-radius: 1.177875rem;
  }
  .use-cases__card--depth-1 .use-cases__card-surface::before,
  .use-cases__card--depth-1 .use-cases__card-surface::after {
    border-radius: calc(1.177875rem - 1px);
    inset: 1px;
  }
  .use-cases__card--depth-2 .use-cases__card-surface,
  .use-cases__card--depth-3 .use-cases__card-surface {
    border-radius: 0.9928125rem;
  }
  .use-cases__card--depth-2 .use-cases__card-surface::before,
  .use-cases__card--depth-2 .use-cases__card-surface::after,
  .use-cases__card--depth-3 .use-cases__card-surface::before,
  .use-cases__card--depth-3 .use-cases__card-surface::after {
    border-radius: calc(0.9928125rem - 1px);
    inset: 1px;
  }
  .use-cases__card-layout {
    z-index: 2;
    align-items: center;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    height: 100%;
    display: flex;
    position: relative;
  }
  .use-cases__card-media {
    flex-shrink: 0;
    width: min(100%, 24.9375rem);
    height: clamp(12rem, 10rem + 8vw, 22.5rem);
    position: relative;
  }
  .use-cases__card-image {
    object-fit: cover;
    object-position: center;
    border-radius: 0.75rem;
    width: 100%;
    height: 100%;
    display: block;
  }
  .use-cases__card-play {
    pointer-events: none;
    width: clamp(4.5rem, 3.5rem + 2vw, 7.5rem);
    height: clamp(4.5rem, 3.5rem + 2vw, 7.5rem);
    position: absolute;
    bottom: -1.875rem;
    left: -2.5rem;
  }
  .use-cases__card-play-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
    display: block;
  }
  .use-cases__card-content {
    flex-direction: column;
    justify-content: center;
    gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
    min-width: 0;
    flex: 1;
    display: flex;
  }
  .use-cases__card-copy {
    flex-direction: column;
    gap: clamp(1rem, 0.75rem + 1vw, 1.25rem);
    display: flex;
  }
  .use-cases__card-title {
    color: #fff;
    margin: 0;
    font-family: var(--font-inter), "Inter", system-ui, sans-serif;
    font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.5;
  }
  .use-cases__card-description {
    color: #c7c7c7;
    margin: 0;
    font-family: var(--font-inter), "Inter", system-ui, sans-serif;
    font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.25rem);
    font-weight: 400;
    line-height: 1.5;
  }
  .use-cases__card-divider {
    background: none;
    border: 0;
    border-top: 1px dashed rgba(205, 54, 231, 0.7);
    flex-shrink: 0;
    width: 100%;
    height: 0;
  }
  .use-cases__card-nav {
    align-items: center;
    gap: 10px;
    display: flex;
  }
  .use-cases__card-nav-btn {
    cursor: pointer;
    background: none;
    border: 0;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    position: relative;
    overflow: visible;
    transition: opacity 0.2s;
  }
  .use-cases__card-nav-btn:hover {
    opacity: 0.85;
  }
  .use-cases__card-nav-btn img {
    position: absolute;
    display: block;
    max-width: none;
    object-fit: contain;
    inset: -28.57%;
    width: calc(100% + 57.14%);
    height: calc(100% + 57.14%);
  }
  .use-cases__card-nav-btn--icon-active img {
    inset: -59.52%;
    width: calc(100% + 119.04%);
    height: calc(100% + 119.04%);
  }
  @media (min-width: 1024px) {
    .use-cases__slider {
      padding-left: 5.6875rem;
      margin-inline: auto;
    }
    .use-cases__inner {
      overflow: visible;
    }
    .use-cases__card-content {
      gap: 1.5rem;
    }
    .use-cases__card-copy {
      gap: 1.25rem;
    }
    .use-cases__card-title {
      font-size: 1.5rem;
    }
    .use-cases__card-description {
      font-size: 1.25rem;
    }
  }
  @media (max-width: 1023px) {
    .use-cases__glow,
    .use-cases__pattern {
      display: none;
    }
    .use-cases__viewport {
      overflow: hidden;
    }
    .use-cases__deck {
      touch-action: pan-y pinch-zoom;
      height: auto;
      min-height: 28rem;
      display: flex;
    }
    .use-cases__card {
      will-change: auto;
      flex: 0 0 100%;
      min-width: 0;
      height: auto;
      opacity: 1 !important;
      pointer-events: auto !important;
      position: relative;
      transition: none;
    }
    .use-cases__card-stack {
      transform: none !important;
      will-change: auto;
    }
    .use-cases__card-layout {
      opacity: 1 !important;
      visibility: visible !important;
      flex-direction: column;
      align-items: stretch;
      transition-delay: 0s !important;
    }
    .use-cases__card-nav {
      visibility: visible !important;
      pointer-events: auto !important;
    }
    .use-cases__card-media {
      width: 100%;
      margin-inline: auto;
    }
    .use-cases__card-play {
      left: 0.75rem;
      bottom: -1.25rem;
    }
  }
}
@property --tw-animation-delay {
  syntax: "*";
  inherits: false;
  initial-value: 0s;
}
@property --tw-animation-direction {
  syntax: "*";
  inherits: false;
  initial-value: normal;
}
@property --tw-animation-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-animation-fill-mode {
  syntax: "*";
  inherits: false;
  initial-value: none;
}
@property --tw-animation-iteration-count {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-enter-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-enter-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-blur {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-opacity {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-rotate {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-scale {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-exit-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-exit-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-t {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-b {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-s {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-e {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0;
}
@property --scroll-fade-mask {
  syntax: "*";
  inherits: false;
}
@property --shimmer-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 20deg;
}
@property --shimmer-image {
  syntax: "*";
  inherits: false;
}
@property --shimmer-text-fill {
  syntax: "*";
  inherits: false;
}
@media (prefers-reduced-motion: reduce) {
  .shimmer {
    -webkit-text-fill-color: currentColor;
    background-image: none;
    animation: none;
  }
}
:root {
  --brand-bg: #120615;
  --brand-white: #fff;
  --brand-magenta: #cd36e7;
  --brand-periwinkle: #7574cf;
  --neutral-n20: #f5f6f7;
  --neutral-n30: #ebecef;
  --neutral-n40: #dfe0e4;
  --neutral-white: #fff;
  --gradient-button-2: linear-gradient(135deg, #cd36e7 0%, #7574cf 100%);
  --gradient-text-2: linear-gradient(135deg, #cd36e7 0%, #7574cf 100%);
  --gradient-title-highlight: linear-gradient(
    101.41deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  );
  --gradient-stock: linear-gradient(180deg, #9ca3af 0%, #fff 100%);
  --navbar-surface: #c6c6c624;
  --navbar-surface-border: #ffffff24;
  --navbar-surface-gradient: linear-gradient(
    180deg,
    #ffffff1a 0%,
    #ffffff05 100%
  );
  --gradient-navbar-cta: linear-gradient(
    103.7deg,
    #ca23e7 0.37%,
    #98a7ffbf 99.18%
  );
  --gradient-hero-title-white: linear-gradient(
    99.52deg,
    #fffffff0 0.9%,
    #ffffffd9 81.41%
  );
  --gradient-hero-cta: linear-gradient(
    120.46deg,
    #ca23e7 0.37%,
    #98a7ffbf 99.18%
  );
  --gradient-hero-cta-secondary: linear-gradient(
    120.46deg,
    #ca23e766 0.37%,
    #98a7ff4d 99.18%
  );
  --hero-input-surface: #cbcbcb1c;
  --hero-badge-text: #eccbff;
  --hero-error: #e74c5c;
  --gradient-footer-brand: linear-gradient(
    94.74deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  );
  --gradient-footer-watermark: linear-gradient(
    94.91deg,
    #f5b8ff 9.35%,
    #d6c8ff 88.44%
  );
  --footer-copyright-text: #eac8ff;
  --footer-copyright-surface: #ffffff12;
  --footer-glass: #ffffff24;
  --gradient-brand-cta-card: linear-gradient(
    180deg,
    #420f5c99 5.761%,
    #8e69ff36 116.46%
  );
  --blog-section-bg: #110816;
  --gradient-blog-card: linear-gradient(180deg, #1c0926 0%, #36094f2e 100%);
  --primary: var(--brand-bg);
  --background: var(--primary);
  --foreground: var(--brand-white);
  --card: #1a0a1f;
  --card-foreground: var(--brand-white);
  --popover: #1a0a1f;
  --popover-foreground: var(--brand-white);
  --primary-foreground: var(--brand-white);
  --secondary: #1f0d24;
  --secondary-foreground: var(--brand-white);
  --muted: #1f0d24;
  --muted-foreground: var(--neutral-n40);
  --accent: var(--brand-periwinkle);
  --accent-foreground: var(--brand-white);
  --destructive: #e40014;
  --border: #ffffff1f;
  --input: #ffffff26;
  --ring: var(--brand-periwinkle);
  --chart-1: var(--brand-magenta);
  --chart-2: var(--brand-periwinkle);
  --chart-3: var(--neutral-n40);
  --chart-4: var(--neutral-n30);
  --chart-5: var(--neutral-n20);
  --radius: 0.625rem;
  --sidebar: #1a0a1f;
  --sidebar-foreground: var(--brand-white);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--brand-white);
  --sidebar-accent: #2a1230;
  --sidebar-accent-foreground: var(--brand-white);
  --sidebar-border: #ffffff1f;
  --sidebar-ring: var(--brand-periwinkle);
}
@supports (color: lab(0% 0 0)) {
  :root {
    --destructive: lab(48.4493% 77.4328 61.5452);
    --border: lab(100% 0 0/0.12);
    --input: lab(100% 0 0/0.15);
    --sidebar-border: lab(100% 0 0/0.12);
  }
}
.footer-glass-bar {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: linear-gradient(#ffffff0e 0%, #ffffff05 50%, #00000014 100%);
  border-block: 1px solid #ffffff09;
  box-shadow:
    inset 0 1px #ffffff0a,
    inset 0 -1px #0000001f;
}
.dark {
  --brand-bg: #120615;
  --brand-white: #fff;
  --brand-magenta: #cd36e7;
  --brand-periwinkle: #7574cf;
  --neutral-n20: #f5f6f7;
  --neutral-n30: #ebecef;
  --neutral-n40: #dfe0e4;
  --neutral-white: #fff;
  --gradient-button-2: linear-gradient(135deg, #cd36e7 0%, #7574cf 100%);
  --gradient-text-2: linear-gradient(135deg, #cd36e7 0%, #7574cf 100%);
  --gradient-title-highlight: linear-gradient(
    101.41deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  );
  --gradient-stock: linear-gradient(180deg, #9ca3af 0%, #fff 100%);
  --navbar-surface: #c6c6c624;
  --navbar-surface-border: #ffffff24;
  --navbar-surface-gradient: linear-gradient(
    180deg,
    #ffffff1a 0%,
    #ffffff05 100%
  );
  --gradient-navbar-cta: linear-gradient(
    103.7deg,
    #ca23e7 0.37%,
    #98a7ffbf 99.18%
  );
  --gradient-hero-title-white: linear-gradient(
    99.52deg,
    #fffffff0 0.9%,
    #ffffffd9 81.41%
  );
  --gradient-hero-cta: linear-gradient(
    120.46deg,
    #ca23e7 0.37%,
    #98a7ffbf 99.18%
  );
  --gradient-hero-cta-secondary: linear-gradient(
    120.46deg,
    #ca23e766 0.37%,
    #98a7ff4d 99.18%
  );
  --hero-input-surface: #cbcbcb1c;
  --hero-badge-text: #eccbff;
  --hero-error: #e74c5c;
  --gradient-footer-brand: linear-gradient(
    94.74deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  );
  --gradient-footer-watermark: linear-gradient(
    94.91deg,
    #f5b8ff 9.35%,
    #d6c8ff 88.44%
  );
  --footer-copyright-text: #eac8ff;
  --footer-copyright-surface: #ffffff12;
  --footer-glass: #ffffff24;
  --gradient-brand-cta-card: linear-gradient(
    180deg,
    #420f5c99 5.761%,
    #8e69ff36 116.46%
  );
  --blog-section-bg: #110816;
  --gradient-blog-card: linear-gradient(180deg, #1c0926 0%, #36094f2e 100%);
  --primary: var(--brand-bg);
  --background: var(--primary);
  --foreground: var(--brand-white);
  --card: #1a0a1f;
  --card-foreground: var(--brand-white);
  --popover: #1a0a1f;
  --popover-foreground: var(--brand-white);
  --primary-foreground: var(--brand-white);
  --secondary: #1f0d24;
  --secondary-foreground: var(--brand-white);
  --muted: #1f0d24;
  --muted-foreground: var(--neutral-n40);
  --accent: var(--brand-periwinkle);
  --accent-foreground: var(--brand-white);
  --destructive: #ff6568;
  --border: #ffffff1f;
  --input: #ffffff26;
  --ring: var(--brand-periwinkle);
  --chart-1: var(--brand-magenta);
  --chart-2: var(--brand-periwinkle);
  --chart-3: var(--neutral-n40);
  --chart-4: var(--neutral-n30);
  --chart-5: var(--neutral-n20);
  --sidebar: #1a0a1f;
  --sidebar-foreground: var(--brand-white);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--brand-white);
  --sidebar-accent: #2a1230;
  --sidebar-accent-foreground: var(--brand-white);
  --sidebar-border: #ffffff1f;
  --sidebar-ring: var(--brand-periwinkle);
}
@supports (color: lab(0% 0 0)) {
  .dark {
    --destructive: lab(63.7053% 60.745 31.3109);
    --border: lab(100% 0 0/0.12);
    --input: lab(100% 0 0/0.15);
    --sidebar-border: lab(100% 0 0/0.12);
  }
}
@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-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}
@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-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false;
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@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-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  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;
}
@keyframes accordion-down {
  0% {
    height: 0;
  }
  to {
    height: var(
      --radix-accordion-content-height,
      var(--accordion-panel-height, auto)
    );
  }
}
@keyframes accordion-up {
  0% {
    height: var(
      --radix-accordion-content-height,
      var(--accordion-panel-height, auto)
    );
  }
  to {
    height: 0;
  }
}

.inter_2602f946-module__2PEFoa__className {
  font-family: Inter, system-ui, sans-serif;
  font-style: normal;
}
.inter_2602f946-module__2PEFoa__variable {
  --font-inter: "Inter", system-ui, sans-serif;
}
.parkinsons_75c0279b-module__LLBsEW__className {
  font-family: Parkinsans, system-ui, arial, sans-serif;
}
.parkinsons_75c0279b-module__LLBsEW__variable {
  --font-parkinsons: "Parkinsans", system-ui, arial, sans-serif;
}
.readex_pro_4370dbfa-module__KZCdAW__className {
  font-family: "Readex Pro", system-ui, sans-serif;
  font-style: normal;
}
.readex_pro_4370dbfa-module__KZCdAW__variable {
  --font-readex-pro: "Readex Pro", system-ui, sans-serif;
}
.monda_ee99b918-module__JkS-FW__className {
  font-family: Monda, system-ui, sans-serif;
  font-style: normal;
}
.monda_ee99b918-module__JkS-FW__variable {
  --font-monda: "Monda", system-ui, sans-serif;
}
.geist_mono_4e26fe1b-module__-_Fr9q__className {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-style: normal;
}
.geist_mono_4e26fe1b-module__-_Fr9q__variable {
  --font-geist-mono: "Geist Mono", ui-monospace, monospace;
}

/* Blog page — Figma node 289:2391 banner */

/* Same hero bg as home — gradient without dotted wave (index keeps hero-section-bg.svg) */
.hero-section--blog .hero-section-bg {
  min-height: 100%;
  height: 100%;
  background-color: var(--brand-bg, #0b0718);
}

.hero-section--blog .hero-section-bg-image--blog {
  object-fit: cover;
  object-position: center top;
}

.blog-banner-wrap {
  position: relative;
  z-index: 10;
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
  margin-top: calc(33px + 72px + 50px);
  padding-bottom: 0;
}

/* Figma node 289:1012 — posts grid + pagination (separate section, no hero bg) */
.blog-posts-section {
  position: relative;
  z-index: 10;
  margin-top: 70px;
  padding-bottom: 0;
  background-color: var(--brand-bg, #0b0718);
}

.blog-posts-section__inner {
  display: flex;
  width: min(calc(100% - 2rem), 1600px);
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin-inline: auto;
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

.blog-posts-grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.blog-posts-grid__card {
  justify-self: center;
}

section.blog-posts-section .blog-card.blog-posts-grid__card {
  gap: 0.875rem;
}

section.blog-posts-section .blog-card__details > :first-child {
  margin-top: 12px;
}

@media (min-width: 1024px) {
  .blog-posts-grid {
    align-items: stretch;
  }

  .blog-posts-grid__card {
    height: 100%;
  }

  .blog-card__body {
    flex: 1 1 auto;
  }

  .blog-card__details {
    flex: 1 1 auto;
  }

  .blog-card__cta {
    flex-shrink: 0;
  }
}

@media (min-width: 640px) {
  .blog-posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-posts-grid__card {
    justify-self: stretch;
    max-width: none;
  }
}

@media (min-width: 1280px) {
  .blog-posts-grid {
    grid-template-columns: repeat(4, minmax(0, 380px));
    justify-content: space-between;
  }

  .blog-posts-grid__card {
    max-width: 380px;
  }
}

.blog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.blog-pagination a.blog-pagination__control,
.blog-pagination a.blog-pagination__page {
  text-decoration: none;
  color: inherit;
}

.blog-pagination__control,
.blog-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.43);
  border-radius: 8px;
  background: transparent;
  color: #c1c4cc;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity 0.2s ease;
}

.blog-pagination__control {
  gap: 7px;
  height: 40px;
  padding: 10px 15px;
  cursor: pointer;
}

.blog-pagination__page {
  width: 40px;
  height: 40px;
  padding: 10px 15px;
  font-weight: 400;
  cursor: pointer;
}

.blog-pagination__control--gradient,
.blog-pagination__page--active {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(
    96.12deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
}

.blog-pagination__control:disabled,
.blog-pagination__page:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.blog-pagination__control:not(:disabled):hover,
.blog-pagination__page:not(.blog-pagination__page--active):hover {
  opacity: 0.85;
}

/* Figma: backdrop-blur 50px + vertical gradient only */
.blog-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 340px;
  min-height: 340px;
  border-radius: 34px;
  padding: 10px 150px;
  background: linear-gradient(
    180deg,
    rgba(126, 63, 165, 0.4) 0%,
    rgba(44, 33, 98, 0.4) 105.73%
  );
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.blog-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  min-height: 320px;
  align-items: center;
  justify-content: center;
}

.blog-banner__content {
  position: relative;
  overflow: visible;
  display: flex;
  width: 100%;
  max-width: 1300px;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.blog-banner__title {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 100%;
  font-family: var(--font-heading, "Parkinsans", sans-serif);
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.4;
  color: #fafafb;
  white-space: nowrap;
}

.blog-banner__title-highlight {
  background-image: linear-gradient(100.88deg, #da32f7 9.35%, #8f6aff 88.44%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-banner__title--stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: normal;
}

.blog-banner--contact .blog-banner__icon {
  pointer-events: none;
  position: absolute;
  z-index: 2;
  top: clamp(36px, 8vw, 59px);
  left: clamp(16px, 4.4vw, 56px);
  display: flex;
  width: clamp(120px, 15.8vw, 202px);
  height: clamp(118px, 15.6vw, 200px);
  align-items: center;
  justify-content: center;
}

.blog-banner--contact .blog-banner__icon img {
  display: block;
  width: clamp(116px, 15.3vw, 198px);
  height: clamp(115px, 15.2vw, 196px);
  max-width: none;
  object-fit: contain;
  transform: rotate(-1.23deg);
}

.blog-banner__description {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 934px;
  font-size: clamp(0.875rem, 0.8rem + 0.35vw, 1.125rem);
  font-weight: 500;
  line-height: 1.5;
  color: #c1c4cc;
}

/* Figma 307:11254 — left-top grid pattern at card level */
.blog-banner__pattern {
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: -292px;
  left: -288px;
  width: 640px;
  height: 640px;
  opacity: 0.9;
  border-top-left-radius: inherit;
  -webkit-mask-image: url(../images/pages/blog/pattern-mask.svg);
  mask-image: url(../images/pages/blog/pattern-mask.svg);
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 640px 640px;
  mask-size: 640px 640px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.blog-banner__pattern-inner {
  position: absolute;
  inset: 0;
}

.blog-banner__pattern-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Purple beam rays — anchored at corner; outside half clipped by .blog-banner overflow */
.blog-banner__rays {
  pointer-events: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 680px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  mix-blend-mode: screen;
}

.blog-banner__rays img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

@media (min-width: 1024px) {
  .blog-banner__title {
    font-size: 48px;
  }

  .blog-banner__description {
    font-size: 18px;
  }

  .blog-banner--contact .blog-banner__title,
  .blog-banner--contact .blog-banner__title--stacked,
  .blog-banner--contact .blog-banner__title--stacked > span,
  .blog-banner--contact .blog-banner__title-highlight {
    font-size: clamp(26px, 2.35vw, 36px) !important;
    line-height: 1.35 !important;
  }

  .blog-banner--contact .blog-banner__description {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 1023px) {
  .blog-banner {
    height: auto;
    min-height: 300px;
    padding-inline: clamp(1rem, 5vw, 150px);
  }

  .blog-banner__title {
    white-space: normal;
  }
}

@media (max-width: 767px) {
  .blog-banner {
    min-height: 280px;
    border-radius: 24px;
    padding-inline: 1rem;
  }

  .blog-banner__inner {
    min-height: 260px;
  }

  .blog-banner__pattern {
    top: -320px;
    left: -360px;
    transform: scale(0.85);
    transform-origin: top left;
  }

  .blog-banner__rays {
    width: 480px;
  }

  .blog-banner--contact .blog-banner__icon {
    top: auto;
    bottom: 10px;
    left: 10px;
    width: 96px;
    height: 94px;
  }

  .blog-banner--contact .blog-banner__icon img {
    width: 92px;
    height: 90px;
  }
}

@media (min-width: 360px) and (max-width: 440px) {
  .blog-banner--contact .blog-banner__icon {
    top: calc(100vw * 59 / 1440 + 3.25rem);
    bottom: auto;
    left: calc(100vw * 56 / 1440);
    width: calc(100vw * 202 / 1440 * 1.25);
    height: calc(100vw * 200 / 1440 * 1.25);
  }

  .blog-banner--contact .blog-banner__icon img {
    width: calc(100vw * 198 / 1440 * 1.25);
    height: calc(100vw * 196 / 1440 * 1.25);
  }

  .blog-banner--contact .blog-banner__title--stacked > span:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space: nowrap;
  }

  .blog-banner--contact .blog-banner__title--stacked > span:last-child {
    white-space: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 768px) {
  .blog-banner--contact .blog-banner__icon {
    top: calc(clamp(36px, 8vw, 59px) + 0.75rem);
    width: calc(clamp(120px, 15.8vw, 202px) * 0.72);
    height: calc(clamp(118px, 15.6vw, 200px) * 0.72);
  }

  .blog-banner--contact .blog-banner__icon img {
    width: calc(clamp(116px, 15.3vw, 198px) * 0.72);
    height: calc(clamp(115px, 15.2vw, 196px) * 0.72);
  }

  .blog-banner--contact .blog-banner__title--stacked {
    margin-top: -2rem;
  }

  .blog-banner--contact .blog-banner__title--stacked > span:first-child {
    display: block;
    white-space: nowrap;
  }

  .blog-banner--contact .blog-banner__title-highlight {
    display: inline;
  }

  .blog-banner--contact .blog-banner__title--stacked > span:last-child {
    display: block;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) and (max-width: 1024px) {
  .blog-banner-wrap {
    container-type: inline-size;
    height: calc(340px * (100cqi / 1408px));
    overflow: hidden;
  }

  .blog-banner--contact {
    width: 1408px;
    height: 340px;
    min-height: 340px;
    padding: 10px 150px;
    border-radius: 34px;
    transform: scale(calc(100cqi / 1408px));
    transform-origin: top left;
  }

  .blog-banner--contact .blog-banner__icon {
    top: 59px;
    left: 56px;
    width: 202px;
    height: 200px;
  }

  .blog-banner--contact .blog-banner__icon img {
    width: 198px;
    height: 196px;
  }
}

/* Contact channels — Figma 352:3178 */
.contact-channels-section {
  position: relative;
  z-index: 10;
  margin-top: 60px;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background-color: var(--brand-bg, #0b0718);
}

.contact-channels-section__inner {
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
}

.contact-channels-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

.contact-channels-grid__col {
  display: flex;
  flex-direction: column;
  gap: 38px;
  min-width: 0;
}

.contact-channels-grid__hub {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(287px, 18vw);
  margin-inline: clamp(8px, 1vw, 16px);
}

.contact-channels-grid__hub img {
  display: block;
  width: 100%;
  height: auto;
}

.contact-channel-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 656px;
  padding: 24px 28px;
  border: 0.6px solid rgba(255, 255, 255, 0.26);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    rgba(76, 28, 106, 0.3) 0%,
    rgba(177, 152, 255, 0.3) 50%,
    rgba(59, 46, 132, 0.3) 100%
  );
}

.contact-channels-grid__col:first-child .contact-channel-card {
  margin-left: auto;
}

.contact-channels-grid__col:last-child .contact-channel-card {
  margin-right: auto;
}

.contact-channel-card__badge {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
}

.contact-channel-card__badge img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg);
  mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.contact-channel-card__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-channel-card__copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-channel-card__title {
  margin: 0;
  font-size: clamp(18px, 1.2vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #f5f6f7;
}

.contact-channel-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-channel-card__desc {
  margin: 0;
  max-width: 398px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #ebecef;
}

.contact-channel-card__meta {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.contact-channel-card__meta-label {
  font-weight: 600;
  color: #ebecef;
}

.contact-channel-card__meta-value {
  font-weight: 600;
}

.contact-channel-card__meta--whatsapp .contact-channel-card__meta-value {
  color: rgba(37, 211, 101, 0.8);
}

.contact-channel-card__meta--email .contact-channel-card__meta-value {
  color: #8670ff;
}

.contact-channel-card__meta--hours .contact-channel-card__meta-value {
  background-image: linear-gradient(105.46deg, #da32f7 9.35%, #8f6aff 88.44%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.contact-channel-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  height: 50px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-heading, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-channel-card__btn:hover {
  opacity: 0.9;
}

.contact-channel-card__btn-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-self: center;
  object-fit: contain;
}

.contact-channel-card__btn--whatsapp {
  background: linear-gradient(107.4deg, #129844 2.7%, #0c8639 86.61%);
}

.contact-channel-card__btn--email {
  background: linear-gradient(107.73deg, #6d59f3 2.75%, #9275fb 64.03%);
}

.contact-channel-card__btn--telegram {
  background: linear-gradient(99.52deg, #0d9dd4 1.58%, #1cb9ea 107.37%);
}

.contact-channel-card--hours {
  min-height: 332px;
}

@media (max-width: 1199px) {
  .contact-channels-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .contact-channels-grid__hub {
    order: -1;
    width: min(240px, 60vw);
    margin-inline: auto;
  }

  .contact-channels-grid__col:first-child .contact-channel-card,
  .contact-channels-grid__col:last-child .contact-channel-card {
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .contact-channels-section {
    margin-top: 40px;
  }

  .contact-channel-card {
    padding: 20px;
    border-radius: 20px;
  }

  .contact-channel-card--hours {
    min-height: 0;
  }

  .contact-channel-card__btn {
    width: 100%;
  }
}

@media (min-width: 360px) and (max-width: 440px),
  (min-width: 768px) and (max-width: 768px) {
  .contact-channels-grid__hub {
    order: 0;
  }
}

@media (min-width: 1024px) and (max-width: 1024px) {
  .contact-channels-section__inner {
    container-type: inline-size;
    height: calc(696px * (100cqi / 1408px));
    overflow: hidden;
  }

  .contact-channels-grid {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0;
    width: 1408px;
    transform: scale(calc(100cqi / 1408px));
    transform-origin: top left;
  }

  .contact-channels-grid__hub {
    order: 0;
    width: 259.2px;
    margin-inline: 14.4px;
  }

  .contact-channels-grid__col:first-child .contact-channel-card {
    margin-left: auto;
    margin-right: 0;
  }

  .contact-channels-grid__col:last-child .contact-channel-card {
    margin-left: 0;
    margin-right: auto;
  }
}

/* Contact social follow — Figma 1116:46638 */
.contact-social-follow-section {
  position: relative;
  z-index: 10;
  padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem);
  background-color: var(--brand-bg, #0b0718);
}

.contact-social-follow__inner {
  width: min(calc(100% - 2rem), 1440px);
  margin-inline: auto;
}

.contact-social-follow__card {
  position: relative;
  overflow: hidden;
  display: flex;
  min-height: 443px;
  align-items: center;
  justify-content: center;
  border-radius: 24px;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 4rem);
}

.contact-social-follow__glow--right {
  position: absolute;
  top: -19px;
  right: -28px;
  width: 202px;
  height: 198px;
  border-radius: 50%;
  background: rgba(65, 2, 88, 0.29);
}

.contact-social-follow__glow--top {
  position: absolute;
  top: -26px;
  left: 64.4%;
  width: min(323px, 36%);
  height: 125px;
  border-radius: 50%;
  background: rgba(48, 8, 62, 0.31);
}

.contact-social-follow__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 922px;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.contact-social-follow__intro {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.contact-social-follow__head {
  display: flex;
  width: 100%;
  max-width: 618px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact-social-follow__title {
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--font-heading, "Monda", sans-serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.48px;
  color: #efedf1;
}

.contact-social-follow__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.contact-social-icon {
  display: block;
  position: relative;
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  text-decoration: none;
  overflow: visible;
}

.contact-social-icon__glyph {
  position: absolute;
  display: block;
  pointer-events: none;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-social-icon:hover .contact-social-icon__glyph,
.contact-social-icon:focus-visible .contact-social-icon__glyph {
  transform: translateY(-10px) scale(1.18);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 12px var(--contact-social-glow));
}

.contact-social-icon__badge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg);
  mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.contact-social-follow__description {
  margin: 0;
  width: 100%;
  max-width: 922px;
  text-align: center;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 400;
  line-height: 1.5;
  color: #dfe0e4;
}

.contact-social-follow__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.contact-social-follow__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 10px;
  font-family: var(--font-heading, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.contact-social-follow__btn:hover {
  opacity: 0.9;
}

.contact-social-follow__btn--services {
  width: 180px;
  border: 1px solid #ca23e7;
  background: linear-gradient(
    111.12deg,
    rgba(202, 35, 231, 0.16) 0.37%,
    rgba(152, 167, 255, 0.12) 99.18%
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.contact-social-follow__btn--register {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 160px;
  border: 1.5px solid #cc7aff;
  background: linear-gradient(
    108.95deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
}

.contact-social-follow__btn-label {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .contact-social-follow__card {
    min-height: 0;
  }

  .contact-social-follow__actions {
    width: 100%;
    flex-direction: row;
  }

  .contact-social-follow__btn--services,
  .contact-social-follow__btn--register {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }
}

@media (min-width: 360px) and (max-width: 440px) {
  .contact-social-follow__head {
    container-type: inline-size;
  }

  .contact-social-follow__icons {
    flex-wrap: nowrap;
    gap: calc(12px * (100cqi / 528px));
    width: 100%;
  }

  .contact-social-icon {
    width: calc(78px * (100cqi / 528px));
    height: calc(78px * (100cqi / 528px));
  }
}

/* Blog details page — navbar + gradient bg at section top */
.blog-details-section {
  position: relative;
  z-index: 10;
  overflow-x: clip;
  background-color: var(--brand-bg, #0b0718);
}

.blog-details-section__bg {
  height: min(520px, 42vw);
  min-height: calc(33px + 72px + 120px);
  background-color: var(--brand-bg, #0b0718);
}

.blog-details-section__bg-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.blog-details-section__header {
  position: relative;
  padding-top: 33px;
}

.blog-details-section__inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), 1440px);
  margin-inline: auto;
  padding-top: 125px;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 767px) {
  .blog-details-section__header {
    padding-top: 16px;
  }

  .blog-details-section__inner {
    padding-top: 36px;
  }

  .blog-details-top {
    gap: 24px;
  }

  .blog-details-intro__head {
    gap: 16px;
  }
}

.blog-details-layout {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
}

.blog-details-top {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

@media (min-width: 1200px) {
  .blog-details-top {
    flex-direction: row;
    align-items: flex-start;
    gap: 98px;
  }
}

.blog-details-intro {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  max-width: 972px;
}

.blog-details-intro__head {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.blog-details-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.blog-details-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
}

.blog-details-badge__icon,
.blog-details-badge__text {
  position: relative;
  z-index: 1;
}

.blog-details-badge__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: cover;
}

.blog-details-badge__text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.blog-details-hero-title {
  margin: 0;
  max-width: 910px;
  font-family: var(--font-heading, "Parkinsans", sans-serif);
  font-size: clamp(1.75rem, 1rem + 2.5vw, 48px);
  font-weight: 600;
  line-height: 1.2;
}

.blog-details-hero-title__accent {
  display: inline;
}

.blog-details-hero-title__main {
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 249, 249, 0.8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-details-subtitle {
  margin: 0;
  max-width: 972px;
  font-size: clamp(1rem, 0.92rem + 0.35vw, 18px);
  font-weight: 500;
  line-height: 1.5;
  color: #c1c4cc;
}

.blog-details-aside-top {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 530px;
}

.blog-details-author {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.08);
}

.blog-details-author__top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-details-author__avatar {
  overflow: hidden;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 7.339px;
  background: rgba(255, 255, 255, 0.93);
  backdrop-filter: blur(1.835px);
}

.blog-details-author__avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.blog-details-author__name {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 24px);
  font-weight: 500;
  line-height: 1.48;
  color: #fff;
}

.blog-details-author__role {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #b2b6bf;
}

.blog-details-author__stats {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.blog-details-author__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #b2b6bf;
  text-align: center;
}

.blog-details-author__stat p {
  margin: 0;
}

.blog-details-author__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 0;
  height: 25px;
  overflow: visible;
}

.blog-details-author__divider img {
  display: block;
  width: 25px;
  height: 1px;
  max-width: none;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.blog-details-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.blog-details-share__label {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
  white-space: nowrap;
}

.blog-details-share__icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.blog-details-share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 7.125px;
  transition: opacity 0.2s ease;
}

.blog-details-share__btn:hover {
  opacity: 0.85;
}

.blog-details-share__btn img {
  position: relative;
  z-index: 1;
  display: block;
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.blog-details-layout__divider {
  display: block;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.blog-details-body {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
}

@media (min-width: 1200px) {
  .blog-details-body {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(32px, 4vw, 68px);
  }
}

.blog-details-main {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
  max-width: 1002px;
}

/* Clear absolute marketing nav (top 33px + ~72px bar + gap) */
.marketing-public-shell .blog-details-section__inner {
  padding-top: calc(
    var(--marketing-nav-stack, calc(33px + 4.5rem + 1rem)) +
      clamp(0.75rem, 2vw, 1.25rem)
  );
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .marketing-public-shell .blog-details-section__inner {
    padding-top: calc(
      var(--marketing-nav-stack, calc(33px + 4.5rem + 1rem)) + 0.5rem
    );
  }
}

.blog-details-block__head[hidden] {
  display: none !important;
}

.blog-details-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #ffffff;
}

.blog-details-panel-content > :first-child {
  margin-top: 0;
}

.blog-details-panel-content p,
.blog-details-panel-content li {
  margin: 0;
  color: #ffffff !important;
}

.blog-details-panel-content p *:not(a):not(a *),
.blog-details-panel-content li *:not(a):not(a *) {
  color: inherit !important;
}

.blog-details-panel-content h2,
.blog-details-panel-content h3,
.blog-details-panel-content h4 {
  margin: 0;
  font-family: var(--font-monda, "Monda", sans-serif);
  font-weight: 600;
  line-height: 1.35;
  color: #efedf1;
}

.blog-details-panel-content h2 {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.blog-details-panel-content h3 {
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.375rem);
}

.blog-details-panel-content a,
.blog-details-panel-content a * {
  color: #eccbff !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.blog-details-panel-content img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.blog-details-panel-content ul,
.blog-details-panel-content ol {
  margin: 0;
  padding-left: 1.25rem;
}

.blog-details-main__divider {
  display: block;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.blog-details-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.blog-details-block__head {
  display: flex;
  align-items: center;
  gap: 24px;
}

.blog-details-block__num {
  margin: 0;
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.blog-details-block__heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.blog-details-block__kicker {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.blog-details-block__title {
  margin: 0;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 24px);
  font-weight: 700;
  line-height: 1.2;
}

.blog-details-block__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.blog-details-block__body p {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #ffffff !important;
}

.blog-details-block__body.blog-details-panel-content p *:not(a):not(a *) {
  color: inherit !important;
}

.blog-details-block__media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2000 / 1333;
  border-radius: 24px;
}

.blog-details-block__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.blog-details-block__media-overlay {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.23);
  pointer-events: none;
}

.blog-details-stat-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 768px) {
  .blog-details-stat-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.blog-details-stat-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 137px;
  padding: 20px;
  border-left: 2px solid #ca23e7;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(250px);
}

.blog-details-stat-card__value {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.45;
}

.blog-details-stat-card__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #c1c4cc;
}

.blog-details-toc {
  flex: 0 0 auto;
  width: 100%;
  max-width: 530px;
}

@media (min-width: 1200px) {
  .blog-details-toc {
    position: sticky;
    top: clamp(10px, 1.4vw, 20px);
    z-index: 2;
    flex: 0 1 clamp(280px, 32cqi, 458px);
    align-self: flex-start;
    width: clamp(280px, 32cqi, 458px);
    max-width: 458px;
  }

  .blog-details-body {
    container-type: inline-size;
    container-name: blog-details-body;
  }
}

.blog-details-toc__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 34px);
  padding: clamp(24px, 2.6vw, 38px) clamp(20px, 2.5vw, 36px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: clamp(18px, 1.6vw, 24px);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(50px);
}

@media (min-width: 1200px) {
  .blog-details-toc__inner {
    max-height: calc(100vh - clamp(10px, 1.4vw, 20px) - 1rem);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  }
}

.blog-details-toc__header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.blog-details-toc__label {
  margin: 0;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #dfe0e4;
  white-space: nowrap;
}

.blog-details-toc__header-line {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  object-fit: cover;
}

.blog-details-toc__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.blog-details-toc__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 20px);
  padding: clamp(16px, 1.6vw, 24px) clamp(12px, 1.2vw, 16px);
  border-radius: clamp(12px, 1.2vw, 16px);
  color: #c1c4cc;
  text-decoration: none;
  transition: filter 0.2s ease;
}

.blog-details-toc__item:hover {
  filter: brightness(1.15);
}

.blog-details-toc__item--active {
  color: #fff;
}

.blog-details-toc__item--active.nav-glass-surface {
  border-radius: 16px;
  background:
    linear-gradient(
      117deg,
      rgba(202, 35, 231, 0.2) 0.37%,
      rgba(152, 167, 255, 0.15) 99.18%
    ),
    #ffffff0f;
}

.blog-details-toc__item--active .blog-details-toc__num {
  position: relative;
  z-index: 1;
  color: #fff;
}

.blog-details-toc__item--active .blog-details-toc__text {
  position: relative;
  z-index: 1;
}

.blog-details-toc__num {
  flex-shrink: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  line-height: 1.5;
}

.blog-details-toc__text {
  min-width: 0;
  font-size: clamp(14px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.blog-details-toc__item--active .blog-details-toc__text {
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 249, 249, 0.8) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.blog-details-toc__divider {
  display: block;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

.blog-details-toc__progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.blog-details-toc__progress-track {
  position: relative;
  flex: 1 1 auto;
  height: 11px;
  border-radius: 46px;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(50px);
  overflow: hidden;
}

.blog-details-toc__progress-fill {
  display: block;
  height: 100%;
  border-radius: 46px;
  background: linear-gradient(
    115deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  transition: width 0.25s ease;
}

.blog-details-toc__progress-value {
  margin: 0;
  flex-shrink: 0;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  color: #c1c4cc;
}

/* Related blogs — Figma 355:5060 */
.blog-related-section {
  position: relative;
  overflow: hidden;
  background-color: #120615;
  padding: clamp(3rem, 6vw, 80px) 0;
}

.blog-related-section__glow {
  pointer-events: none;
  position: absolute;
  z-index: 0;
  mix-blend-mode: plus-lighter;
}

.blog-related-section__glow img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.blog-related-section__glow--left {
  top: -120px;
  left: -80px;
  width: min(272px, 30vw);
  height: 408px;
}

.blog-related-section__glow--right {
  top: 120px;
  right: -40px;
  width: min(372px, 40vw);
  height: 372px;
}

.blog-related-section__inner {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(calc(100% - 2rem), 1440px);
  flex-direction: column;
  gap: clamp(32px, 4vw, 48px);
  margin-inline: auto;
}

.blog-related-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.blog-related-section__title {
  margin: 0;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 28px);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.blog-related-section__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.blog-related-section__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 8px 9px 9px 8px;
  border: 0;
  border-radius: 20.5px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.19);
  box-shadow: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.blog-related-section__nav-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.blog-related-section__nav-btn:not(:disabled):hover {
  background: linear-gradient(
    96deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  box-shadow: 0 2px 6px rgba(18, 50, 98, 0.12);
}

.blog-related-section__nav-btn img {
  display: block;
  width: 24px;
  height: 24px;
}

.blog-related-section__nav-btn--prev img {
  transform: rotate(-90deg);
}

.blog-related-section__nav-btn--next img {
  transform: rotate(90deg);
}

.blog-related-section__viewport {
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
  container-name: related-blogs;
  touch-action: pan-y;
}

.blog-related-section__track {
  --blog-related-gap: clamp(16px, 2vw, 28px);
  display: flex;
  gap: var(--blog-related-gap);
  width: max-content;
  transition: transform 0.35s ease;
  will-change: transform;
}

.blog-related-section__card {
  --related-visible: 1;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: clamp(12px, 3.7cqi, 14px);
  width: clamp(
    260px,
    calc(
      (100cqi - (var(--related-visible) - 1) * var(--blog-related-gap, 28px)) /
        var(--related-visible)
    ),
    380px
  );
  max-width: none;
  padding: clamp(14px, 4.7cqi, 18px);
  padding-bottom: clamp(20px, 6.3cqi, 24px);
  border-radius: clamp(14px, 4.7cqi, 18px);
}

@container related-blogs (max-width: 639px) {
  .blog-related-section__card {
    --related-visible: 1;
    flex: 0 0 100cqi;
    width: 100cqi;
    min-width: 0;
    max-width: 100cqi;
  }
}

@container related-blogs (min-width: 640px) {
  .blog-related-section__card {
    --related-visible: 2;
  }
}

@container related-blogs (min-width: 1024px) {
  .blog-related-section__card {
    --related-visible: 3;
  }
}

@container related-blogs (min-width: 1280px) {
  .blog-related-section__card {
    --related-visible: 4;
  }
}

.blog-related-section__card-media {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 380 / 198;
  flex-shrink: 0;
  border-radius: clamp(11px, 3.7cqi, 14px);
}

.blog-related-section__card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-related-section__card-media-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.12);
}

.blog-related-section__card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(18px, 6.3cqi, 24px);
}

.blog-related-section__card-details {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: clamp(10px, 3.2cqi, 12px);
  padding-bottom: clamp(14px, 4.7cqi, 18px);
  border-bottom: 0.6px dashed #979ca8;
}

.blog-related-section__card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.blog-related-section__card-meta time,
.blog-related-section__card-read span {
  font-size: clamp(11px, 3.2cqi, 12px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--neutral-n30, #979ca8);
  white-space: nowrap;
}

.blog-related-section__card-read {
  display: flex;
  align-items: center;
  gap: 4px;
}

.blog-related-section__card-read img {
  width: clamp(16px, 5.3cqi, 20px);
  height: clamp(16px, 5.3cqi, 20px);
  flex-shrink: 0;
}

.blog-related-section__card-title {
  margin: 0;
  font-size: clamp(14px, 4.2cqi, 16px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--brand-white, #fff);
}

.blog-related-section__card-desc {
  margin: 0;
  font-size: clamp(11px, 3.2cqi, 12px);
  font-weight: 500;
  line-height: 1.5;
  color: #cecece;
}

.blog-related-section__card-cta {
  width: fit-content;
  height: auto !important;
  gap: clamp(6px, 2.1cqi, 8px) !important;
  padding: clamp(6px, 2.1cqi, 8px) clamp(12px, 4.2cqi, 16px) !important;
  border-radius: clamp(8px, 2.6cqi, 10px) !important;
  font-size: clamp(14px, 4.7cqi, 18px) !important;
}

.blog-related-section__card-cta img {
  width: clamp(18px, 5.8cqi, 22px) !important;
  height: clamp(18px, 5.8cqi, 22px) !important;
}

/* --- supplemental overrides (panel + marketing) --- */
/* Supplemental animations not included in compiled Tailwind CSS bundle */

/* Perfect Panel guest home: font tokens + hero title (unlayered; matches src/index.html) */
.marketing-guest-home {
  --font-inter: "Inter", system-ui, sans-serif;
  --font-parkinsons: "Parkinsans", system-ui, arial, sans-serif;
  --font-readex-pro: "Readex Pro", system-ui, sans-serif;
  --font-monda: "Monda", system-ui, sans-serif;
  --brand-bg: #120615;
  --marketing-section-title-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --marketing-section-title-weight: 700;
  --marketing-section-title-tracking: 0.01em;
  --marketing-section-title-line-height: 1.35;
}

/* Guest home: one size for badge-section h2 titles (panel overrides @layer rules) */
.marketing-guest-home section h2.our-services__title,
.marketing-guest-home section h2.testimonials__title,
.marketing-guest-home section h2.working-process__title,
.marketing-guest-home section h2.why-choose-us__title,
.marketing-guest-home section h2.advantages__title,
.marketing-guest-home section h2.payment-methods__title,
.marketing-guest-home section h2.pricing__title,
.marketing-guest-home section h2.global-reach__title,
.marketing-guest-home section.faq-section h2.font-heading,
.marketing-guest-home section.blog-section h2.font-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-align: center;
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: var(--marketing-section-title-size) !important;
  font-weight: var(--marketing-section-title-weight) !important;
  letter-spacing: var(--marketing-section-title-tracking) !important;
  line-height: var(--marketing-section-title-line-height) !important;
}

/* Split gradient titles: trailing space in __title-text is clipped by background-clip */
section h2.our-services__title,
section h2.testimonials__title,
section h2.working-process__title,
section h2.why-choose-us__title,
section h2.advantages__title,
section h2.payment-methods__title,
section h2.pricing__title,
section h2.global-reach__title,
section.faq-section h2.font-heading,
section.blog-section h2.font-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
}

.marketing-guest-home section h2[class*="__title"] [class*="__title-text"],
.marketing-guest-home section h2[class*="__title"] [class*="__title-highlight"],
.marketing-guest-home section h2[class*="__title"] .text-gradient-highlight,
.marketing-guest-home section.faq-section h2.font-heading span,
.marketing-guest-home section.blog-section h2.font-heading span {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

@media (min-width: 320px) and (max-width: 440px) {
  .marketing-guest-home section h2.our-services__title,
  .marketing-guest-home section h2.testimonials__title,
  .marketing-guest-home section h2.working-process__title,
  .marketing-guest-home section h2.why-choose-us__title,
  .marketing-guest-home section h2.advantages__title,
  .marketing-guest-home section h2.payment-methods__title,
  .marketing-guest-home section h2.pricing__title,
  .marketing-guest-home section h2.global-reach__title,
  .marketing-guest-home section.faq-section h2.font-heading,
  .marketing-guest-home section.blog-section h2.font-heading {
    font-size: 26px !important;
  }
}

.marketing-guest-home .hero-section {
  --hero-scale: min(1, 100vw / 1920);
  --hero-mobile-scale: clamp(0.72, 100vw / 390, 1);
  --hero-title-size: clamp(1.375rem, 0.95rem + 2.8vw, 2.75rem);
  --hero-body-size: clamp(0.9375rem, 0.84rem + 0.45vw, 1.125rem);
  --hero-content-gap: clamp(1.25rem, 0.75rem + 2vw, 1.75rem);
  --hero-text-gap: clamp(1rem, 0.5rem + 2vw, 1.5rem);
  --hero-tiger-width: clamp(11.5rem, 86vw, 41.5625rem);
}

@media (min-width: 768px) and (max-width: 1024px) {
  .marketing-guest-home .hero-section {
    --hero-mobile-scale: clamp(0.88, 100vw / 768, 1);
    --hero-title-size: clamp(2rem, 1.35rem + 2.2vw, 2.5rem);
    --hero-tiger-width: clamp(18rem, 52vw, 41.5625rem);
  }
}

@media (min-width: 1025px) {
  .marketing-guest-home .hero-section {
    --hero-mobile-scale: 1;
    --hero-title-size: 2.75rem;
    --hero-body-size: 1.125rem;
    --hero-tiger-width: clamp(17.5rem, 34.64vw, 41.5625rem);
  }

  .marketing-guest-home .hero-title__group {
    gap: 0.625rem;
    margin-top: 0;
  }

  .marketing-guest-home .hero-title__row {
    flex-flow: wrap;
    align-items: center;
    gap: 0;
    width: auto;
  }

  .marketing-guest-home .hero-title__break {
    display: block;
    flex-basis: 100%;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .marketing-guest-home .hero-title__badge-label {
    text-align: left;
    width: 5.5em;
    height: 1.25em;
    font-size: var(--hero-title-size);
    letter-spacing: 0.01em;
    margin-top: 0.136em;
    margin-left: 0.409em;
    display: block;
  }

  .marketing-guest-home .hero-title__headline {
    white-space: nowrap;
    letter-spacing: 0.44px;
    flex-wrap: nowrap;
    gap: 0.875rem;
  }

  .marketing-guest-home .hero-content {
    position: absolute;
    top: clamp(11rem, 24.8%, 17.0625rem);
    left: clamp(1rem, 8.333%, 10rem);
    width: min(875px, 100% - clamp(2rem, 16.666%, 20rem));
    margin-inline: 0;
    padding: 0;
  }
}

@media (min-width: 1025px) and (max-width: 1499px) {
  .marketing-guest-home .hero-section {
    --hero-title-size: 36px;
    --hero-body-size: 16px;
  }

  .marketing-guest-home .hero-title__badge {
    --hero-title-design: 36px;
  }

  .marketing-guest-home .hero-content {
    width: min(720px, 52%);
    left: clamp(16px, 4.5vw, 72px);
  }

  .marketing-guest-home .hero-text-block {
    max-width: 100%;
  }

  .marketing-guest-home .hero-description {
    font-size: 16px;
    line-height: 1.5;
  }

  .marketing-guest-home .hero-tiger {
    width: min(580px, 40vw) !important;
    height: min(638px, 78%) !important;
    right: max(-20px, 50% - 860px) !important;
    transform: translateX(28px);
  }
}

/* About page hero — layout + headline typography (convert; panel beats @layer utilities) */
.hero-section--about,
.marketing-public-shell .hero-section--about {
  --hero-title-size: clamp(1.375rem, 0.95rem + 2.8vw, 2.75rem);
  --hero-body-size: clamp(0.9375rem, 0.84rem + 0.45vw, 1.125rem);
  --hero-about-content-max: 826px;
  --hero-about-description-max: 676px;
}

.hero-section--about .hero-title__badge,
.marketing-public-shell .hero-section--about .hero-title__badge {
  --hero-title-design: 2.75rem;
  --badge-scale: calc(var(--hero-title-size) / var(--hero-title-design));
}

.hero-section--about .hero-title__badge-label,
.hero-section--about .hero-title__suffix,
.hero-section--about .hero-title__headline,
.hero-section--about .hero-title__headline .text-hero-title-white,
.marketing-public-shell .hero-section--about .hero-title__badge-label,
.marketing-public-shell .hero-section--about .hero-title__suffix,
.marketing-public-shell .hero-section--about .hero-title__headline,
.marketing-public-shell
  .hero-section--about
  .hero-title__headline
  .text-hero-title-white {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: var(--hero-title-size) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.01em;
}

.hero-section--about h1.hero-title__headline,
.marketing-public-shell .hero-section--about h1.hero-title__headline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  gap: clamp(0.25rem, 0.75vw, 0.5rem);
  margin: 0 !important;
  white-space: normal !important;
  width: 100%;
  max-width: var(--hero-about-content-max);
}

.hero-section--about .hero-title__headline .text-hero-title-white,
.marketing-public-shell
  .hero-section--about
  .hero-title__headline
  .text-hero-title-white {
  display: inline;
  background-image: var(--gradient-hero-title-white) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
}

.hero-section--about .hero-content,
.marketing-public-shell .hero-section--about .hero-content {
  width: min(
    calc(100% - clamp(1rem, 4vw, 1.5rem)),
    var(--hero-about-content-max)
  ) !important;
  max-width: var(--hero-about-content-max) !important;
}

.hero-section--about .hero-description,
.marketing-public-shell .hero-section--about .hero-description {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  font-size: var(--hero-body-size) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  max-width: min(var(--hero-about-description-max), 100%) !important;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section--about,
  .marketing-public-shell .hero-section--about {
    --hero-title-size: clamp(2rem, 1.35rem + 2.2vw, 2.5rem);
  }
}

@media (min-width: 1025px) {
  .hero-section--about,
  .marketing-public-shell .hero-section--about {
    --hero-title-size: 2.75rem;
    --hero-body-size: 1.125rem;
  }

  .hero-section--about .hero-content,
  .marketing-public-shell .hero-section--about .hero-content {
    position: absolute !important;
    top: clamp(11rem, 24.8%, 17.0625rem) !important;
    left: clamp(1rem, 8.333%, 10rem) !important;
    width: min(
      var(--hero-about-content-max),
      calc(100% - clamp(2rem, 16.666%, 20rem))
    ) !important;
    max-width: var(--hero-about-content-max) !important;
    margin-inline: 0 !important;
    padding: 0 !important;
  }
}

@media (min-width: 1200px) and (max-width: 1346px) {
  .hero-section--about .hero-content,
  .marketing-public-shell .hero-section--about .hero-content {
    top: clamp(9.75rem, 21.5%, 14.25rem) !important;
    left: clamp(1rem, 5vw, 5rem) !important;
    width: min(
      var(--hero-about-content-max),
      calc(100% - clamp(1.5rem, 12vw, 18rem))
    ) !important;
  }
}

@media (min-width: 1025px) and (max-width: 1499px) {
  .hero-section--about .hero-tiger,
  .marketing-public-shell .hero-section--about .hero-tiger {
    width: min(580px, 40vw) !important;
    height: min(638px, 78%) !important;
    max-width: none !important;
    left: auto !important;
    right: max(-20px, 50% - 860px) !important;
    transform: translateX(28px);
  }
}

@media (min-width: 1360px) and (max-width: 1519px) {
  .hero-section--about,
  .marketing-public-shell .hero-section--about {
    --hero-title-size: 2.25rem;
    --hero-body-size: 1rem;
  }

  .hero-section--about .hero-content,
  .marketing-public-shell .hero-section--about .hero-content {
    top: 12.5rem !important;
    left: 5% !important;
    width: min(var(--hero-about-content-max), 45%) !important;
    max-width: var(--hero-about-content-max) !important;
  }
}

/* About hero — breathing room between badge and “Builds Social Growth” suffix */
.hero-section--about .hero-title__row,
.marketing-public-shell .hero-section--about .hero-title__row {
  display: flex;
  flex-flow: wrap;
  align-items: center;
  column-gap: clamp(0.25rem, 0.35vw, 0.5rem);
  row-gap: clamp(0.125rem, 0.25vw, 0.375rem);
}

@media (min-width: 1025px) {
  .hero-section--about .hero-title__row,
  .marketing-public-shell .hero-section--about .hero-title__row {
    gap: clamp(0.25rem, 0.35vw, 0.5rem) !important;
  }
}

/* Content split ("Who we are") — typography (convert; panel beats @layer utilities) */
.marketing-public-shell
  section.content-split-section
  .content-split-section__copy,
section.content-split-section .content-split-section__copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(1.25rem, 0.75rem + 1.5vw, 1.75rem) !important;
  width: 100% !important;
  max-width: 48.75rem !important;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__intro,
section.content-split-section .content-split-section__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: clamp(1rem, 0.75rem + 1vw, 2rem) !important;
  width: 100% !important;
}

.marketing-public-shell section.content-split-section .section-badge__label,
section.content-split-section .section-badge__label {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__title,
section.content-split-section .content-split-section__title {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
  max-width: 46.5rem;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__title-text,
section.content-split-section .content-split-section__title-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__title
  .text-metallic-sheen,
section.content-split-section
  .content-split-section__title
  .text-metallic-sheen {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #f4b2ff 0%,
    #be00df 25%,
    #ffe6ff 50%,
    #be00df 75%,
    #f4b2ff 100%
  ) !important;
  background-size: 220% 100% !important;
  background-position: 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  display: inline;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__description,
section.content-split-section .content-split-section__description {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  color: var(--neutral-n50, #c1c4cc) !important;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.marketing-public-shell
  section.content-split-section
  .content-split-section__feature,
section.content-split-section .content-split-section__feature {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  color: var(--neutral-n40, rgba(255, 255, 255, 0.72)) !important;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}

/* Use cases slider — convert/about.html (panel beats @layer utilities) */
.marketing-public-shell section.use-cases,
section.use-cases {
  background-color: #110816 !important;
  position: relative;
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

.marketing-public-shell section.use-cases .use-cases__shell,
section.use-cases .use-cases__shell {
  position: relative;
  width: 100%;
  padding-block: clamp(3rem, 5vw, 5rem);
}

.marketing-public-shell section.use-cases .use-cases__pattern,
section.use-cases .use-cases__pattern {
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/why-choose-us/pattern-mask.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/why-choose-us/pattern-mask.svg");
}

.marketing-public-shell section.use-cases .use-cases__inner,
section.use-cases .use-cases__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  position: relative;
  z-index: 1;
  overflow: visible !important;
}

.marketing-public-shell section.use-cases .use-cases__title,
section.use-cases .use-cases__title {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
  margin: 0 !important;
}

.marketing-public-shell section.use-cases .use-cases__title-text,
section.use-cases .use-cases__title-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__title
  .text-metallic-sheen,
section.use-cases .use-cases__title .text-metallic-sheen {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

.marketing-public-shell section.use-cases .use-cases__description,
section.use-cases .use-cases__description {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  color: #dfe0e4 !important;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.marketing-public-shell section.use-cases .use-cases__slider,
section.use-cases .use-cases__slider {
  width: min(100%, 82.5rem) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.marketing-public-shell section.use-cases .use-cases__viewport,
section.use-cases .use-cases__viewport {
  width: 100% !important;
  overflow: visible !important;
}

.marketing-public-shell section.use-cases .use-cases__deck,
section.use-cases .use-cases__deck {
  isolation: isolate;
  position: relative !important;
  width: 100% !important;
  max-width: 82.5rem !important;
  height: 32.5rem !important;
  overflow: visible !important;
}

.marketing-public-shell section.use-cases .use-cases__card,
section.use-cases .use-cases__card {
  pointer-events: none;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transition: opacity 0.7s cubic-bezier(0.45, 0, 0.2, 1);
}

.marketing-public-shell section.use-cases .use-cases__card-stack,
section.use-cases .use-cases__card-stack {
  transform-origin: top left;
  width: 100% !important;
  height: 100% !important;
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1);
}

.marketing-public-shell section.use-cases .use-cases__card--depth-0,
section.use-cases .use-cases__card--depth-0 {
  z-index: 40;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card--depth-0
  .use-cases__card-stack,
section.use-cases .use-cases__card--depth-0 .use-cases__card-stack {
  transform: none !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card--depth-1
  .use-cases__card-stack,
section.use-cases .use-cases__card--depth-1 .use-cases__card-stack {
  transform: translate3d(-2.8125rem, 0.9375rem, 0) scale(1.0682, 0.942) !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card--depth-2
  .use-cases__card-stack,
section.use-cases .use-cases__card--depth-2 .use-cases__card-stack {
  transform: translate3d(-5.6875rem, 2.75rem, 0) scale(1.1386, 0.834) !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card--depth-3
  .use-cases__card-stack,
section.use-cases .use-cases__card--depth-3 .use-cases__card-stack {
  transform: translate3d(-5.6875rem, 2.75rem, 0) scale(1.1386, 0.834) !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card:not(.use-cases__card--depth-0)
  .use-cases__card-layout,
section.use-cases
  .use-cases__card:not(.use-cases__card--depth-0)
  .use-cases__card-layout {
  opacity: 0 !important;
  visibility: hidden !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card--depth-0
  .use-cases__card-layout,
section.use-cases .use-cases__card--depth-0 .use-cases__card-layout {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (min-width: 1024px) {
  .marketing-public-shell
    section.use-cases
    .use-cases__card:not(.use-cases__card--depth-0)
    .use-cases__card-nav,
  section.use-cases
    .use-cases__card:not(.use-cases__card--depth-0)
    .use-cases__card-nav {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

.marketing-public-shell section.use-cases .use-cases__card-layout,
section.use-cases .use-cases__card-layout {
  display: flex !important;
  align-items: center !important;
  position: relative;
  z-index: 2;
  height: 100%;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.marketing-public-shell section.use-cases .use-cases__card-nav,
section.use-cases .use-cases__card-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.marketing-public-shell section.use-cases .use-cases__card-nav-btn,
section.use-cases .use-cases__card-nav-btn {
  box-sizing: border-box !important;
  display: block !important;
  flex-shrink: 0 !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  cursor: pointer;
  position: relative !important;
  overflow: visible !important;
  line-height: 0 !important;
}

.marketing-public-shell section.use-cases .use-cases__card-nav-btn img,
section.use-cases .use-cases__card-nav-btn img {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  object-fit: contain !important;
  inset: -28.57% !important;
  width: calc(100% + 57.14%) !important;
  height: calc(100% + 57.14%) !important;
}

.marketing-public-shell
  section.use-cases
  .use-cases__card-nav-btn--icon-active
  img,
section.use-cases .use-cases__card-nav-btn--icon-active img {
  inset: -59.52% !important;
  width: calc(100% + 119.04%) !important;
  height: calc(100% + 119.04%) !important;
}

@media (min-width: 1024px) {
  .marketing-public-shell section.use-cases .use-cases__slider,
  section.use-cases .use-cases__slider {
    padding-left: 5.6875rem !important;
    margin-inline: auto !important;
  }

  .marketing-public-shell section.use-cases .use-cases__inner,
  section.use-cases .use-cases__inner {
    overflow: visible !important;
  }
}

@media (max-width: 1023px) {
  .marketing-public-shell section.use-cases .use-cases__viewport,
  section.use-cases .use-cases__viewport {
    overflow: hidden !important;
  }

  .marketing-public-shell section.use-cases .use-cases__deck,
  section.use-cases .use-cases__deck {
    display: flex !important;
    height: auto !important;
    min-height: 28rem !important;
    touch-action: pan-y pinch-zoom;
  }

  .marketing-public-shell section.use-cases .use-cases__card,
  section.use-cases .use-cases__card {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  .marketing-public-shell section.use-cases .use-cases__card-stack,
  section.use-cases .use-cases__card-stack {
    transform: none !important;
  }

  .marketing-public-shell section.use-cases .use-cases__card-layout,
  section.use-cases .use-cases__card-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .marketing-public-shell section.use-cases .use-cases__card-nav,
  section.use-cases .use-cases__card-nav {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .marketing-public-shell section.use-cases .use-cases__slider,
  section.use-cases .use-cases__slider {
    padding-left: 0 !important;
  }
}

.marketing-guest-home .hero-title__badge {
  --hero-title-design: 2.75rem;
  --badge-scale: calc(var(--hero-title-size) / var(--hero-title-design));
}

.marketing-guest-home .hero-title__badge-label,
.marketing-guest-home .hero-title__suffix,
.marketing-guest-home .hero-title__headline {
  font-family: var(--font-parkinsons);
  font-size: var(--hero-title-size);
  font-weight: 700;
  line-height: 1.35;
}

/* Hero sign-in CTAs — panel `button { background: none }` strips Tailwind bg-hero-cta* */
.marketing-guest-home .hero-section .hero-form__button.bg-hero-cta {
  background: linear-gradient(120.46deg, #ca23e7 0.37%, #98a7ffbf 99.18%);
  color: #fff;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.marketing-guest-home .hero-section .hero-form__button.bg-hero-cta-secondary {
  background: linear-gradient(120.46deg, #ca23e766 0.37%, #98a7ff4d 99.18%);
  color: #fff;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.marketing-guest-home .hero-section .hero-form__button.bg-hero-cta .bg-white {
  background-color: #fff;
}

.marketing-guest-home
  .hero-section
  .hero-form__button.bg-hero-cta
  .text-brand-magenta {
  color: #ca23e7;
}

@media (max-width: 767px) {
  .marketing-guest-home
    .hero-section
    .hero-form__button.bg-hero-cta
    > span.flex.size-10 {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .marketing-guest-home
    .hero-section
    .hero-form__button.bg-hero-cta
    > span.flex.size-10
    svg {
    width: 20px;
    height: 20px;
  }
}

/* Our Services tabs — match index.html shine + active pill (panel button resets) */
section.our-services .our-services__tab,
.marketing-guest-home .our-services__tab,
.service-platform-tabs .our-services__tab {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--neutral-n30, #e8e8e8);
  cursor: pointer;
  background: #6f6f6f17;
  border: 0.5px solid #6d60ae82;
  border-radius: 1rem;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    color 0.28s ease;
}

/* Unlayered panel resets above beat @layer utilities — repeat hover like convert/index */
section.our-services .our-services__tab:hover:not(.our-services__tab--active),
.marketing-guest-home .our-services__tab:hover:not(.our-services__tab--active),
.service-platform-tabs .our-services__tab:hover:not(.our-services__tab--active),
section.our-services
  .our-services__tab:focus-visible:not(.our-services__tab--active),
.marketing-guest-home
  .our-services__tab:focus-visible:not(.our-services__tab--active),
.service-platform-tabs
  .our-services__tab:focus-visible:not(.our-services__tab--active) {
  border-color: #e07cff;
  background: linear-gradient(
    120.46deg,
    rgba(202, 35, 231, 0.22) 0.37%,
    rgba(152, 167, 255, 0.16) 99.18%
  );
  box-shadow:
    0 10px 24px rgba(202, 35, 231, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #fff;
  transform: translateY(-2px);
}

section.our-services .our-services__tab:hover .our-services__tab-label,
.marketing-guest-home .our-services__tab:hover .our-services__tab-label,
.service-platform-tabs .our-services__tab:hover .our-services__tab-label,
section.our-services .our-services__tab:focus-visible .our-services__tab-label,
.marketing-guest-home .our-services__tab:focus-visible .our-services__tab-label,
.service-platform-tabs
  .our-services__tab:focus-visible
  .our-services__tab-label {
  color: #fff;
}

section.our-services .our-services__tab:hover .our-services__tab-icon,
.marketing-guest-home .our-services__tab:hover .our-services__tab-icon,
.service-platform-tabs .our-services__tab:hover .our-services__tab-icon,
section.our-services .our-services__tab:focus-visible .our-services__tab-icon,
.marketing-guest-home .our-services__tab:focus-visible .our-services__tab-icon,
.service-platform-tabs
  .our-services__tab:focus-visible
  .our-services__tab-icon {
  transform: translate(-50%, -50%) scale(1.08);
}

section.our-services .our-services__tab--active,
.marketing-guest-home .our-services__tab--active,
.service-platform-tabs .our-services__tab--active {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  color: #fff;
  border: none;
  background-image: var(
    --gradient-hero-cta,
    linear-gradient(120.46deg, #ca23e7 0.37%, #98a7ffbf 99.18%)
  );
}

section.our-services .our-services__tab--active:hover,
section.our-services .our-services__tab--active:focus-visible,
.marketing-guest-home .our-services__tab--active:hover,
.marketing-guest-home .our-services__tab--active:focus-visible,
.service-platform-tabs .our-services__tab--active:hover,
.service-platform-tabs .our-services__tab--active:focus-visible {
  border: none;
  box-shadow:
    0 12px 28px rgba(202, 35, 231, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  section.our-services .our-services__tab:hover,
  section.our-services .our-services__tab:focus-visible,
  section.our-services .our-services__tab--active:hover,
  section.our-services .our-services__tab--active:focus-visible,
  .marketing-guest-home .our-services__tab:hover,
  .marketing-guest-home .our-services__tab:focus-visible,
  .marketing-guest-home .our-services__tab--active:hover,
  .marketing-guest-home .our-services__tab--active:focus-visible,
  .service-platform-tabs .our-services__tab:hover,
  .service-platform-tabs .our-services__tab:focus-visible,
  .service-platform-tabs .our-services__tab--active:hover,
  .service-platform-tabs .our-services__tab--active:focus-visible {
    transform: none;
  }
}

section.our-services .our-services__tab--active .our-services__tab-label,
.marketing-guest-home .our-services__tab--active .our-services__tab-label,
.service-platform-tabs .our-services__tab--active .our-services__tab-label {
  color: #fff;
}

section.our-services .our-services__tab .button-shine,
.marketing-guest-home .our-services__tab .button-shine,
.service-platform-tabs .our-services__tab .button-shine {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0000, #fffc, #0000);
  animation: button-shine-sweep 2s linear infinite;
  transform: translateX(-100%);
  will-change: transform;
}

section.our-services .our-services__tab-content,
.marketing-guest-home .our-services__tab-content,
.service-platform-tabs .our-services__tab-content {
  position: relative;
  z-index: 2;
}

@keyframes button-shine-sweep {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  section.our-services .our-services__tab .button-shine,
  .marketing-guest-home .our-services__tab .button-shine,
  .service-platform-tabs .our-services__tab .button-shine {
    animation: none;
    display: none;
  }
}

/* About Us section BG — absolute stack + CDN patterns (theme CSS breaks ../icons urls) */
section.about-us,
.marketing-guest-home section.about-us {
  position: relative;
  overflow: hidden;
  background-color: #190a21;
}

section.about-us .about-us__bg,
.marketing-guest-home section.about-us .about-us__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  background-color: #190a21;
}

section.about-us .about-us__bg-image,
.marketing-guest-home section.about-us .about-us__bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
  object-position: center;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  display: block;
}

section.about-us .about-us__bg-veil,
.marketing-guest-home section.about-us .about-us__bg-veil {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  display: none;
}

section.about-us .about-us__pattern,
.marketing-guest-home section.about-us .about-us__pattern {
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  display: none;
}

section.about-us .about-us__pattern--right,
.marketing-guest-home section.about-us .about-us__pattern--right {
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/about-us/pattern-right.webp");
  width: min(40vw, 40rem);
  height: min(40vw, 40rem);
  top: -12rem;
  right: -4rem;
  display: block;
}

section.about-us .about-us__pattern--bottom,
.marketing-guest-home section.about-us .about-us__pattern--bottom {
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/about-us/pattern-bottom.svg");
  opacity: 0.48;
  width: min(30vw, 30rem);
  height: min(30vw, 30rem);
  bottom: 0;
  left: 50%;
  translate: -50%;
  -webkit-mask-image: radial-gradient(
    circle at 50% 100%,
    #000 0%,
    #000000b8 16%,
    #00000047 32%,
    #0000 52%
  );
  mask-image: radial-gradient(
    circle at 50% 100%,
    #000 0%,
    #000000b8 16%,
    #00000047 32%,
    #0000 52%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (min-width: 1360px) {
  section.about-us .about-us__bg-veil,
  section.about-us .about-us__pattern,
  .marketing-guest-home section.about-us .about-us__bg-veil,
  .marketing-guest-home section.about-us .about-us__pattern {
    display: block;
  }
}

section.about-us .about-us__inner,
.marketing-guest-home section.about-us .about-us__inner {
  position: relative;
  z-index: 1;
}

/* About Us hero title — one type style for row + “the Digital World.” (panel resets h2/spans) */
.marketing-guest-home .about-us__title-block {
  --about-us-title-size: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
}

.marketing-guest-home .about-us__title-row .about-us__title-text,
.marketing-guest-home h2.about-us__title-line,
.marketing-guest-home .about-us__title-line .about-us__title-text,
.marketing-guest-home .about-us__title-line .about-us__title-highlight {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: var(--about-us-title-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
}

.marketing-guest-home h2.about-us__title-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 0.35em;
  row-gap: 0;
  margin: 0 !important;
}

.marketing-guest-home .about-us__title-line .about-us__title-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.marketing-guest-home .about-us__title-line .about-us__title-highlight {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    101.41deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

@media (max-width: 767px) {
  .marketing-guest-home .about-us__title-block {
    --about-us-title-size: clamp(1.125rem, 5.8667vw, 1.75rem);
  }

  .marketing-guest-home .about-us__title-row .about-us__title-text,
  .marketing-guest-home h2.about-us__title-line,
  .marketing-guest-home .about-us__title-line .about-us__title-text,
  .marketing-guest-home .about-us__title-line .about-us__title-highlight {
    line-height: 1.2 !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .marketing-guest-home .about-us__title-block {
    --about-us-title-size: clamp(1.375rem, 3.5156vw, 2rem);
  }
}

@media (min-width: 1360px) {
  .marketing-guest-home .about-us__title-block {
    --about-us-title-size: 2.25rem;
  }
}

@media (min-width: 320px) and (max-width: 440px) {
  .marketing-guest-home .about-us__title-block {
    --about-us-title-size: 26px;
  }
}

/* Our Services section BG — CDN urls (theme path breaks ../images/... in @layer utilities) */
section.our-services,
.marketing-guest-home section.our-services {
  position: relative;
  overflow: hidden;
  background-color: #190a21;
}

section.our-services .our-services__bg,
.marketing-guest-home section.our-services .our-services__bg {
  pointer-events: none;
  z-index: 0;
  position: absolute;
  inset: 0;
  background-color: #190a21;
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/our-services/section-background.webp");
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: cover;
}

section.our-services .our-services__pattern,
.marketing-guest-home section.our-services .our-services__pattern {
  pointer-events: none;
  z-index: 1;
  opacity: 0.9;
  position: absolute;
  top: -6.875rem;
  left: -7.0625rem;
  width: 40rem;
  height: 40rem;
  background: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/our-services/background-pattern.svg")
    50% / contain no-repeat;
}

section.our-services .our-services__inner,
.marketing-guest-home section.our-services .our-services__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
}

section.our-services .our-services__header,
.marketing-guest-home section.our-services .our-services__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.125rem;
  width: min(100%, 62.25rem);
  max-width: 100%;
  margin-inline: auto;
}

section.our-services .our-services__header .section-badge,
.marketing-guest-home
  section.our-services
  .our-services__header
  .section-badge {
  align-self: center;
  margin-inline: auto;
}

/* Our Services: accent uses panel flip; edge SVG is already correct (flip breaks slant) */
section.our-services .our-services__header .section-badge__accent,
.marketing-guest-home
  section.our-services
  .our-services__header
  .section-badge__accent {
  transform: scaleY(-1) rotate(180deg);
}

section.our-services .our-services__header .section-badge__edge,
.marketing-guest-home
  section.our-services
  .our-services__header
  .section-badge__edge {
  transform: none;
}

/* Section badges — same look as About Us on panel (utilities layer overridden) */
.marketing-guest-home .section-badge {
  flex-shrink: 0;
  width: var(--section-badge-width, 8.53125rem);
  height: 2.8125rem;
  position: relative;
}

.marketing-guest-home .section-badge__accent {
  width: var(--section-badge-accent-width, 8.28125rem);
  height: 2.8125rem;
  position: absolute;
  inset: 0;
  display: block;
  object-fit: fill;
  transform: scaleY(-1) rotate(180deg);
}

.marketing-guest-home .section-badge__edge {
  top: 0;
  left: var(--section-badge-edge-left, 7.59375rem);
  width: var(--section-badge-edge-width, 0.9375rem);
  height: 2.8125rem;
  position: absolute;
  display: block;
  object-fit: fill;
  transform: scaleY(-1) rotate(180deg);
}

.marketing-guest-home .section-badge__label {
  position: absolute;
  top: 0.4375rem;
  left: var(--section-badge-label-left, 1.15625rem);
  white-space: nowrap;
  padding-right: 0.5rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.45;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    #f4b2ff 0%,
    #be00df 25%,
    #ffe6ff 50%,
    #be00df 75%,
    #f4b2ff 100%
  );
  background-size: 220% 100%;
  background-position: 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-guest-home .section-badge__label {
    background-image: linear-gradient(90deg, #f4b2ff 0%, #be00df 100%);
    background-position: 0%;
    background-size: 100% 100%;
  }
}

section.our-services .our-services__title .text-gradient-highlight,
.marketing-guest-home
  section.our-services
  .our-services__title
  .text-gradient-highlight {
  background-image: linear-gradient(101.41deg, #da32f7 9.35%, #8f6aff 88.44%);
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

section.our-services .our-services__title-text,
.marketing-guest-home section.our-services .our-services__title-text {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

section.our-services .our-services__description,
.marketing-guest-home section.our-services .our-services__description {
  text-align: center;
  max-width: 62.25rem;
  width: 100%;
  margin: 0 auto;
}

section.our-services .our-services__panel,
.marketing-guest-home section.our-services .our-services__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  width: 100%;
}

/* Our Services tab card — vertical rhythm (panel resets h3/p margins) */
.marketing-guest-home .our-services__card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(2rem, 1.75rem + 0.5vw, 2.125rem) !important;
}

.marketing-guest-home .our-services__card-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(1.5rem, 1.25rem + 0.6vw, 2rem) !important;
}

.marketing-guest-home .our-services__card-title,
.marketing-guest-home .our-services__card-description,
.marketing-guest-home .our-services__features {
  margin: 0 !important;
}

.marketing-guest-home .our-services__cta {
  margin-top: 0 !important;
  align-self: flex-start;
}

/* Working Process — center layout + CDN bg (theme path breaks ../images/...) */
section.working-process,
.marketing-guest-home section.working-process {
  position: relative;
  overflow: hidden;
  background-color: #17091c;
}

section.working-process .working-process__shell,
.marketing-guest-home section.working-process .working-process__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

section.working-process .working-process__glow,
.marketing-guest-home section.working-process .working-process__glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

section.working-process .working-process__pattern,
.marketing-guest-home section.working-process .working-process__pattern {
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  position: absolute;
  width: 60rem;
  height: 60rem;
  top: -20.9375rem;
  left: calc(50% + 20rem);
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/working-process/pattern-mask.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/working-process/pattern-mask.svg");
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: 60rem 60rem;
  mask-size: 60rem 60rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

section.working-process .working-process__pattern-inner,
.marketing-guest-home section.working-process .working-process__pattern-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60rem;
  height: 60rem;
  translate: -50% -50%;
}

section.working-process .working-process__pattern-inner img,
.marketing-guest-home
  section.working-process
  .working-process__pattern-inner
  img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

section.working-process .working-process__frame,
.marketing-guest-home section.working-process .working-process__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: min(100% - 1.5rem, 81.25rem);
  max-width: 81.25rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

section.working-process .working-process__header,
.marketing-guest-home section.working-process .working-process__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.125rem;
  width: min(100%, 62.25rem);
  max-width: 100%;
  margin-inline: auto;
}

section.working-process .working-process__header .section-badge,
.marketing-guest-home
  section.working-process
  .working-process__header
  .section-badge {
  align-self: center;
  margin-inline: auto;
}

section.working-process .working-process__title,
.marketing-guest-home section.working-process .working-process__title {
  text-align: center;
  width: 100%;
  margin: 0;
}

section.working-process .working-process__description,
.marketing-guest-home section.working-process .working-process__description {
  text-align: center;
  max-width: 62.25rem;
  margin: 0 auto;
}

section.working-process .working-process__diagram,
.marketing-guest-home section.working-process .working-process__diagram {
  width: 100%;
  max-width: 81.25rem;
  margin-inline: auto;
  position: relative;
  container-type: inline-size;
}

@media (min-width: 1100px) {
  section.working-process .working-process__diagram-canvas,
  .marketing-guest-home
    section.working-process
    .working-process__diagram-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1300px;
    height: 801px;
    transform-origin: top center;
  }
}

section.working-process .working-process__card,
.marketing-guest-home section.working-process .working-process__card {
  background-color: transparent;
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/working-process/card-bg.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Why Choose Us — center layout + CDN bg (theme path breaks ../images/...) */
section.why-choose-us,
.marketing-guest-home section.why-choose-us {
  position: relative;
  overflow: hidden;
  background-color: #110816;
}

section.why-choose-us .why-choose-us__shell,
.marketing-guest-home section.why-choose-us .why-choose-us__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

section.why-choose-us .why-choose-us__glow,
.marketing-guest-home section.why-choose-us .why-choose-us__glow {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

section.why-choose-us .why-choose-us__pattern,
.marketing-guest-home section.why-choose-us .why-choose-us__pattern {
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
  position: absolute;
  width: 40rem;
  height: 40rem;
  top: -16rem;
  left: calc(50% + 27.25rem);
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/why-choose-us/pattern-mask.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/why-choose-us/pattern-mask.svg");
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: 40rem 40rem;
  mask-size: 40rem 40rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

section.why-choose-us .why-choose-us__pattern-inner,
.marketing-guest-home section.why-choose-us .why-choose-us__pattern-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  translate: -50% -50%;
}

section.why-choose-us .why-choose-us__pattern-inner img,
.marketing-guest-home section.why-choose-us .why-choose-us__pattern-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

section.why-choose-us .why-choose-us__frame,
.marketing-guest-home section.why-choose-us .why-choose-us__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
  width: min(100% - 2rem, 100rem);
  max-width: 100rem;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

section.why-choose-us .why-choose-us__header,
.marketing-guest-home section.why-choose-us .why-choose-us__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.125rem;
  width: min(100%, 65.75rem);
  max-width: 100%;
  margin-inline: auto;
}

section.why-choose-us .why-choose-us__header .section-badge,
.marketing-guest-home
  section.why-choose-us
  .why-choose-us__header
  .section-badge {
  align-self: center;
  margin-inline: auto;
}

section.why-choose-us .why-choose-us__title,
.marketing-guest-home section.why-choose-us .why-choose-us__title {
  text-align: center;
  width: 100%;
  margin: 0;
}

section.why-choose-us .why-choose-us__description,
.marketing-guest-home section.why-choose-us .why-choose-us__description {
  text-align: center;
  max-width: 65.75rem;
  margin: 0 auto;
}

section.why-choose-us .why-choose-us__diagram,
.marketing-guest-home section.why-choose-us .why-choose-us__diagram {
  width: 100%;
  max-width: 100rem;
  margin-inline: auto;
  position: relative;
  container-type: inline-size;
}

@media (min-width: 1100px) {
  section.why-choose-us .why-choose-us__diagram-canvas,
  .marketing-guest-home section.why-choose-us .why-choose-us__diagram-canvas {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1600px;
    height: 694px;
    transform-origin: top center;
  }
}

section.why-choose-us .why-choose-us__card,
.marketing-guest-home section.why-choose-us .why-choose-us__card {
  box-sizing: border-box;
  background-color: #190624;
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/why-choose-us/card-bg.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  border: 0.7px solid #ffffff20;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
}

/* Guest home — remaining section backgrounds + layout (CDN; theme breaks url(../...)) */
section.number-section,
.marketing-guest-home section.number-section {
  position: relative;
  overflow: hidden;
  background-color: #17091c;
}

section.number-section .number-section-bg,
.marketing-guest-home section.number-section .number-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

section.number-section .number-section__inner,
.marketing-guest-home section.number-section .number-section__inner {
  position: relative;
  z-index: 1;
}

/* Marketing pages — section inners: wider desktop side gutters (default info-container is 1.5rem total) */
@media (min-width: 1024px) {
  section.about-us .about-us__inner.info-container,
  .marketing-guest-home section.about-us .about-us__inner.info-container,
  section.number-section .number-section__inner.info-container,
  .marketing-guest-home
    section.number-section
    .number-section__inner.info-container,
  section.our-services .our-services__inner.info-container,
  .marketing-guest-home
    section.our-services
    .our-services__inner.info-container,
  section.testimonials .testimonials__inner.info-container,
  .marketing-guest-home
    section.testimonials
    .testimonials__inner.info-container,
  section.about-achievements .about-achievements__inner.info-container,
  .marketing-public-shell
    section.about-achievements
    .about-achievements__inner.info-container,
  section.content-split-section .content-split-section__inner.info-container,
  .marketing-public-shell
    section.content-split-section
    .content-split-section__inner.info-container,
  section.about-why-choose-us .about-why-choose-us__inner.info-container,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__inner.info-container,
  section.use-cases .use-cases__inner.info-container,
  .marketing-public-shell section.use-cases .use-cases__inner.info-container {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px);
  }

  section.hero-section--blog .blog-banner-wrap,
  .marketing-public-shell section.hero-section--blog .blog-banner-wrap,
  section.hero-section--service .blog-banner-wrap,
  .marketing-public-shell section.hero-section--service .blog-banner-wrap,
  section.blog-posts-section .blog-posts-section__inner,
  .marketing-public-shell section.blog-posts-section .blog-posts-section__inner,
  section.service-platform-tabs .service-platform-tabs__inner.info-container,
  .marketing-public-shell
    section.service-platform-tabs
    .service-platform-tabs__inner.info-container,
  section.service-toolbar-section .service-toolbar-section__inner,
  .marketing-public-shell
    section.service-toolbar-section
    .service-toolbar-section__inner,
  section.service-catalog-section .service-catalog-section__inner,
  .marketing-public-shell
    section.service-catalog-section
    .service-catalog-section__inner {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px);
    max-width: 1600px;
  }

  section.contact-channels-section .contact-channels-section__inner,
  .marketing-public-shell
    section.contact-channels-section
    .contact-channels-section__inner {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px);
    max-width: 1600px;
  }

  section.contact-social-follow-section .contact-social-follow__inner,
  .marketing-public-shell
    section.contact-social-follow-section
    .contact-social-follow__inner {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1440px);
    max-width: 1440px;
  }

  section.why-choose-us .why-choose-us__frame,
  .marketing-guest-home section.why-choose-us .why-choose-us__frame {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px);
    max-width: 1600px;
  }

  section.faq-section > div.relative.z-10.mx-auto,
  .marketing-guest-home section.faq-section > div.relative.z-10.mx-auto,
  section.blog-section .blog-section__inner.info-container,
  .marketing-guest-home
    section.blog-section
    .blog-section__inner.info-container {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px) !important;
    max-width: 1600px !important;
  }

  [data-brand-cta="true"] > div.relative.z-10.mx-auto,
  .marketing-guest-home [data-brand-cta="true"] > div.relative.z-10.mx-auto {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1440px) !important;
    max-width: 1440px !important;
  }

  footer[data-footer] [data-footer-content="true"] {
    width: min(100% - clamp(4rem, 10vw, 12rem), 1600px) !important;
    max-width: 1600px !important;
  }
}

section.testimonials,
.marketing-guest-home section.testimonials {
  position: relative;
  overflow: hidden;
  background-color: #0c050f;
}

section.testimonials .testimonials__bg,
.marketing-guest-home section.testimonials .testimonials__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

section.testimonials .testimonials__bg-image,
.marketing-guest-home section.testimonials .testimonials__bg-image {
  position: absolute;
  inset: 0;
  object-fit: cover;
  object-position: right center;
  width: 100%;
  height: 100%;
  display: block;
}

section.advantages,
.marketing-guest-home section.advantages {
  position: relative;
  overflow: hidden;
  background-color: #110816;
  background-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/section-bg-fill.webp");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

section.advantages .advantages__shell,
section.advantages .advantages__frame,
.marketing-guest-home section.advantages .advantages__shell,
.marketing-guest-home section.advantages .advantages__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

section.advantages .advantages__frame,
.marketing-guest-home section.advantages .advantages__frame {
  width: min(100% - 2rem, 100rem);
  max-width: 100rem;
  margin-inline: auto;
}

section.advantages .advantages__header,
.marketing-guest-home section.advantages .advantages__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

section.advantages .advantages__stat::before,
.marketing-guest-home section.advantages .advantages__stat::before {
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/advantages/stat-badge.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/icons/advantages/stat-badge.svg");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

section.advantages .advantages__card-pattern,
.marketing-guest-home section.advantages .advantages__card-pattern {
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg");
  -webkit-mask-size: 30rem 30rem;
  mask-size: 30rem 30rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

@media (min-width: 1024px) {
  .marketing-guest-home section.advantages {
    overflow: visible;
  }

  .marketing-guest-home section.advantages .advantages__list-panel {
    overflow: visible;
  }

  .marketing-guest-home .advantages__nav {
    pointer-events: auto;
    z-index: 15;
  }

  .marketing-guest-home .advantages__nav-btn {
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }
}

section.payment-methods,
.marketing-guest-home section.payment-methods {
  position: relative;
  overflow: hidden;
  background-color: #16081d;
}

section.payment-methods .payment-methods__shell,
.marketing-guest-home section.payment-methods .payment-methods__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

section.payment-methods .payment-methods__pattern,
.marketing-guest-home section.payment-methods .payment-methods__pattern {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 40rem;
  height: 40rem;
  top: -14.9375rem;
  right: -17.875rem;
}

section.payment-methods .payment-methods__frame,
.marketing-guest-home section.payment-methods .payment-methods__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
  width: 100%;
  margin-inline: auto;
}

section.payment-methods .payment-methods__header,
.marketing-guest-home section.payment-methods .payment-methods__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Live orbit diagram only — no tunnel-visual.webp plate (baked purple fill) */
.marketing-guest-home
  section.payment-methods
  .payment-methods__diagram-fallback,
.marketing-guest-home
  section.payment-methods
  img.payment-methods__diagram-fallback {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.marketing-guest-home section.payment-methods .payment-methods__diagram,
.marketing-guest-home section.payment-methods .payment-methods__diagram-canvas,
.marketing-guest-home section.payment-methods .payment-methods__diagram-scaler,
.marketing-guest-home section.payment-methods .payment-methods__wing,
.marketing-guest-home section.payment-methods .payment-methods__wing-mirror,
.marketing-guest-home section.payment-methods .payment-methods__hub {
  background: transparent !important;
  background-color: transparent !important;
}

.marketing-guest-home section.payment-methods .payment-methods__diagram-canvas {
  display: block !important;
}

.marketing-guest-home section.payment-methods .payment-methods__diagram {
  aspect-ratio: 1570 / 387;
  width: 100%;
  max-width: 98.125rem;
  margin-inline: auto;
  height: auto;
}

@media (max-width: 1279px) {
  .marketing-guest-home section.payment-methods .payment-methods__diagram {
    aspect-ratio: 1570 / 387;
    height: auto;
  }
}

@media (min-width: 768px) {
  .marketing-guest-home
    section.payment-methods
    .payment-methods__diagram-scaler {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 36px;
    width: 1570px;
    height: 387px;
  }

  .marketing-guest-home section.payment-methods .payment-methods__wing,
  .marketing-guest-home section.payment-methods .payment-methods__wing-mirror {
    flex: 0 0 624px;
    width: 624px;
    height: 387px;
    position: relative;
  }

  .marketing-guest-home section.payment-methods .payment-methods__hub {
    flex: 0 0 auto;
    position: relative;
  }

  .marketing-guest-home section.payment-methods .payment-methods__bubble-flip {
    position: absolute;
  }

  .marketing-guest-home
    section.payment-methods
    .payment-methods__wing
    > .payment-methods__bubble {
    position: absolute;
  }

  .marketing-guest-home section.payment-methods .payment-methods__wing-rings,
  .marketing-guest-home
    section.payment-methods
    .payment-methods__wing-rings.tunnel-ring,
  .marketing-guest-home
    section.payment-methods
    svg.payment-methods__wing-rings {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    overflow: visible;
  }
}

section.pricing,
.marketing-guest-home section.pricing {
  position: relative;
  overflow: hidden;
  background-color: #120916;
}

section.pricing .pricing__shell,
section.pricing .pricing__frame,
.marketing-guest-home section.pricing .pricing__shell,
.marketing-guest-home section.pricing .pricing__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
}

section.pricing .pricing__glow,
section.pricing .pricing__pattern,
section.pricing .pricing__wave,
.marketing-guest-home section.pricing .pricing__glow,
.marketing-guest-home section.pricing .pricing__pattern,
.marketing-guest-home section.pricing .pricing__wave {
  position: absolute;
  pointer-events: none;
}

section.pricing .pricing__shell,
.marketing-guest-home section.pricing .pricing__shell {
  z-index: 1;
}

section.pricing .pricing__header,
.marketing-guest-home section.pricing .pricing__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* One pricing visual: live browser mockup only (no browser-visual.webp under it) */
.marketing-guest-home section.pricing .pricing__visual-fallback,
.marketing-guest-home section.pricing img.pricing__visual-fallback {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.marketing-guest-home section.pricing .pricing__browser {
  display: block !important;
}

@media (max-width: 767px) {
  .marketing-guest-home section.pricing .pricing__visual {
    container-type: inline-size;
    width: 100%;
    max-width: 50rem;
    margin-inline: auto;
    height: calc(35.75rem * (100cqi / 50rem));
    overflow: hidden;
  }

  .marketing-guest-home section.pricing .pricing__browser {
    width: 50rem;
    height: 35.75rem;
    transform: scale(calc(100cqi / 50rem));
    transform-origin: top left;
  }
}

/* Marketing footer: star-fall backdrop, watermark, no bottom gap (guest home / public chrome) */
html:has(.marketing-guest-home),
html:has(footer[data-footer]) {
  background-color: #120615;
}

body:has(.marketing-guest-home),
body:has(footer[data-footer]) {
  background-color: #120615 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.marketing-guest-home {
  margin-bottom: 0;
  padding-bottom: 0;
}

.marketing-guest-home > .flex.min-h-full {
  min-height: 0;
}

.marketing-guest-home [data-brand-cta="true"] {
  margin-bottom: 0;
}

footer[data-footer] {
  position: relative;
  background-color: #120615 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  isolation: isolate;
  min-height: 620px;
}

@media (min-width: 48rem) {
  footer[data-footer] {
    min-height: 680px;
  }
}

@media (min-width: 64rem) {
  footer[data-footer] {
    min-height: var(--footer-artboard-h, 756px);
  }
}

footer[data-footer] [data-footer-backdrop="true"] {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background-color: #120615;
}

/* Desktop: full-bleed star-fall artboard (convert index.html inline + object-cover) */
footer[data-footer] .footer-backdrop-image {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}

@media (max-width: 1023px) {
  footer[data-footer] .footer-backdrop-image {
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

@media (max-width: 767px) {
  footer[data-footer] .footer-backdrop-image {
    object-position: center 88% !important;
  }
}

footer[data-footer] [data-footer-bottom="true"] {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
}

footer[data-footer] [data-footer-content="true"] {
  position: relative;
  z-index: 20;
}

footer[data-footer] .footer-watermark-zone {
  overflow: visible !important;
}

footer[data-footer] .footer-bars-layer {
  pointer-events: none;
}

/* Footer glass stripes — convert index (utilities blur + extra.css frost) */
footer[data-footer] .footer-glass-bar {
  -webkit-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: linear-gradient(
    #ffffff0e 0%,
    #ffffff05 50%,
    #00000014 100%
  ) !important;
  border-block: 1px solid #ffffff09 !important;
  box-shadow:
    inset 0 1px #ffffff0a,
    inset 0 -1px #0000001f !important;
}

@media (min-width: 1024px) {
  footer[data-footer] [data-footer-bars="watermark"] .footer-glass-bar {
    height: 33.2954%;
    top: auto;
  }

  footer[data-footer]
    [data-footer-bars="watermark"]
    .footer-glass-bar[data-bar-index="0"] {
    bottom: 66.7046%;
  }

  footer[data-footer]
    [data-footer-bars="watermark"]
    .footer-glass-bar[data-bar-index="1"] {
    bottom: 46.0206%;
  }

  footer[data-footer]
    [data-footer-bars="watermark"]
    .footer-glass-bar[data-bar-index="2"] {
    bottom: 24.832%;
  }

  footer[data-footer]
    [data-footer-bars="watermark"]
    .footer-glass-bar[data-bar-index="3"] {
    bottom: 4.14801%;
  }

  footer[data-footer]
    [data-footer-bars="watermark"]
    .footer-glass-bar[data-bar-index="4"] {
    bottom: -17.0363%;
  }
}

/* One bar set per breakpoint: watermark (lg+) OR artboard (below lg) */
@media (min-width: 64rem) {
  footer[data-footer] > .lg\:hidden,
  footer[data-footer] [data-footer-bars="artboard"] {
    display: none !important;
  }

  footer[data-footer] [data-footer-bars="watermark"].hidden.lg\:block {
    display: block !important;
  }
}

@media (max-width: 63.999rem) {
  footer[data-footer] [data-footer-bars="watermark"] {
    display: none !important;
  }
}

footer[data-footer] .text-footer-watermark {
  background-image: linear-gradient(
    94.91deg,
    #f5b8ff 9.35%,
    #d6c8ff 88.44%
  ) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

footer[data-footer] .text-footer-brand {
  background-image: linear-gradient(
    94.74deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  ) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

footer[data-footer] .footer-watermark-text {
  font-family: "Monda", var(--font-monda, system-ui), sans-serif !important;
  font-weight: 700 !important;
}

/* Footer content — panel theme beats @layer utilities (layout, visibility, link colors) */
@media (min-width: 64rem) {
  footer[data-footer] [data-footer-content="true"] > .grid.lg\:flex {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
  }

  footer[data-footer] [data-footer-content="true"] > .grid > .col-span-2 {
    grid-column: auto !important;
  }

  footer[data-footer] [data-footer-content="true"] .lg\:w-\[351px\] {
    width: 351px !important;
  }

  footer[data-footer] [data-footer-content="true"] .lg\:w-\[160px\] {
    width: 160px !important;
  }

  footer[data-footer] [data-footer-content="true"] .lg\:w-\[280px\] {
    width: 280px !important;
  }

  footer[data-footer] [data-footer-content="true"] .lg\:max-w-\[280px\] {
    max-width: 280px !important;
  }

  footer[data-footer] [data-footer-content="true"] .lg\:shrink-0 {
    flex-shrink: 0 !important;
  }
}

@media (max-width: 63.999rem) {
  footer[data-footer] [data-footer-content="true"] > .grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
  }

  footer[data-footer] [data-footer-content="true"] > .grid > .col-span-2 {
    grid-column: 1 / -1 !important;
  }
}

footer[data-footer] [data-footer-content="true"] {
  pointer-events: auto;
}

footer[data-footer] [data-footer-content="true"] a {
  text-decoration: none !important;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

footer[data-footer] [data-footer-content="true"] a[class*="text-[#ebecef]"],
footer[data-footer] [data-footer-content="true"] ul a {
  color: #ebecef !important;
}

footer[data-footer]
  [data-footer-content="true"]
  a[class*="text-[#ebecef]"]:hover,
footer[data-footer] [data-footer-content="true"] ul a:hover {
  opacity: 0.8;
}

footer[data-footer] [data-footer-content="true"] span[class*="text-[#ebecef]"] {
  color: #ebecef !important;
}

footer[data-footer] a.text-footer-brand.font-logo {
  display: inline-block;
  background-image: linear-gradient(
    94.74deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  ) !important;
  background-size: 100% 100% !important;
  background-position: 0% !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: none !important;
}

footer[data-footer] a.text-footer-brand.font-logo:hover {
  opacity: 0.88;
}

footer[data-footer] .footer-copyright-bar {
  box-sizing: border-box;
  height: var(--footer-copyright-h);
  min-height: var(--footer-copyright-h);
  margin-top: var(--footer-copyright-offset, 0);
  padding: var(--footer-copyright-pad);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background-color: var(--footer-copyright-surface, #ffffff12) !important;
  border-radius: 100px 1000px;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  pointer-events: auto;
}

footer[data-footer] .footer-copyright-text {
  color: var(--footer-copyright-text, #eac8ff) !important;
  font-size: var(--footer-copyright-size);
  font-weight: 500;
  text-align: center;
}

body:has(.marketing-guest-home) > div.relative.z-10 {
  margin-bottom: 0;
  padding-bottom: 0;
}

section.global-reach,
.marketing-guest-home section.global-reach {
  position: relative;
  overflow: hidden;
  background-color: #17091c;
}

section.global-reach .global-reach__shell,
.marketing-guest-home section.global-reach .global-reach__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
}

section.global-reach .global-reach__pattern,
.marketing-guest-home section.global-reach .global-reach__pattern {
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  position: absolute;
  width: 60rem;
  height: 60rem;
  top: -22.9375rem;
  left: calc(50% + 20.875rem);
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/global-reach/bg-pattern-mask.svg");
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/global-reach/bg-pattern-mask.svg");
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-size: 60rem 60rem;
  mask-size: 60rem 60rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

section.global-reach .global-reach__pattern-inner,
.marketing-guest-home section.global-reach .global-reach__pattern-inner {
  width: 59.375rem;
  height: 59.375rem;
  position: absolute;
  top: 0.3125rem;
  left: 0.3125rem;
}

section.global-reach .global-reach__pattern-inner img,
.marketing-guest-home section.global-reach .global-reach__pattern-inner img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

section.global-reach .global-reach__header,
.marketing-guest-home section.global-reach .global-reach__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.marketing-guest-home .faq-section,
.marketing-guest-home .blog-section {
  position: relative;
  overflow: hidden;
}

.marketing-guest-home .faq-section > .pointer-events-none.absolute,
.marketing-guest-home .blog-section > .pointer-events-none.absolute {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Blog section — panel Bootstrap .hidden beats @layer utilities (xl:flex / lg:block) */
.marketing-guest-home section.blog-section,
section.blog-section {
  background-color: var(--blog-section-bg, #110816);
}

.marketing-guest-home section.blog-section .blog-card,
section.blog-section .blog-card {
  background-image: var(
    --gradient-blog-card,
    linear-gradient(180deg, #1c0926 0%, #36094f2e 100%)
  );
}

@media (min-width: 64rem) {
  .marketing-guest-home
    section.blog-section
    .blog-section-icon.hidden.lg\:block,
  section.blog-section .blog-section-icon.hidden.lg\:block {
    display: block !important;
  }
}

@media (min-width: 80rem) {
  .marketing-guest-home
    section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.hidden.xl\:flex,
  section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.hidden.xl\:flex,
  .marketing-guest-home
    section.blog-section
    .blog-section__inner
    > .relative.z-10.hidden.xl\:flex,
  section.blog-section .blog-section__inner > .relative.z-10.hidden.xl\:flex {
    display: flex !important;
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.25rem;
  }

  .marketing-guest-home
    section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.w-full.xl\:hidden,
  section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.w-full.xl\:hidden,
  .marketing-guest-home
    section.blog-section
    .blog-section__inner
    > .relative.z-10.w-full.xl\:hidden,
  section.blog-section .blog-section__inner > .relative.z-10.w-full.xl\:hidden {
    display: none !important;
  }
}

@media (max-width: 79.999rem) {
  .marketing-guest-home
    section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.hidden.xl\:flex,
  section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.hidden.xl\:flex,
  .marketing-guest-home
    section.blog-section
    .blog-section__inner
    > .relative.z-10.hidden.xl\:flex,
  section.blog-section .blog-section__inner > .relative.z-10.hidden.xl\:flex {
    display: none !important;
  }

  .marketing-guest-home
    section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.w-full.xl\:hidden,
  section.blog-section
    > .relative.z-10.mx-auto
    > .relative.z-10.w-full.xl\:hidden,
  .marketing-guest-home
    section.blog-section
    .blog-section__inner
    > .relative.z-10.w-full.xl\:hidden,
  section.blog-section .blog-section__inner > .relative.z-10.w-full.xl\:hidden {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
}

section.blog-section .blog-section__inner,
.marketing-guest-home section.blog-section .blog-section__inner {
  position: relative;
  z-index: 10;
  box-sizing: border-box;
}

section.blog-section [data-slot="carousel"],
.marketing-guest-home section.blog-section [data-slot="carousel"] {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow-x: clip;
}

section.blog-section [data-slot="carousel-content"],
.marketing-guest-home section.blog-section [data-slot="carousel-content"] {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

section.blog-section .blog-card h3,
.marketing-guest-home section.blog-section .blog-card h3 {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

section.blog-section .blog-card__details,
.marketing-guest-home section.blog-section .blog-card__details {
  margin-top: 20px !important;
}

section.blog-posts-section .blog-card h2,
.marketing-public-shell section.blog-posts-section .blog-card h2 {
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

section.faq-section .faq-item [data-slot="accordion-trigger"],
.marketing-guest-home
  section.faq-section
  .faq-item
  [data-slot="accordion-trigger"] {
  font-size: 18px !important;
  line-height: normal;
}

@media (max-width: 767px) {
  section.faq-section .faq-item [data-slot="accordion-trigger"],
  .marketing-guest-home
    section.faq-section
    .faq-item
    [data-slot="accordion-trigger"] {
    font-size: 16px !important;
  }

  section.faq-section .faq-accordion-chevron,
  .marketing-guest-home section.faq-section .faq-accordion-chevron {
    width: 32px !important;
    height: 32px !important;
    padding: 6px !important;
    border-radius: 10px !important;
  }

  section.faq-section .faq-accordion-chevron img,
  .marketing-guest-home section.faq-section .faq-accordion-chevron img {
    width: 14px !important;
    height: 8px !important;
  }
}

.marketing-guest-home [data-brand-cta="true"] .brand-cta-card {
  background-image: linear-gradient(
    180deg,
    #420f5c99 5.761%,
    #8e69ff36 116.46%
  );
}

/* Brand CTA title — Parkinsans + one scale (panel overrides Tailwind font-heading / text-[22px]) */
[data-brand-cta="true"] .brand-cta-card h2.font-heading,
.marketing-guest-home [data-brand-cta="true"] .brand-cta-card h2.font-heading {
  --brand-cta-title-size: clamp(1.375rem, 0.85rem + 3.2vw, 3rem);
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: var(--brand-cta-title-size) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  line-height: 1.35 !important;
  color: #efedf1 !important;
}

[data-brand-cta="true"] .brand-cta-card h2.font-heading span,
[data-brand-cta="true"] .brand-cta-card h2.font-heading .text-metallic-sheen,
.marketing-guest-home
  [data-brand-cta="true"]
  .brand-cta-card
  h2.font-heading
  span,
.marketing-guest-home
  [data-brand-cta="true"]
  .brand-cta-card
  h2.font-heading
  .text-metallic-sheen {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

@media (min-width: 1024px) {
  [data-brand-cta="true"] .brand-cta-card h2.font-heading,
  .marketing-guest-home
    [data-brand-cta="true"]
    .brand-cta-card
    h2.font-heading {
    --brand-cta-title-size: 3rem;
    letter-spacing: 0.01em !important;
  }
}

@media (min-width: 320px) and (max-width: 440px) {
  [data-brand-cta="true"] .brand-cta-card h2.font-heading,
  .marketing-guest-home
    [data-brand-cta="true"]
    .brand-cta-card
    h2.font-heading {
    --brand-cta-title-size: 26px;
  }
}

/* Testimonials header — centered stack (panel CSS beats @layer utilities) */
section.testimonials .testimonials__inner,
.marketing-guest-home section.testimonials .testimonials__inner {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
  position: relative;
}

section.testimonials .testimonials__header,
.marketing-guest-home section.testimonials .testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.125rem;
  width: min(100%, 62.25rem);
  max-width: 100%;
  margin-inline: auto;
}

section.testimonials .testimonials__header .section-badge,
.marketing-guest-home
  section.testimonials
  .testimonials__header
  .section-badge {
  align-self: center;
  margin-inline: auto;
}

section.testimonials .testimonials__title,
.marketing-guest-home section.testimonials .testimonials__title {
  text-align: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
}

section.testimonials .testimonials__description,
.marketing-guest-home section.testimonials .testimonials__description {
  text-align: center;
  max-width: 62.25rem;
  width: 100%;
  margin: 0 auto;
}

section.testimonials .testimonials__panel,
.marketing-guest-home section.testimonials .testimonials__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2rem, 1.5rem + 2vw, 3.75rem);
  width: 100%;
}

section.testimonials .testimonials__tab-shell,
.marketing-guest-home section.testimonials .testimonials__tab-shell {
  margin-inline: auto;
}

/* Testimonials video card — play control centered (panel button resets) */
section.testimonials .testimonials__video-card,
.marketing-guest-home section.testimonials .testimonials__video-card {
  position: relative;
  isolation: isolate;
}

section.testimonials .testimonials__play,
.marketing-guest-home section.testimonials .testimonials__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.934rem;
  height: 2.934rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

section.testimonials .testimonials__play-glass,
.marketing-guest-home section.testimonials .testimonials__play-glass {
  pointer-events: none;
  z-index: 0;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
  background: #ffffff24;
}

section.testimonials .testimonials__play-icon,
.marketing-guest-home section.testimonials .testimonials__play-icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Testimonials customer quote cards (panel resets flex / article styles) */
section.testimonials .testimonials__grid,
.marketing-guest-home section.testimonials .testimonials__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  section.testimonials .testimonials__grid,
  .marketing-guest-home section.testimonials .testimonials__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem;
  }
}

@media (min-width: 1100px) {
  section.testimonials .testimonials__grid,
  .marketing-guest-home section.testimonials .testimonials__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(0.7rem, 1.1vw, 1.666rem);
  }
}

section.testimonials .testimonials__quote-card,
.marketing-guest-home section.testimonials .testimonials__quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 20rem;
  padding: 1.25rem;
  border-radius: 1.1175rem;
  background: #ffffff0a;
  border: 0.6px solid #d18dfa47;
  overflow: hidden;
  aspect-ratio: auto;
  width: 100%;
  max-width: 23.75rem;
  position: relative;
}

@media (min-width: 1100px) {
  section.testimonials .testimonials__quote-card,
  .marketing-guest-home section.testimonials .testimonials__quote-card {
    justify-self: center;
  }
}

@media (max-width: 767px) {
  section.testimonials .testimonials__panel,
  .marketing-guest-home section.testimonials .testimonials__panel {
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  section.testimonials .testimonials__grid,
  .marketing-guest-home section.testimonials .testimonials__grid {
    --testimonials-card-width: min(20rem, calc(100% - 1.5rem));
    --testimonials-track-pad: max(
      0.75rem,
      calc((100% - var(--testimonials-card-width)) / 2)
    );
    display: flex !important;
    grid-template-columns: unset !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
    gap: 1rem !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: var(--testimonials-track-pad) !important;
    padding-inline: var(--testimonials-track-pad) !important;
    scrollbar-width: none !important;
  }

  section.testimonials .testimonials__grid::-webkit-scrollbar,
  .marketing-guest-home
    section.testimonials
    .testimonials__grid::-webkit-scrollbar {
    display: none !important;
  }

  section.testimonials .testimonials__video-card,
  .marketing-guest-home section.testimonials .testimonials__video-card,
  section.testimonials .testimonials__quote-card,
  .marketing-guest-home section.testimonials .testimonials__quote-card {
    flex: 0 0 var(--testimonials-card-width) !important;
    width: var(--testimonials-card-width) !important;
    max-width: 23.75rem !important;
    scroll-snap-align: center !important;
    margin-inline: 0 !important;
  }

  section.testimonials .testimonials__grid.testimonials-swiper,
  .marketing-guest-home
    section.testimonials
    .testimonials__grid.testimonials-swiper {
    display: block !important;
    overflow: hidden !important;
    padding-inline: 0 !important;
    scroll-padding-inline: 0 !important;
    scroll-snap-type: none !important;
    gap: 0 !important;
  }

  section.testimonials #testimonials-panel-video.testimonials-swiper,
  .marketing-guest-home
    section.testimonials
    #testimonials-panel-video.testimonials-swiper {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .testimonials-swiper .swiper-slide {
    width: min(20rem, calc(100% - 1.5rem)) !important;
    height: auto;
    box-sizing: border-box;
  }

  .testimonials-swiper .swiper-slide > .testimonials__quote-card,
  .testimonials-swiper .swiper-slide > .testimonials__video-card {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    margin-inline: 0 !important;
  }
}

section.testimonials .testimonials__rating--quote,
.marketing-guest-home section.testimonials .testimonials__rating--quote {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  align-self: flex-start;
  color: #fff;
  background: #ffffff1a;
  border-radius: 0.42rem;
  padding: 0.42rem 0.56rem;
  font-size: 0.838rem;
  font-weight: 700;
  line-height: normal;
}

section.testimonials .testimonials__quote-text,
.marketing-guest-home section.testimonials .testimonials__quote-text {
  flex: 1 1 auto;
  margin: 1.25rem 0;
  color: #ebecef;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
}

section.testimonials .testimonials__person--quote,
.marketing-guest-home section.testimonials .testimonials__person--quote {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.56rem;
  margin-top: auto;
}

section.testimonials .testimonials__person-copy,
.marketing-guest-home section.testimonials .testimonials__person-copy {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

section.testimonials .testimonials__person-name-row,
.marketing-guest-home section.testimonials .testimonials__person-name-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;
}

section.testimonials .testimonials__person-name,
.marketing-guest-home section.testimonials .testimonials__person-name {
  margin: 0;
  color: #fff;
  font-size: 0.978rem;
  font-weight: 700;
  line-height: normal;
}

section.testimonials .testimonials__person-role,
.marketing-guest-home section.testimonials .testimonials__person-role {
  margin: 0;
  color: #dfe0e4;
  font-size: 0.838rem;
  font-weight: 500;
  line-height: 1.5;
}

section.testimonials .testimonials__avatar,
.marketing-guest-home section.testimonials .testimonials__avatar {
  flex-shrink: 0;
  width: 3.5625rem;
  height: 3.5625rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

section.testimonials .testimonials__verified,
.marketing-guest-home section.testimonials .testimonials__verified {
  flex-shrink: 0;
  width: 1.257rem;
  height: 1.257rem;
  display: block;
}

section.testimonials .testimonials__rating-star,
.marketing-guest-home section.testimonials .testimonials__rating-star {
  width: 1.1175rem;
  height: 1.1175rem;
  display: block;
}

/* Testimonials tabs — shine clipped inside active pill (panel button resets) */
section.testimonials .testimonials__tab,
.marketing-guest-home .testimonials__tab {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: #fff;
  cursor: pointer;
  border-radius: 0.5rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

section.testimonials .testimonials__tab--active,
.marketing-guest-home .testimonials__tab--active {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  border-color: transparent;
  background-image: var(
    --gradient-hero-cta,
    linear-gradient(120.46deg, #ca23e7 0.37%, #98a7ffbf 99.18%)
  );
}

section.testimonials .testimonials__tab:not(.testimonials__tab--active),
.marketing-guest-home .testimonials__tab:not(.testimonials__tab--active) {
  background: #ffffff0f;
}

section.testimonials .testimonials__tab .button-shine,
.marketing-guest-home .testimonials__tab .button-shine {
  pointer-events: none;
  z-index: 1;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0000, #fffc, #0000);
  animation: button-shine-sweep 2s linear infinite;
  transform: translateX(-100%);
  will-change: transform;
}

section.testimonials .testimonials__tab-content,
.marketing-guest-home .testimonials__tab-content {
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  section.testimonials .testimonials__tab .button-shine,
  .marketing-guest-home .testimonials__tab .button-shine {
    animation: none;
    display: none;
  }
}

/* Hero background layers — scale/rotate around each shape, never the page */
.hero-section-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-section-bg > svg.hero-section-bg-image,
.hero-section-bg > img.hero-section-bg-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

.hero-section-bg .glow-blob,
.hero-section-bg .light-streak,
.hero-section-bg .dot-field,
.hero-section [data-hero-beam] {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes number-section-icon-float {
  0%,
  100% {
    transform: translate3d(0, 7px, 0);
  }

  50% {
    transform: translate3d(0, -7px, 0);
  }
}

.number-section__icon-glyph {
  will-change: transform;
  animation: number-section-icon-float 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .number-section__icon-glyph {
    animation: none;
  }
}

.working-process__diagram-canvas::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 220px 180px at 50.1% 9%,
      rgba(202, 35, 231, 0.14),
      transparent 72%
    ),
    radial-gradient(
      ellipse 160px 120px at 14.4% 25.5%,
      rgba(233, 112, 255, 0.06),
      transparent 70%
    ),
    radial-gradient(
      ellipse 160px 120px at 85.6% 25.5%,
      rgba(152, 167, 255, 0.06),
      transparent 70%
    );
  animation: working-process-field-pulse 4.5s ease-in-out infinite;
}

.working-process__wire-flow {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  isolation: isolate;
  -webkit-mask-image: radial-gradient(
    circle at 50.04% 8.99%,
    transparent 0,
    transparent 4.46%,
    #000 5.69%
  );
  mask-image: radial-gradient(
    circle at 50.04% 8.99%,
    transparent 0,
    transparent 4.46%,
    #000 5.69%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Static wires stay visible as the base track; the SVG dashes animate on top of them */
.working-process__diagram-canvas:has(.working-process__wire-flow)
  .working-process__line {
  opacity: 0.85;
}

.working-process__wire-flow-path {
  fill: none;
  stroke: url(#working-process-wire-flow-gradient);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 5 3 1 81;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 0 6px rgba(233, 112, 255, 0.9))
    drop-shadow(0 0 14px rgba(202, 35, 231, 0.65));
  animation: working-process-wire-flow 3.2s linear infinite;
}

.working-process__wire-flow-path--aura {
  stroke: #ca23e7;
  stroke-width: 7;
  opacity: 0.28;
  stroke-dasharray: 18 82;
  filter: url(#working-process-electric-glow);
  animation: working-process-wire-flow-aura 3.2s linear infinite;
}

.working-process__wire-flow-path--account {
  animation-duration: 3s;
}

.working-process__wire-flow-path--funds {
  animation-duration: 3s;
  animation-delay: -0.75s;
}

.working-process__wire-flow-path--service {
  animation-duration: 3.4s;
  animation-delay: -1.1s;
}

.working-process__wire-flow-path--order {
  animation-duration: 3.4s;
  animation-delay: -1.7s;
}

.working-process__wire-flow-path--aura.working-process__wire-flow-path--account {
  animation-duration: 3s;
}

.working-process__wire-flow-path--aura.working-process__wire-flow-path--funds {
  animation-duration: 3s;
  animation-delay: -0.75s;
}

.working-process__wire-flow-path--aura.working-process__wire-flow-path--service {
  animation-duration: 3.4s;
  animation-delay: -1.1s;
}

.working-process__wire-flow-path--aura.working-process__wire-flow-path--order {
  animation-duration: 3.4s;
  animation-delay: -1.7s;
}

.working-process__electric-nodes {
  pointer-events: none;
}

.working-process__electric-node {
  fill: url(#working-process-electric-node-gradient);
  filter: drop-shadow(0 0 6px rgba(233, 112, 255, 0.95));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: working-process-node-spark 3.2s ease-in-out infinite;
}

.working-process__electric-node--hub {
  animation-name: working-process-hub-node-spark;
  animation-duration: 2.4s;
}

.working-process__electric-node--account {
  animation-delay: 0.1s;
}

.working-process__electric-node--funds {
  animation-delay: 0.45s;
}

.working-process__electric-node--service {
  animation-delay: 0.7s;
}

.working-process__electric-node--order {
  animation-delay: 1s;
}

.working-process__hub-ring {
  animation: working-process-ring-electric 3.2s ease-in-out infinite;
}

.working-process__hub-ring--1 {
  animation-delay: 0s;
}

.working-process__hub-ring--2 {
  animation-delay: 0.12s;
}

.working-process__hub-ring--3 {
  animation-delay: 0.24s;
}

.working-process__hub-ring--4 {
  animation-delay: 0.36s;
}

.working-process__hub-core {
  animation: working-process-hub-electric 2.4s ease-in-out infinite;
}

.working-process__hub-core img,
.why-choose-us__hub-core img {
  transform-origin: center;
  animation: working-process-hub-absorb 2.4s ease-in-out infinite;
}

.contact-channels-grid__hub {
  position: relative;
}

.contact-channels-grid__hub-icon {
  position: absolute;
  left: 41.4211%;
  top: 38.7424%;
  width: 16.9844%;
  height: 21.2982%;
  transform-origin: center;
  pointer-events: none;
  animation: working-process-hub-absorb 2.4s ease-in-out infinite;
}

.contact-channels-grid__hub-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.working-process__step-icon {
  animation: working-process-icon-electric 3.2s ease-in-out infinite;
}

.working-process__step-icon--account {
  animation-delay: 0s;
}

.working-process__step-icon--funds {
  animation-delay: 0.4s;
}

.working-process__step-icon--service {
  animation-delay: 0.65s;
}

.working-process__step-icon--order {
  animation-delay: 0.95s;
}

.working-process__card-sparkles {
  animation: working-process-sparkle-shimmer 4s ease-in-out infinite;
}

.working-process__card--funds .working-process__card-sparkles {
  animation-delay: 0.5s;
}

.working-process__card--service .working-process__card-sparkles {
  animation-delay: 1s;
}

.working-process__card--order .working-process__card-sparkles {
  animation-delay: 1.5s;
}

/* Dash periods: 5+3+1+81=90 (wire), 18+82=100 (aura) — offset must match for seamless loop */
@keyframes working-process-wire-flow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -90;
  }
}

@keyframes working-process-wire-flow-aura {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -100;
  }
}

@keyframes working-process-field-pulse {
  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

@keyframes working-process-node-spark {
  0%,
  72%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }

  8%,
  18% {
    opacity: 1;
    transform: scale(1.35);
  }

  28% {
    opacity: 0.35;
    transform: scale(0.9);
  }
}

@keyframes working-process-hub-node-spark {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.85);
  }

  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}

@keyframes working-process-ring-electric {
  0%,
  100% {
    opacity: 0.5;
    filter: drop-shadow(0 0 2px rgba(202, 35, 231, 0.25));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(233, 112, 255, 0.75));
  }
}

@keyframes working-process-hub-absorb {
  0%,
  100% {
    transform: scale(0.9);
  }

  45%,
  55% {
    transform: scale(1.08);
  }
}

@keyframes working-process-hub-electric {
  0%,
  100% {
    box-shadow:
      0 0 0 0 rgba(202, 35, 231, 0.35),
      inset 0 0 18px rgba(202, 35, 231, 0.12);
  }

  45%,
  55% {
    box-shadow:
      0 0 24px 5px rgba(233, 112, 255, 0.55),
      0 0 48px 14px rgba(202, 35, 231, 0.28),
      inset 0 0 28px rgba(255, 255, 255, 0.14);
  }
}

@keyframes working-process-icon-electric {
  0%,
  68%,
  100% {
    box-shadow: 0 0 0 0 rgba(202, 35, 231, 0.2);
    filter: brightness(1);
  }

  12%,
  22% {
    box-shadow:
      0 0 16px 3px rgba(233, 112, 255, 0.55),
      0 0 32px 8px rgba(202, 35, 231, 0.3);
    filter: brightness(1.12);
  }
}

@keyframes working-process-sparkle-shimmer {
  0%,
  100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 2px rgba(202, 35, 231, 0.2));
  }

  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(233, 112, 255, 0.75));
  }
}

@media (max-width: 1099px) {
  .working-process__wire-flow,
  .working-process__diagram-canvas::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .working-process__diagram-canvas::after,
  .working-process__wire-flow-path,
  .working-process__electric-node,
  .working-process__hub-ring,
  .working-process__hub-core,
  .working-process__hub-core img,
  .why-choose-us__hub-core img,
  .contact-channels-grid__hub-icon,
  .working-process__step-icon,
  .working-process__card-sparkles {
    animation: none;
  }

  .working-process__wire-flow-path:not(.working-process__wire-flow-path--aura) {
    stroke-dasharray: none;
    opacity: 0.35;
  }

  .working-process__wire-flow-path--aura,
  .working-process__electric-node {
    opacity: 0;
  }
}

/* FAQ accordion panel animation */
.faq-accordion-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height 0.25s ease,
    opacity 0.25s ease;
}

.faq-accordion-panel.is-open {
  opacity: 1;
}

.faq-accordion-panel-inner {
  padding: 0 1rem 1rem;
  font-size: 13px;
  line-height: normal;
  color: var(--neutral-n40, #c4c4c4);
}

@media (min-width: 640px) {
  .faq-accordion-panel-inner {
    padding-inline: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .faq-accordion-panel-inner {
    font-size: 15px;
  }
}

/* Social dock transitions */
.about-us__social-icon-hover {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-us__social-icon-wiggle {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-us__social-tooltip {
  opacity: 0;
  transform: translateX(-50%) translateY(6px) scale(0.92);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}

.about-us__social-tooltip.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

@keyframes use-cases-play-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.use-cases__card-play-image {
  will-change: transform;
  animation: use-cases-play-spin 10s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .use-cases__card-play-image {
    animation: none;
  }
}

/* Blog + service pages — navbar + banner (no fixed 916px hero height) */
.hero-section--blog,
.hero-section--service {
  height: auto;
  min-height: 0;
  max-height: none;
  padding-top: 0;
}

@media (min-width: 1025px) {
  .hero-section--blog,
  .hero-section--service {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}

.hero-section--blog .hero-section-bg,
.hero-section--service .hero-section-bg {
  min-height: 100%;
  height: 100%;
  background-color: var(--brand-bg, #0b0718);
}

.hero-section--blog .hero-section-bg-image--blog,
.hero-section--service .hero-section-bg-image--blog {
  object-fit: cover;
  object-position: center top;
}

/* Service banner title is longer — allow wrap on desktop like blog mobile */
.hero-section--service .blog-banner__title {
  white-space: normal;
}

/* Service page — brand CTA matches blog page */
main:has(.hero-section--service) [data-brand-cta="true"] .brand-cta-card {
  background-image: var(--gradient-brand-cta-card);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow:
    inset 1.5px 1.5px #ffffff38,
    inset -1px -1px #8e69ff24,
    inset 0 0 0 1px #ffffff14;
}

main:has(.hero-section--service) [data-brand-cta="true"] .brand-cta-glow {
  -webkit-filter: blur(150px);
  filter: blur(150px);
  mix-blend-mode: plus-lighter;
}

/* Service page — platform tab buttons only */
.service-platform-tabs {
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-bottom: clamp(1.25rem, 1rem + 1vw, 2rem);
}

@media (min-width: 1024px) {
  .service-platform-tabs {
    padding-top: 90px;
  }
}

.service-platform-tabs__inner {
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
}

@media (max-width: 767px) {
  .our-services__tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.375rem;
  }

  .our-services__tab {
    padding: 0.4375rem 0.25rem;
    border-radius: 0.75rem;
  }

  .our-services__tab-icon-wrap {
    width: 32px;
    height: 32px;
  }

  .our-services__tab-frame {
    width: 32px;
    height: 32px;
  }

  .our-services__tab-icon {
    width: 18px;
    height: 18px;
  }

  /* Keep labels for screen readers; hide visually so tabs stay named */
  .our-services__tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Service page — catalog accordion (Figma 316:11826) */
.service-catalog-section {
  padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.service-catalog-section__inner {
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
}

.service-catalog-panels {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.service-catalog-panel[hidden] {
  display: none !important;
}

.service-catalog-panels[hidden] {
  display: none !important;
}

.service-table__row[hidden] {
  display: none;
}

.service-accordion-item[hidden] {
  display: none;
}

.service-catalog-empty {
  margin: 0;
  padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1rem;
  text-align: center;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.82);
}

.service-catalog-empty[hidden] {
  display: none !important;
}

.service-accordion {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.service-accordion-item {
  overflow: hidden;
  border-radius: 12px;
}

.service-accordion-item__heading {
  margin: 0;
}

.service-accordion-item__trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(
    156.68deg,
    rgba(202, 35, 231, 0.12) 0.37%,
    rgba(152, 167, 255, 0.09) 99.18%
  );
  color: #fff;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s ease;
}

.service-accordion-item__trigger:hover {
  opacity: 0.95;
}

.service-accordion-item__title-wrap {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
}

.service-accordion-item__icon {
  flex-shrink: 0;
  width: 31px;
  height: 30px;
  object-fit: contain;
}

.service-accordion-item__title {
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: #fff;
  min-width: 0;
}

.service-accordion-item__chevron {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: linear-gradient(
    96.12deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  transition: transform 0.25s ease;
}

.service-accordion-item__chevron img {
  display: block;
  width: 16px;
  height: 9px;
}

.service-accordion-item__chevron--open {
  transform: rotate(180deg);
}

.service-accordion-panel {
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition:
    height 0.3s ease,
    opacity 0.3s ease;
}

.service-accordion-panel.is-open {
  opacity: 1;
}

.service-accordion-panel-inner {
  padding-top: 24px;
}

.service-table {
  overflow: hidden;
  border-radius: 16px 16px 12px 12px;
  background: #281532;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.service-table__head,
.service-table__row {
  display: grid;
  grid-template-columns:
    90px minmax(200px, 1.6fr) repeat(4, minmax(90px, 1fr))
    126px;
  align-items: center;
  gap: 18px;
  padding: 16px 6px;
}

/* Panel /services often hides Average time — 6 cells, not 7 */
.service-table:not(:has(.service-table__cell--time)) .service-table__head,
.service-table:not(:has(.service-table__cell--time)) .service-table__row {
  grid-template-columns:
    90px minmax(200px, 1.6fr) repeat(3, minmax(90px, 1fr))
    126px;
}

.service-table__head {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    158.39deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
}

.service-table__head .service-table__cell {
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.service-table__row {
  border-bottom: 1px dashed #4f586d;
}

.service-table__row:last-child {
  border-bottom: 0;
}

.service-table__cell {
  min-width: 0;
  padding: 6px 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fafafb;
}

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

.service-table__cell--service.is-truncated {
  cursor: help;
}

.service-table__service-tooltip {
  z-index: 10050;
}

.service-table__cell--action {
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-table__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 12px 24px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(
    105.87deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  color: #fafafb;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-table__row-description {
  display: none;
}

.service-table__view-btn:hover {
  opacity: 0.92;
}

@media (max-width: 1023px) {
  .service-table {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(202, 35, 231, 0.55) rgba(255, 255, 255, 0.08);
  }

  .service-table::-webkit-scrollbar {
    height: 6px;
  }

  .service-table::-webkit-scrollbar-track {
    margin-inline: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
  }

  .service-table::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(202, 35, 231, 0.55);
  }

  .service-table__head,
  .service-table__row {
    min-width: 920px;
    grid-template-columns: 72px minmax(220px, 1.6fr) 96px 88px 88px 108px 118px;
    gap: 12px;
    padding: 12px 10px;
  }

  .service-table:not(:has(.service-table__cell--time)) .service-table__head,
  .service-table:not(:has(.service-table__cell--time)) .service-table__row {
    min-width: 820px;
    grid-template-columns: 72px minmax(220px, 1.6fr) 96px 88px 88px 118px;
  }

  .service-table__head .service-table__cell,
  .service-table__cell {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .service-accordion-item__trigger {
    gap: 12px;
    padding: 14px 12px;
  }

  .service-accordion-item__title-wrap {
    gap: 10px;
  }

  .service-accordion-item__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .service-table__head,
  .service-table__row {
    min-width: 860px;
    grid-template-columns: 64px minmax(200px, 1.6fr) 90px 80px 80px 100px 106px;
    gap: 10px;
    padding: 12px 8px;
  }

  .service-table:not(:has(.service-table__cell--time)) .service-table__head,
  .service-table:not(:has(.service-table__cell--time)) .service-table__row {
    min-width: 760px;
    grid-template-columns: 64px minmax(200px, 1.6fr) 90px 80px 80px 106px;
  }

  .service-table__head .service-table__cell,
  .service-table__cell {
    font-size: 13px;
  }

  .service-table__view-btn {
    min-height: 38px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Service page — filter + search toolbar (Figma 316:11773) */
.service-toolbar-section {
  position: relative;
  z-index: 30;
  padding-bottom: 0;
}

.service-toolbar-section__inner {
  width: min(calc(100% - 2rem), 1600px);
  margin-inline: auto;
}

.service-toolbar {
  position: relative;
  box-sizing: border-box;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  padding: 18px;
}

.service-toolbar::before {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(209, 129, 255, 0.2) 0%,
    rgba(255, 99, 190, 0.2) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.service-toolbar__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.service-toolbar__filter-wrap {
  position: relative;
  z-index: 2;
  flex: 0 1 min(420px, 44%);
  min-width: 0;
  max-width: min(420px, 44%);
}

.service-toolbar__filter-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  box-sizing: border-box;
  width: max(100%, min(280px, calc(100vw - 2rem)));
  min-width: 100%;
  max-width: min(480px, calc(100vw - 2rem));
  max-height: min(320px, calc(100vh - 220px));
  margin: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 35, 231, 0.55) rgba(255, 255, 255, 0.06);
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(202, 35, 231, 0.35);
  background: linear-gradient(
    156.68deg,
    rgba(28, 8, 38, 0.98) 0.37%,
    rgba(18, 12, 34, 0.98) 99.18%
  );
  box-shadow: 0 16px 40px rgba(8, 3, 14, 0.45);
}

.service-toolbar__filter-menu::-webkit-scrollbar {
  width: 8px;
}

.service-toolbar__filter-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.service-toolbar__filter-menu::-webkit-scrollbar-thumb {
  background: rgba(202, 35, 231, 0.45);
  border-radius: 8px;
}

.service-toolbar__filter-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(202, 35, 231, 0.65);
}

.service-toolbar__filter-menu[hidden] {
  display: none !important;
}

.service-toolbar__filter-menu-item {
  margin: 0;
  border-radius: 0;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.service-toolbar__filter-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.service-toolbar__filter-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.service-toolbar__filter-menu-item:only-child {
  border-radius: 8px;
}

.service-toolbar__filter-menu-item:hover,
.service-toolbar__filter-menu-item.is-active {
  background: rgba(202, 35, 231, 0.18);
}

.service-toolbar__filter-menu-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  cursor: pointer;
  transition: color 0.2s ease;
}

.service-toolbar__filter-menu-item:hover .service-toolbar__filter-menu-btn,
.service-toolbar__filter-menu-item.is-active .service-toolbar__filter-menu-btn {
  color: #fff;
}

.service-toolbar__filter {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 56px;
  padding: 10px 12px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(
    116.39deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-toolbar__filter:hover {
  opacity: 0.92;
}

.service-toolbar__filter-icon-wrap {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 7px;
  border-radius: 8px;
  background: #fff;
}

.service-toolbar__filter-icon {
  display: block;
  width: 24px;
  height: 24px;
}

.service-toolbar__filter-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.service-toolbar__filter-arrow {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 9px;
}

.service-toolbar__search {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  padding: 0 0 0 24px;
  border: 1px solid rgba(176, 79, 235, 0.62);
  border-radius: 12px;
  overflow: hidden;
}

.service-toolbar__search-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 12px;
  opacity: 0.4;
  background-image: url(../images/pages/service-page/search-input-placeholder-bg.webp);
  background-position: top left;
  background-size: 307.2px 307.2px;
  background-repeat: repeat;
  mix-blend-mode: plus-lighter;
}

.service-toolbar__search-input {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0 16px 0 0;
  border: none;
  background: transparent;
  color: #fff;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.service-toolbar__search-input::placeholder {
  color: #fff;
  opacity: 1;
}

.service-toolbar__search-input:focus,
.service-toolbar__search-input:focus-visible,
.service-toolbar__search-input:active {
  border: none;
  outline: none;
  box-shadow: none;
}

.service-toolbar__search-input::-webkit-search-cancel-button,
.service-toolbar__search-input::-webkit-search-decoration,
.service-toolbar__search-input::-webkit-search-results-button,
.service-toolbar__search-input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.service-toolbar__search-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 101px;
  height: 54px;
  margin-right: 0;
  padding: 12px 16px;
  border: 0;
  border-radius: 0 11px 11px 0;
  background: linear-gradient(
    101.35deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-toolbar__search-btn:hover {
  opacity: 0.92;
}

.service-toolbar__search-btn img {
  display: block;
  width: 24px;
  height: 25px;
}

@media (max-width: 767px) {
  .service-toolbar__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .service-toolbar__filter-wrap {
    flex: none;
    width: 100%;
    max-width: none;
  }

  .service-toolbar__filter {
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
  }

  .service-toolbar__filter-menu {
    width: 100%;
    max-width: none;
  }

  .service-toolbar__filter-label {
    font-size: 16px;
  }

  .service-toolbar__search {
    width: 100%;
    height: 56px;
    min-height: 56px;
    max-height: 56px;
    padding-left: 16px;
    flex: none;
  }

  .service-toolbar__search-input {
    font-size: 16px;
  }

  .service-toolbar__search-btn {
    width: 72px;
    height: 54px;
    min-height: 54px;
    max-height: 54px;
    padding: 0;
  }
}

/* Service page — view details modal (Figma 1116:46827) */
body.service-view-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.service-view-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.service-view-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.service-view-modal__backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(8, 3, 14, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  z-index: 0;
}

.service-view-modal__wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 648px);
  margin: auto;
  pointer-events: none;
}

.service-view-modal__wrap > * {
  pointer-events: auto;
}

.service-view-modal__dialog {
  position: relative;
  width: 100%;
  padding-top: 16px;
  transform: translateY(20px) scale(0.96);
  opacity: 0;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease;
}

.service-view-modal.is-open .service-view-modal__dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.service-view-modal__close {
  position: absolute;
  top: 0;
  right: -10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49px;
  height: 47px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(
    96.38deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-view-modal__close:hover {
  opacity: 0.92;
}

.service-view-modal__close img {
  display: block;
  width: 34px;
  height: 34px;
}

.service-view-modal__card {
  position: relative;
  max-height: calc(100dvh - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 24px;
  padding: 48px;
  background: linear-gradient(180deg, #302259 8.099%, #240a34 108.1%);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(202, 35, 231, 0.55) rgba(255, 255, 255, 0.08);
}

.service-view-modal__card::-webkit-scrollbar {
  width: 6px;
}

.service-view-modal__card::-webkit-scrollbar-track {
  margin: 12px 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.service-view-modal__card::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(202, 35, 231, 0.55);
}

.service-view-modal__card-bg {
  pointer-events: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.service-view-modal__card-pattern {
  position: absolute;
  top: -252px;
  left: -200px;
  width: 480px;
  height: 480px;
  opacity: 0.4;
  -webkit-mask-image: url(../images/pages/service-page/service-modal-pattern-mask.svg);
  mask-image: url(../images/pages/service-page/service-modal-pattern-mask.svg);
  -webkit-mask-size: 480px 480px;
  mask-size: 480px 480px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.service-view-modal__card-pattern-inner {
  position: absolute;
  inset: 0;
}

.service-view-modal__card-pattern-inner img {
  display: block;
  width: 480px;
  height: 480px;
  max-width: none;
}

.service-view-modal__card-glow {
  position: absolute;
  top: -147px;
  left: -29px;
  width: 143.985px;
  height: 300px;
  mix-blend-mode: plus-lighter;
}

.service-view-modal__card-glow img {
  position: absolute;
  inset: -15.12% -25.38% -13.93% -31.51%;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.service-view-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: min(100%, 531px);
  margin-inline: auto;
}

.service-view-modal__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 79px;
}

.service-view-modal__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  padding: 12px 24px;
  border-radius: 24px;
  background: linear-gradient(
    106.26deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  color: #fafafb;
  font-family: var(--font-monda, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.service-view-modal__title {
  width: 100%;
  margin: 0;
  text-align: center;
  color: #fafafb;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
}

.service-view-modal__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.service-view-modal__details {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  border: 0.3px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  background: linear-gradient(
    180deg,
    rgba(42, 7, 63, 0.5) 0%,
    rgba(160, 46, 229, 0.5) 100%
  );
  color: #fff;
  font-family: var(--font-monda, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.service-view-modal__details p {
  margin: 0;
}

.service-view-modal__details p + p {
  margin-top: 8px;
}

.service-view-modal__stats-wrap {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.service-view-modal__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 12px;
  align-items: start;
  justify-items: center;
  width: min(100%, 470px);
}

.service-view-modal__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 113px;
}

.service-view-modal__stat-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.service-view-modal__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 9px;
  border-radius: 30px;
  background: linear-gradient(91.18deg, #da32f7 9.35%, #8f6aff 88.44%);
}

.service-view-modal__stat-icon img {
  display: block;
}

.service-view-modal__stat-icon img[width="24"] {
  width: 24px;
  height: 24px;
}

.service-view-modal__stat-icon img[width="30"] {
  width: 30px;
  height: 30px;
}

.service-view-modal__stat-label {
  color: #fafafb;
  font-family: var(--font-monda, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

.service-view-modal__stat-value {
  color: #fafafb;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.2px;
  text-align: center;
}

.service-view-modal__buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(
    139.89deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
  color: #fafafb;
  font-family: var(--font-monda, "Monda", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.service-view-modal__buy:hover {
  opacity: 0.92;
  color: #fafafb;
}

.service-view-modal__buy img {
  display: block;
  width: 24px;
  height: 24px;
}

@media (max-width: 1023px) {
  .service-view-modal {
    align-items: center;
    justify-content: center;
    padding: 20px 12px;
  }

  .service-view-modal__wrap {
    width: min(100%, 560px);
    margin: auto;
  }

  .service-view-modal__card {
    max-height: calc(100dvh - 40px);
    padding: 36px 28px;
  }

  .service-view-modal__content {
    gap: 36px;
    width: 100%;
  }

  .service-view-modal__header {
    gap: 12px;
    min-height: 0;
  }

  .service-view-modal__badge {
    min-width: 96px;
    padding: 10px 20px;
    font-size: 14px;
  }

  .service-view-modal__title {
    font-size: 18px;
  }

  .service-view-modal__body {
    gap: 16px;
  }

  .service-view-modal__details {
    padding: 16px;
    border-radius: 16px;
    font-size: 14px;
  }

  .service-view-modal__details p + p {
    margin-top: 6px;
  }

  .service-view-modal__stats-wrap {
    gap: 20px;
  }

  .service-view-modal__stats {
    gap: 20px 10px;
    width: 100%;
  }

  .service-view-modal__stat {
    max-width: none;
    gap: 10px;
  }

  .service-view-modal__stat-icon {
    width: 52px;
    height: 52px;
    padding: 8px;
  }

  .service-view-modal__stat-icon img[width="24"] {
    width: 20px;
    height: 20px;
  }

  .service-view-modal__stat-icon img[width="30"] {
    width: 26px;
    height: 26px;
  }

  .service-view-modal__stat-label {
    font-size: 14px;
  }

  .service-view-modal__stat-value {
    font-size: 18px;
  }

  .service-view-modal__buy {
    min-height: 44px;
    padding: 10px 20px;
    font-size: 14px;
  }

  .service-view-modal__buy img {
    width: 20px;
    height: 20px;
  }

  .service-view-modal__close {
    width: 44px;
    height: 42px;
  }

  .service-view-modal__close img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 767px) {
  .service-view-modal {
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
  }

  .service-view-modal__wrap {
    width: min(100%, 648px);
    margin: auto;
  }

  .service-view-modal__dialog {
    padding-top: 12px;
  }

  .service-view-modal__card {
    max-height: calc(100dvh - 24px);
    padding: 24px 16px;
    border-radius: 20px;
  }

  .service-view-modal__content {
    gap: 24px;
  }

  .service-view-modal__header {
    gap: 10px;
  }

  .service-view-modal__badge {
    min-width: 88px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
  }

  .service-view-modal__title {
    font-size: 16px;
    line-height: 1.35;
  }

  .service-view-modal__body {
    gap: 14px;
  }

  .service-view-modal__details {
    padding: 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.45;
  }

  .service-view-modal__details p + p {
    margin-top: 6px;
  }

  .service-view-modal__stats-wrap {
    gap: 16px;
  }

  .service-view-modal__stats {
    gap: 16px 8px;
    width: 100%;
  }

  .service-view-modal__stat {
    max-width: none;
    gap: 8px;
  }

  .service-view-modal__stat-copy {
    gap: 4px;
  }

  .service-view-modal__stat-icon {
    width: 48px;
    height: 48px;
    padding: 7px;
  }

  .service-view-modal__stat-icon img[width="24"] {
    width: 18px;
    height: 18px;
  }

  .service-view-modal__stat-icon img[width="30"] {
    width: 24px;
    height: 24px;
  }

  .service-view-modal__stat-label {
    font-size: 13px;
  }

  .service-view-modal__stat-value {
    font-size: 16px;
  }

  .service-view-modal__buy {
    min-height: 42px;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13px;
  }

  .service-view-modal__buy img {
    width: 18px;
    height: 18px;
  }

  .service-view-modal__close {
    top: -2px;
    right: -2px;
    width: 40px;
    height: 38px;
  }

  .service-view-modal__close img {
    width: 24px;
    height: 24px;
  }

  .service-view-modal__card-pattern {
    top: -220px;
    left: -180px;
    width: 360px;
    height: 360px;
    -webkit-mask-size: 360px 360px;
    mask-size: 360px 360px;
  }

  .service-view-modal__card-pattern-inner img {
    width: 360px;
    height: 360px;
  }
}

/* Privacy policy page — Figma 296:5942 */
.privacy-policy-section {
  position: relative;
  z-index: 10;
  margin-top: 70px;
  padding-bottom: clamp(2rem, 4vw, 4rem);
  background-color: var(--brand-bg, #120615);
}

.privacy-policy-section__inner {
  display: flex;
  width: min(calc(100% - 2rem), 1600px);
  flex-direction: column;
  gap: 36px;
  margin-inline: auto;
}

.privacy-policy__intro {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.privacy-policy__notice {
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(
    -79.33deg,
    rgba(70, 31, 93, 0.5) 7.42%,
    rgba(35, 27, 79, 0.5) 107.66%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.privacy-policy__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 16px;
  background: linear-gradient(
    -84deg,
    rgba(70, 31, 93, 0.5) 7.42%,
    rgba(35, 27, 79, 0.5) 107.66%
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.privacy-policy__card--compact {
  gap: 12px;
}

.privacy-policy__card-lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-policy__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-policy__card-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.privacy-policy__card-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.privacy-policy__card-intro,
.privacy-policy__text,
.privacy-policy__text p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #c1c4cc;
}

.privacy-policy__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.privacy-policy__subsection {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.privacy-policy__subsection-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.privacy-policy__text--n40,
.privacy-policy__text--n40 p {
  color: #dfe0e4;
}

.privacy-policy__text--n40-lg,
.privacy-policy__text--n40-lg p {
  color: #dfe0e4;
  font-size: 18px;
  font-weight: 400;
}

/* Terms of services page — Figma 296:9194 */
.terms-of-services-section {
  margin-top: 70px;
}

.terms-of-services__page-title {
  margin: 0;
  max-width: 762px;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.terms-of-services__intro {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #ebecef;
}

.terms-of-services__number-badge {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f5f5f5;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.terms-of-services__number-badge--primary {
  color: #8f2acd;
}

.terms-of-services__acceptable-use-card {
  gap: 40px;
}

.terms-of-services__acceptable-use-intro {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.terms-of-services__use-columns {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.terms-of-services__use-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px;
}

.terms-of-services__use-column-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.terms-of-services__use-column-header img {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.terms-of-services__use-column-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.terms-of-services__use-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.terms-of-services__use-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.terms-of-services__use-item-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.terms-of-services__use-item-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.terms-of-services__use-item p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #c1c4cc;
}

@media (min-width: 1024px) {
  .terms-of-services__use-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }

  .refund-policy-section .privacy-policy-section__inner {
    margin-bottom: 140px;
  }
}

/* Refund policy page — Figma 296:7592 */
.refund-policy__intro {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.refund-policy__heading {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}

.refund-policy__lead {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #f5f6f7;
}

.refund-policy__block,
.refund-policy__plain,
.refund-policy__block-header,
.refund-policy__item-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.refund-policy__block {
  gap: 32px;
}

.refund-policy__plain,
.refund-policy__block-header,
.refund-policy__item-copy {
  gap: 12px;
}

.refund-policy__accent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  overflow: hidden;
  padding: 40px 40px 40px 46px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  background: linear-gradient(
    -88.4deg,
    rgba(70, 31, 93, 0.5) 7.42%,
    rgba(35, 27, 79, 0.5) 107.66%
  );
}

.refund-policy__accent-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
  background: #8f2acd;
}

.refund-policy__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.refund-policy__item-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.refund-policy__item-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

.refund-policy__item-copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
}

.refund-policy__item-title,
.refund-policy__step-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.refund-policy__text--n30,
.refund-policy__text--n30 p {
  color: #ebecef;
}

.refund-policy__text--n20,
.refund-policy__text--n20 p {
  color: #f5f6f7;
}

.refund-policy__step-list {
  --refund-step-gap: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--refund-step-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.refund-policy__step-line {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 28.5px;
  width: 0;
  height: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}

.refund-policy__step:nth-of-type(2) {
  margin-bottom: 48px;
}

.refund-policy__step {
  display: grid;
  grid-template-columns: 57px minmax(0, 1fr);
  column-gap: 34px;
  align-items: center;
}

.refund-policy__step-rail {
  position: relative;
  display: flex;
  width: 57px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
}

.refund-policy__step-dot {
  position: relative;
  z-index: 1;
  display: block;
  width: 57px;
  height: 50px;
  flex-shrink: 0;
  max-width: none;
}

.refund-policy__step-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  border: 1px solid #4b0b72;
  border-radius: 16px;
  background: linear-gradient(
    -84.3deg,
    rgba(70, 31, 93, 0.5) 7.42%,
    rgba(35, 27, 79, 0.5) 107.66%
  );
}

.refund-policy__step-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.refund-policy__step-icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #f5f5f5;
}

.refund-policy__step-icon img {
  display: block;
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .privacy-policy-section {
    margin-top: 48px;
  }

  .privacy-policy-section__inner {
    gap: 24px;
  }

  .privacy-policy__notice,
  .privacy-policy__card {
    padding: 24px 20px;
  }

  .privacy-policy__card-title {
    font-size: 20px;
  }

  .privacy-policy__intro,
  .privacy-policy__card-intro,
  .privacy-policy__text,
  .privacy-policy__text p,
  .privacy-policy__subsection-title {
    font-size: 15px;
  }

  .privacy-policy__notice {
    font-size: 13px;
  }

  .terms-of-services__page-title {
    font-size: 24px;
  }

  .terms-of-services__use-column {
    padding: 24px 20px;
  }

  .refund-policy__heading {
    font-size: 20px;
  }

  .refund-policy__accent-card,
  .refund-policy__step-card {
    padding: 24px 20px;
  }

  .refund-policy__accent-card {
    gap: 28px;
    padding-left: 28px;
  }

  .refund-policy__step {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
  }

  .refund-policy__step-rail {
    width: 40px;
  }

  .refund-policy__step-dot {
    width: 40px;
    height: 35px;
  }

  .refund-policy__step:nth-of-type(2) {
    margin-bottom: 24px;
  }
}

/* Footer: tighter inset, gaps, and copyright bar from tablet down to mobile */
@media (max-width: 1023px) {
  [data-footer] {
    --footer-bottom-reserve: 9rem;
    min-height: 0;
    padding-top: 2rem;
  }

  [data-footer-content] {
    width: calc(100% - 1.5rem);
    gap: 1.5rem;
  }

  [data-footer-content] > .grid {
    column-gap: 1rem;
    row-gap: 1.5rem;
  }

  [data-footer-content] .gap-6 {
    gap: 1rem;
  }

  [data-footer-content] .gap-\[18px\] {
    gap: 0.75rem;
  }

  [data-footer-content] .gap-\[14px\],
  [data-footer-content] .gap-\[15px\] {
    gap: 0.625rem;
  }

  [data-footer-content] .gap-3,
  [data-footer-content] .sm\:gap-4 {
    gap: 0.5rem;
  }

  .footer-copyright-bar {
    height: auto;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
  }

  [data-footer-bars="artboard"] .footer-glass-bar[data-bar-index="0"],
  [data-footer-bars="artboard"] .footer-glass-bar[data-bar-index="1"],
  [data-footer-bars="artboard"] .footer-glass-bar[data-bar-index="2"] {
    display: none;
  }
}

@media (max-width: 767px) {
  [data-footer] {
    --footer-bottom-reserve: 6.75rem;
    padding-top: 1.5rem;
  }

  [data-footer-content] {
    width: 100%;
    padding-inline: 1.25rem;
    gap: 1.25rem;
  }

  [data-footer-content] > .grid {
    column-gap: 0.75rem;
    row-gap: 1.25rem;
  }

  .footer-copyright-bar {
    min-height: 2.875rem;
    padding: 0.5rem 0.75rem;
  }

  .footer-copyright-text {
    transform: translateY(-3px);
  }

  [data-footer-content] > .grid > :last-child {
    grid-column: 1 / -1;
  }

  [data-footer-content] .items-start > span {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

@media (max-width: 479px) {
  [data-footer] {
    --footer-bottom-reserve: 5.5rem;
  }

  [data-footer-content] {
    width: 100%;
    padding-inline: 1rem;
    gap: 1rem;
  }

  [data-footer-content] > .grid {
    column-gap: 0.625rem;
    row-gap: 1rem;
  }

  .footer-copyright-bar {
    min-height: 2.5rem;
    padding: 0.5rem 0.625rem;
  }
}

@media (max-width: 767px) {
  .brand-cta-card .flex.w-full.flex-row.flex-wrap {
    width: 100%;
  }

  .brand-cta-card a[data-slot="button"] {
    width: 100% !important;
    max-width: none;
    flex: 1 1 100%;
  }

  /* cta-btn-bg.svg keeps its 160x50 ratio, so it letterboxes once the button is
     full width — paint the fill in CSS and drop the image instead. */
  .brand-cta-card a[href*="#register"],
  .brand-cta-card a[data-slot="button"]:has(> .button-shine) {
    background-image: linear-gradient(
      111deg,
      #ca23e7 0%,
      rgba(152, 167, 255, 0.75) 100%
    );
  }

  .brand-cta-card a[href*="#register"] img,
  .brand-cta-card a[data-slot="button"]:has(> .button-shine) > img {
    display: none;
  }
}

.brand-cta-card a[data-slot="button"] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.brand-cta-card a[data-slot="button"] .button-shine {
  border-radius: inherit;
}

/* Payment hub entrance starts hidden so the GSAP reveal doesn't flash.
   Reduced motion keeps the authored static layout. */
@media (prefers-reduced-motion: no-preference) {
  .payment-methods:not(.is-static) .payment-methods__hub-core,
  .payment-methods:not(.is-static) .payment-methods__hub-ring,
  .payment-methods:not(.is-static) .payment-methods__wing-rings,
  .payment-methods:not(.is-static)
    .payment-methods__wing
    > .payment-methods__bubble,
  .payment-methods:not(.is-static) .payment-methods__bubble--inner {
    opacity: 0;
  }
}

.payment-methods.is-static .payment-methods__hub-core,
.payment-methods.is-static .payment-methods__hub-ring,
.payment-methods.is-static .payment-methods__wing-rings,
.payment-methods.is-static .payment-methods__wing > .payment-methods__bubble,
.payment-methods.is-static .payment-methods__bubble--inner {
  opacity: 1;
}

@keyframes payment-methods-shield-enter {
  from {
    opacity: 0;
    transform: rotate(-28deg) translate3d(-32px, -40px, 0) scale(0.84);
    filter: drop-shadow(0 0.5rem 1rem rgba(205, 54, 231, 0.12));
  }
  to {
    opacity: 0.5;
    transform: rotate(-16.63deg) translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 1rem 2rem rgba(205, 54, 231, 0.24));
  }
}

@keyframes payment-methods-shield-drift {
  0%,
  100% {
    transform: rotate(-16.63deg) translate3d(0, 0, 0);
    opacity: 0.48;
    filter: drop-shadow(0 1rem 2rem rgba(205, 54, 231, 0.22));
  }
  50% {
    transform: rotate(-13.5deg) translate3d(10px, -14px, 0);
    opacity: 0.58;
    filter: drop-shadow(0 1.35rem 2.75rem rgba(205, 54, 231, 0.34));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .payment-methods.is-in-view:not(.is-static):not(
      [data-payment-motion="running"]
    )
    .payment-methods__shield {
    animation:
      payment-methods-shield-enter 1s cubic-bezier(0.22, 1, 0.36, 1) both,
      payment-methods-shield-drift 6s ease-in-out 0.85s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .payment-methods__shield {
    animation: none !important;
  }
  .blog-section-icon {
    animation: none !important;
  }
}

@keyframes blog-section-icon-enter {
  from {
    opacity: 0;
    transform: translate3d(-32px, -40px, 0) scale(0.86);
    filter: drop-shadow(0 0.5rem 1rem rgba(202, 35, 231, 0.12));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 1rem 2rem rgba(202, 35, 231, 0.22));
  }
}

@keyframes blog-section-icon-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    filter: drop-shadow(0 1rem 2rem rgba(202, 35, 231, 0.2));
  }
  50% {
    transform: translate3d(10px, -14px, 0) scale(1.02);
    filter: drop-shadow(0 1.35rem 2.75rem rgba(202, 35, 231, 0.32));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .blog-section.is-in-view:not([data-blog-section-motion="running"])
    .blog-section-icon {
    animation:
      blog-section-icon-enter 1s cubic-bezier(0.22, 1, 0.36, 1) both,
      blog-section-icon-drift 6s ease-in-out 0.85s infinite;
  }
}

/* Below-fold rendering: skip layout/paint until near viewport (desktop home). */
@media (min-width: 1025px) {
  .number-section,
  .about-us,
  .our-services,
  .advantages,
  .working-process,
  .payment-methods,
  .global-reach,
  .why-choose-us,
  .testimonials,
  .blog-section,
  .faq-section,
  .brand-cta-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 720px;
  }
}

/* Pause decorative CSS animations when section is off-screen. */
.working-process,
.payment-methods,
.number-section,
.blog-section {
  --section-motion-play: paused;
}

.working-process.is-in-view,
.payment-methods.is-in-view,
.number-section.is-in-view,
.blog-section.is-in-view {
  --section-motion-play: running;
}

/* content-visibility:auto can block ScrollTrigger until forced visible */
@media (min-width: 1025px) {
  .payment-methods.is-in-view {
    content-visibility: visible;
  }
}

.marketing-guest-home section.payment-methods .payment-methods__diagram-scaler,
.marketing-public-shell
  section.payment-methods
  .payment-methods__diagram-scaler {
  left: 0 !important;
  top: 0 !important;
  transform-origin: 0 0 !important;
}

.working-process *,
.payment-methods *,
.number-section .number-section__icon-glyph,
.blog-section-icon {
  animation-play-state: var(--section-motion-play);
}

/* Hero sign-in: panel Bootstrap resets (label/input/button) */
.hero-form__input {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  cursor: text;
}

.hero-form__input input,
.hero-form__input .hero-form__input-control {
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.5;
  height: auto;
  min-height: 0;
}

.hero-form__input input:-webkit-autofill,
.hero-form__input input:-webkit-autofill:hover,
.hero-form__input input:-webkit-autofill:focus,
.hero-form__input input:-webkit-autofill:active,
.hero-form__input .hero-form__input-control:-webkit-autofill,
.hero-form__input .hero-form__input-control:-webkit-autofill:hover,
.hero-form__input .hero-form__input-control:-webkit-autofill:focus,
.hero-form__input .hero-form__input-control:-webkit-autofill:active {
  -webkit-text-fill-color: #e8e8e8;
  caret-color: #fff;
  box-shadow: 0 0 0 1000px #cbcbcb1c inset;
  transition: background-color 99999s ease-out 0s;
}

.hero-form__remember {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  line-height: 1;
  cursor: pointer;
}

/* Mobile: only .hero-form__meta row; desktop row uses .hero-form__remember-desktop */
.hero-form__remember-desktop,
.hero-form__forgot-desktop {
  display: none !important;
}

@media (min-width: 1025px) {
  .hero-form__remember-desktop {
    display: inline-flex !important;
    align-items: center;
  }

  .hero-form__forgot-desktop {
    display: block !important;
  }

  .marketing-guest-home .hero-form__meta {
    display: none !important;
  }
}

.hero-form__remember-checkbox {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: 0 0 18px;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  min-height: 18px;
  margin: 0 !important;
  padding: 0;
  border: 0.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.18);
  vertical-align: middle;
  cursor: pointer;
}

.hero-form__remember-checkbox:checked {
  background-color: var(--brand-magenta, #ca23e7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M4.5 9.25L7.75 12.5L13.5 6.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  border-color: rgba(202, 35, 231, 0.85);
}

.hero-form__remember > span {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 18px;
}

.marketing-guest-home .hero-form__remember > span {
  line-height: 18px !important;
}

.hero-form__button {
  border: none;
  border-radius: 0.75rem !important;
  overflow: hidden;
  box-sizing: border-box;
}

.hero-form__button .button-shine {
  border-radius: inherit;
}

.hero-form__input--password .hero-form__input-control {
  padding-right: 0.25rem;
}

.hero-form__password-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(235, 236, 239, 0.72);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.hero-form__password-toggle:hover,
.hero-form__password-toggle:focus-visible {
  color: #fafafb;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.hero-form__password-icon {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.hero-form__password-icon--hide {
  display: none;
}

.hero-form__password-toggle.is-visible .hero-form__password-icon--show {
  display: none;
}

.hero-form__password-toggle.is-visible .hero-form__password-icon--hide {
  display: block;
}

.marketing-public-shell {
  --marketing-nav-stack: calc(33px + 4.5rem + 1rem);
}

.marketing-public-shell > main {
  position: relative;
}

/* Guest /services — nav offset via hero banner (same idea as blog), not main padding */
body[data-page="service"] .marketing-public-shell--services > main {
  padding-top: 0 !important;
  box-sizing: border-box;
}

body[data-page="service"]
  .marketing-public-shell--services
  .marketing-public-shell__header {
  padding-top: 33px;
  box-sizing: border-box;
}

body[data-page="service"]
  .marketing-public-shell--services
  .marketing-public-shell__header
  header {
  top: 33px !important;
}

/* Overlay nav on hero — sits in main’s top padding band (header top-[33px] + ~72px bar) */
.marketing-public-shell__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: 0;
  pointer-events: none;
}

.marketing-public-shell__header .navbar-container {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 1rem;
}

/* Marketing nav: light glass at top; stronger frosted bar after scroll */
.marketing-guest-home .hero-section > header .nav-glass-surface,
.marketing-public-shell__header header .nav-glass-surface,
.hero-section > header.site-header .nav-glass-surface,
.blog-details-section__header.site-header .nav-glass-surface {
  transition:
    background 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    backdrop-filter 0.4s ease;
}

.marketing-guest-home
  .hero-section
  > header.site-header:not(.site-header--scrolled)
  .nav-glass-surface,
.marketing-public-shell__header:not(.site-header--scrolled)
  header
  .nav-glass-surface,
.marketing-public-shell__header
  header.site-header:not(.site-header--scrolled)
  .nav-glass-surface,
.hero-section
  > header.site-header:not(.site-header--scrolled)
  .nav-glass-surface,
.blog-details-section__header.site-header:not(.site-header--scrolled)
  .nav-glass-surface {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.14),
    inset 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px rgba(255, 255, 255, 0.05);
}

.marketing-guest-home
  .hero-section
  > header.site-header--scrolled
  .nav-glass-surface,
.marketing-public-shell__header.site-header--scrolled header .nav-glass-surface,
.marketing-public-shell__header header.site-header--scrolled .nav-glass-surface,
.hero-section > header.site-header.site-header--scrolled .nav-glass-surface,
.blog-details-section__header.site-header.site-header--scrolled
  .nav-glass-surface,
.site-header--pinned.site-header--scrolled .nav-glass-surface {
  -webkit-backdrop-filter: blur(200px);
  backdrop-filter: blur(222px);

  background: #3d2f48 !important;

  border: 1px solid rgba(255, 255, 255, 0.28);

  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px rgba(255, 255, 255, 0.08),
    inset 0 0 8px 4px rgba(255, 255, 255, 0.06);
}

/* Mobile nav dropdown — always use scrolled/frosted bar (not hero-top light glass) */
.marketing-public-shell .nav-mobile-menu-panel.nav-glass-surface,
.marketing-public-shell__header .nav-mobile-menu-panel.nav-glass-surface,
.marketing-guest-home .nav-mobile-menu-panel.nav-glass-surface,
#mobile-nav-panel.nav-glass-surface {
  -webkit-backdrop-filter: blur(200px) !important;
  backdrop-filter: blur(222px) !important;
  background: #3d2f48 !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px rgba(255, 255, 255, 0.08),
    inset 0 0 8px 4px rgba(255, 255, 255, 0.06) !important;
}

@media (prefers-reduced-motion: reduce) {
  .marketing-guest-home .hero-section > header .nav-glass-surface,
  .marketing-public-shell__header header .nav-glass-surface,
  .hero-section > header.site-header .nav-glass-surface {
    transition: none;
  }
}

/* Marketing header nav — panel theme overrides Tailwind .hidden / .lg:flex */
.marketing-guest-home .hero-section > header nav ul,
.marketing-public-shell__header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 1024px) {
  .marketing-guest-home .hero-section > header nav ul.hidden,
  .marketing-public-shell__header nav ul.hidden {
    display: flex !important;
    align-items: center;
    gap: 1.75rem;
  }

  .marketing-guest-home .hero-section > header nav .hidden.lg\:inline-flex,
  .marketing-public-shell__header nav .hidden.lg\:inline-flex {
    display: inline-flex !important;
  }

  .marketing-guest-home .hero-section > header nav .lg\:hidden,
  .marketing-public-shell__header nav .lg\:hidden {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .marketing-guest-home .hero-section > header nav .nav-mobile-menu-trigger,
  .marketing-public-shell__header nav .nav-mobile-menu-trigger {
    display: inline-flex !important;
  }
}

/* Guest /services — marketing shell + service landing (not panel services-page) */
body[data-page="service"]
  .marketing-public-shell--services
  .hero-section--service {
  padding-top: 0;
  box-sizing: border-box;
  overflow-x: clip;
}

body[data-page="service"]
  .marketing-public-shell--services
  .hero-section--service
  .blog-banner-wrap {
  width: min(100% - clamp(4rem, 10vw, 12rem), 1600px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  margin-top: calc(33px + 72px + clamp(1.25rem, 2vw, 2.5rem)) !important;
  padding-inline: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-platform-tabs {
  padding-top: clamp(1.25rem, 1rem + 1.5vw, 2rem) !important;
  padding-bottom: clamp(1rem, 0.75rem + 1vw, 1.5rem) !important;
}

@media (min-width: 1024px) {
  body[data-page="service"]
    .marketing-public-shell--services
    .service-platform-tabs {
    padding-top: clamp(1.5rem, 1rem + 2vw, 2.5rem) !important;
  }
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-catalog-section {
  padding-top: clamp(1rem, 0.75rem + 1vw, 1.5rem);
  padding-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-toolbar-section {
  position: relative;
  z-index: 30;
  padding-bottom: 0;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-toolbar__filter-menu {
  z-index: 50;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-catalog-section
  .info-container,
body[data-page="service"]
  .marketing-public-shell--services
  .service-catalog-section__inner,
body[data-page="service"]
  .marketing-public-shell--services
  .service-toolbar-section__inner,
body[data-page="service"]
  .marketing-public-shell--services
  .service-platform-tabs__inner {
  width: min(100% - clamp(4rem, 10vw, 12rem), 1600px) !important;
  max-width: 1600px !important;
  margin-inline: auto !important;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Service catalog table rows — panel markup matches convert; grid must win over theme resets */
body[data-page="service"] .marketing-public-shell--services .service-table {
  overflow: hidden;
  border-radius: 16px 16px 12px 12px;
  background: #281532;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__head,
body[data-page="service"]
  .marketing-public-shell--services
  .service-table__row {
  display: grid !important;
  align-items: center;
  gap: 18px;
  padding: 16px 6px;
  grid-template-columns:
    90px minmax(200px, 1.6fr) repeat(4, minmax(90px, 1fr))
    126px;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table:not(:has(.service-table__cell--time))
  .service-table__head,
body[data-page="service"]
  .marketing-public-shell--services
  .service-table:not(:has(.service-table__cell--time))
  .service-table__row {
  grid-template-columns:
    90px minmax(200px, 1.6fr) repeat(3, minmax(90px, 1fr))
    126px;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__head {
  border-radius: 12px 12px 0 0;
  background: linear-gradient(
    158.39deg,
    #ca23e7 0.37%,
    rgba(152, 167, 255, 0.75) 99.18%
  );
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__row {
  border-bottom: 1px dashed #4f586d;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__row:last-child {
  border-bottom: 0;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__head
  .service-table__cell,
body[data-page="service"]
  .marketing-public-shell--services
  .service-table__cell {
  min-width: 0;
  padding: 6px 10px;
  font-family: var(--font-sans, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fafafb;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__head
  .service-table__cell {
  color: #fff;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__cell--service {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

body[data-page="service"]
  .marketing-public-shell--services
  .service-table__cell--action {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 1023px) {
  body[data-page="service"] .marketing-public-shell--services .service-table {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__head,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__row {
    min-width: 920px;
    gap: 12px;
    padding: 12px 10px;
    grid-template-columns: 72px minmax(220px, 1.6fr) 96px 88px 88px 108px 118px;
  }

  body[data-page="service"]
    .marketing-public-shell--services
    .service-table:not(:has(.service-table__cell--time))
    .service-table__head,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table:not(:has(.service-table__cell--time))
    .service-table__row {
    min-width: 820px;
    grid-template-columns: 72px minmax(220px, 1.6fr) 96px 88px 88px 118px;
  }

  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__head
    .service-table__cell,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__cell {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__head,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__row {
    min-width: 860px;
    gap: 10px;
    padding: 12px 8px;
    grid-template-columns: 64px minmax(200px, 1.6fr) 90px 80px 80px 100px 106px;
  }

  body[data-page="service"]
    .marketing-public-shell--services
    .service-table:not(:has(.service-table__cell--time))
    .service-table__head,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table:not(:has(.service-table__cell--time))
    .service-table__row {
    min-width: 760px;
    grid-template-columns: 64px minmax(200px, 1.6fr) 90px 80px 80px 106px;
  }

  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__head
    .service-table__cell,
  body[data-page="service"]
    .marketing-public-shell--services
    .service-table__cell {
    font-size: 13px;
  }
}

/* Fallback if panel catalog leaks on guest /services */
body[data-page="service"]
  .marketing-public-shell--services
  > main
  > .services-page {
  width: min(calc(100% - 2rem), 1600px) !important;
  margin-inline: auto !important;
  padding-top: var(--marketing-nav-stack) !important;
  padding-inline: 0;
  box-sizing: border-box;
}

/* Auth pages (signup, 2FA, reset) — guest glass nav from layout, no panel logo/lang bar */
.marketing-public-shell--auth > main {
  padding-top: 0;
}

.marketing-public-shell--auth .marketing-public-shell__header {
  padding-top: 33px;
  box-sizing: border-box;
}

.marketing-public-shell--auth .marketing-public-shell__header header {
  top: 33px !important;
}

.marketing-public-shell--auth .signup-page {
  padding-top: calc(33px + 72px + clamp(0.75rem, 2vw, 1.5rem));
  box-sizing: border-box;
}

.marketing-public-shell--auth .signup-page__body {
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

/* Working process — stacked steps on tablet/mobile; wire animation desktop only */
@media (max-width: 1099px) {
  section.working-process,
  .marketing-guest-home section.working-process {
    overflow-x: clip;
  }

  section.working-process .working-process__shell,
  .marketing-guest-home section.working-process .working-process__shell {
    min-height: 0 !important;
    padding-block: clamp(3rem, 8vw, 5.25rem) !important;
  }

  .working-process__diagram {
    aspect-ratio: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
    display: flex !important;
    justify-content: center !important;
  }

  .working-process__diagram-canvas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: min(100%, 375px) !important;
    height: auto !important;
    margin-inline: auto !important;
    padding-inline: 12px;
    box-sizing: border-box;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
  }

  .working-process__wire-flow,
  .working-process__diagram-canvas::after,
  .working-process__diagram-canvas .working-process__line {
    display: none !important;
  }

  .working-process__hub,
  .working-process__card,
  .working-process__step-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
  }

  /* Hub children are absolute — reserve space so rings/core don’t collapse the flex item */
  .working-process__hub {
    flex-shrink: 0;
    width: 9.0484375rem;
    height: 8.9908125rem;
    margin-bottom: clamp(1.5rem, 5vw, 2.5rem);
    z-index: 2;
  }

  .working-process__step-icon {
    flex-shrink: 0;
    z-index: 4;
    margin-top: clamp(2rem, 6vw, 2.75rem);
    margin-bottom: -2.75rem;
  }

  .working-process__hub + .working-process__step-icon {
    margin-top: 0;
  }

  .working-process__card {
    z-index: 1;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 23.428rem;
    height: auto;
    min-height: 15.75rem;
    padding: 3.5rem 1.5rem 1.75rem;
    box-sizing: border-box;
  }

  .working-process__card-title {
    align-items: center;
    text-align: center;
  }

  .working-process__card-description {
    text-align: center;
    max-width: 100%;
  }

  .working-process__card-sparkles {
    align-self: center;
  }
}

@media (min-width: 1100px) {
  .working-process__diagram {
    aspect-ratio: 1300 / 801;
  }
}

/* Global reach — scale 3-column stage to fit (fixed 1256px artboard clips inside padded shell < ~1600px) */
@media (max-width: 1599px) {
  section.global-reach .global-reach__stage,
  .marketing-guest-home section.global-reach .global-reach__stage {
    container-type: inline-size !important;
    width: 100% !important;
    max-width: 100% !important;
    height: calc(830px * (100cqi / 1256px)) !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    overflow: visible !important;
  }

  section.global-reach .global-reach__grid,
  .marketing-guest-home section.global-reach .global-reach__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 400px) !important;
    gap: 28px !important;
    width: 1256px !important;
    max-width: none !important;
    margin-inline: auto !important;
    transform: scale(calc(100cqi / 1256px)) !important;
    transform-origin: center center !important;
    justify-content: center !important;
  }

  section.global-reach .global-reach__item,
  .marketing-guest-home section.global-reach .global-reach__item {
    max-width: none !important;
  }

  section.global-reach .global-reach__card,
  .marketing-guest-home section.global-reach .global-reach__card {
    width: 400px !important;
    max-width: none !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    aspect-ratio: auto !important;
    padding: 50px 33px !important;
  }

  section.global-reach .global-reach__country,
  .marketing-guest-home section.global-reach .global-reach__country {
    white-space: nowrap !important;
    font-size: 24px !important;
  }

  section.global-reach .global-reach__globe,
  .marketing-guest-home section.global-reach .global-reach__globe {
    opacity: 0.72 !important;
    width: 864px !important;
    height: 844px !important;
    transform: scale(calc(100cqi / 1256px)) !important;
    transform-origin: center center !important;
  }
}

/* Why Choose Us — stacked cards on tablet/mobile (no scaled diagram canvas) */
@media (max-width: 1099px) {
  section.why-choose-us,
  .marketing-guest-home section.why-choose-us {
    overflow-x: clip;
  }

  .why-choose-us__diagram {
    aspect-ratio: auto !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible;
  }

  .why-choose-us__diagram-canvas {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: min(100%, 43.75rem) !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    margin-inline: auto;
    padding-inline: 0;
    box-sizing: border-box;
  }

  .why-choose-us__connector,
  .why-choose-us__hub {
    display: none !important;
  }

  .why-choose-us__card {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 218px;
    margin-inline: auto;
    box-sizing: border-box;
  }
}

@media (max-width: 767px) {
  section.why-choose-us .why-choose-us__card-copy,
  .marketing-guest-home section.why-choose-us .why-choose-us__card-copy,
  .why-choose-us__card-copy {
    gap: 8px;
  }

  section.why-choose-us .why-choose-us__card-title,
  .marketing-guest-home section.why-choose-us .why-choose-us__card-title,
  .why-choose-us__card-title {
    font-size: 16px;
    line-height: 1.35;
    white-space: normal;
  }

  section.why-choose-us .why-choose-us__card-description,
  .marketing-guest-home section.why-choose-us .why-choose-us__card-description,
  .why-choose-us__card-description {
    font-size: 13px;
    line-height: 1.45;
  }

  section.why-choose-us .why-choose-us__card-dot,
  .marketing-guest-home section.why-choose-us .why-choose-us__card-dot,
  .why-choose-us__card-dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 767px) {
  section.advantages .advantages__card-copy,
  .marketing-guest-home section.advantages .advantages__card-copy {
    gap: 10px;
  }

  section.advantages .advantages__card-title,
  .marketing-guest-home section.advantages .advantages__card-title,
  .advantages__card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  section.advantages .advantages__card-description,
  .marketing-guest-home section.advantages .advantages__card-description,
  .advantages__card-description {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  section.advantages .advantages__card-dot,
  .marketing-guest-home section.advantages .advantages__card-dot {
    width: 10px;
    height: 10px;
  }
}

@media (min-width: 1100px) {
  .why-choose-us__diagram {
    aspect-ratio: 1600 / 694;
  }
}

/* Section badges (About Us, Our Services, etc.) — content-sized at all breakpoints.
   Shape is drawn in CSS so the slanted block and cap always meet, whatever the label width. */
.section-badge {
  --section-badge-lean: 12.5deg;
  --section-badge-cap-width: 0.3125rem;
  --section-badge-cap-gap: 0.1875rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  isolation: isolate;
  width: auto !important;
  max-width: min(100%, 28rem);
  min-height: 2.8125rem;
  height: 2.8125rem;
  padding: 0
    calc(
      var(--section-badge-cap-width) + var(--section-badge-cap-gap) + 1.125rem
    )
    0 1.125rem;
  box-sizing: border-box;
}

.section-badge::before,
.section-badge::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
  transform: skewX(var(--section-badge-lean));
}

.section-badge::before {
  left: 0;
  right: calc(var(--section-badge-cap-width) + var(--section-badge-cap-gap));
  z-index: 0;
  background-image: linear-gradient(
    90deg,
    rgba(205, 54, 231, 0.41) 0%,
    rgba(121, 25, 165, 0.06) 100%
  );
}

.section-badge::after {
  right: 0;
  width: var(--section-badge-cap-width);
  z-index: 1;
  background-color: #c851ff;
}

.section-badge__accent,
.section-badge__edge {
  display: none !important;
}

.section-badge__label {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 0 0.25rem;
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.section-heading-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: min(100%, 28rem);
  min-height: 45px;
  height: 45px !important;
}

.section-heading-badge > .text-gradient-2,
.section-heading-badge > span.relative.z-10 {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-inline: 1.125rem 1.5rem !important;
  text-align: center;
  white-space: nowrap;
}

/* Testimonials tabs — keep labels inside the pill instead of spilling out of the shell */
@media (max-width: 767px) {
  section.testimonials .testimonials__tab,
  .marketing-guest-home .testimonials__tab {
    overflow: hidden;
  }

  section.testimonials .testimonials__tab-content,
  .marketing-guest-home .testimonials__tab-content {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }

  section.testimonials .testimonials__tab-content > span,
  .marketing-guest-home .testimonials__tab-content > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* About — Why Choose Us header (convert; panel beats @layer utilities) */
body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__header,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.125rem !important;
  width: min(100%, 62.25rem) !important;
  margin-inline: auto !important;
  text-align: center !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__title-group,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__title-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .section-badge,
.marketing-public-shell section.about-why-choose-us .section-badge {
  position: relative !important;
  flex-shrink: 0 !important;
  width: var(--section-badge-width, 12.9375rem) !important;
  height: 2.8125rem !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .section-badge__label,
.marketing-public-shell section.about-why-choose-us .section-badge__label {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  position: absolute !important;
  top: 0.4375rem !important;
  left: var(--section-badge-label-left, 1.125rem) !important;
  white-space: nowrap !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  h2.about-why-choose-us__title,
.marketing-public-shell
  section.about-why-choose-us
  h2.about-why-choose-us__title {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: baseline !important;
  column-gap: 0.35em !important;
  row-gap: 0 !important;
  margin: 0 !important;
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: clamp(1.75rem, 1rem + 2vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__title-text,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__title-text {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(90deg, #fff 0%, #fff9f9cc 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  h2.about-why-choose-us__title
  .text-metallic-sheen,
.marketing-public-shell
  section.about-why-choose-us
  h2.about-why-choose-us__title
  .text-metallic-sheen {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #f4b2ff 0%,
    #be00df 25%,
    #ffe6ff 50%,
    #be00df 75%,
    #f4b2ff 100%
  ) !important;
  background-size: 220% 100% !important;
  background-position: 100%;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  display: inline !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__description,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__description {
  margin: 0 !important;
  max-width: 62.25rem !important;
  font-family: var(--font-inter, "Inter", system-ui, sans-serif) !important;
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #dfe0e4 !important;
}

/* About — Why Choose Us cards (convert; panel beats @layer utilities) */
body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__inner,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(2rem, 4vw, 4rem) !important;
  position: relative !important;
  z-index: 1 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__grid,
.marketing-public-shell section.about-why-choose-us .about-why-choose-us__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__row,
.marketing-public-shell section.about-why-choose-us .about-why-choose-us__row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.75rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  article.about-why-choose-us__card,
.marketing-public-shell
  section.about-why-choose-us
  article.about-why-choose-us__card {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 18.125rem !important;
  margin: 0 !important;
  padding: 1.5rem !important;
  border: 0.7px solid #ffffff61 !important;
  border-radius: 1rem !important;
  isolation: isolate !important;
  background: #190624 !important;
  background-color: #190624 !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.flex.min-h-full.flex-col.bg-background[data-page="about"]
  .marketing-public-shell
  main.relative
  section.about-why-choose-us
  article.about-why-choose-us__card::before,
body[data-page="about"]
  .marketing-public-shell
  main.relative
  section.about-why-choose-us
  article.about-why-choose-us__card::before,
.marketing-public-shell
  main.relative
  section.about-why-choose-us
  article.about-why-choose-us__card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: #190624 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-body,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1.125rem !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-icon,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-icon {
  flex-shrink: 0 !important;
  width: 3.625rem !important;
  height: 3.625rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-icon
  img,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-icon
  img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-copy,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.75rem !important;
  position: relative !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-title-row,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.375rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-dot,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-dot {
  display: block !important;
  flex-shrink: 0 !important;
  width: 0.75rem !important;
  height: 0.75rem !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  h3.about-why-choose-us__card-title,
.marketing-public-shell
  section.about-why-choose-us
  h3.about-why-choose-us__card-title {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-inter, "Inter", system-ui, sans-serif) !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-description,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-description {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-inter, "Inter", system-ui, sans-serif) !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #ebecef !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern {
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
  opacity: 0.3 !important;
  width: 30rem !important;
  height: 30rem !important;
  top: -22.875rem !important;
  left: 54.5% !important;
  -webkit-mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg") !important;
  mask-image: url("https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/home/advantages/card-pattern-mask.svg") !important;
  -webkit-mask-size: 30rem 30rem !important;
  mask-size: 30rem 30rem !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern-inner,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern-inner {
  position: absolute !important;
  inset: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern-inner
  img,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-pattern-inner
  img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow {
  pointer-events: none !important;
  position: absolute !important;
  z-index: 0 !important;
  mix-blend-mode: plus-lighter !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow--tr,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow--tr {
  width: 13.8125rem !important;
  height: 13.8125rem !important;
  top: -12.3125rem !important;
  left: 87.4% !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow--bl,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow--bl {
  width: 2.5625rem !important;
  height: 13.8125rem !important;
  top: 12.51875rem !important;
  left: -1.60625rem !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--tr,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--tr {
  position: absolute !important;
  inset: -90.5% !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--bl,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--bl {
  position: absolute !important;
  inset: -90.5% -487.8% !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--tr
  img,
body[data-page="about"]
  .marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--bl
  img,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--tr
  img,
.marketing-public-shell
  section.about-why-choose-us
  .about-why-choose-us__card-glow-spread--bl
  img {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
}

@media (min-width: 768px) {
  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--top,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--top,
  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom
    article.about-why-choose-us__card:last-child,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom
    article.about-why-choose-us__card:last-child {
    grid-column: 1 / -1 !important;
    max-width: calc(50% - 0.875rem) !important;
    justify-self: center !important;
  }
}

@media (min-width: 1024px) {
  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom
    article.about-why-choose-us__card:last-child,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__row--bottom
    article.about-why-choose-us__card:last-child {
    grid-column: auto !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 1023px) {
  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    article.about-why-choose-us__card,
  .marketing-public-shell
    section.about-why-choose-us
    article.about-why-choose-us__card {
    min-height: auto !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__card-pattern,
  body[data-page="about"]
    .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__card-glow,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__card-pattern,
  .marketing-public-shell
    section.about-why-choose-us
    .about-why-choose-us__card-glow {
    display: none !important;
  }
}

/* About — use cases slider (final cascade; beats panel + global img/button rules) */
body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__slider {
  width: min(100%, 82.5rem) !important;
  min-width: 0 !important;
  overflow: visible !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__deck {
  position: relative !important;
  width: 100% !important;
  max-width: 82.5rem !important;
  overflow: visible !important;
}

@media (min-width: 1024px) {
  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__deck {
    height: 32.5rem !important;
  }
}

@media (max-width: 1023px) {
  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__deck {
    display: flex !important;
    height: auto !important;
    min-height: 28rem !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-layout {
    flex-direction: column !important;
    align-items: stretch !important;
    height: auto !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-nav {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 4 !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-surface {
    overflow: visible !important;
    padding-bottom: clamp(1.25rem, 1rem + 1vw, 2rem) !important;
  }
}

@media (min-width: 1024px) {
  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__slider {
    padding-left: 5.6875rem !important;
    margin-inline: auto !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card {
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-1 {
    z-index: 30 !important;
    opacity: 1 !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-2 {
    z-index: 20 !important;
    opacity: 1 !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-3 {
    z-index: 10 !important;
    opacity: 0 !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-1
    .use-cases__card-stack {
    transform: translate3d(-2.8125rem, 0.9375rem, 0) scale(1.0682, 0.942) !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-2
    .use-cases__card-stack,
  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card--depth-3
    .use-cases__card-stack {
    transform: translate3d(-5.6875rem, 2.75rem, 0) scale(1.1386, 0.834) !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-layout {
    flex-direction: row !important;
    align-items: center !important;
    height: 100% !important;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem) !important;
  }
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-surface {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  padding: clamp(1.5rem, 1rem + 2vw, 5rem) clamp(1.25rem, 0.75rem + 2vw, 7.5rem) !important;
  border: 1px solid transparent !important;
  border-radius: 1.25rem !important;
  background:
    linear-gradient(transparent, transparent) padding-box,
    linear-gradient(
        180deg,
        rgba(154, 65, 249, 0.9) 0%,
        rgba(167, 138, 255, 0) 100%
      )
      border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  position: relative !important;
  overflow: hidden !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-media {
  flex: 0 0 auto !important;
  width: min(100%, 24.9375rem) !important;
  max-width: 24.9375rem !important;
  height: clamp(12rem, 10rem + 8vw, 22.5rem) !important;
  min-height: clamp(12rem, 10rem + 8vw, 22.5rem) !important;
  position: relative !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0.75rem !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-content {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: clamp(1rem, 0.75rem + 1vw, 1.5rem) !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-title {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #fff !important;
  margin: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-description {
  font-family: var(--font-sans, "Inter", sans-serif) !important;
  font-size: clamp(0.9375rem, 0.875rem + 0.35vw, 1.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #c7c7c7 !important;
  margin: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-nav {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-nav-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  position: relative !important;
  overflow: visible !important;
  line-height: 0 !important;
  cursor: pointer !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-nav-btn
  > img {
  position: absolute !important;
  display: block !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  inset: -28.57% !important;
  width: calc(100% + 57.14%) !important;
  height: calc(100% + 57.14%) !important;
  margin: 0 !important;
}

body[data-page="about"]
  .marketing-public-shell
  section.use-cases
  .use-cases__card-nav-btn--icon-active
  > img {
  inset: -59.52% !important;
  width: calc(100% + 119.04%) !important;
  height: calc(100% + 119.04%) !important;
}

@media (min-width: 1024px) {
  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-title {
    font-size: 1.5rem !important;
  }

  body[data-page="about"]
    .marketing-public-shell
    section.use-cases
    .use-cases__card-description {
    font-size: 1.25rem !important;
  }
}

/* Contact — social CTA hex badges (mask + global img resets on Perfect Panel) */
body[data-page="contact"]
  .marketing-public-shell
  .contact-channel-card__badge
  img,
body[data-page="contact"] .marketing-public-shell .contact-social-icon__badge {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  -webkit-mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg) !important;
  mask-image: url(https://my-tigersmm-com.ahmad-iftekhar2004.workers.dev/pages/contact/badge-hex-mask.svg) !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
}

body[data-page="contact"] .marketing-public-shell .contact-social-icon__glyph {
  max-width: none !important;
  max-height: none !important;
}

/* Marketing Register / signup CTAs — keep label white on hover (panel theme link styles) */
.marketing-public-shell a.marketing-btn-keep-white,
.marketing-public-shell a.marketing-btn-keep-white:hover,
.marketing-public-shell a.marketing-btn-keep-white:focus,
.marketing-public-shell a.marketing-btn-keep-white:active,
.marketing-public-shell a.marketing-btn-keep-white:visited,
.marketing-guest-home a.marketing-btn-keep-white,
.marketing-guest-home a.marketing-btn-keep-white:hover,
.marketing-guest-home a.marketing-btn-keep-white:focus,
.marketing-guest-home a.marketing-btn-keep-white:active,
.marketing-guest-home a.marketing-btn-keep-white:visited,
body.flex.min-h-full.flex-col.bg-background a.marketing-btn-keep-white,
body.flex.min-h-full.flex-col.bg-background a.marketing-btn-keep-white:hover,
body.flex.min-h-full.flex-col.bg-background a.marketing-btn-keep-white:focus,
body.flex.min-h-full.flex-col.bg-background a.marketing-btn-keep-white:active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
}

.marketing-public-shell a.marketing-btn-keep-white span,
.marketing-public-shell a.marketing-btn-keep-white:hover span,
.marketing-guest-home a.marketing-btn-keep-white span,
.marketing-guest-home a.marketing-btn-keep-white:hover span,
body.flex.min-h-full.flex-col.bg-background a.marketing-btn-keep-white span,
body.flex.min-h-full.flex-col.bg-background
  a.marketing-btn-keep-white:hover
  span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.marketing-public-shell a.marketing-btn-keep-white.bg-navbar-cta:hover,
.marketing-guest-home a.marketing-btn-keep-white.bg-navbar-cta:hover,
body.flex.min-h-full.flex-col.bg-background
  a.marketing-btn-keep-white.bg-navbar-cta:hover {
  background-image: var(--gradient-navbar-cta) !important;
}

.marketing-public-shell
  a.contact-social-follow__btn--register.marketing-btn-keep-white:hover,
body[data-page="contact"]
  .marketing-public-shell
  a.contact-social-follow__btn--register:hover {
  opacity: 1 !important;
}

/* FAQ section header — guest home + all marketing pages (convert; panel beats @layer utilities) */
.marketing-public-shell section.faq-section .faq-section__intro,
.marketing-guest-home section.faq-section .faq-section__intro,
.marketing-public-shell--guest-home section.faq-section .faq-section__intro {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.125rem !important;
  width: 100% !important;
  text-align: center !important;
}

.marketing-public-shell
  section.faq-section
  .faq-section__intro
  > div:first-child,
.marketing-guest-home section.faq-section .faq-section__intro > div:first-child,
.marketing-public-shell--guest-home
  section.faq-section
  .faq-section__intro
  > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

.marketing-public-shell
  section.faq-section
  .section-heading-badge
  > .text-gradient-2,
.marketing-guest-home
  section.faq-section
  .section-heading-badge
  > .text-gradient-2,
.marketing-public-shell--guest-home
  section.faq-section
  .section-heading-badge
  > .text-gradient-2 {
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.375rem) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #f4b2ff 0%,
    #be00df 25%,
    #ffe6ff 50%,
    #be00df 75%,
    #f4b2ff 100%
  ) !important;
  background-size: 220% 100% !important;
  background-position: 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

.marketing-public-shell section.faq-section h2.font-heading,
.marketing-guest-home section.faq-section h2.font-heading,
.marketing-public-shell--guest-home section.faq-section h2.font-heading {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: baseline !important;
  column-gap: 0.35em !important;
  row-gap: 0 !important;
  max-width: 56rem !important;
  margin: 0 !important;
  text-align: center !important;
  font-family: var(
    --font-parkinsons,
    "Parkinsans",
    system-ui,
    arial,
    sans-serif
  ) !important;
  font-size: clamp(1.375rem, 1rem + 1.5vw, 2.5rem) !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.025em !important;
}

.marketing-public-shell section.faq-section h2.font-heading > span:first-child,
.marketing-guest-home section.faq-section h2.font-heading > span:first-child,
.marketing-public-shell--guest-home
  section.faq-section
  h2.font-heading
  > span:first-child {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    90deg,
    #fff 0%,
    rgba(255, 249, 249, 0.8) 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.marketing-public-shell
  section.faq-section
  h2.font-heading
  .text-gradient-highlight,
.marketing-guest-home
  section.faq-section
  h2.font-heading
  .text-gradient-highlight,
.marketing-public-shell--guest-home
  section.faq-section
  h2.font-heading
  .text-gradient-highlight {
  background-image: linear-gradient(
    101.41deg,
    #da32f7 9.35%,
    #8f6aff 88.44%
  ) !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.marketing-public-shell section.faq-section .faq-section__intro > p,
.marketing-guest-home section.faq-section .faq-section__intro > p,
.marketing-public-shell--guest-home
  section.faq-section
  .faq-section__intro
  > p {
  margin: 0 !important;
  max-width: 56rem !important;
  width: 100% !important;
  font-family: var(--font-inter, "Inter", system-ui, sans-serif) !important;
  font-size: clamp(0.8125rem, 0.75rem + 0.35vw, 1.125rem) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: var(--neutral-n40, #dfe0e4) !important;
}

@media (min-width: 320px) and (max-width: 440px) {
  .marketing-public-shell section.faq-section h2.font-heading,
  .marketing-guest-home section.faq-section h2.font-heading,
  .marketing-public-shell--guest-home section.faq-section h2.font-heading {
    font-size: 1.625rem !important;
  }

  .marketing-public-shell section.faq-section .faq-section__intro > p,
  .marketing-guest-home section.faq-section .faq-section__intro > p,
  .marketing-public-shell--guest-home
    section.faq-section
    .faq-section__intro
    > p {
    font-size: 0.875rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-public-shell
    section.faq-section
    .section-heading-badge
    > .text-gradient-2,
  .marketing-guest-home
    section.faq-section
    .section-heading-badge
    > .text-gradient-2,
  .marketing-public-shell--guest-home
    section.faq-section
    .section-heading-badge
    > .text-gradient-2 {
    background-image: linear-gradient(
      90deg,
      #f4b2ff 0%,
      #be00df 100%
    ) !important;
    background-position: 0% !important;
    background-size: 100% 100% !important;
  }
}

/* Guest home hero sign-in form — panel-safe text colors */
.marketing-guest-home form.hero-form.signin-form,
.marketing-public-shell--guest-home form.hero-form.signin-form {
  color: var(--neutral-n30, #ebecef);
}

.marketing-guest-home
  form.hero-form.signin-form
  label.hero-form__remember
  > span,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  label.hero-form__remember
  > span,
.marketing-guest-home form.hero-form.signin-form .hero-form__actions > p,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__actions
  > p {
  color: var(--brand-white, #ffffff) !important;
}

.marketing-guest-home form.hero-form.signin-form .hero-form__input input,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__input
  input,
.marketing-guest-home form.hero-form.signin-form .hero-form__input-control,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__input-control {
  color: var(--neutral-n30, #ebecef) !important;
  caret-color: #ffffff;
}

.marketing-guest-home
  form.hero-form.signin-form
  .hero-form__input
  input::placeholder,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__input
  input::placeholder,
.marketing-guest-home
  form.hero-form.signin-form
  .hero-form__input-control::placeholder,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__input-control::placeholder {
  color: var(--neutral-n30, #ebecef) !important;
  opacity: 1;
}

.marketing-guest-home form.hero-form.signin-form .hero-form__meta a,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__meta
  a,
.marketing-guest-home form.hero-form.signin-form a.hero-form__forgot-desktop,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  a.hero-form__forgot-desktop {
  color: var(--hero-error, #e74c5c) !important;
}

.marketing-guest-home form.hero-form.signin-form .hero-form__password-toggle,
.marketing-public-shell--guest-home
  form.hero-form.signin-form
  .hero-form__password-toggle {
  color: rgba(255, 255, 255, 0.78);
}