/* ═══════════════════════════════════════════
   PEBMARKET — GLOBAL: Variables, Reset, Typography, Layout
   ═══════════════════════════════════════════ */

:root {
  --gold: #D4A017;
  --gold-light: #EDBC40;
  --gold-dark: #A07010;
  --gold-bg: #FDF8ED;
  --white: #FFFFFF;
  --off-white: #F4F6F8;
  --bg: #F4F6F8;
  --grey-50: #F5F5F5;
  --grey-100: #EEEEEE;
  --grey-200: #E0E0E0;
  --grey-400: #9E9E9E;
  --grey-600: #616161;
  --grey-800: #212121;
  --dark: #1B2A41;
  --green: #2E7D32;
  --wa-green: #25D366;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.16);
  --shadow-gold: 0 8px 32px rgba(212,160,23,0.3);
  --radius: 12px;
  --radius-lg: 20px;
  --nav-height: 68px;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', sans-serif;
  color: var(--dark);
  background: var(--white);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--grey-200); border-radius: 10px; }

/* ── TYPOGRAPHY ── */
h1, h2, h3 { font-family: 'Playfair Display', serif; }
.display { font-size: clamp(1.8rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.heading { font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 700; line-height: 1.2; }
.subheading { font-size: clamp(0.9rem, 2vw, 1.2rem); color: var(--grey-600); line-height: 1.6; font-weight: 400; }
.label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.body-sm { font-size: 0.875rem; color: var(--grey-600); }

/* ── LAYOUT ── */
.container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }

/* Mobile-first sections */
.section { padding: 56px 0; }
.section-sm { padding: 36px 0; }

/* Mobile-first grids — default single column */
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 20px; }
.grid-4 { display: grid; grid-template-columns: 1fr; gap: 16px; }

.flex { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }

/* ── SPACING UTILITIES ── */
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mt-32  { margin-top: 32px; }
.mt-48  { margin-top: 48px; }

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── SECTION HEADER ── */
.section-header { margin-bottom: 36px; }
.section-header.center { text-align: center; }
.section-header .label { margin-bottom: 8px; display: block; }


/* ══════════════════════════════════════
   RESPONSIVE GRID BREAKPOINTS (min-width / mobile-first)
══════════════════════════════════════ */
@media (min-width: 480px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (min-width: 640px) {
  .container { padding: 0 20px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
  .section { padding: 80px 0; }
  .section-sm { padding: 50px 0; }
  .section-header { margin-bottom: 48px; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}