/* ============================================================
   P.Thai Capital — PREMIUM THEME OVERLAY  (2026-06-11)
   Loads AFTER style.css → overrides only. Fully reversible:
   remove this <link> + js/ai-effects.js + revert the 1 main.js line
   to restore the previous "neon/hacker" look.
   Direction: institutional / private-quant-fund — deep navy + champagne
   gold lead, restrained cool accents, glass, soft depth (no neon glow).
   ============================================================ */

:root {
  --bg:        #0a0e15;
  --bg-2:      #0e1420;
  --bg-3:      #131c2b;
  --surface:   #121a27;
  --surface-2: #18222f;
  --border:    #243244;
  --border-2:  #34465d;

  --neon:      #2fb89d;   /* refined deep teal-mint (was matrix green)   */
  --neon-2:    #5b93d6;   /* refined sapphire (was harsh cyan)           */
  --neon-3:    #9d86f0;   /* muted violet                                */
  --gold:      #d4af37;   /* champagne gold — now the PRIMARY accent     */
  --gold-2:    #f0d98a;

  --gradient:      linear-gradient(120deg, var(--gold-2) 0%, var(--gold) 55%, #b8902f 100%);
  --gradient-2:    linear-gradient(135deg, var(--neon) 0%, var(--neon-2) 100%);
  --gradient-gold: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 100%);

  --shadow:       0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(212, 175, 55, 0.18);
}

/* Calmer, premium backdrop (gold / teal / sapphire — low saturation) */
body {
  background-image:
    radial-gradient(ellipse at 18% -8%,  rgba(212, 175, 55, 0.10), transparent 52%),
    radial-gradient(ellipse at 82% 6%,   rgba(47, 184, 157, 0.07), transparent 52%),
    radial-gradient(ellipse at 50% 108%, rgba(91, 147, 214, 0.06), transparent 60%) !important;
}

/* Slow animated aurora — the ambient "AI" motion (div injected by ai-effects.js) */
/* ===== COSMIC LAYER — "bước vào vũ trụ, dải ngân hà mở ra" ===== */
/* Nebula clouds (deep indigo + gold + violet + teal wisps) */
.pz-aurora {
  position: fixed; inset: -25% -15% auto -15%; height: 92vh; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 50% at 26% 26%, rgba(157,134,240,0.16), transparent 70%),
    radial-gradient(34% 44% at 76% 20%, rgba(212,175,55,0.13), transparent 70%),
    radial-gradient(46% 52% at 58% 64%, rgba(47,184,157,0.09), transparent 72%),
    radial-gradient(64% 60% at 50% 40%, rgba(46,33,96,0.20), transparent 76%);
  filter: blur(50px) saturate(118%);
  transform-origin: 50% 36%;
  animation: pzDrift 34s ease-in-out infinite alternate, pzFade 2.6s ease both;
}
@keyframes pzDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1)    rotate(0deg); }
  100% { transform: translate3d(4%, 3%, 0)  scale(1.12) rotate(3deg); }
}
@keyframes pzFade { from { opacity: 0; } to { opacity: 1; } }

/* Glowing galactic core — slow breathe; the "new galaxy opening up" */
.pz-core {
  position: fixed; left: 50%; top: 30%; width: 80vw; height: 80vw;
  max-width: 600px; max-height: 600px; transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,217,138,0.12) 0%, rgba(157,134,240,0.06) 40%, transparent 66%);
  filter: blur(24px);
  animation: pzCore 9s ease-in-out infinite, pzFade 3s ease both;
}
@keyframes pzCore {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

/* Deep-space vignette → depth, the feeling of stepping into the universe */
.pz-vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(125% 92% at 50% 32%, transparent 54%, rgba(0,0,0,0.42) 100%);
  animation: pzFade 2.2s ease both;
}

/* The full-screen canvas now hosts the premium neural-particle field */
#matrix-bg { opacity: 0.72 !important; }

/* ---- Glass navigation with a gold hairline ---- */
.nav {
  background: rgba(10, 14, 21, 0.72) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14) !important;
}

/* ---- Buttons: gold-led, depth instead of neon glow ---- */
.btn { transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .25s ease !important; }
.btn--primary {
  background: var(--gradient) !important;
  color: #1a1206 !important; border: none !important; font-weight: 600;
  box-shadow: 0 10px 26px rgba(212, 175, 55, 0.20) !important;
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(212, 175, 55, 0.32) !important; }
.btn--outline {
  background: transparent !important;
  border: 1px solid rgba(212, 175, 55, 0.45) !important; color: var(--gold-2) !important;
}
.btn--outline:hover { background: rgba(212, 175, 55, 0.08) !important; transform: translateY(-2px); }

/* ---- Exclusive "LIVE" badge → glass gold pill ---- */
.hero__badge {
  background: rgba(212, 175, 55, 0.08) !important;
  border: 1px solid rgba(212, 175, 55, 0.30) !important;
  color: var(--gold-2) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px; letter-spacing: .06em;
}
.hero__badge .dot {
  background: var(--gold) !important;
  animation: pzPulse 2.4s infinite;
}
@keyframes pzPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.55); }
  70%  { box-shadow: 0 0 0 11px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

/* ---- Premium hero title: champagne gradient on the highlighted span ---- */
.hero__title .gradient {
  background: var(--gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Cards: subtle glass + gold edge & lift on hover ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.006)) !important;
  border: 1px solid var(--border) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s ease, box-shadow .3s ease !important;
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(212, 175, 55, 0.40) !important;
  box-shadow: var(--shadow-hover) !important;
}

/* ---- Premium scrollbar ---- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.25); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.40); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Respect reduced motion + keep mobile light ---- */
@media (prefers-reduced-motion: reduce) {
  .pz-aurora { animation: none; }
  .hero__badge .dot { animation: none; }
}
@media (max-width: 960px) {
  /* Effects ENABLED on mobile too (ai-effects.js uses a lighter config + pauses when hidden) */
  .pz-aurora { display: block; }
  #matrix-bg { display: block !important; opacity: 0.6 !important; }
}

/* ============================================================
   PREMIUM MOBILE — fund-grade phone layout (2026-06-11)
   Spacious, refined typography, glass, gold-led, big tap targets.
   Class-scoped overrides; loads after style.css.
   ============================================================ */
@media (max-width: 720px) {
  /* Subtle, fixed premium backdrop (particle canvas is off on phones for perf) */
  body, body.rp-body, body.jp-body {
    background:
      radial-gradient(130% 60% at 50% -6%, rgba(157,134,240,0.10), transparent 60%),
      radial-gradient(120% 50% at 50% 112%, rgba(212,175,55,0.05), transparent 62%),
      #06080f !important;
    background-attachment: fixed !important;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }
  html, body { overflow-x: hidden; }

  /* --- Header: opaque glass + gold hairline + notch-safe --- */
  .nav { background: rgba(10,14,21,0.92) !important; border-bottom: 1px solid rgba(212,175,55,0.16) !important; padding-top: env(safe-area-inset-top) !important; }
  .nav__inner { padding-top: 12px !important; padding-bottom: 12px !important; }
  .brand__name { font-size: 1.02rem !important; letter-spacing: -0.01em; }
  .brand__tag  { font-size: 0.55rem !important; letter-spacing: 0.18em !important; color: var(--gold-2) !important; opacity: 0.9; }
  .nav__toggle span { background: var(--gold-2) !important; }

  /* --- Mobile menu: premium glass drawer, big touch rows --- */
  .nav__links {
    background: rgba(10,14,21,0.98) !important;
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border-top: 1px solid rgba(212,175,55,0.18) !important;
    box-shadow: 0 26px 64px rgba(0,0,0,0.55) !important;
    padding: 8px 22px calc(22px + env(safe-area-inset-bottom)) !important;
  }
  .nav__links a { font-size: 1.04rem !important; padding: 15px 2px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
  .nav__links a.nav-quet { color: var(--gold-2) !important; font-weight: 600; }
  .nav__auth-cluster { display: flex; gap: 10px; margin-top: 14px; border-left: 0 !important; }
  .nav__auth-cluster .btn { flex: 1; }

  /* --- Hero: premium spacing + fluid type --- */
  .hero { padding: 28px 0 46px !important; }
  .hero__logo { max-height: 44px !important; margin-bottom: 18px; }
  .hero__badge { font-size: 0.65rem !important; padding: 6px 14px !important; }
  .hero__title { font-size: clamp(1.9rem, 8.4vw, 2.5rem) !important; line-height: 1.15 !important; letter-spacing: -0.022em !important; margin-bottom: 16px !important; }
  .hero__sub { font-size: 1.0rem !important; line-height: 1.62 !important; color: var(--text-dim) !important; }
  .hero__scroll { display: none !important; }

  /* --- CTAs: full-width, large, gold-led --- */
  .hero__cta { flex-direction: column !important; gap: 12px !important; width: 100%; margin-bottom: 40px !important; }
  .hero__cta .btn { width: 100% !important; justify-content: center; }
  .btn { min-height: 52px !important; font-size: 1.0rem !important; border-radius: 13px !important; padding-left: 22px; padding-right: 22px; }

  /* --- Hero stats: clean, evenly spaced --- */
  .hero__stats { gap: 16px 22px !important; flex-wrap: wrap; }
  .hero__stat-num { font-size: 1.55rem !important; }

  /* --- Sections: generous vertical rhythm (homepage top-level) --- */
  body > section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* --- Cards: breathing room + premium edge --- */
  .card { padding: 22px 20px !important; border-radius: 16px !important; }

  /* --- Footer: spacing + safe-area --- */
  .footer { padding-bottom: calc(30px + env(safe-area-inset-bottom)) !important; }
  .footer__grid { gap: 26px !important; }
}

@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.72rem, 9vw, 2.15rem) !important; }
  .container { padding-left: 17px !important; padding-right: 17px !important; }
  .hero__stats { gap: 14px 18px !important; }
  .hero__stat-num { font-size: 1.4rem !important; }
}