@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/brand/Satoshi-Variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/brand/Satoshi-VariableItalic.woff2') format('woff2');
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

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

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

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

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

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

:root {
  --color-primary: #ffb600;
  --color-primary-light: #ffc840;
  --color-primary-dark: #cc9200;
  --color-primary-rgb: 255, 182, 0;
  --color-secondary: #00083f;
  --color-secondary-light: #40466f;
  --color-secondary-dark: #000632;
  --bg-primary: #030717;
  --bg-secondary: #070b1f;
  --bg-tertiary: #0d1231;
  --bg-elevated: #111840;
  --surface-1: rgba(7, 11, 31, 0.82);
  --surface-2: rgba(12, 18, 46, 0.92);
  --surface-3: rgba(18, 26, 61, 0.98);
  --surface-hover: rgba(255, 182, 0, 0.08);
  --surface-active: rgba(255, 182, 0, 0.12);
  --bg-overlay: rgba(2, 5, 18, 0.82);
  --border-glow: rgba(255, 182, 0, 0.18);
  --shadow-glow: 0 0 20px rgba(255, 182, 0, 0.22);
  --font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-display: 'Gilroy', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-primary: var(--font-family);
  --font-display: var(--font-family-display);
  --font-family-mono: var(--font-family);
  --font-mono: var(--font-family);
}

[data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.9);
  --surface-1: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;
  --surface-hover: #f4ead1;
  --surface-active: #edd7a0;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;
  --text-inverse: #ffffff;
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  --color-primary: #ffb600;
  --color-primary-light: #ffc840;
  --color-primary-dark: #cc9200;
  --color-primary-rgb: 255, 182, 0;
  --color-secondary: #00083f;
  --color-secondary-light: #40466f;
  --color-secondary-dark: #000632;
  --shadow-glow: 0 0 20px rgba(255, 182, 0, 0.14);
}

body,
input,
button,
textarea,
select {
  font-family: var(--font-family);
}

.navbar-title,
.mobile-menu-header .navbar-title,
.footer-title,
.text-gradient,
.hero-title,
.page-title,
.rates-title,
.about-title,
.contact-title,
.cta-title,
.section-title,
.auth-title,
.footer-column h4,
.notifications-header h4 {
  font-family: var(--font-display);
}

.hero-stat-value {
  font-family: var(--font-display);
}

.navbar-title,
.footer-title {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.footer-brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.navbar-brand--wordmark {
  gap: 0;
}

.brand-wordmark {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(255, 182, 0, 0.18));
}

.brand-wordmark-stack {
  display: block;
  line-height: 0;
}

.brand-wordmark--theme-light {
  display: none;
}

[data-theme="light"] .brand-wordmark--theme-dark {
  display: none;
}

[data-theme="light"] .brand-wordmark--theme-light {
  display: block;
}

[data-theme="light"] .brand-wordmark {
  filter: drop-shadow(0 10px 18px rgba(0, 8, 63, 0.12));
}

.brand-wordmark-stack--nav {
  width: 128px;
  max-width: 42vw;
}

.brand-wordmark-stack--mobile {
  width: 118px;
  max-width: 52vw;
}

.brand-wordmark-stack--footer {
  width: 176px;
  max-width: 100%;
}

.footer-brand-lockup .footer-logo {
  margin-bottom: 0;
}

.footer-brand-lockup--wordmark {
  gap: 0;
}

.footer-title {
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
}

.navbar-logo,
.footer-logo,
.auth-logo,
.loading-logo img {
  object-fit: contain;
  border-radius: 0;
  filter: drop-shadow(0 10px 22px rgba(255, 182, 0, 0.22));
}

.navbar-logo {
  width: 46px;
  height: 46px;
}

.footer-logo {
  width: 52px;
  height: 52px;
}

.auth-logo {
  width: 80px;
  height: 80px;
}

.loading-logo img {
  width: 92px;
  height: 92px;
}

.mobile-menu-item.router-link-exact-active,
.mobile-menu-item.router-link-active {
  background: linear-gradient(135deg, rgba(255, 182, 0, 0.16), rgba(255, 182, 0, 0.05));
  border-right-color: var(--color-primary);
}

.theme-option--active {
  background-color: rgba(255, 182, 0, 0.15);
}

.rates-refresh-btn:hover {
  background: rgba(255, 182, 0, 0.1);
}

.bank-select-card.selected {
  background: rgba(255, 182, 0, 0.05);
}

.contact-info-icon {
  background: linear-gradient(135deg, rgba(255, 182, 0, 0.12), rgba(255, 182, 0, 0.05));
}

.text-gradient {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.feature-icon,
.feature-icon-sm {
  background: linear-gradient(135deg, rgba(255, 182, 0, 0.16) 0%, rgba(255, 182, 0, 0.08) 100%);
  color: var(--color-primary);
}

.cta-card {
  background: linear-gradient(135deg, rgba(255, 182, 0, 0.12) 0%, rgba(255, 182, 0, 0.05) 100%);
  border-color: rgba(255, 182, 0, 0.2);
}

.otp-input {
  font-family: var(--font-display);
}

@media (max-width: 768px) {
  .brand-wordmark-stack--nav {
    width: 104px;
    max-width: 34vw;
  }

  .brand-wordmark-stack--mobile {
    width: 104px;
    max-width: 42vw;
  }

  .brand-wordmark-stack--footer {
    width: 136px;
  }
}