/* Ridgeline Bondvale — muted Slate Navy + Bronze theme override */
:root,
html {
  /* Brand & accents */
  --color-primary: #3b4f63;        /* slate navy */
  --color-primary-dark: #243140;   /* darker slate */
  --color-primary-light: #4e6781;
  --color-primary-lighter: #7a93ad;

  --color-secondary: #b08d57;      /* bronze (CTA accent) */
  --color-secondary-dark: #8a6f44;
  --color-secondary-light: #c9a874;
  --color-secondary-lighter: #ddc299;

  --color-brand-start: #b08d57;    /* gradient start = bronze */
  --color-brand-end:   #4e6781;    /* gradient end   = light slate */

  --color-dark: #141b25;
  --color-dark-light: #0f141d;
  --color-dark-lighter: rgba(255, 255, 255, 0.06);

  --color-grey: #6a7280;
  --color-grey-light: #d3d8df;
  --color-white: #fff;
  --color-black: #000;
}

/* Page background */
html, body { background-color: var(--color-dark); color: #eef1f5; }

/* Bigger, calmer typography defaults */
body { font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
h1, h2, h3, h4 { color: #ffffff; letter-spacing: -0.01em; }
h1 { font-size: clamp(36px, 5vw, 64px); font-weight: 800; line-height: 1.1; }
h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; line-height: 1.15; }
h3 { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; line-height: 1.25; }
a  { color: inherit; }
mark { background: transparent; color: inherit; }

/* Bridge custom gradients used in markup to the new palette */
.bg-gradient-primary {
  background-image: linear-gradient(135deg, #243140 0%, #2f3e52 100%);
  border: 1px solid rgba(176, 141, 87, 0.18);
}
.bg-gradient-step {
  background-image: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary-light) 100%);
}
.bg-gradient-soft {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(176, 141, 87, 0.2);
}
.bg-gradient-coming {
  background-color: rgba(176, 141, 87, 0.12);
  color: #d4b585;
  border: 1px solid rgba(176, 141, 87, 0.3);
}

/* Borders/cards using inline cyan/lime in markup — neutralise with overlay rules */
.bg-\[\(rgba\(35\,38\,47\,0\.6\)\)\] { background-color: rgba(20, 27, 37, 0.6) !important; }

/* Tone down hover halos that the markup hardcodes */
.bg-\[rgba\(255\,255\,255\,0\.10\)\] { background-color: rgba(255,255,255,0.06) !important; }

/* Reduce green-emerald accents used inline */
.text-emerald-600 { color: #b08d57 !important; }
.bg-emerald-600  { background-color: #b08d57 !important; }
.text-amber-500  { color: #d4b585 !important; }
.text-yellow-400 { color: #d4b585 !important; }

/* Stars (svg fill) stay warm but slightly muted via override */
svg [fill="#FFC228"] { fill: #d4b585; }

/* CTA buttons */
.btn-secondary,
.btn.btn-secondary {
  background-color: var(--color-secondary);
  color: #1a2433;
  border: none;
}
.btn-secondary:hover,
.btn.btn-secondary:hover { background-color: var(--color-secondary-dark); color: #fff; }

/* Header — make sticky on mobile */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(20, 27, 37, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.site-header.is-overlay { position: absolute; background: transparent; backdrop-filter: none; border: 0; }
@media (max-width: 1023px) {
  .site-header { position: sticky !important; background: rgba(20, 27, 37, 0.95); }
}

.site-header a.brand-logo {
  background-image: linear-gradient(90deg, var(--color-secondary-light), var(--color-primary-lighter));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-weight: 800;
}

/* Mobile menu button - always visible at ≤1023px (top-right) */
.menu-icon {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  color: #fff;
  cursor: pointer;
}
@media (max-width: 1023px) {
  .menu-icon { display: inline-flex; }
  .header-desktop-nav { display: none; }
}

/* Mobile menu panel — fullscreen overlay; toggled by data-active.
   We aggressively override the Tailwind/utility-generated translate/scale/opacity.
   (The JS portals this node to <body>, so it must work both inside header and outside.) */
.mobile-menu,
.site-header .mobile-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  inset: 0 !important;
  z-index: 90 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: #141b25 !important;
  padding: 80px 24px 32px !important;
  margin: 0 !important;
  overflow-y: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  translate: 0 0 !important;
  scale: 1 1 !important;
  --tw-translate-x: 0 !important;
  --tw-translate-y: 0 !important;
  --tw-scale-x: 100% !important;
  --tw-scale-y: 100% !important;
  --tw-scale-z: 100% !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
}
.mobile-menu[data-active],
.site-header .mobile-menu[data-active] { display: flex !important; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 8px; }
.mobile-menu ul a {
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,0.04);
}
.mobile-menu ul a.active,
.mobile-menu ul a:hover {
  background: var(--color-primary);
  border-color: var(--color-secondary);
}
.mobile-menu .mm-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* Desktop nav */
.header-desktop-nav ul { display: flex; gap: 22px; }
.header-desktop-nav a {
  font-weight: 500;
  color: #d3d8df;
  padding: 8px 4px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.header-desktop-nav a:hover,
.header-desktop-nav a.active {
  color: #fff;
  border-bottom-color: var(--color-secondary);
}

/* Hero: keep dark layered look, lighter copy */
.hero-section h1 mark { background: transparent; color: var(--color-secondary-light); }
.hero-section p { color: #d3d8df; }

/* Forms */
.form-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 24px;
  padding: 28px;
}
.input, input.input, input[type="text"].input, input[type="email"].input, input[type="tel"].input {
  background: #ffffff;
  color: #1a2433;
  border: 1px solid #cbd0d8;
  border-radius: 12px;
  min-height: 56px;
  padding: 14px 18px;
  font-size: 16px;
  width: 100%;
}
.input:focus { outline: 2px solid var(--color-secondary); }
.btn-primary {
  background: var(--color-secondary);
  color: #1a2433;
  border: none;
  border-radius: 999px;
  padding: 18px 28px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  width: 100%;
  transition: background .2s;
}
.btn-primary:hover { background: var(--color-secondary-dark); color: #fff; }

/* Tables - readable */
table.spec-table { width: 100%; border-collapse: collapse; }
table.spec-table th, table.spec-table td {
  padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: middle;
}
table.spec-table tr:nth-child(odd) { background: rgba(176,141,87,0.10); }
table.spec-table th { color: #fff; font-weight: 600; text-align: left; }
table.spec-table td { color: #d3d8df; }

/* Cards generic */
.tile {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 24px;
}
.tile-bordered {
  border: 1px solid rgba(176,141,87,0.30);
}
.tile-step-active {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%);
  color: #1a2433;
  border: none;
}
.tile-step-active a { color: #1a2433; }

/* FAQ accordion */
.faq-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}
.faq-item h3 { font-size: clamp(18px, 2vw, 22px); margin: 0; }
.faq-item button { width: 100%; text-align: left; padding: 18px 22px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: transparent; border: 0; cursor: pointer; }
.faq-item .faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-item .faq-answer-inner { padding: 0 22px 20px; color: #d3d8df; }

/* Footer */
.site-footer {
  background: rgba(0,0,0,0.25);
  padding: 60px 0 30px;
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* Helpers */
.section { padding: 60px 0; }
@media (min-width: 768px) { .section { padding: 80px 0; } }
.container { max-width: 1224px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* Hide skeleton instantly once styles load (avoid jank if Tailwind loads slow) */
html.loading body > *:not(#skeleton) { visibility: visible !important; }
#skeleton { display: none !important; }

/* Hero CTA button visibility */
.hero-cta-btn { background: var(--color-secondary); color: #1a2433; padding: 14px 22px; border-radius: 999px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.hero-cta-btn:hover { background: var(--color-secondary-dark); color: #fff; }
.hero-cta-btn.hidden { display: none; }
@media (max-width: 1023px) {
  .site-header .hero-cta-btn { display: none; }
}

/* Trading widget grid */
.tradingview-widget-container { border-radius: 12px; overflow: hidden; }

/* Intl tel input adjustments */
.iti { width: 100%; }
.iti__country-list { color: #1a2433; }

/* utility */
.brand-grad-text {
  background-image: linear-gradient(90deg, var(--color-secondary-light), var(--color-primary-lighter));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.text-grey-light { color: #d3d8df !important; }
.text-grey { color: #8d96a3 !important; }

/* phone select country flag */
.iti--separate-dial-code .iti__selected-flag { background-color: rgba(255,255,255,0.95); }

/* tile review card */
.review-card {
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  height: 100%;
}

/* keep video player ratio */
.video-poster { aspect-ratio: 16/9; background: #000; border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; }
.video-poster img { width:100%; height:100%; object-fit:cover; opacity:.8; }
.video-poster .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }

/* ============================================================
   VISUAL-REVIEW FIXES (responsive Tailwind variants missing
   from tailwind.min.css build) — see правки-*.txt
   ============================================================ */

/* Fix 1: two-column desktop layouts (HTML uses lg:!grid-cols-2,
   but Tailwind file has no !important variant, so inline
   grid-template-columns:1fr wins). Make the class work. */
@media (min-width: 1024px) {
  .lg\:\!grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Fix 2: header "Open Account" CTA — HTML has `hidden md:inline-flex`,
   but `md:inline-flex` is missing in tailwind.min.css. Show it on md+. */
@media (min-width: 768px) {
  .site-header .hero-cta-btn.hidden { display: inline-flex !important; }
}

/* Fix 3: brand logo size on desktop — HTML uses
   `text-[24px] md:text-[34px] lg:text-[44px]` but md:/lg: variants
   are not in the Tailwind build, so it stays 24px everywhere. */
@media (min-width: 768px)  { .site-header a.brand-logo,
                              .site-footer a.brand-logo { font-size: 34px; } }
@media (min-width: 1024px) { .site-header a.brand-logo { font-size: 44px; }
                              .site-footer a.brand-logo { font-size: 42px; } }

/* Fix 4: prevent horizontal scroll on very narrow phones (≤340px)
   caused by the Key Capabilities spec-table. */
@media (max-width: 360px) {
  table.spec-table th,
  table.spec-table td { padding: 12px 10px; }
  table.spec-table th { font-size: 14px; }
}