:root {
  --premium-gold: #1D4ED8;
  --premium-gold-soft: rgba(29, 78, 216, 0.22);
  --premium-shadow-gold: 0 10px 28px rgba(29, 78, 216, 0.16);
  --premium-shadow-dark: 0 14px 40px rgba(2, 6, 23, 0.36);
  --premium-ease: 0.3s ease;
}

html {
  scroll-behavior: smooth;
}

body {
  position: relative;
  isolation: isolate;
}

body::after {
  content: none;
}

@keyframes premiumAmbientShift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(0, -1.5%, 0) scale(1.03);
    opacity: 1;
  }
}

body > * {
  position: relative;
  z-index: 1;
}

.page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  background: linear-gradient(135deg, rgba(6, 6, 6, 0.8), rgba(14, 14, 14, 0.92));
}

.is-page-leaving body {
  filter: blur(2px);
  opacity: 0.94;
}

/* Hover/focus transitions ONLY. Critically, we do NOT include `opacity` or
   `transform` here — those are owned by the scroll-reveal system below. If we
   transitioned them globally, GSAP/IO-driven reveals would fight a 0.3s CSS
   tween on every inline style write and animations would visibly break. */
a,
button,
input,
textarea,
select,
[role="button"],
.card,
.stat-card,
.prop-card,
.step,
.why-card,
.deal-preview,
.markets-card,
.exit-card,
.hero-stat-card,
.form-card {
  transition:
    box-shadow var(--premium-ease),
    border-color var(--premium-ease),
    background-color var(--premium-ease),
    color var(--premium-ease),
    filter var(--premium-ease);
}

/* Hover lift wants its own transform transition. Scoped to :hover so it only
   applies when the user is hovering — doesn't compete with the reveal. */
/* Hover lift is for interactive marketing/marketplace cards only. The plain
   `.card` class is used for static info panels on settings/dashboard pages
   where lift-on-hover is distracting — so it's intentionally NOT in this
   list. If you want a specific `.card` to lift, give it `.lift-on-hover` or
   one of the more specific classes (`.prop-card`, `.stat-card`, etc.). */
.stat-card:hover,
.prop-card:hover,
.step:hover,
.why-card:hover,
.deal-preview:hover,
.markets-card:hover,
.exit-card:hover,
.hero-stat-card:hover,
.form-card:hover,
.lift-on-hover:hover {
  transition:
    transform var(--premium-ease),
    box-shadow var(--premium-ease),
    border-color var(--premium-ease);
}

.prop-card:hover,
.stat-card:hover,
.deal-preview:hover,
.markets-card:hover,
.hero-stat-card:hover,
.form-card:hover,
.exit-card:hover,
.step:hover,
.why-card:hover,
.lift-on-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--premium-shadow-dark), var(--premium-shadow-gold);
  border-color: var(--premium-gold-soft) !important;
}

/* --- UNIFIED BUTTON HOVER STATES -------------------------------------
   All primary action buttons share one hover behavior; all secondary/ghost
   buttons share another. If you add a new button class that should match
   one of these patterns, just append it to the right selector list — don't
   write a one-off `.btn-foo:hover` override in a page-specific stylesheet.
   Per-page overrides are exactly why hover states got inconsistent.
   ----------------------------------------------------------------------- */

/* Primary: solid blue ? slightly darker blue + small lift + soft glow */
.btn-primary:hover,
.btn-submit:hover,
.btn-next:hover,
.btn-primary-sm:hover,
.btn-kyc:hover,
.btn-add:hover,
.nav-cta:hover {
  background: #0069DB !important;
  border-color: #0069DB !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28) !important;
}

.btn-primary:active,
.btn-submit:active,
.btn-next:active,
.btn-primary-sm:active,
.btn-kyc:active,
.btn-add:active,
.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(29, 78, 216, 0.2) !important;
}

/* Secondary / ghost / back: keep light fill, gain a clear blue ring */
.btn-secondary:hover,
.btn-ghost:hover,
.btn-back:hover,
.nav-link-btn:hover,
.account-trigger:hover {
  border-color: var(--premium-gold) !important;
  color: var(--premium-gold) !important;
  box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.45) inset;
}

.premium-click {
  transform: scale(0.985);
}

input:focus,
textarea:focus,
select:focus,
.otp-digit:focus,
.form-input:focus {
  border-color: var(--premium-gold) !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.16) !important;
}

/* -----------------------------------------------------------------------
   SCROLL REVEAL — minimal pre-hide layer
   ---------------------------------------------------------------------
   All actual reveal animation is owned by premium-animations.js, which
   writes inline `!important` styles to elements that match `[data-anim]`,
   `.fade-in`, `.reveal`, or `[data-reveal]`.

   This CSS rule exists only to hide those elements between page paint and
   JS boot, so there's no flash of visible content before the fade plays.
   Once JS runs it adds `.anim-js-ready` to <html>, which removes the
   pre-hide. If JS never runs at all, a 2-second keyframe failsafe reveals
   everything so the page is never permanently stuck.

   DO NOT add `transition: opacity`, `transition: transform`, or
   `transition: all` rules to revealable elements. The inline `!important`
   transition from JS will override them, but it causes confusion.
   ----------------------------------------------------------------------- */

html:not(.anim-js-ready) [data-anim]:not([data-anim-skip]),
html:not(.anim-js-ready) .fade-in:not([data-anim-skip]),
html:not(.anim-js-ready) .reveal:not([data-anim-skip]),
html:not(.anim-js-ready) [data-reveal]:not([data-anim-skip]) {
  opacity: 0;
  animation: animFailsafe 0.4s ease-out 2s forwards;
}

@keyframes animFailsafe {
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.anim-js-ready) [data-anim],
  html:not(.anim-js-ready) .fade-in,
  html:not(.anim-js-ready) .reveal,
  html:not(.anim-js-ready) [data-reveal] {
    opacity: 1;
    animation: none;
  }
}

@media (max-width: 820px) {
  body::after {
    animation-duration: 18s;
  }

  .prop-card:hover,
  .stat-card:hover,
  .deal-preview:hover,
  .markets-card:hover,
  .hero-stat-card:hover,
  .form-card:hover,
  .exit-card:hover,
  .step:hover,
  .why-card:hover,
  .lift-on-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
  }
}

@media (hover: none), (pointer: coarse) {
  .page-transition-overlay {
    display: none !important;
  }

  .is-page-leaving body {
    filter: none !important;
    opacity: 1 !important;
  }

  .prop-card:hover,
  .stat-card:hover,
  .deal-preview:hover,
  .markets-card:hover,
  .hero-stat-card:hover,
  .form-card:hover,
  .exit-card:hover,
  .step:hover,
  .why-card:hover,
  .lift-on-hover:hover,
  .premium-click {
    transform: none !important;
    box-shadow: inherit;
  }

  .slime-hero-bg::before,
  .slime-hero-bg::after,
  .slime-ribbon,
  .slime-glow,
  .marketplace-video,
  .hero-video {
    animation: none !important;
  }

  .slime-hero-bg,
  .slime-ribbon,
  .slime-glow {
    max-width: 100vw !important;
  }

  .slime-ribbon {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }

  .slime-glow.glow-2 {
    right: 0 !important;
  }
}

/* ----- UNIVERSAL RESPONSIVE SAFETY LAYER -----
   Defensive rules so layouts never break on unexpected screen sizes.
   Targets: 320–430 (phone portrait), 640–820 (phone landscape),
            768–1024 (tablet), 1280+ (desktop).
   Only adds guards — doesn't override page-specific responsive work. */

html, body { max-width: 100%; overflow-x: hidden; }

img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
iframe, video { display: block; }

table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; word-wrap: break-word; }

/* Prevent iOS zoom-on-focus by enforcing 16px minimum on inputs */
@media (max-width: 820px) {
  input, select, textarea { font-size: 16px !important; }
  html { scroll-padding-top: 76px; }
  section { overflow-x: clip; }
  body { min-width: 0; }
  .nav,
  nav.nav,
  #navbar,
  .topbar {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  .nav-drawer {
    max-height: calc(100dvh - 64px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav-drawer.open {
    display: flex !important;
  }
  .nav .nav-toggle,
  nav.nav .nav-toggle,
  #navbar .nav-toggle,
  .topbar .nav-toggle {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
  }
  .nav .nav-toggle i,
  nav.nav .nav-toggle i,
  #navbar .nav-toggle i,
  .topbar .nav-toggle i {
    color: inherit !important;
  }
  .nav-actions,
  #logged-out-actions,
  #logged-in-actions {
    min-width: 0;
  }
  .account-menu {
    right: 0 !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* Modal containers — cap height and let content scroll instead of overflowing the viewport */
.modal-overlay, .modal-card, .modal-card-content, [class*="modal-card"] {
  max-width: 100%;
}
@media (max-width: 768px) {
  .modal-card, [class*="modal-card"] {
    max-height: 92vh;
    max-height: 92dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px !important;
  }
  .modal-overlay { padding: 12px !important; }
  .success-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Form grids — stack on narrow tablets/phones */
@media (max-width: 720px) {
  .nav #logged-out-actions,
  nav.nav #logged-out-actions {
    display: none !important;
  }
  h1, h2, h3, p, a, button, label, input, textarea, select {
    overflow-wrap: anywhere;
  }
  .hero,
  .landing-hero {
    min-height: 100svh !important;
  }
  .hero-content,
  .landing-hero-inner,
  .marketplace-container,
  .form-wrap,
  .contact-grid,
  .action-split-grid,
  .faq-list {
    width: 100% !important;
    max-width: 100% !important;
  }
  .hero-btns,
  .cta-btns,
  .markets-card-btns,
  .success-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100%;
  }
  .hero-btns > *,
  .cta-btns > *,
  .markets-card-btns > *,
  .success-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  .toast {
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    max-width: none !important;
  }
  .form-grid, .form-grid.cols-2, .form-grid.cols-3, .form-grid.cols-4 {
    grid-template-columns: 1fr !important;
  }
  .field-row { grid-template-columns: 1fr !important; }
}

/* Touch-friendly minimum tap targets */
@media (max-width: 820px) and (hover: none) {
  button, .btn-primary, .btn-secondary, a.nav-cta, .filter-btn, .nav-toggle {
    min-height: 44px;
  }
}

/* Smallest phones (=380px — iPhone SE, small Androids): tighten padding */
@media (max-width: 380px) {
  body { font-size: 15px; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  .nav, nav.nav { padding-left: 14px !important; padding-right: 14px !important; }
  .logo { font-size: 1.12rem !important; }
  h1 { font-size: clamp(2.2rem, 11vw, 3rem) !important; }
  h2 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
  .btn-primary, .btn-secondary { padding: 14px 22px !important; font-size: 0.74rem !important; }
  .markets-card-btns .btn-primary { min-width: 0 !important; width: 100%; }
  .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 340px) {
  .logo,
  .nav-logo,
  .topbar-logo,
  .nav-logo-text,
  .topbar-logo-text {
    font-size: 1rem !important;
  }
  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }
}

/* Very small viewport heights (landscape phones): allow modals to scroll */
@media (max-height: 600px) {
  .modal-card, [class*="modal-card"] {
    max-height: 94vh;
    max-height: 94dvh;
    overflow-y: auto;
  }
}

/* Large desktops (1440+): cap content widths so text lines stay readable */
@media (min-width: 1440px) {
  .hero-content, .form-wrap, .contact-grid, .action-split-grid, .faq-list {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  body::after {
    animation: none !important;
  }
}




/* Shared enterprise visual language */
body { background: #FFFFFF !important; color: #111827 !important; font-family: Inter, system-ui, sans-serif !important; }
p, .muted, .text-muted { color: #64748B !important; }
h1, h2, h3, h4, h5, h6 { color: #111827 !important; font-weight: 700; letter-spacing: -0.02em; }
a, .link, .accent { color: #1D4ED8 !important; }
.nav, .topbar, .ticker, .hero, .footer-dark { background: #08111F !important; }
.card, .stat-card, .prop-card, .markets-card, .exit-card, .form-card, .modal-card, .surface {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(2, 6, 23, 0.07) !important;
}
.btn-primary, .btn-submit, .nav-cta, .account-trigger, .btn-add {
  background: #1D4ED8 !important;
  border-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
}
.btn-secondary, .btn-ghost, .btn-back, .nav-link-btn {
  border-radius: 10px !important;
}

@media (max-width: 900px) {
  #account-dropdown { display: none !important; }
}