/* ============================================================
   ERPDATAHUB — MAIN STYLESHEET
   Design Baseline: Orange/Slate — from React component
   ============================================================ */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Orange accent system */
  --orange:        #F97316;
  --orange-dark:   #EA580C;
  --orange-light:  #FB923C;
  --orange-100:    #FFEDD5;
  --orange-50:     #FFF7ED;
  --orange-glow:   rgba(249,115,22,0.15);
  --orange-ring:   rgba(249,115,22,0.3);

  /* Slate neutrals */
  --slate-950:     #020617;
  --slate-900:     #0F172A;
  --slate-800:     #1E293B;
  --slate-700:     #334155;
  --slate-600:     #475569;
  --slate-500:     #64748B;
  --slate-400:     #94A3B8;
  --slate-300:     #CBD5E1;
  --slate-200:     #E2E8F0;
  --slate-100:     #F1F5F9;
  --slate-50:      #F8FAFC;
  --white:         #FFFFFF;

  /* Semantic aliases */
  --bg:            var(--slate-50);
  --bg-white:      var(--white);
  --bg-dark:       var(--slate-950);
  --bg-dark-card:  var(--slate-900);
  --bg-dark-input: var(--slate-800);
  --text:          var(--slate-900);
  --text-secondary:var(--slate-600);
  --text-muted:    var(--slate-500);
  --text-light:    var(--slate-400);
  --border:        var(--slate-200);
  --border-md:     var(--slate-300);

  /* Typography — system-first, Inter if available */
  --font-sans:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Spacing */
  --space-1:  4px;  --space-2:  8px;  --space-3:  12px; --space-4:  16px;
  --space-5:  20px; --space-6:  24px; --space-8:  32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-18: 72px; --space-24: 96px;

  /* Layout */
  --max-w:   1280px;
  --nav-h:   72px;
  --content: 720px;

  /* Radii — generously rounded like the React baseline */
  --radius-sm:   8px;
  --radius:      12px;   /* rounded-xl */
  --radius-lg:   16px;   /* rounded-2xl */
  --radius-xl:   24px;   /* rounded-3xl */
  --radius-2xl:  32px;
  --radius-3xl:  40px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 16px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-md:  0 8px 24px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.05);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.10), 0 6px 16px rgba(0,0,0,.06);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.14), 0 8px 24px rgba(0,0,0,.08);
  --shadow-orange: 0 8px 24px rgba(249,115,22,.28);

  --transition: .22s ease;
  --transition-fast: .15s ease;
}

/* ----------------------------------------------------------
   2. RESET
   ---------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,video { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul,ol { list-style:none; }
button,input,select,textarea { font-family:inherit; font-size:inherit; border:none; outline:none; background:none; }
button { cursor:pointer; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:var(--radius-sm); }

/* ----------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 { color:var(--text); line-height:1.2; letter-spacing:-.025em; font-weight:700; }
h1 { font-size:clamp(2.4rem,5vw,3.75rem); font-weight:800; }
h2 { font-size:clamp(1.75rem,3.5vw,2.5rem); font-weight:700; }
h3 { font-size:clamp(1.25rem,2vw,1.5rem); font-weight:700; }
h4 { font-size:1.125rem; font-weight:700; letter-spacing:0; }
p  { margin-bottom:var(--space-5); }
p:last-child { margin-bottom:0; }
strong { font-weight:700; }
code {
  font-family:var(--font-mono); font-size:.875em;
  background:var(--slate-100); padding:2px 6px;
  border-radius:var(--radius-sm); color:var(--slate-900);
}

/* ----------------------------------------------------------
   4. READING PROGRESS BAR
   ---------------------------------------------------------- */
#erp-progress-bar {
  position:fixed; top:0; left:0; z-index:9999;
  height:3px; width:0%;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
  transition:width .1s linear; pointer-events:none;
}

/* ----------------------------------------------------------
   5. NAVIGATION
   ---------------------------------------------------------- */
.erp-nav {
  position:sticky; top:0; z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.erp-nav__inner {
  max-width:var(--max-w); width:100%; margin:0 auto;
  padding:0 var(--space-6); height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-8);
}

/* Logo */
.erp-logo {
  display:flex; flex-direction:column; gap:2px;
  text-decoration:none; flex-shrink:0;
}
.erp-logo__name {
  font-size:1.35rem; font-weight:800; color:var(--slate-900); letter-spacing:-.03em; line-height:1;
}
.erp-logo__tagline {
  font-size:.7rem; color:var(--slate-500); font-weight:500; letter-spacing:.01em; line-height:1;
}

/* Desktop menu */
.erp-nav__menu {
  display:flex; align-items:center; gap:var(--space-1);
  flex:1; justify-content:center;
}
.erp-nav__menu a {
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500; color:var(--slate-600);
  transition:color var(--transition-fast), background var(--transition-fast);
  white-space:nowrap;
}
.erp-nav__menu a:hover,
.erp-nav__menu .current-menu-item > a { color:var(--orange); }

/* Dropdown */
.erp-nav__menu .menu-item-has-children { position:relative; }
.erp-nav__menu .sub-menu {
  position:absolute; top:calc(100% + 8px); left:0;
  min-width:220px; background:var(--white);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg); padding:var(--space-2) 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:all var(--transition-fast); pointer-events:none;
}
.erp-nav__menu .menu-item-has-children:hover .sub-menu {
  opacity:1; visibility:visible; transform:translateY(0); pointer-events:all;
}
.erp-nav__menu .sub-menu a {
  display:block; padding:var(--space-2) var(--space-4);
  border-radius:0; font-size:.875rem; color:var(--slate-600);
}
.erp-nav__menu .sub-menu a:hover { color:var(--orange); background:var(--orange-50); }

/* Nav actions */
.erp-nav__actions { display:flex; align-items:center; gap:var(--space-2); flex-shrink:0; }
.erp-nav__search {
  width:38px; height:38px; border-radius:var(--radius-sm);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--slate-500); transition:all var(--transition-fast);
}
.erp-nav__search:hover { border-color:var(--orange); color:var(--orange); }
.erp-nav__search svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }

.btn--subscribe {
  padding:10px 20px; border-radius:var(--radius-xl);
  font-size:.875rem; font-weight:600;
  background:var(--orange); color:var(--white);
  box-shadow:var(--shadow-orange);
  transition:all var(--transition);
}
.btn--subscribe:hover {
  background:var(--orange-dark); transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(249,115,22,.35);
}

/* Mobile toggle */
.erp-nav__toggle {
  display:none; flex-direction:column; gap:5px;
  width:32px; cursor:pointer; padding:var(--space-2);
}
.erp-nav__toggle span { display:block; height:2px; background:var(--slate-800); border-radius:2px; transition:all var(--transition); }
.erp-nav__toggle.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.erp-nav__toggle.is-active span:nth-child(2) { opacity:0; }
.erp-nav__toggle.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.erp-mobile-nav {
  display:none; position:fixed; inset:0; top:var(--nav-h);
  background:var(--white); z-index:90; padding:var(--space-6); overflow-y:auto;
  border-top:1px solid var(--border);
}
.erp-mobile-nav.is-open { display:block; }
.erp-mobile-nav ul { display:flex; flex-direction:column; gap:var(--space-1); }
.erp-mobile-nav a {
  display:block; padding:var(--space-3) var(--space-4);
  font-size:1rem; font-weight:500; color:var(--slate-700);
  border-radius:var(--radius-sm); transition:all var(--transition-fast);
}
.erp-mobile-nav a:hover { background:var(--orange-50); color:var(--orange); }

/* ----------------------------------------------------------
   6. BUTTONS
   ---------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  cursor:pointer; font-family:var(--font-sans); font-weight:600;
  transition:all var(--transition); white-space:nowrap; text-decoration:none; border:none;
}
.btn--sm  { padding:8px 16px; font-size:.8rem; border-radius:var(--radius); }
.btn--md  { padding:10px 20px; font-size:.875rem; border-radius:var(--radius-lg); }
.btn--lg  { padding:14px 28px; font-size:1rem; border-radius:var(--radius-xl); }
.btn--xl  { padding:16px 34px; font-size:1.05rem; border-radius:var(--radius-xl); }

.btn--orange {
  background:var(--orange); color:var(--white);
  box-shadow:var(--shadow-orange);
}
.btn--orange:hover { background:var(--orange-dark); transform:translateY(-2px); box-shadow:0 12px 32px rgba(249,115,22,.35); }

.btn--dark {
  background:var(--slate-900); color:var(--white);
}
.btn--dark:hover { background:var(--orange); transform:translateY(-1px); box-shadow:var(--shadow-md); }

.btn--white {
  background:var(--white); color:var(--slate-900);
}
.btn--white:hover { background:var(--slate-100); }

.btn--outline {
  background:transparent; color:var(--slate-900);
  border:1.5px solid var(--slate-300);
}
.btn--outline:hover { border-color:var(--orange); color:var(--orange); }

.btn--ghost-dark {
  background:rgba(255,255,255,.05); color:var(--white);
  border:1.5px solid var(--slate-700);
}
.btn--ghost-dark:hover { background:rgba(255,255,255,.1); }

/* ----------------------------------------------------------
   7. TAGS & BADGES
   ---------------------------------------------------------- */
.tag {
  display:inline-flex; align-items:center;
  padding:4px 12px; border-radius:var(--radius-full);
  font-size:.75rem; font-weight:600; letter-spacing:.02em;
}
.tag--orange { background:var(--orange-100); color:var(--orange-dark); }
.tag--slate  { background:var(--slate-100);  color:var(--slate-600); border:1px solid var(--border); }
.tag--dark   { background:rgba(249,115,22,.2); color:var(--orange-light); }

/* ----------------------------------------------------------
   8. ANNOUNCEMENT BAR
   ---------------------------------------------------------- */
.erp-announce-bar {
  background:var(--orange); color:var(--white);
  text-align:center; padding:var(--space-2) var(--space-6);
  font-size:.8rem; font-weight:500;
  display:flex; align-items:center; justify-content:center; gap:var(--space-3);
}
.erp-announce-bar a { color:rgba(255,255,255,.9); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.erp-announce-bar a:hover { color:var(--white); }
.erph-announce-close { position:absolute; right:var(--space-4); background:none; color:rgba(255,255,255,.7); font-size:1rem; padding:2px 6px; }

/* ----------------------------------------------------------
   9. LAYOUT
   ---------------------------------------------------------- */
.container { max-width:var(--max-w); width:100%; margin:0 auto; padding:0 var(--space-6); }
.section     { padding:var(--space-24) 0; }
.section--sm { padding:var(--space-12) 0; }
.section--white { background:var(--white); }
.section--slate { background:var(--slate-100); }
.section--dark  { background:var(--slate-950); position:relative; overflow:hidden; }

.section__header { margin-bottom:var(--space-12); }
.section__header--between {
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:var(--space-12); gap:var(--space-4); flex-wrap:wrap;
}
.section__eyebrow {
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--orange); margin-bottom:var(--space-4);
}
.section__title { color:var(--slate-900); line-height:1.22; }
.section__subtitle { font-size:1.1rem; color:var(--slate-600); max-width:640px; margin-top:var(--space-5); line-height:1.75; }
.section__header--center { text-align:center; }
.section__header--center .section__subtitle { margin-inline:auto; }

.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); }
.grid-2-3 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-8); }

.view-all-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.875rem; font-weight:600; color:var(--white);
  padding:10px 24px; border-radius:var(--radius-sm);
  background:var(--slate-900); white-space:nowrap;
  transition:all var(--transition);
}
.view-all-link:hover { background:var(--orange); }
.view-all-link::after { content:'→'; }

/* ----------------------------------------------------------
   10. EXPERTISE STRIP
   ---------------------------------------------------------- */
.expertise-strip {
  background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.expertise-strip__inner {
  max-width:var(--max-w); margin:0 auto; padding:var(--space-5) var(--space-6);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-3);
}
.expertise-pill {
  padding:var(--space-2) var(--space-5); border-radius:var(--radius-full);
  background:var(--slate-100); color:var(--slate-700);
  font-size:.875rem; font-weight:600; transition:all var(--transition-fast); cursor:pointer;
}
.expertise-pill:hover { background:var(--orange-100); color:var(--orange-dark); }

/* ----------------------------------------------------------
   11. HERO
   ---------------------------------------------------------- */
.hero {
  background:var(--slate-950);
  position:relative; overflow:hidden;
  padding:var(--space-24) 0;
}
/* Glow orbs */
.hero::before {
  content:''; position:absolute;
  top:-80px; left:-80px;
  width:480px; height:480px; border-radius:50%;
  background:var(--orange); filter:blur(120px); opacity:.18; pointer-events:none;
}
.hero::after {
  content:''; position:absolute;
  bottom:-80px; right:-80px;
  width:480px; height:480px; border-radius:50%;
  background:#3B82F6; filter:blur(120px); opacity:.14; pointer-events:none;
}
.hero__inner {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 460px; gap:var(--space-12); align-items:center;
}
.hero__badge {
  display:inline-flex; align-items:center;
  padding:6px 16px; border-radius:var(--radius-full);
  border:1px solid rgba(249,115,22,.3);
  background:rgba(249,115,22,.1);
  color:var(--orange-light); font-size:.8rem; font-weight:600;
  margin-bottom:var(--space-6);
}
.hero__title {
  font-size:clamp(2.6rem,5vw,3.75rem); font-weight:800;
  color:var(--white); line-height:1.12; letter-spacing:-.03em;
  margin-bottom:var(--space-8);
}
.hero__subtitle {
  font-size:1.125rem; color:var(--slate-300); line-height:1.78; max-width:540px;
  margin-bottom:var(--space-10);
}
.hero__ctas { display:flex; flex-wrap:wrap; gap:var(--space-4); margin-bottom:var(--space-12); }
.hero__pills { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.hero__pill {
  padding:6px 16px; border-radius:var(--radius-full);
  border:1px solid var(--slate-700); background:rgba(15,23,42,.5);
  color:var(--slate-300); font-size:.8rem; font-weight:500;
}

/* Hero card */
.hero__card {
  background:var(--slate-900); border:1px solid var(--slate-800);
  border-radius:var(--radius-2xl); padding:var(--space-8);
  box-shadow:var(--shadow-xl);
}
.hero__card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-6); }
.hero__card-label { font-size:.8rem; color:var(--slate-400); margin-bottom:var(--space-2); }
.hero__card-title { font-size:1.5rem; font-weight:700; color:var(--white); line-height:1.3; }
.hero__card-badge {
  padding:6px 14px; border-radius:var(--radius-lg);
  background:rgba(249,115,22,.2); color:var(--orange-light);
  font-size:.8rem; font-weight:700; white-space:nowrap; flex-shrink:0;
}
.hero__checklist { display:flex; flex-direction:column; gap:var(--space-3); margin-bottom:var(--space-8); }
.hero__check-item {
  background:var(--slate-800); border-radius:var(--radius-lg);
  padding:var(--space-4); color:var(--slate-300);
  font-size:.9rem; font-weight:500;
}

/* ----------------------------------------------------------
   12. TOPIC CLUSTER CARDS
   ---------------------------------------------------------- */
.topic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }

.topic-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:var(--space-8);
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.topic-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.topic-card:hover .topic-card__cta { background:var(--orange); }

.topic-card__icon {
  width:56px; height:56px; border-radius:var(--radius-lg);
  background:var(--orange-100); color:var(--orange-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; font-weight:800; margin-bottom:var(--space-6);
  flex-shrink:0;
}
.topic-card__title { font-size:1.35rem; font-weight:700; color:var(--slate-900); margin-bottom:var(--space-4); }
.topic-card__desc  { font-size:.925rem; color:var(--slate-600); line-height:1.72; flex:1; margin-bottom:var(--space-8); }
.topic-card__cta {
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 20px; border-radius:var(--radius-lg);
  background:var(--slate-900); color:var(--white);
  font-size:.875rem; font-weight:600; align-self:flex-start;
  transition:background var(--transition);
}

/* ----------------------------------------------------------
   13. FEATURED GUIDE CARDS
   ---------------------------------------------------------- */
.guide-card {
  background:var(--white); border-radius:var(--radius-xl);
  padding:var(--space-8); box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
  transition:transform var(--transition), box-shadow var(--transition);
}
.guide-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-xl); }
.guide-card__type { margin-bottom:var(--space-6); }
.guide-card__title { font-size:1.35rem; font-weight:700; color:var(--slate-900); line-height:1.35; flex:1; margin-bottom:var(--space-6); }
.guide-card__time  { font-size:.8rem; color:var(--slate-500); margin-bottom:var(--space-8); }
.guide-card__cta {
  display:inline-flex; padding:10px 20px; border-radius:var(--radius-lg);
  border:1.5px solid var(--slate-300); color:var(--slate-700);
  font-size:.875rem; font-weight:600; align-self:flex-start;
  transition:all var(--transition);
}
.guide-card__cta:hover { border-color:var(--orange); color:var(--orange); }

/* ----------------------------------------------------------
   14. ARTICLE CARDS
   ---------------------------------------------------------- */

/* Horizontal card (Latest Insights) */
.article-card-h {
  display:grid; grid-template-columns:280px 1fr;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition), transform var(--transition);
}
.article-card-h:hover { box-shadow:var(--shadow-xl); transform:translateY(-3px); }
.article-card-h__thumb {
  min-height:220px; background:linear-gradient(135deg,var(--slate-900),var(--slate-700));
  position:relative; overflow:hidden;
}
.article-card-h__thumb img { width:100%; height:100%; object-fit:cover; }
.article-card-h__body { padding:var(--space-8); display:flex; flex-direction:column; }
.article-card-h__cat { margin-bottom:var(--space-5); }
.article-card-h__title {
  font-size:1.5rem; font-weight:700; color:var(--slate-900);
  line-height:1.28; margin-bottom:var(--space-5); flex:1;
  transition:color var(--transition-fast);
}
.article-card-h:hover .article-card-h__title { color:var(--orange); }
.article-card-h__excerpt { font-size:1rem; color:var(--slate-600); line-height:1.72; margin-bottom:var(--space-8); }
.article-card-h__meta { display:flex; flex-wrap:wrap; gap:var(--space-5); font-size:.8rem; color:var(--slate-500); }

/* Grid card (Archive / Featured) */
.article-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-xl); overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition);
}
.article-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.article-card__thumb {
  height:180px; background:linear-gradient(135deg,var(--slate-900),var(--slate-700));
  overflow:hidden; position:relative;
}
.article-card__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.article-card:hover .article-card__thumb img { transform:scale(1.04); }
.article-card__thumb-gradient { position:absolute; inset:0; }
/* Thumb colour variants */
.thumb--oracle  { background:linear-gradient(135deg,#1e293b 0%,#7f1d1d 100%); }
.thumb--sap     { background:linear-gradient(135deg,#1e293b 0%,#1e3a8a 100%); }
.thumb--mdg     { background:linear-gradient(135deg,#052e16 0%,#1e293b 100%); }
.thumb--ai      { background:linear-gradient(135deg,#1e293b 0%,#3b0764 100%); }
.thumb--mfg     { background:linear-gradient(135deg,#1c1917 0%,#1e293b 100%); }
.thumb--default { background:linear-gradient(135deg,var(--slate-900),var(--slate-700)); }
.article-card__body { padding:var(--space-6); }
.article-card__tags { display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.article-card__title {
  font-size:1.05rem; font-weight:700; color:var(--slate-900);
  line-height:1.4; margin-bottom:var(--space-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  transition:color var(--transition-fast);
}
.article-card:hover .article-card__title { color:var(--orange); }
.article-card__excerpt {
  font-size:.875rem; color:var(--slate-500); line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin-bottom:var(--space-4);
}
.article-card__meta { font-size:.78rem; color:var(--slate-400); display:flex; gap:var(--space-3); flex-wrap:wrap; }

/* ----------------------------------------------------------
   15. NEWSLETTER SECTION
   ---------------------------------------------------------- */
.newsletter-wrap {
  max-width:900px; margin:0 auto;
  background:var(--slate-900); border:1px solid var(--slate-800);
  border-radius:var(--radius-3xl); padding:var(--space-16) var(--space-16);
  text-align:center; box-shadow:var(--shadow-xl);
}
.newsletter-wrap .section__eyebrow { color:var(--orange-light); }
.newsletter-wrap .section__title { color:var(--white); font-size:clamp(1.75rem,3.5vw,2.75rem); }
.newsletter-wrap .section__subtitle { color:var(--slate-300); margin-inline:auto; }
.newsletter__form {
  display:flex; gap:var(--space-3); margin-top:var(--space-10);
  max-width:520px; margin-inline:auto;
}
.newsletter__input {
  flex:1; padding:14px var(--space-6);
  background:var(--slate-800); border:1px solid var(--slate-700);
  border-radius:var(--radius-xl); color:var(--white);
  font-size:.95rem; transition:border-color var(--transition-fast);
}
.newsletter__input::placeholder { color:var(--slate-400); }
.newsletter__input:focus { border-color:var(--orange); }
.newsletter__btn {
  padding:14px var(--space-8); border-radius:var(--radius-xl);
  background:var(--orange); color:var(--white);
  font-size:.95rem; font-weight:600;
  transition:background var(--transition-fast); flex-shrink:0;
}
.newsletter__btn:hover { background:var(--orange-dark); }

/* ----------------------------------------------------------
   16. ARCHIVE / CATEGORY HEADER
   ---------------------------------------------------------- */
.archive-header { background:var(--slate-950); padding:var(--space-16) 0; }
.archive-header__eyebrow { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--orange); margin-bottom:var(--space-3); }
.archive-header__title   { color:var(--white); font-size:clamp(2rem,4vw,3rem); margin-bottom:var(--space-3); }
.archive-header__desc    { font-size:1rem; color:var(--slate-400); max-width:540px; line-height:1.7; }

/* ----------------------------------------------------------
   17. ARTICLE PAGE
   ---------------------------------------------------------- */
.article-layout {
  display:grid; grid-template-columns:1fr 300px; gap:var(--space-12);
  align-items:start; padding:var(--space-12) 0;
}
.article-sidebar { position:sticky; top:calc(var(--nav-h) + var(--space-6)); }

.breadcrumb-bar { background:var(--white); border-bottom:1px solid var(--border); }
.breadcrumb {
  max-width:var(--max-w); margin:0 auto; padding:var(--space-3) var(--space-6);
  display:flex; align-items:center; gap:var(--space-2);
  font-size:.8rem; color:var(--slate-500); flex-wrap:wrap;
}
.breadcrumb a { color:var(--orange); }
.breadcrumb__sep { color:var(--slate-400); }

.article-header { margin-bottom:var(--space-8); }
.article-header__cat {
  display:inline-block; padding:5px 14px; border-radius:var(--radius-full);
  background:var(--orange-100); color:var(--orange-dark);
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  margin-bottom:var(--space-4);
}
.article-header__title {
  font-size:clamp(1.8rem,3.5vw,2.75rem); color:var(--slate-900);
  line-height:1.18; letter-spacing:-.03em; margin-bottom:var(--space-5);
}
.article-header__subtitle {
  font-size:1.15rem; color:var(--slate-600); line-height:1.72; margin-bottom:var(--space-6);
}
.article-byline {
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-4) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.author-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--slate-900); display:flex; align-items:center; justify-content:center;
  color:var(--white); font-weight:700; font-size:.95rem; flex-shrink:0; overflow:hidden;
}
.author-avatar img { width:100%; height:100%; object-fit:cover; }
.byline__name { font-size:.9rem; font-weight:600; color:var(--slate-900); }
.byline__meta { font-size:.78rem; color:var(--slate-500); }
.article-share { margin-left:auto; display:flex; gap:var(--space-2); }
.share-btn {
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--slate-100); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.78rem; color:var(--slate-500);
  transition:all var(--transition-fast);
}
.share-btn:hover { background:var(--slate-900); color:var(--white); border-color:var(--slate-900); }

/* Article body rich text */
.article-body { font-size:1.05rem; line-height:1.85; color:var(--slate-800); max-width:var(--content); }
.article-body p { margin-bottom:var(--space-5); }
.article-body a { color:var(--orange); text-decoration:underline; text-underline-offset:3px; }
.article-body a:hover { color:var(--orange-dark); }
.article-body h2 {
  font-size:clamp(1.4rem,2.5vw,1.75rem); color:var(--slate-900);
  margin:var(--space-10) 0 var(--space-4); padding-top:var(--space-4);
  border-top:1px solid var(--border); scroll-margin-top:calc(var(--nav-h) + var(--space-6));
}
.article-body h3 {
  font-size:1.2rem; color:var(--slate-900); font-weight:700;
  margin:var(--space-8) 0 var(--space-3); scroll-margin-top:calc(var(--nav-h) + var(--space-6));
}
.article-body ul,
.article-body ol  { padding-left:var(--space-6); margin-bottom:var(--space-5); }
.article-body ul  { list-style:disc; }
.article-body ol  { list-style:decimal; }
.article-body li  { margin-bottom:var(--space-2); line-height:1.75; }
.article-body blockquote {
  border-left:4px solid var(--orange); padding:var(--space-4) var(--space-6);
  background:var(--orange-50); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  margin:var(--space-6) 0; font-style:italic; font-size:1.05rem; color:var(--slate-800);
}
.article-body blockquote p { margin-bottom:0; }
.article-body table {
  width:100%; border-collapse:collapse; margin:var(--space-6) 0;
  font-size:.9rem; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.article-body th { background:var(--slate-100); padding:var(--space-3) var(--space-4); font-weight:700; color:var(--slate-900); border-bottom:1px solid var(--border); text-align:left; }
.article-body td { padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--border); }
.article-body tr:last-child td { border-bottom:none; }
.article-body tr:nth-child(even) td { background:var(--slate-50); }

/* Highlight boxes */
.highlight-box {
  border-radius:var(--radius); padding:var(--space-5) var(--space-6);
  margin:var(--space-8) 0; border-left:4px solid var(--box-accent); background:var(--box-bg);
}
.highlight-box .box-label {
  font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--box-accent); margin-bottom:var(--space-2); display:flex; align-items:center; gap:var(--space-2);
}
.highlight-box p { margin:0; font-size:.95rem; line-height:1.72; }
.highlight-box--tip     { --box-accent:#10B981; --box-bg:#ECFDF5; }
.highlight-box--warning { --box-accent:#F59E0B; --box-bg:#FFFBEB; }
.highlight-box--insight { --box-accent:var(--orange); --box-bg:var(--orange-50); }
.highlight-box--danger  { --box-accent:#EF4444; --box-bg:#FEF2F2; }

/* Code blocks */
.code-block { background:#0d1117; border-radius:var(--radius-lg); overflow:hidden; margin:var(--space-6) 0; border:1px solid rgba(255,255,255,.06); }
.code-block__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space-2) var(--space-4); background:#161b22;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.code-block__dots { display:flex; gap:5px; }
.code-block__dot { width:10px; height:10px; border-radius:50%; }
.code-block__dot:nth-child(1) { background:#ff5f56; }
.code-block__dot:nth-child(2) { background:#ffbd2e; }
.code-block__dot:nth-child(3) { background:#27c93f; }
.code-block__lang { font-family:var(--font-mono); font-size:.72rem; font-weight:600; color:rgba(255,255,255,.35); letter-spacing:.05em; }
.code-block__copy {
  font-size:.72rem; color:rgba(255,255,255,.35); cursor:pointer;
  padding:3px 10px; border-radius:4px; border:1px solid rgba(255,255,255,.12); background:transparent;
  transition:all var(--transition-fast); font-family:var(--font-sans);
}
.code-block__copy:hover { color:var(--white); }
.code-block pre {
  padding:var(--space-5); overflow-x:auto;
  font-family:var(--font-mono); font-size:.875rem; line-height:1.72; color:#c9d1d9; tab-size:2;
}
.code-block .kw  { color:#ff7b72; }
.code-block .str { color:#a5d6ff; }
.code-block .cmt { color:#8b949e; font-style:italic; }
.code-block .fn  { color:#d2a8ff; }
.code-block .num { color:#79c0ff; }

/* TOC Sidebar */
.toc-card, .article-meta-card {
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); margin-bottom:var(--space-5); overflow:hidden;
}
.toc-card__header {
  padding:var(--space-4) var(--space-5); border-bottom:1px solid var(--border);
}
.toc-card__title { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-500); }
.toc-list { padding:var(--space-2) 0; }
.toc-item {
  display:block; padding:var(--space-2) var(--space-5);
  font-size:.875rem; color:var(--slate-500);
  transition:all var(--transition-fast); border-left:2px solid transparent; text-decoration:none;
}
.toc-item:hover { color:var(--slate-900); background:var(--slate-50); border-left-color:var(--slate-300); }
.toc-item.is-active { color:var(--orange); background:var(--orange-50); border-left-color:var(--orange); font-weight:600; }
.toc-item--h3 { padding-left:calc(var(--space-5) + 12px); font-size:.825rem; }

.article-meta-card__row {
  display:flex; justify-content:space-between; align-items:center;
  padding:var(--space-3) var(--space-5); border-bottom:1px solid var(--border); font-size:.85rem;
}
.article-meta-card__row:last-child { border-bottom:none; }
.article-meta-card__key { color:var(--slate-500); }
.article-meta-card__val { font-weight:600; color:var(--slate-900); }
.article-meta-card__val--link { color:var(--orange); }

/* Related articles */
.related-articles { border-top:2px solid var(--border); padding-top:var(--space-12); margin-top:var(--space-12); }
.related-articles__title { font-size:1.5rem; color:var(--slate-900); margin-bottom:var(--space-8); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.related-card {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-5); cursor:pointer;
  transition:all var(--transition); text-decoration:none; display:block;
}
.related-card:hover { box-shadow:var(--shadow-md); border-color:var(--orange); transform:translateY(-2px); }
.related-card .tag { margin-bottom:var(--space-3); }
.related-card__title { font-size:.95rem; font-weight:600; color:var(--slate-800); line-height:1.45; transition:color var(--transition-fast); }
.related-card:hover .related-card__title { color:var(--orange); }

/* ----------------------------------------------------------
   18. PATH CARDS (Learning Paths)
   ---------------------------------------------------------- */
.paths-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-8); }
.path-card {
  border-radius:var(--radius-xl); overflow:hidden; border:1px solid var(--border);
  background:var(--white); transition:transform var(--transition), box-shadow var(--transition);
  display:flex; flex-direction:column;
}
.path-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-xl); }
.path-card__header { padding:var(--space-8); position:relative; overflow:hidden; flex-shrink:0; }
.path-card__header::before,
.path-card__header::after {
  content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,.06);
}
.path-card__header::before { width:120px; height:120px; top:-30px; right:-30px; }
.path-card__header::after  { width:70px; height:70px; bottom:-20px; right:20px; }
.path-card--beginner     .path-card__header { background:linear-gradient(135deg,#10B981,#059669); }
.path-card--intermediate .path-card__header { background:linear-gradient(135deg,var(--orange),var(--orange-dark)); }
.path-card--advanced     .path-card__header { background:linear-gradient(135deg,#7C3AED,#4C1D95); }
.path-card__level {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:5px 12px; border-radius:var(--radius-full);
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:rgba(255,255,255,.15); color:rgba(255,255,255,.9);
  margin-bottom:var(--space-4); position:relative; z-index:1;
}
.path-card__title { font-size:1.5rem; color:var(--white); line-height:1.25; margin-bottom:var(--space-2); position:relative; z-index:1; }
.path-card__desc  { font-size:.875rem; color:rgba(255,255,255,.65); line-height:1.65; position:relative; z-index:1; }
.path-card__body  { padding:var(--space-6) var(--space-8); flex:1; }
.path-module { display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-3) 0; border-bottom:1px solid var(--border); }
.path-module:last-child { border-bottom:none; }
.path-module__num {
  width:26px; height:26px; border-radius:50%;
  background:var(--slate-100); color:var(--slate-700);
  font-size:.75rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.path-module__title { font-size:.9rem; font-weight:600; color:var(--slate-800); margin-bottom:2px; line-height:1.4; }
.path-module__meta  { font-size:.78rem; color:var(--slate-500); }
.path-card__footer {
  padding:0 var(--space-8) var(--space-6);
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border); padding-top:var(--space-5);
}
.path-stats { display:flex; gap:var(--space-5); }
.path-stat__num { font-size:1.1rem; font-weight:700; color:var(--slate-900); line-height:1; }
.path-stat__label { font-size:.75rem; color:var(--slate-500); margin-top:2px; }

/* ----------------------------------------------------------
   19. STATS PANEL (dark)
   ---------------------------------------------------------- */
.stats-panel {
  background:var(--slate-900); border-radius:var(--radius-xl); padding:var(--space-8);
}
.stats-panel__label { font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:var(--space-5); }
.stats-panel__grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-bottom:var(--space-6); }
.stat-box { background:rgba(255,255,255,.06); border-radius:var(--radius); padding:var(--space-4); }
.stat-box__num { font-size:1.8rem; font-weight:800; color:var(--white); line-height:1; }
.stat-box__num--orange { color:var(--orange-light); }
.stat-box__num--green  { color:#34d399; }
.stat-box__desc { font-size:.8rem; color:rgba(255,255,255,.4); margin-top:3px; }
.stats-panel__footer { font-size:.875rem; color:rgba(255,255,255,.4); line-height:1.7; border-top:1px solid rgba(255,255,255,.08); padding-top:var(--space-4); }

/* ----------------------------------------------------------
   20. TRENDING
   ---------------------------------------------------------- */
.trending-item {
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-5) 0; border-bottom:1px solid var(--border);
  cursor:pointer; text-decoration:none; transition:opacity var(--transition-fast);
}
.trending-item:last-child { border-bottom:none; }
.trending-item:hover .trending-item__title { color:var(--orange); }
.trending-item:hover .trending-item__arrow { transform:translateX(4px); color:var(--orange); }
.trending-item__rank { font-size:2rem; font-weight:800; color:var(--border); min-width:48px; line-height:1; flex-shrink:0; }
.trending-item__title { font-size:.95rem; font-weight:600; color:var(--slate-800); margin-bottom:4px; line-height:1.4; transition:color var(--transition-fast); }
.trending-item__meta  { font-size:.8rem; color:var(--slate-500); display:flex; gap:var(--space-3); }
.trending-item__views { font-size:.8rem; font-weight:600; color:var(--slate-500); flex-shrink:0; }
.trending-item__arrow { color:var(--border); font-size:1.1rem; flex-shrink:0; transition:transform var(--transition-fast), color var(--transition-fast); }

/* ----------------------------------------------------------
   21. FOOTER
   ---------------------------------------------------------- */
.site-footer { background:var(--white); border-top:1px solid var(--border); }
.site-footer__main {
  max-width:var(--max-w); margin:0 auto; padding:var(--space-16) var(--space-6) var(--space-12);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--space-12);
}
.footer-brand__name { font-size:1.5rem; font-weight:800; color:var(--slate-900); letter-spacing:-.025em; margin-bottom:var(--space-5); }
.footer-brand__desc { font-size:.9rem; line-height:1.75; color:var(--slate-600); max-width:280px; }
.footer-col__title { font-size:.875rem; font-weight:700; color:var(--slate-900); margin-bottom:var(--space-6); }
.footer-col__links { display:flex; flex-direction:column; gap:var(--space-4); }
.footer-col__links a { font-size:.9rem; color:var(--slate-600); transition:color var(--transition-fast); }
.footer-col__links a:hover { color:var(--orange); }
.site-footer__bottom {
  border-top:1px solid var(--border); padding:var(--space-5) var(--space-6);
  text-align:center; font-size:.85rem; color:var(--slate-500);
}

/* ----------------------------------------------------------
   22. SEARCH FORM
   ---------------------------------------------------------- */
.search-form { display:flex; gap:var(--space-2); max-width:540px; }
.search-form__input {
  flex:1; padding:11px var(--space-4);
  border:1.5px solid var(--border); border-radius:var(--radius-lg);
  font-size:.95rem; background:var(--white); color:var(--slate-900);
  transition:border-color var(--transition-fast);
}
.search-form__input:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-ring); }
.search-form__btn {
  padding:11px var(--space-5); background:var(--slate-900); color:var(--white);
  border-radius:var(--radius-lg); font-weight:600; transition:background var(--transition-fast);
  display:flex; align-items:center; gap:var(--space-2);
}
.search-form__btn:hover { background:var(--orange); }

/* ----------------------------------------------------------
   23. PAGINATION
   ---------------------------------------------------------- */
.pagination { display:flex; align-items:center; justify-content:center; gap:var(--space-2); margin-top:var(--space-12); }
.pagination a, .pagination span {
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm);
  font-size:.875rem; font-weight:500;
  border:1.5px solid var(--border); color:var(--slate-500);
  transition:all var(--transition-fast); text-decoration:none;
}
.pagination a:hover { border-color:var(--orange); color:var(--orange); }
.pagination .current { background:var(--slate-900); color:var(--white); border-color:var(--slate-900); }

/* ----------------------------------------------------------
   24. ANIMATIONS
   ---------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
.anim-fade-up { opacity:0; transform:translateY(20px); }
.anim-fade-up.is-visible { animation:fadeUp .6s ease both; }
.anim-delay-1 { animation-delay:.08s; } .anim-delay-2 { animation-delay:.16s; }
.anim-delay-3 { animation-delay:.24s; } .anim-delay-4 { animation-delay:.32s; }
.anim-delay-5 { animation-delay:.40s; }

/* ----------------------------------------------------------
   25. WP CORE BLOCKS
   ---------------------------------------------------------- */
.wp-block-image { margin:var(--space-6) 0; }
.wp-block-image img { border-radius:var(--radius-lg); }
.wp-block-image figcaption { font-size:.82rem; color:var(--slate-500); text-align:center; margin-top:var(--space-2); font-style:italic; }
.wp-block-quote {
  border-left:4px solid var(--orange); padding:var(--space-4) var(--space-6);
  background:var(--orange-50); border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin:var(--space-6) 0;
}
.wp-block-quote p { font-style:italic; margin-bottom:0; }
.wp-block-code {
  background:#0d1117; color:#c9d1d9; border-radius:var(--radius-lg);
  padding:var(--space-5); font-family:var(--font-mono); font-size:.875rem; overflow-x:auto; margin:var(--space-5) 0;
}
.wp-block-separator { border:none; border-top:1px solid var(--border); margin:var(--space-8) 0; }

/* ----------------------------------------------------------
   26. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width:1100px) {
  .hero__inner        { grid-template-columns:1fr; }
  .hero__card         { display:none; }
  .topic-grid         { grid-template-columns:repeat(2,1fr); }
  .site-footer__main  { grid-template-columns:1fr 1fr; gap:var(--space-8); }
  .article-layout     { grid-template-columns:1fr; }
  .article-sidebar    { position:static; }
}
@media (max-width:900px) {
  .grid-3,.paths-grid { grid-template-columns:repeat(2,1fr); }
  .grid-4             { grid-template-columns:repeat(2,1fr); }
  .related-grid       { grid-template-columns:repeat(2,1fr); }
  .article-card-h     { grid-template-columns:1fr; }
  .article-card-h__thumb { min-height:200px; }
}
@media (max-width:768px) {
  :root { --nav-h:64px; }
  .erp-nav__menu    { display:none; }
  .erp-nav__toggle  { display:flex; }
  .erp-nav__actions .btn--subscribe { display:none; }
  .topic-grid       { grid-template-columns:1fr; }
  .grid-3           { grid-template-columns:1fr; }
  .grid-4           { grid-template-columns:1fr; }
  .related-grid     { grid-template-columns:1fr; }
  .paths-grid       { grid-template-columns:1fr; }
  .site-footer__main { grid-template-columns:1fr; }
  .newsletter-wrap  { padding:var(--space-10) var(--space-6); }
  .newsletter__form { flex-direction:column; }
  .section__header--between { flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px) {
  .hero__ctas { flex-direction:column; align-items:stretch; }
}
@media print {
  .erph-ad,.erph-after-header-ad,.erph-footer-ad,ins.adsbygoogle { display:none !important; }
}

/* ============================================================
   COLOR SCHEME FIX — Category palette + reduced orange dominance
   ============================================================ */

/* ----------------------------------------------------------
   CATEGORY COLOUR SYSTEM
   Each domain has its own identity colour
   ---------------------------------------------------------- */
:root {
  /* Oracle Fusion — Red */
  --cat-oracle:        #DC2626;
  --cat-oracle-light:  #FEF2F2;
  --cat-oracle-mid:    #FCA5A5;
  --cat-oracle-border: #FECACA;

  /* SAP MDG — Blue */
  --cat-sap:           #2563EB;
  --cat-sap-light:     #EFF6FF;
  --cat-sap-mid:       #93C5FD;
  --cat-sap-border:    #BFDBFE;

  /* Data Migration — Indigo */
  --cat-migration:     #4F46E5;
  --cat-migration-light:#EEF2FF;
  --cat-migration-mid: #A5B4FC;
  --cat-migration-border:#C7D2FE;

  /* Manufacturing ERP — Amber */
  --cat-mfg:           #D97706;
  --cat-mfg-light:     #FFFBEB;
  --cat-mfg-mid:       #FCD34D;
  --cat-mfg-border:    #FDE68A;

  /* AI + ERP — Purple */
  --cat-ai:            #7C3AED;
  --cat-ai-light:      #F5F3FF;
  --cat-ai-mid:        #C4B5FD;
  --cat-ai-border:     #DDD6FE;

  /* Templates — Teal */
  --cat-templates:     #0D9488;
  --cat-templates-light:#F0FDFA;
  --cat-templates-mid: #5EEAD4;
  --cat-templates-border:#99F6E4;
}

/* ----------------------------------------------------------
   TOPIC CARDS — per-category colour identity
   ---------------------------------------------------------- */
.topic-card[data-cat="oracle-fusion"]   { --tc: var(--cat-oracle);    --tc-bg: var(--cat-oracle-light);    --tc-border: var(--cat-oracle-border); }
.topic-card[data-cat="sap-mdg"]         { --tc: var(--cat-sap);       --tc-bg: var(--cat-sap-light);       --tc-border: var(--cat-sap-border); }
.topic-card[data-cat="data-migration"]  { --tc: var(--cat-migration); --tc-bg: var(--cat-migration-light); --tc-border: var(--cat-migration-border); }
.topic-card[data-cat="manufacturing"]   { --tc: var(--cat-mfg);       --tc-bg: var(--cat-mfg-light);       --tc-border: var(--cat-mfg-border); }
.topic-card[data-cat="ai-erp"]          { --tc: var(--cat-ai);        --tc-bg: var(--cat-ai-light);        --tc-border: var(--cat-ai-border); }
.topic-card[data-cat="templates"]       { --tc: var(--cat-templates); --tc-bg: var(--cat-templates-light); --tc-border: var(--cat-templates-border); }

/* Apply category colours to card icon and CTA */
.topic-card[data-cat] .topic-card__icon { background: var(--tc-bg); color: var(--tc); }
.topic-card[data-cat] .topic-card__cta  { background: var(--tc); }
.topic-card[data-cat]:hover             { border-color: var(--tc-border); }
.topic-card[data-cat]:hover .topic-card__cta { background: var(--tc); filter: brightness(0.9); }

/* ----------------------------------------------------------
   ARTICLE CARD — category tag colours
   ---------------------------------------------------------- */
.tag--oracle    { background: var(--cat-oracle-light);    color: var(--cat-oracle);    border: 1px solid var(--cat-oracle-border); }
.tag--sap       { background: var(--cat-sap-light);       color: var(--cat-sap);       border: 1px solid var(--cat-sap-border); }
.tag--migration { background: var(--cat-migration-light); color: var(--cat-migration); border: 1px solid var(--cat-migration-border); }
.tag--mfg       { background: var(--cat-mfg-light);       color: var(--cat-mfg);       border: 1px solid var(--cat-mfg-border); }
.tag--ai        { background: var(--cat-ai-light);        color: var(--cat-ai);        border: 1px solid var(--cat-ai-border); }
.tag--templates { background: var(--cat-templates-light); color: var(--cat-templates); border: 1px solid var(--cat-templates-border); }

/* Keep orange as default tag (uncategorised) */
.tag--orange { background: var(--orange-100); color: var(--orange-dark); border: 1px solid #FED7AA; }

/* ----------------------------------------------------------
   THUMBNAIL GRADIENTS — richer, per-category
   ---------------------------------------------------------- */
.thumb--oracle    { background: linear-gradient(145deg, #1C0A0A 0%, #7F1D1D 60%, #991B1B 100%); }
.thumb--sap       { background: linear-gradient(145deg, #0C1445 0%, #1E3A8A 60%, #1D4ED8 100%); }
.thumb--migration { background: linear-gradient(145deg, #1E1B4B 0%, #3730A3 60%, #4338CA 100%); }
.thumb--mfg       { background: linear-gradient(145deg, #1C1007 0%, #78350F 60%, #92400E 100%); }
.thumb--ai        { background: linear-gradient(145deg, #1A0533 0%, #4C1D95 60%, #6D28D9 100%); }
.thumb--default   { background: linear-gradient(145deg, #0F172A 0%, #1E293B 100%); }

/* ----------------------------------------------------------
   SECTION BACKGROUNDS — varied, not monotone
   ---------------------------------------------------------- */
.section--warm    { background: #FAFAF9; }   /* warm off-white  */
.section--tinted  { background: #F0F9FF; }   /* very pale blue  */
.section--rose    { background: #FFF8F5; }   /* warm pale peach */

/* ----------------------------------------------------------
   NAV — orange only on active/hover, not base colour
   ---------------------------------------------------------- */
.erp-nav__menu a { color: var(--slate-700); }
.erp-nav__menu a:hover { color: var(--orange); background: var(--orange-50); }
.erp-nav__menu .current-menu-item > a { color: var(--orange); font-weight: 600; }

/* ----------------------------------------------------------
   SECTION EYEBROW — reduced to a subdued orange, not full
   ---------------------------------------------------------- */
.section__eyebrow { color: var(--orange-dark); opacity: 0.85; }

/* ----------------------------------------------------------
   BUTTONS — orange only for PRIMARY action
   ---------------------------------------------------------- */
.btn--dark:hover  { background: var(--slate-800); }   /* dark stays dark on hover */

/* ----------------------------------------------------------
   EXPERTISE PILLS — subtle warm hover only
   ---------------------------------------------------------- */
.expertise-pill:hover { background: #FFF3E0; color: var(--orange-dark); }

/* ----------------------------------------------------------
   GUIDE CARD — type badge uses category colour
   ---------------------------------------------------------- */
.guide-card .tag--checklist  { background: #EEF2FF; color: #4338CA; }
.guide-card .tag--framework  { background: #F0FDFA; color: #0F766E; }
.guide-card .tag--guide      { background: #EFF6FF; color: #1D4ED8; }
.guide-card .tag--whitepaper { background: #FFF7ED; color: #C2410C; }
.guide-card .tag--template   { background: #F5F3FF; color: #6D28D9; }

/* ----------------------------------------------------------
   ARCHIVE HEADER — dark but not pitch black
   ---------------------------------------------------------- */
.archive-header { background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%); }

/* ----------------------------------------------------------
   ARTICLE TOC sidebar — orange active on hover
   ---------------------------------------------------------- */
.toc-item:hover  { color: var(--slate-900); border-left-color: var(--slate-400); }
.toc-item.is-active { color: var(--orange-dark); background: var(--orange-50); border-left-color: var(--orange); }

/* ----------------------------------------------------------
   ARTICLE LINKS — orange only
   ---------------------------------------------------------- */
.article-body a:hover { color: var(--orange-dark); }

/* ----------------------------------------------------------
   HOMEPAGE HERO CARD — checklist items with coloured left bars
   ---------------------------------------------------------- */
.hero__check-item { border-left: 3px solid transparent; }
.hero__check-item:nth-child(1) { border-left-color: var(--cat-oracle); }
.hero__check-item:nth-child(2) { border-left-color: var(--cat-sap); }
.hero__check-item:nth-child(3) { border-left-color: var(--cat-migration); }
.hero__check-item:nth-child(4) { border-left-color: var(--cat-ai); }

/* ----------------------------------------------------------
   FOOTER — keep white, but tighten brand colour
   ---------------------------------------------------------- */
.footer-brand__name { color: var(--slate-900); }
.footer-col__links a:hover { color: var(--orange-dark); }