/* ==============================================
   BRAND.CSS — Jom Digital Brand Guidelines
   Fonts: Montserrat (headings) + DM Sans (body)
   Primary: #2563EB  |  CTA/Action: #22C55E
   Apply to 4 service pages (NOT index.html)
   ============================================== */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=DM+Sans:wght@300;400;500;600&display=swap');

/* --- Brand CSS Variables --- */
:root {
  --brand:       #2563EB;
  --brand-hover: #1D4ED8;
  --brand-dark:  #1E40AF;
  --brand-rgb:   37, 99, 235;

  /* Override body font */
  --font-body:    'DM Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  letter-spacing: -0.03em;
}

h1 { letter-spacing: -0.04em; }
h2 { letter-spacing: -0.035em; }

/* ============================================
   LOGO — "Digital" in brand blue
   ============================================ */
.logo span,
.footer__logo span {
  color: var(--brand);
}

/* ============================================
   LABELS — section labels in brand blue
   ============================================ */
.label {
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .20);
  background: rgba(var(--brand-rgb), .07);
}

/* ============================================
   NAV — active state in brand blue
   ============================================ */
.nav__link.active {
  color: var(--brand);
  background: rgba(var(--brand-rgb), .10);
}

.nav__link:hover {
  color: var(--brand);
}

/* ============================================
   HERO BADGE
   ============================================ */
.hero__badge {
  background: rgba(var(--brand-rgb), .08);
  color: var(--brand);
  border-color: rgba(var(--brand-rgb), .20);
}

/* ============================================
   HERO GRADIENT ACCENT BAR (top decorative)
   ============================================ */
.hero::before {
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* ============================================
   HERO VISUAL — brand-tinted shadow
   ============================================ */
.hero__img-wrap {
  box-shadow: 0 8px 48px rgba(var(--brand-rgb), .12);
}

/* ============================================
   METHOD CARDS — brand gradient top border
   ============================================ */
.method-card::before {
  background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* ============================================
   STEP / FLOW NUMBER CIRCLES — brand blue
   ============================================ */
.method-num-icon,
.flow-num-icon {
  background: var(--brand);
}

/* ============================================
   FILTER CHECK ICON — keep accent green
   (no override needed — inherits --accent)
   ============================================ */

/* ============================================
   CTA BUTTONS — primary in brand blue
   ============================================ */
.btn--primary {
  background: var(--brand);
}

.btn--primary:hover,
.btn--primary:focus {
  background: var(--brand-hover);
  box-shadow: 0 4px 20px rgba(var(--brand-rgb), .30);
}

/* WhatsApp CTA stays green — no override */

/* ============================================
   FOOTER ACCENT BAR
   ============================================ */
.footer__divider {
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: .6;
}

/* ============================================
   ACTIVE NAV LINK INDICATOR
   ============================================ */
.nav__link.active::after {
  background: var(--brand);
}

/* ============================================
   RESULTS / PROOF SECTION CALLOUT
   ============================================ */
.callout {
  border-left-color: var(--brand);
}

/* ============================================
   CARD BORDER-RADIUS — brand spec: 16px
   ============================================ */
.card,
.method-card,
.filter-card,
.problem-card,
.flow-card,
.offer-item,
.results-card {
  border-radius: 16px;
}