/* ==========================================
   NX DESIGN SYSTEM — AWARD-WINNING FLUID TYPE
   FONT: PLUS JAKARTA SANS (LOGISTICS EDITION)
   ========================================== */

/* 1. IMPORT GOOGLE FONT (PLUS JAKARTA SANS) */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* 2. BASE FONT ASSIGNMENT */
.nx-display,
.nx-h1, h1.nx-title,
.nx-h2, h2.nx-title,
.nx-h3, h3.nx-title,
.nx-h4, h4.nx-title,
.nx-lead,
.nx-body,
.nx-eyebrow {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* ==========================================
   3. TYPOGRAPHY CLASSES & FLUID SCALE
   ========================================== */

/* DISPLAY / HERO TITLE (Mega Impact untuk Tagline Logistik Utama) */
.nx-display {
  font-size: clamp(3rem, 1.25rem + 7.5vw, 7rem) !important;      /* 48px -> 112px */
  line-height: 1.02 !important;
  letter-spacing: -0.035em !important;
  font-weight: 800 !important;                                    /* ExtraBold untuk skala besar */
}

/* HEADING 1 (H1 — Main Page Title / Big Stats) */
.nx-h1, h1.nx-title {
  font-size: clamp(2.25rem, 1.25rem + 4.3vw, 4.5rem) !important; /* 36px -> 72px */
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

/* HEADING 2 (H2 — Section Title) */
.nx-h2, h2.nx-title {
  font-size: clamp(1.75rem, 1.05rem + 3vw, 3.25rem) !important;  /* 28px -> 52px */
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;                                    /* Ditrik ke 700 agar tegas */
}

/* HEADING 3 (H3 — Card / Bento Title / Service Name) */
.nx-h3, h3.nx-title {
  font-size: clamp(1.375rem, 0.98rem + 1.7vw, 2.25rem) !important;/* 22px -> 36px */
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  font-weight: 600 !important;
}

/* HEADING 4 (H4 — Sub-component / Feature Header) */
.nx-h4, h4.nx-title {
  font-size: clamp(1.125rem, 0.9rem + 0.95vw, 1.625rem) !important;/* 18px -> 26px */
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
}

/* LEAD / SUBTITLE (Deskripsi Hero & Intro Section) */
.nx-lead {
  font-size: clamp(1rem, 0.83rem + 0.7vw, 1.375rem) !important;  /* 16px -> 22px */
  line-height: 1.5 !important;
  letter-spacing: -0.005em !important;
  font-weight: 400 !important;
}

/* BODY TEXT (Paragraf Standar & Detail Informasi) */
.nx-body {
  font-size: clamp(0.938rem, 0.88rem + 0.25vw, 1.063rem) !important;/* 15px -> 17px */
  line-height: 1.6 !important;
  font-weight: 400 !important;
}

/* EYEBROW / BADGE / TAG (Sub-header Kecil di Atas Title) */
.nx-eyebrow {
  font-size: clamp(0.75rem, 0.72rem + 0.13vw, 0.813rem) !important;/* 12px -> 13px */
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;                             /* Tracking lebar khas Awwwards */
  font-weight: 700 !important;
}

/* ==========================================
   NX DESIGN SYSTEM — YELLOW GRADIENT HEADLINE
   ========================================== */


/* ==========================================
   NX DESIGN SYSTEM — EXACT YELLOW GRADIENT (REPLICATED)
   ========================================== */

.nx-gradient-yellow {
  /* Gradien Kuning Sangat Cerah (Exact Match) */
  background: linear-gradient(135deg, #FFEA2C 15%, #F0CE14 60%, #EBBC0F 95%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important; /* Mencegah clipping bug */
}

/* 2. OPSIONAL: VARIASI AMBER NEON / HIGH-CONTRAST (UNTUK DARK MODE) */
.nx-gradient-amber {
  background: linear-gradient(110deg, #FFE600 0%, #FF9900 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
}