/* ============================================================
   Trixo Market — Homepage-specific styles
   ============================================================ */

/* ---- Hero ---- */
.hero {
  position: relative;
  padding-block: calc(var(--header-h) + var(--sp-9)) var(--sp-9);
  overflow: hidden;
  background: var(--grad-hero), var(--bg);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero__copy { max-width: 600px; }
.hero h1 { margin: var(--sp-4) 0; }
.hero__sub { font-size: var(--fs-lead); color: var(--text-muted); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-4); }
.hero__trust { font-size: var(--fs-sm); color: var(--text-dim); }
.hero__visual { position: relative; z-index: 1; }

/* ---- Hero image slider ---- */
.hero-slider { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-strong); box-shadow: var(--sh-lg); }
.hero-slider__slide { grid-area: 1 / 1; min-width: 0; opacity: 0; transition: opacity 800ms var(--ease); }
.hero-slider__slide.is-active { opacity: 1; }
.hero-slider__slide img { display: block; width: 100%; height: auto; }
.hero-slider__dots { position: absolute; inset-block-end: 14px; inset-inline: 0; z-index: 2; display: flex; gap: 8px; justify-content: center; }
.hero-slider__dot { width: 8px; height: 8px; padding: 0; border-radius: var(--r-pill); background: rgba(255,255,255,0.45); transition: width var(--t-fast) var(--ease), background var(--t-fast); }
.hero-slider__dot.is-active { width: 22px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-slider__slide { transition: none; } }
.hero__orb1 { width: 420px; height: 420px; background: var(--accent); inset-block-start: -120px; inset-inline-end: -80px; opacity: 0.28; }
.hero__orb2 { width: 320px; height: 320px; background: #7a1020; inset-block-end: -120px; inset-inline-start: -60px; opacity: 0.4; }
@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__visual { order: -1; max-width: 520px; }
}

/* ---- Market mini tables (homepage tabs) ---- */
.market-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
@media (max-width: 700px) { .market-panel { grid-template-columns: 1fr; } }
.quote {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  transition: border-color var(--t-fast), transform var(--t-fast);
}
.quote:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.quote__sym { font-weight: var(--fw-semibold); }
.quote__name { font-size: var(--fs-xs); color: var(--text-dim); }
.quote__price { text-align: end; font-variant-numeric: tabular-nums; }
.quote__chg { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.quote__chg.up { color: var(--up); }
.quote__chg.down { color: var(--down); }


/* ---- Skeleton image placeholder (swap for real photos) ---- */
.skeleton-img {
  background:
    radial-gradient(80% 120% at 20% 10%, rgba(238,49,66,0.25), transparent 50%),
    linear-gradient(135deg, #1c1c20, #101013);
  position: relative;
}
.skeleton-img::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(transparent 0 60%, rgba(238,49,66,0.12) 60%);
  -webkit-mask: linear-gradient(135deg, transparent, #000); mask: linear-gradient(135deg, transparent, #000);
}

/* ---- VIP teaser ---- */
.vip-teaser { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-7); align-items: center; padding: var(--sp-8); border: 1px solid var(--border); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 100% 0%, rgba(238,49,66,0.14), transparent 55%), var(--surface); }
.vip-teaser__tiers { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.vip-teaser__tiers .badge { font-size: var(--fs-sm); padding: 0.55rem 1.1rem; }
@media (max-width: 800px) { .vip-teaser { grid-template-columns: 1fr; } }

/* ---- Testimonials ---- */
.testi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); height: 100%; display: flex; flex-direction: column; gap: var(--sp-4); }
.testi__stars { color: #f4c150; letter-spacing: 2px; }
.testi__quote { color: var(--text); font-size: 1.05rem; flex: 1; }
.testi__who { display: flex; align-items: center; gap: var(--sp-3); }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--grad-accent); display: grid; place-items: center; font-weight: 700; color: #fff; }
.testi__name { font-weight: var(--fw-semibold); font-size: 0.95rem; }
.testi__role { font-size: var(--fs-xs); color: var(--text-dim); }

/* ---- QR (real image) ---- */
.qr-img { width: 132px; height: 132px; border-radius: var(--r-md); background: #fff; padding: 8px; box-shadow: var(--sh-md); }
@media (max-width: 560px) { .qr-img { display: none; } }

/* ---- CTA banner ---- */
.cta-banner { position: relative; overflow: hidden; text-align: center; padding: clamp(3.5rem,2rem+7vw,7rem) clamp(1.5rem,1rem+5vw,5.5rem); border-radius: var(--r-xl); border: 1px solid var(--border-strong); background: radial-gradient(120% 160% at 50% 0%, rgba(238,49,66,0.22), transparent 60%), var(--bg-pure); }
.cta-banner h2 { max-width: 18ch; margin-inline: auto; }
.cta-banner p { max-width: 52ch; margin: var(--sp-4) auto var(--sp-6); font-size: var(--fs-lead); }
.cta-banner__orb { width: 360px; height: 360px; background: var(--accent); inset-block-start: -180px; inset-inline-start: 50%; transform: translateX(-50%); opacity: 0.25; }