/* ═══════════════════════════════════════════════════════════
   QRAY brand styles — extends Bootstrap 5
   Bootstrap handles layout, spacing, breakpoints, components.
   This file only sets brand colors, typography, and
   non-Bootstrap visual flourishes.
   ═══════════════════════════════════════════════════════════ */

:root {
  --qray-black:        #080808;
  --qray-bg-section:   #0C0C10;
  --qray-bg-cta:       #06060A;
  --qray-purple:       #7B00CC;
  --qray-purple-light: #9B20EC;
  --qray-purple-glow:  rgba(123, 0, 204, 0.18);
  --qray-gray-300:     #C0C0C8;
  --qray-gray-500:     #6B6B7A;
  --font-display:      'Google Sans Display', 'Google Sans', sans-serif;
  --font-body:         'Google Sans', sans-serif;
}

/* ─── BASE ─── */
.qray-body {
  font-family: var(--font-body);
  background: var(--qray-black);
  color: #FFFFFF;
  overflow-x: hidden;
}

/* ─── LANGUAGE TOGGLE ─── */
.lang-content[data-lang="kk"] { display: none; }
.qray-body.kk .lang-content[data-lang="ru"] { display: none; }
.qray-body.kk .lang-content[data-lang="kk"] { display: block; }
.qray-body.kk span.lang-content[data-lang="kk"] { display: inline; }
.qray-body.kk span.lang-content[data-lang="ru"] { display: none; }

/* ─── PURPLE UTILITIES ─── */
.text-purple { color: var(--qray-purple-light) !important; font-style: normal; }
.border-purple { border-color: var(--qray-purple) !important; }

.btn-purple {
  background: var(--qray-purple);
  color: #fff;
  border: 1px solid var(--qray-purple);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-purple:hover, .btn-purple:focus {
  background: var(--qray-purple-light);
  border-color: var(--qray-purple-light);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--qray-purple-glow);
}

/* ─── NAV ─── */
.qray-nav {
  background: rgba(8, 8, 8, 0.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(123, 0, 204, 0.15);
  transition: background .3s;
  min-height: 72px;
}
.qray-nav.qray-nav-scrolled {
  background: rgba(8, 8, 8, 0.97);
}
.qray-nav .nav-link {
  color: var(--qray-gray-300);
  letter-spacing: 0.06em;
  transition: color .2s;
}
.qray-nav .nav-link:hover,
.qray-nav .nav-link:focus {
  color: var(--qray-purple-light);
}
.qray-logo {
  height: 24px;
  width: auto;
  display: block;
}

/* Lang toggle pill */
.lang-toggle .lang-btn {
  background: rgba(255, 255, 255, 0.06);
  color: var(--qray-gray-500);
  border: none;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 4px;
}
.lang-toggle .lang-btn.active {
  background: var(--qray-purple);
  color: #fff;
}

/* ─── HERO ─── */
.hero-section {
  min-height: 100vh;
  padding-top: 120px;
  padding-bottom: 140px;
  overflow: hidden;
}
.hero-bg {
  background-image: url('/images/hero-bg.jpg');
  background-size: cover;
  background-position: center left;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6,6,10,0.92) 0%, rgba(6,6,10,0.75) 50%, rgba(6,6,10,0.3) 100%),
    linear-gradient(180deg, rgba(6,6,10,0.2) 0%, rgba(6,6,10,0.6) 100%);
}
.hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(123,0,204,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123,0,204,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.hero-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5.5vw, 72px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.hero-sub {
  color: var(--qray-gray-300);
  line-height: 1.7;
  max-width: 540px;
}

/* Eyebrow horizontal bar */
.eyebrow-bar {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--qray-purple);
}
.hero-eyebrow,
.section-tag {
  color: var(--qray-purple-light);
  letter-spacing: 0.16em;
}

/* Hero stats */
.hero-stats {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 8, 8, 0.6);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.hero-stat {
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 24px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}
.hero-stat:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
@media (max-width: 767.98px) {
  /* 2x2 grid on mobile: every leftmost cell gets a left border too */
  .hero-stat:nth-child(odd) {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }
  /* Top row gets a bottom border to divide it from the bottom row */
  .hero-stat:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
}
@media (min-width: 992px) {
  .hero-stat {
    padding-top: 32px;
    padding-bottom: 28px;
  }
}
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 36px);
  line-height: 1;
  white-space: nowrap;
  /* Reserve uniform height so all numbers share the same baseline regardless
     of label wrapping in adjacent cells. */
  min-height: 1em;
  margin-bottom: 8px;
}
.stat-label {
  line-height: 1.3;
  /* Reserve room for 2 lines so label wrap in one cell doesn't make
     adjacent cells misalign vertically. */
  min-height: calc(1.3em * 2);
}

/* ─── SECTION BASE ─── */
.qray-section {
  padding: 100px 0;
  position: relative;
}
@media (max-width: 767.98px) {
  .qray-section { padding: 60px 0; }
}
.bg-about {
  background: var(--qray-bg-section);
}
.bg-cta {
  background: var(--qray-bg-cta);
}
.section-h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ─── ABOUT ─── */
.about-card {
  background: linear-gradient(135deg, rgba(123,0,204,0.12) 0%, rgba(30,42,64,0.4) 100%);
  border: 1px solid rgba(123, 0, 204, 0.2);
}
.about-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--qray-purple), transparent);
}
.invest-amount {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1;
}

.feature-icon {
  width: 44px;
  height: 44px;
  background: rgba(123, 0, 204, 0.15);
  border: 1px solid rgba(123, 0, 204, 0.3);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--qray-purple-light);
  font-size: 1.2rem;
}

.tl-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--qray-purple);
  margin-top: 6px;
}
.tl-dot-light { background: var(--qray-purple-light); }
.tl-dot-faint { background: rgba(123, 0, 204, 0.4); }

/* ─── PARTNER ─── */
.minfound-badge {
  background: rgba(74, 158, 255, 0.06);
  border: 1px solid rgba(74, 158, 255, 0.25);
}
.brand-name { font-family: var(--font-display); }
.partner-quote { color: var(--qray-gray-300); font-size: 0.95rem; }

.product-chip {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(123, 0, 204, 0.15);
  transition: border-color .2s, background .2s, transform .15s;
}
.product-chip:hover {
  border-color: rgba(123, 0, 204, 0.5);
  background: rgba(123, 0, 204, 0.08);
  transform: translateY(-2px);
}

/* ─── ZONES ─── */
.zone-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(123, 0, 204, 0.12);
  transition: border-color .2s, transform .2s;
}
.zone-card:hover {
  border-color: rgba(123, 0, 204, 0.4);
  transform: translateY(-3px);
}
.zone-img {
  height: 180px;
  background: linear-gradient(135deg, rgba(123, 0, 204, 0.15), rgba(13, 27, 62, 0.4));
  border-bottom: 1px solid rgba(123, 0, 204, 0.15);
}

/* ─── PRODUCTS ─── */
.product-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(123, 0, 204, 0.15);
  transition: border-color .2s, transform .2s;
}
.product-card:hover {
  border-color: rgba(123, 0, 204, 0.4);
  transform: translateY(-3px);
}
.product-featured {
  background: linear-gradient(135deg, rgba(123, 0, 204, 0.12), rgba(30, 42, 64, 0.3));
  border-color: rgba(123, 0, 204, 0.3);
}
.product-name { font-family: var(--font-display); line-height: 1.15; }
.product-badge {
  background: var(--qray-purple);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* ─── CTA ─── */
.cta-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* ─── FOOTER ─── */
.qray-footer {
  background: var(--qray-bg-cta);
  border-top: 1px solid rgba(123, 0, 204, 0.15);
}
.footer-h5 {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  color: #fff;
}
.footer-link {
  color: var(--qray-gray-500);
  text-decoration: none;
  transition: color .2s;
}
.footer-link:hover { color: var(--qray-purple-light); }

/* ─── ENTRANCE ANIM ─── */
@keyframes qrayFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow,
.hero-h1,
.hero-sub,
.hero-section .d-flex.gap-3 {
  opacity: 0;
  animation: qrayFadeUp 0.8s ease forwards;
}
.hero-eyebrow { animation-delay: 0.15s; }
.hero-h1 { animation-delay: 0.3s; }
.hero-sub { animation-delay: 0.45s; }
.hero-section .d-flex.gap-3 { animation-delay: 0.6s; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════
   LIGHT THEME — applied when body.qray-light
   ═══════════════════════════════════════════════════════════ */
.qray-light {
  background: #FFFFFF;
  color: #1A1A1A;
}
.qray-light .text-white,
.qray-light .text-light-emphasis,
.qray-light .stat-label.text-secondary,
.qray-light .text-secondary {
  color: #4A4A55 !important;
}

/* Headings + display text → near-black */
.qray-light .hero-h1,
.qray-light .section-h2,
.qray-light .cta-h2,
.qray-light .product-name,
.qray-light .footer-h5,
.qray-light h1,
.qray-light h2,
.qray-light h3,
.qray-light h4,
.qray-light h5 {
  color: #0A0A0A;
}
/* Strong emphasis inside paragraphs (we used .text-white in pug) */
.qray-light strong.text-white {
  color: #0A0A0A !important;
}

/* Nav: white frosted */
.qray-light .qray-nav {
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.qray-light .qray-nav.qray-nav-scrolled {
  background: rgba(255, 255, 255, 0.97);
}
.qray-light .qray-nav .nav-link {
  color: #4A4A55;
}
.qray-light .qray-nav .nav-link:hover,
.qray-light .qray-nav .nav-link:focus {
  color: var(--qray-purple);
}
/* Hamburger needs to be dark on white */
.qray-light .navbar-toggler-icon {
  filter: invert(1);
}
/* Logo on light theme uses a dedicated cropped asset — no filter needed */
.qray-light .qray-logo {
  filter: none;
}

/* Lang toggle pill on white */
.qray-light .lang-toggle .lang-btn {
  background: rgba(0, 0, 0, 0.06);
  color: #6B6B7A;
}
.qray-light .lang-toggle .lang-btn.active {
  background: var(--qray-purple);
  color: #fff;
}

/* Outline-light buttons need to flip to dark outline */
.qray-light .btn-outline-light {
  --bs-btn-color: #0A0A0A;
  --bs-btn-border-color: rgba(0, 0, 0, 0.2);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0A0A0A;
  --bs-btn-hover-border-color: #0A0A0A;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0A0A0A;
  --bs-btn-active-border-color: #0A0A0A;
}

/* Hero — show /images/hero-bg-white.jpg as-is, no brightening filter
   and no white overlay. The photo speaks for itself on the light theme. */
.qray-light .hero-bg {
  background-image: url('/images/hero-bg-white.jpg');
  background-size: cover;
  background-position: center;
  filter: none;
}
.qray-light .hero-bg::after {
  /* ~65% of the original brightening — a touch brighter than the 50% pass. */
  background:
    linear-gradient(90deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.2) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.32) 100%);
}
.qray-light .hero-bg::before {
  background-image:
    linear-gradient(rgba(123, 0, 204, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 0, 204, 0.08) 1px, transparent 1px);
}
.qray-light .hero-section {
  color: #0A0A0A !important;
}

/* Hero stats on white */
.qray-light .hero-stats {
  background: rgba(255, 255, 255, 0.85);
  border-top-color: rgba(0, 0, 0, 0.1);
}
.qray-light .hero-stat,
.qray-light .hero-stat:first-child,
.qray-light .hero-stat:nth-child(odd) {
  border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Section backgrounds */
.qray-light .bg-about {
  background: #F4F4F7 !important;
}
.qray-light .bg-cta {
  background: #FAFAFC !important;
}

/* Cards — white surfaces with subtle borders */
.qray-light .about-card {
  background: linear-gradient(135deg, rgba(123, 0, 204, 0.04) 0%, rgba(255, 255, 255, 0.6) 100%);
  border: 1px solid rgba(123, 0, 204, 0.18);
}
.qray-light .product-chip,
.qray-light .zone-card,
.qray-light .product-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.qray-light .product-chip:hover,
.qray-light .zone-card:hover,
.qray-light .product-card:hover {
  border-color: rgba(123, 0, 204, 0.45);
  background: #FFFFFF;
}
.qray-light .product-featured {
  background: linear-gradient(135deg, rgba(123, 0, 204, 0.06), #FFFFFF);
  border-color: rgba(123, 0, 204, 0.28);
}
.qray-light .zone-img {
  background: linear-gradient(135deg, rgba(123, 0, 204, 0.06), rgba(232, 235, 245, 0.7));
  border-bottom-color: rgba(0, 0, 0, 0.08);
}
.qray-light .feature-icon {
  background: rgba(123, 0, 204, 0.1);
  border-color: rgba(123, 0, 204, 0.28);
  color: var(--qray-purple);
}

/* Partner badge */
.qray-light .minfound-badge {
  background: rgba(74, 158, 255, 0.08);
  border-color: rgba(74, 158, 255, 0.3);
  color: #1A1A1A;
}
.qray-light .partner-quote {
  color: #4A4A55;
}

/* Footer */
.qray-light .qray-footer {
  background: #F4F4F7;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.qray-light .qray-footer .footer-h5 { color: #0A0A0A; }
.qray-light .footer-link { color: #6B6B7A; }
.qray-light .footer-link:hover { color: var(--qray-purple); }
.qray-light .footer-bottom {
  border-top-color: rgba(0, 0, 0, 0.1) !important;
}

/* Hero entrance animation contrast tweak (no change needed for fadeUp). */