/*
 * Cloudiofy.Cms.Theme - core stylesheet
 *
 * Reproduces the Cloudiofy visual identity (blue "Cloud" + orange "iofy") for the
 * Orchard Core website. Design token VALUES mirror Cloudiofy.Training.App's design
 * system, but this stylesheet is authored independently for the Orchard theme.
 * No CSS is shared with or copied from the Training App.
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* Primary palette (blue - "Cloud") */
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  /* Accent palette (orange - "iofy") */
  --color-accent-400: #fb923c;
  --color-accent-500: #f97316;
  --color-accent-600: #ea580c;

  /* Neutral grayscale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* Semantic tokens */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-gray-50);
  --text-primary: var(--color-gray-900);
  --text-secondary: var(--color-gray-600);
  --text-inverse: #ffffff;
  --border-default: var(--color-gray-200);

  /* Typography */
  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;

  /* Spacing (8-point grid) */
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;

  /* Radius */
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 10px 30px -5px rgba(0, 0, 0, 0.15), 0 8px 16px -4px rgba(0, 0, 0, 0.1);

  /* Layout */
  --container-max-width: 1280px;
  --navbar-height: 4.5rem;

  /* Motion */
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   BASE / RESET
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.5rem; }

p { margin: 0 0 var(--space-2); }

a {
  color: var(--color-primary-600);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover { color: var(--color-primary-700); }

img { max-width: 100%; height: auto; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

.site-main {
  min-height: 60vh;
}

.section {
  padding-block: var(--space-10);
}

.section--muted {
  background-color: var(--bg-secondary);
}

/* ============================================================
   BRAND
   ============================================================ */
.brand {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

.brand__cloud { color: var(--color-primary-600); }
.brand__io { color: var(--color-accent-500); }
.brand__fy { color: var(--color-primary-600); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  padding-inline: 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base), box-shadow var(--transition-base);
}

.btn--primary {
  background-color: var(--color-primary-600);
  color: var(--text-inverse);
}
.btn--primary:hover {
  background-color: var(--color-primary-700);
  color: var(--text-inverse);
}

.btn--accent {
  background-color: var(--color-accent-500);
  color: var(--text-inverse);
}
.btn--accent:hover {
  background-color: var(--color-accent-600);
  color: var(--text-inverse);
}

.btn--outline {
  background-color: transparent;
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn--outline:hover {
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--navbar-height);
  gap: var(--space-3);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__list li { list-style: none; }

.site-nav__link,
.site-nav a {
  color: var(--color-gray-700);
  font-weight: 500;
  font-size: 0.9375rem;
}

.site-nav__link:hover,
.site-nav a:hover { color: var(--color-primary-600); }

/* Nav CTA (Login): soft light-blue at rest AND on hover (no color shift on hover). */
.site-nav__cta,
.site-nav__cta:hover { background-color: var(--color-primary-100); color: var(--color-primary-600); border-color: var(--color-primary-300, #93c5fd); }

/* Mobile toggle - hidden on desktop */
.nav-toggle,
.nav-toggle__btn {
  display: none;
}

/* ============================================================
   CARDS (shared building block for later content pages)
   ============================================================ */
.card {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.card__body { padding: var(--space-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-gray-900);
  color: var(--color-gray-300);
  margin-top: var(--space-10);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  padding-block: var(--space-8);
}

.site-footer__brand { max-width: 22rem; }

.site-footer__tagline {
  color: var(--color-gray-500);
  margin-top: var(--space-2);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-start;
}

.site-footer__links a { color: var(--color-gray-300); font-weight: 500; }
.site-footer__links a:hover { color: var(--text-inverse); }

.site-footer__bottom {
  border-top: 1px solid var(--color-gray-800);
  padding-block: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

/* ============================================================
   RESPONSIVE (mobile-first breakpoint at 768px)
   ============================================================ */
@media (max-width: 767px) {
  .nav-toggle__btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 2.75rem;
    height: 2.75rem;
    cursor: pointer;
  }

  .nav-toggle__btn span {
    display: block;
    height: 2px;
    width: 22px;
    background-color: var(--color-gray-800);
    border-radius: var(--radius-full);
    transition: transform var(--transition-base), opacity var(--transition-base);
  }

  .site-nav {
    position: absolute;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    box-shadow: var(--shadow-card);
    padding: var(--space-2);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--transition-base);
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .site-nav__list li { width: 100%; }

  .site-nav__link,
  .site-nav a {
    display: block;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--border-default);
  }

  .site-nav__cta {
    margin-top: var(--space-2);
    border-bottom: none;
  }

  .nav-toggle:checked ~ .site-nav {
    max-height: 32rem;
    visibility: visible;
  }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
}

/* ============================================================
   ADDITIONAL TOKENS used by content sections
   ============================================================ */
:root {
  --color-accent-50: #fff7ed;
  --color-accent-700: #c2410c;
  --color-primary-50: #eff6ff;
  --text-tertiary: var(--color-gray-400);
}

/* ============================================================
   CMS CONTENT CONTAINER
   ============================================================ */
.site-main__container {
  padding-block: var(--space-6);
}

/* Page snippets bring their own .container; neutralize nesting. */
.container .container {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* ============================================================
   HELPERS
   ============================================================ */
.eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-primary-600);
  margin-bottom: var(--space-2);
}

.text-accent { color: var(--color-accent-500); }
.text-primary { color: var(--color-primary-600); }

.prose { max-width: 46rem; }
.prose p { color: var(--text-secondary); font-size: 1.0625rem; }

/* ============================================================
   SECTION HEADER + GRID
   ============================================================ */
.section__header {
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--space-5);
}
.section__title { font-size: 2rem; }
.section__subtitle { color: var(--text-secondary); font-size: 1.0625rem; }

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

/* ============================================================
   HERO (contained block)
   ============================================================ */
.hero {
  background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-4);
  margin-bottom: var(--space-6);
}
.hero__inner { max-width: 44rem; }
.hero .eyebrow { color: rgba(255, 255, 255, 0.85); }
.hero__title { color: #fff; font-size: 2.75rem; }
.hero__subtitle { color: rgba(255, 255, 255, 0.9); font-size: 1.1875rem; margin-bottom: var(--space-3); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.btn--on-dark { color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.btn--on-dark:hover { color: var(--color-primary-700); background: #fff; border-color: #fff; }

/* ============================================================
   FEATURE CARDS
   ============================================================ */
.feature-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--color-primary-600);
  color: #fff;
  font-weight: 800;
  font-size: 1.25rem;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
}
.feature-card__icon--accent { background: var(--color-accent-500); }
.feature-card__title { font-size: 1.1875rem; }
.feature-card__text { color: var(--text-secondary); margin-bottom: 0; }

/* ============================================================
   PAGE HEADER (contained block)
   ============================================================ */
.page-header {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
  margin-bottom: var(--space-5);
  text-align: center;
}
.page-header__title { font-size: 2.5rem; }
.page-header__subtitle { color: var(--text-secondary); font-size: 1.125rem; max-width: 40rem; margin-inline: auto; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background: var(--color-gray-900);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  margin-top: var(--space-6);
}
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.cta-band__title { color: #fff; margin-bottom: 0.25rem; }
.cta-band__text { color: rgba(255, 255, 255, 0.8); margin: 0; }

/* ============================================================
   BADGES + COURSE/SERVICE CARDS
   ============================================================ */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.badge--accent { color: var(--color-accent-700); background: var(--color-accent-50); }

.course-card h3 { font-size: 1.1875rem; margin-top: 0.25rem; }
.course-card p { color: var(--text-secondary); margin-bottom: 0; }

.card h3 { font-size: 1.1875rem; }
.card p { color: var(--text-secondary); margin-bottom: 0; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-item h3 { font-size: 1.125rem; }
.contact-item p { color: var(--text-secondary); }
.contact-note { margin-top: var(--space-4); color: var(--text-secondary); font-size: 0.9375rem; }

/* ============================================================
   BLOG (default Orchard rendering, lightly styled)
   ============================================================ */
.blog-post__subtitle { color: var(--text-secondary); font-size: 1.125rem; }
.blog-post__meta { color: var(--text-tertiary); font-size: 0.875rem; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2,
  .grid--3 { grid-template-columns: 1fr; }
  .hero__title { font-size: 2.25rem; }
  .page-header__title { font-size: 2rem; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   BLOG DETAIL
   ============================================================ */
.blog-post { max-width: 46rem; margin-inline: auto; }
.blog-post__image { width: 100%; border-radius: var(--radius-lg); margin-bottom: var(--space-3); }
.blog-post__title { font-size: 2.5rem; margin-bottom: 0.25rem; }
.blog-post__terms { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.blog-post__body { margin-top: var(--space-3); }
.blog-post__back { margin-top: var(--space-5); }

/* ============================================================
   BLOG LISTING
   ============================================================ */
.blog-list { margin-bottom: var(--space-4); }
.post-card__terms { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.25rem; }
.post-card__title { font-size: 1.375rem; margin: 0.25rem 0; }
.post-card__title a { color: var(--text-primary); }
.post-card__title a:hover { color: var(--color-primary-600); }
.post-card__subtitle { color: var(--text-secondary); margin-bottom: 0.5rem; }
.post-card__meta { color: var(--text-tertiary); font-size: 0.875rem; margin-bottom: 0; }

/* ============================================================
   PAGER
   ============================================================ */
.pager,
ul.pager {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin-top: var(--space-4);
  justify-content: center;
}
.pager li { list-style: none; }
.pager a,
.pager span {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-primary-600);
}
.pager a:hover { background: var(--color-primary-50); }

/* ============================================================
   CONTACT FORM
   ============================================================ */
.contact-form {
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.form-field { display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label { font-weight: 600; font-size: 0.9375rem; color: var(--text-primary); }
.form-field input,
.form-field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-family: var(--font-base);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}
.contact-form .btn { align-self: flex-start; }
.form-hint { display: block; text-align: right; font-size: 0.8125rem; color: var(--text-tertiary); margin-top: 0.25rem; }
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown) { border-color: var(--color-error, #dc2626); }
/* Google reCAPTCHA v2 widget (rendered by JS only when the feature is configured).
   Reserve the widget's height so the form doesn't jump while the script loads. */
.form-field--recaptcha { gap: 0; }
.cf-recaptcha { min-height: 78px; }
.cf-recaptcha > div { max-width: 100%; }

/* ============================================================
   CLOUDIOFY UI PARITY (matches Cloudiofy.Training.App)
   ============================================================ */
:root {
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-blue-50: #eff6ff;
  --color-orange-50: #fff7ed;
}

/* Header: 3-span brand */
.brand { display: inline-flex; align-items: baseline; }

/* Buttons: secondary + white variants */
.btn--secondary {
  background: var(--bg-primary);
  border-color: var(--border-default);
  color: var(--text-primary);
}
.btn--secondary:hover { border-color: var(--color-primary-600); color: var(--color-primary-600); }
.btn--white { background: #fff; color: var(--color-primary-600); }
.btn--white:hover { background: rgba(255,255,255,0.9); color: var(--color-primary-700); }
.btn--lg { height: 3rem; padding-inline: 1.75rem; font-size: 1rem; }

/* Eyebrow labels */
.eyebrow--orange { color: var(--color-accent-500); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Grid helpers */
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Icon tiles (FontAwesome <i> inside) */
.icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.5rem; height: 3.5rem; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: #fff; font-size: 1.375rem; margin-bottom: var(--space-2);
}
.icon-tile--accent { background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600)); }
.icon-tile--blueorange { background: linear-gradient(135deg, var(--color-primary-500), var(--color-accent-500)); }
.icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem; border-radius: var(--radius-full);
  background: var(--color-primary-50); color: var(--color-primary-600); font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

/* ---------- HERO (Home split) ---------- */
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; padding-block: var(--space-8); }
.hero-split__title { font-size: 3rem; line-height: 1.1; margin-bottom: var(--space-2); }
.hero-split__subtitle { color: var(--text-secondary); font-size: 1.1875rem; max-width: 34rem; margin-bottom: var(--space-3); }
.hero-split__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero-visual { display: flex; align-items: center; justify-content: center; }
.hero-visual__card {
  width: 100%; max-width: 26rem; aspect-ratio: 1/1;
  background: linear-gradient(135deg, var(--color-primary-100), var(--color-accent-100, #ffedd5));
  border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-5);
}
.hero-visual__icon { font-size: 5rem; color: var(--color-primary-600); margin-bottom: var(--space-2); }
.hero-visual__text { font-size: 1.125rem; font-weight: 600; color: var(--color-gray-700); }

/* ---------- Page heroes ---------- */
.page-hero-dark {
  background: linear-gradient(135deg, var(--color-gray-900), var(--color-primary-900));
  color: #fff; padding-block: var(--space-10); text-align: center;
}
.page-hero-dark .page-hero__title { color: #fff; font-size: 2.75rem; }
.page-hero-dark .page-hero__subtitle { color: rgba(255,255,255,0.8); max-width: 46rem; margin-inline: auto; font-size: 1.125rem; }

.page-hero-light {
  position: relative; overflow: hidden; text-align: center;
  background: linear-gradient(135deg, var(--color-blue-50), #fff 55%, var(--color-orange-50));
  padding-block: var(--space-10);
}
.page-hero__title { font-size: 2.75rem; margin-bottom: var(--space-2); }
.page-hero__subtitle { color: var(--text-secondary); font-size: 1.125rem; max-width: 46rem; margin-inline: auto; }
.page-hero__lead { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; margin-bottom: var(--space-2); }
.eyebrow-pill {
  display: inline-block; margin-bottom: var(--space-2); padding: 0.35rem 0.9rem; border-radius: var(--radius-full);
  background: #fff; border: 1px solid var(--color-primary-100); color: var(--color-primary-600);
  font-size: 0.8125rem; font-weight: 600;
}

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); text-align: center; }
.stat__value { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; color: var(--color-primary-600); }
.stat__label { color: var(--text-secondary); font-weight: 500; }

/* ---------- Tech tags ---------- */
.tech-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.tech-tag {
  padding: 0.5rem 1rem; border-radius: var(--radius-full); background: #fff;
  border: 1px solid var(--color-primary-100); box-shadow: var(--shadow-sm);
  font-size: 0.875rem; font-weight: 500; color: var(--color-gray-700);
  transition: all var(--transition-base);
}
.tech-tag:hover { background: linear-gradient(90deg, var(--color-primary-500), var(--color-accent-500)); color: #fff; transform: scale(1.05); }
.section--tint { background: linear-gradient(90deg, var(--color-blue-50), #fff, var(--color-orange-50)); border-block: 1px solid var(--color-primary-100); }

/* ---------- Service cards (Services page) ---------- */
.svc-card {
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  padding: var(--space-4); transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.svc-card:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary-300, #93c5fd); transform: translateY(-4px); }
.svc-card__title { font-size: 1.375rem; margin-bottom: 0.5rem; }
.svc-card__desc { color: var(--text-secondary); margin-bottom: var(--space-2); }
.svc-features__title { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-primary); margin-bottom: 0.5rem; }
.feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.feature-list li { position: relative; padding-left: 1.6rem; color: var(--text-secondary); font-size: 0.9375rem; }
.feature-list li i { position: absolute; left: 0; top: 0.15rem; color: var(--color-accent-500); }

/* ---------- Why-choose / advantage / journey cards ---------- */
.why-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3); transition: all var(--transition-base); }
.why-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.why-card__title { font-size: 1.125rem; margin: 0.25rem 0 0.5rem; }
.why-card__desc { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: 0.75rem; }
.why-card__points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.why-card__points li { position: relative; padding-left: 1.4rem; font-size: 0.8125rem; color: var(--text-secondary); }
.why-card__points li i { position: absolute; left: 0; top: 0.1rem; color: var(--color-primary-500); }

.advantage { text-align: center; padding: var(--space-3); border-radius: var(--radius-lg); transition: background var(--transition-base); }
.advantage:hover { background: var(--bg-secondary); }
.advantage__title { font-size: 1.25rem; margin: 0.5rem 0; }
.advantage__desc { color: var(--text-secondary); font-size: 0.9375rem; }

.journey-card {
  position: relative; text-align: center; background: #fff; border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3) var(--space-3);
  transition: all var(--transition-base);
}
.journey-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary-300, #93c5fd); transform: translateY(-6px); }
.journey-card__step { position: absolute; top: 0.75rem; left: 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--color-primary-600); background: var(--color-blue-50); padding: 0.15rem 0.5rem; border-radius: var(--radius-full); }
.journey-card__icon { font-size: 2.25rem; color: var(--color-primary-600); margin-bottom: var(--space-2); }
.journey-card__title { font-size: 1rem; margin-bottom: 0.35rem; }
.journey-card__desc { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; }

/* ---------- About: who we are / what we do ---------- */
.split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: center; }
.checklist { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.checklist li { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-weight: 500; }
.checklist li i { color: var(--color-primary-500); }
.whatwedo {
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-500));
  border-radius: var(--radius-xl); padding: var(--space-4); color: #fff; box-shadow: var(--shadow-xl);
}
.whatwedo h3 { color: #fff; margin-bottom: var(--space-3); }
.whatwedo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.whatwedo__item { display: flex; align-items: center; gap: 0.6rem; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; font-weight: 600; font-size: 0.875rem; }
.whatwedo__item i { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); background: rgba(249,115,22,0.9); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; }

/* ---------- About: achievements ---------- */
.achievement { text-align: center; background: linear-gradient(135deg, var(--color-blue-50), var(--color-orange-50)); border: 1px solid var(--color-primary-100); border-radius: var(--radius-xl); padding: var(--space-4); }
.achievement__value { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; }
.achievement__label { color: var(--text-secondary); font-weight: 600; font-size: 0.9375rem; }

/* ---------- About: team ---------- */
.team-card { text-align: center; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-3); transition: all var(--transition-base); }
.team-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-6px); border-color: var(--color-primary-300, #93c5fd); }
.team-card__avatar { width: 5rem; height: 5rem; margin: 0 auto var(--space-2); border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary-600), var(--color-accent-500)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.75rem; }
.team-card__name { font-size: 1.125rem; margin-bottom: 0.15rem; }
.team-card__role { color: var(--color-primary-600); font-weight: 600; font-size: 0.875rem; margin-bottom: 0.6rem; }
.team-card__exp { display: inline-block; font-size: 0.6875rem; font-weight: 600; color: var(--color-accent-700); background: var(--color-orange-50); border: 1px solid #ffedd5; border-radius: var(--radius-full); padding: 0.3rem 0.7rem; }

/* ---------- Gradient CTA band ---------- */
.cta-hero { background: linear-gradient(90deg, var(--color-primary-600), var(--color-accent-500)); color: #fff; text-align: center; padding-block: var(--space-10); }
.cta-hero__title { color: #fff; font-size: 2.25rem; margin-bottom: var(--space-2); }
.cta-hero__text { color: rgba(255,255,255,0.9); font-size: 1.0625rem; max-width: 42rem; margin: 0 auto var(--space-3); }
.cta-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }

/* ---------- Contact ---------- */
.contact-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.contact-info { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); }
.contact-info__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--border-default); }
.contact-info__item:last-child { border-bottom: none; }
.contact-info__item i { width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--color-blue-50); color: var(--color-primary-600); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-info__label { display: block; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; }
.contact-info__value { color: var(--text-primary); font-size: 0.9375rem; }
.contact-form-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-card); }
.contact-form-card h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.contact-form-card > p { color: var(--text-secondary); margin-bottom: var(--space-3); }

/* ---------- Footer (4-column) ---------- */
.site-footer { background: var(--color-gray-50); border-top: 1px solid var(--border-default); margin-top: var(--space-10); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--space-5); padding-block: var(--space-6); }
.site-footer__tagline { color: var(--text-secondary); font-size: 0.9375rem; margin: var(--space-2) 0; max-width: 20rem; }
.site-footer__social { display: flex; gap: 0.5rem; }
.site-footer__social a { width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--color-gray-100); color: var(--color-gray-600); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-base); }
.site-footer__social a:hover { background: var(--color-primary-600); color: #fff; transform: scale(1.1); }
.site-footer__col h4 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-gray-900); margin-bottom: var(--space-2); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__col a { color: var(--text-secondary); font-size: 0.9375rem; }
.site-footer__col a:hover { color: var(--color-primary-600); }
.site-footer__contact li { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9375rem; }
.site-footer__contact i { color: var(--color-primary-600); width: 1rem; text-align: center; }
.site-footer__bottom { border-top: 1px solid var(--border-default); background: var(--color-gray-100); }
.site-footer__bottom .container { padding-block: var(--space-2); }
.site-footer__bottom span { display: block; text-align: center; font-size: 0.875rem; color: var(--text-secondary); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-split, .split2, .contact-grid2 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .hero-split__visual { order: -1; }
}
@media (max-width: 640px) {
  .grid--4, .stats-grid, .checklist, .whatwedo__grid, .site-footer__grid { grid-template-columns: 1fr; }
  .hero-split__title { font-size: 2.25rem; }
  .page-hero__title, .page-hero-dark .page-hero__title { font-size: 2rem; }
  .cta-hero__title { font-size: 1.875rem; }
}

/* Utilities used by page snippets */
.text-center { text-align: center; }
.cta-center { text-align: center; margin-top: var(--space-5); }
.section__title--lg { font-size: 2.5rem; }

/* ============================================================
   HOMEPAGE — premium marketing redesign
   Uses existing Cloudiofy tokens only (blue/orange/neutrals).
   Also completes design tokens the theme referenced but never
   defined, so cards/spacing render as originally intended.
   ============================================================ */
:root {
  /* completed spacing scale (n * 0.5rem) */
  --space-1: 0.5rem;
  --space-5: 2.5rem;
  --space-7: 3.5rem;
  --space-9: 4.5rem;
  --space-11: 5.5rem;
  --space-12: 6rem;
  /* completed radii */
  --radius-sm: 0.25rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  /* completed shadows */
  --shadow-lg: 0 10px 20px -5px rgba(0, 0, 0, 0.12), 0 4px 8px -4px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.16), 0 8px 16px -6px rgba(0, 0, 0, 0.10);
  /* completed neutral + brand steps used by components */
  --color-gray-400: #9ca3af;
  --color-primary-300: #93c5fd;
  --color-accent-100: #ffedd5;
  /* semantic action color for the WhatsApp CTA */
  --color-whatsapp: #25d366;
  --color-whatsapp-dark: #1ebe5d;
}

/* ---- Button helpers ---- */
.btn { gap: 0.5rem; }
.btn--block { width: 100%; }
.btn--sm { height: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; }
.btn--whatsapp { background: var(--color-whatsapp); color: #fff; border-color: var(--color-whatsapp); }
.btn--whatsapp:hover { background: var(--color-whatsapp-dark); border-color: var(--color-whatsapp-dark); color: #fff; }

/* ============================================================
   HERO (split: message + conversion card)
   ============================================================ */
.home-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #ffffff 52%, var(--color-orange-50) 100%);
  border-bottom: 1px solid var(--color-primary-100);
}
.home-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
  padding-block: var(--space-9);
}
.home-hero__title { font-size: 3.1rem; line-height: 1.08; margin-bottom: var(--space-2); }
.home-hero__subtitle { color: var(--text-secondary); font-size: 1.1875rem; line-height: 1.6; max-width: 34rem; margin-bottom: var(--space-3); }
.home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* trust row under hero CTAs */
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
.hero-trust__item { display: flex; align-items: center; gap: 0.6rem; }
.hero-trust__icon {
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--color-primary-100);
  color: var(--color-primary-600); font-size: 1rem; box-shadow: var(--shadow-sm);
}
.hero-trust__label { display: block; font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); line-height: 1.2; }
.hero-trust__sub { display: block; font-size: 0.8125rem; color: var(--text-tertiary); }

/* conversion card (right) */
.hero-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: var(--space-4); }
.hero-card__badge {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: var(--space-2);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-accent-600); background: var(--color-orange-50); border: 1px solid var(--color-accent-100);
  padding: 0.35rem 0.75rem; border-radius: var(--radius-full);
}
.hero-card__title { font-size: 1.4rem; margin-bottom: 0.4rem; }
.hero-card__text { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-3); }
.hero-card__actions { display: flex; flex-direction: column; gap: 0.6rem; }
.hero-card__note { margin: var(--space-3) 0 0; text-align: center; font-size: 0.8125rem; color: var(--text-tertiary); }

/* ============================================================
   STATS (icon + value + label)
   ============================================================ */
.stat__icon {
  width: 3.25rem; height: 3.25rem; margin: 0 auto var(--space-2); border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: #fff; font-size: 1.25rem;
}
.stat__icon--accent { background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600)); }

/* ============================================================
   COURSE CARDS ("Choose Your Career Path")
   ============================================================ */
.course-item {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  padding: var(--space-4); box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.course-item:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary-300); transform: translateY(-4px); }
.course-item__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.course-item__title { font-size: 1.1875rem; margin: 0 0 0.4rem; }
.course-item__desc { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-3); flex-grow: 1; }
.course-item__modes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-3); }
.mode-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-default); padding: 0.25rem 0.6rem; border-radius: var(--radius-full); }
.mode-tag i { color: var(--color-primary-500); font-size: 0.7rem; }
.course-item__foot { margin-top: auto; }

/* arrow link */
.card-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9375rem; color: var(--color-primary-600); }
.card-link i { transition: transform var(--transition-base); }
.card-link:hover { color: var(--color-primary-700); }
.card-link:hover i { transform: translateX(3px); }

/* ============================================================
   SERVICE TILES (home)
   ============================================================ */
.svc-tile {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  padding: var(--space-4);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.svc-tile:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary-300); transform: translateY(-4px); }
.svc-tile__title { font-size: 1.1875rem; margin: 0 0 0.4rem; }
.svc-tile__desc { color: var(--text-secondary); font-size: 0.9375rem; margin-bottom: var(--space-3); flex-grow: 1; }

/* ============================================================
   LEARNING JOURNEY (4-step timeline)
   ============================================================ */
.jsteps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.jsteps::before { content: ""; position: absolute; top: 2rem; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--color-primary-300), var(--color-accent-400)); z-index: 0; }
.jstep { position: relative; z-index: 1; text-align: center; }
.jstep__num {
  position: relative; width: 4rem; height: 4rem; margin: 0 auto var(--space-2); border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--color-primary-500); color: var(--color-primary-600);
  font-size: 1.4rem; box-shadow: var(--shadow-sm);
}
.jstep__badge { position: absolute; top: -0.4rem; right: -0.4rem; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--color-accent-500); color: #fff; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.jstep__title { font-size: 1.0625rem; margin-bottom: 0.35rem; }
.jstep__desc { font-size: 0.875rem; color: var(--text-secondary); margin: 0; }

/* ============================================================
   TESTIMONIALS ("What Our Learners Say")
   ============================================================ */
.testi-card { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-card); transition: box-shadow var(--transition-base), transform var(--transition-base); }
.testi-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.testi-stars { color: var(--color-accent-500); font-size: 0.9375rem; letter-spacing: 0.12em; margin-bottom: var(--space-2); }
.testi-quote { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--space-3); flex-grow: 1; }
.testi-author { display: flex; align-items: center; gap: 0.75rem; }
.testi-avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-primary-600), var(--color-accent-500)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; flex-shrink: 0; }
.testi-name { font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); }
.testi-role { font-size: 0.8125rem; color: var(--color-primary-600); }

/* section CTA under a centered header */
.section__cta { margin-top: var(--space-3); }

/* ============================================================
   HOMEPAGE RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .home-hero__grid { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-7); }
  .home-hero__title { font-size: 2.6rem; }
  .jsteps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
  .jsteps::before { display: none; }
}
@media (max-width: 640px) {
  .home-hero__title { font-size: 2.1rem; }
  .home-hero__actions .btn { width: 100%; }
  .jsteps { grid-template-columns: 1fr; }
}

/* ============================================================
   COURSE LISTING (/courses) — Training App parity
   Rich, linked course cards: media zone (gradient + PNG icon +
   level badge) + body (title, duration, topic tags, price, CTA).
   Design VALUES mirror Cloudiofy.Training.App's CourseCard, but
   this CSS is authored independently for the Orchard theme.
   ============================================================ */
:root {
  /* green "success" step for the Beginner level badge */
  --color-success-50: #ecfdf5;
  --color-success-100: #d1fae5;
  --color-success-700: #15803d;
  /* indigo tint used in the card media gradient */
  --color-indigo-50: #eef2ff;
}

/* Level badge colour system (Beginner=green, Intermediate=blue, Advanced=orange) */
.badge--success { color: var(--color-success-700); background: var(--color-success-50); }

/* Optional toolbar above the grid (static count / caption) */
/* Compact course-listing header + tighter header-to-cards spacing (courses page only) */
.page-hero-light--compact { padding-block: var(--space-6) var(--space-4); }
.page-hero-light--compact .page-hero__title { margin-bottom: 0.75rem; }
.page-hero-light--compact .page-hero__subtitle { max-width: 76rem; }
.section.section--courses { padding-block: var(--space-3) var(--space-10); }

.courses-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2);
}
.courses-toolbar__count { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; }

/* Balanced, centred flex grid: full rows fill (cards capped), last-row orphans centre. */
.courses-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
.courses-grid > .course-card {
  flex: 1 1 320px;
  max-width: 380px;
}

/* The card is a full-card link so the whole tile is clickable. */
.course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  color: inherit;
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
a.course-card { color: inherit; text-decoration: none; }
a.course-card:hover {
  color: inherit;
  box-shadow: var(--shadow-hover);
  border-color: var(--color-primary-300);
  transform: translateY(-4px);
}

/* Media zone: soft blue->indigo gradient with a centred product icon */
.course-card__media {
  position: relative;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #ffffff 55%, var(--color-indigo-50) 100%);
  border-bottom: 1px solid var(--border-default);
}
.course-card__icon {
  max-width: 88%;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 8px 16px rgba(17, 24, 39, 0.10));
  transition: transform var(--transition-base);
}
a.course-card:hover .course-card__icon { transform: scale(1.05); }
.course-card__level {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  margin: 0;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.12);
}

/* Body */
.course-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.7rem;
  padding: var(--space-3);
}
.course-card__title {
  font-size: 1.1875rem;
  margin: 0;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.85rem;
}
.course-card__desc { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; }
.course-card__meta { display: flex; align-items: center; gap: 0.4rem; color: var(--text-secondary); font-size: 0.875rem; }
.course-card__meta i { color: var(--color-primary-500); }

.course-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.course-card__tags .tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-gray-700);
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

/* Footer: price + CTA, pinned to the bottom of the card */
.course-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-default);
}
.course-card__price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--text-primary); }
.course-card__price-free { color: var(--color-success-700); }
.course-card__cta { flex-shrink: 0; }
a.course-card:hover .course-card__cta.btn--primary { background: var(--color-primary-700); }
.course-card__cta i { font-size: 0.8em; transition: transform var(--transition-base); }
a.course-card:hover .course-card__cta i { transform: translateX(3px); }

/* Course listing responsive: 3 -> 2 -> 1 (matches Training App breakpoints) */
@media (max-width: 900px) {
  .course-card__media { height: 180px; }
}
@media (max-width: 640px) {
  .courses-grid > .course-card { flex-basis: 100%; max-width: 100%; }
  .course-card__media { height: 190px; }
  .courses-toolbar { justify-content: flex-start; }
}

/* ============================================================
   COURSE DETAIL PAGES (/courses/<slug>) — Training App parity
   Reproduces the Cloudiofy.Training.App CourseDetail layout
   (back link, gradient header w/ media, 2-col body + sticky
   sidebar, modules, career cards). Authored independently.
   ============================================================ */

/* Back-to-courses bar */
.course-detail__back {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-default);
  padding-block: var(--space-2);
}
.course-detail__back a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--text-secondary); font-weight: 600; font-size: 0.9375rem;
}
.course-detail__back a:hover { color: var(--color-primary-600); }
.course-detail__back i { transition: transform var(--transition-base); }
.course-detail__back a:hover i { transform: translateX(-3px); }

/* Gradient header with media */
.course-detail-hero {
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #ffffff 55%, var(--color-orange-50) 100%);
  border-bottom: 1px solid var(--color-primary-100);
  padding-block: var(--space-7);
}
.course-detail-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.course-detail-hero__content { min-width: 0; }
.course-detail-hero__title { font-size: 2.5rem; margin: var(--space-2) 0; }
.course-detail-hero__desc { color: var(--text-secondary); font-size: 1.0625rem; margin-bottom: var(--space-3); }
.course-detail-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.course-meta { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-weight: 600; font-size: 0.9375rem; }
.course-meta i { color: var(--color-primary-600); }
.course-meta--accent i { color: var(--color-accent-500); }

.course-detail-hero__media {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, #ffffff, var(--color-indigo-50));
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
}
.course-detail-hero__media img { max-width: 100%; max-height: 220px; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(17, 24, 39, 0.10)); }

/* Body: two-column + sticky sidebar */
.course-detail-body { padding-block: var(--space-6); }
.course-detail__layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-6); align-items: start; }
.course-detail__main { min-width: 0; display: flex; flex-direction: column; gap: var(--space-6); }
.course-detail__aside { position: sticky; top: calc(var(--navbar-height) + var(--space-2)); display: flex; flex-direction: column; gap: var(--space-3); }
.course-detail__section-title { font-size: 1.375rem; margin: 0 0 var(--space-3); }

/* What You'll Learn / Course Features checklist */
.learn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.learn-item { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-secondary); font-size: 0.9375rem; }
.learn-item i { color: var(--color-accent-500); margin-top: 0.2rem; flex-shrink: 0; }

/* Course Content — modules */
.modules { display: flex; flex-direction: column; gap: var(--space-2); }
.module { border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: #fff; overflow: hidden; }
.module__title { font-size: 1.0625rem; margin: 0; padding: 0.75rem var(--space-3); background: var(--bg-secondary); border-bottom: 1px solid var(--border-default); }
.module__topics { list-style: none; margin: 0; padding: var(--space-2) var(--space-3); display: grid; gap: 0.4rem; }
.module__topics li { position: relative; padding-left: 1.25rem; color: var(--text-secondary); font-size: 0.9375rem; }
.module__topics li::before { content: "\2022"; position: absolute; left: 0.25rem; color: var(--color-primary-500); font-weight: 700; }
.module__topics a { color: var(--color-primary-600); text-decoration: underline; }
.module__topics a:hover { color: var(--color-primary-700); }

/* Career opportunities */
.career-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.career-card { display: flex; gap: 0.75rem; padding: var(--space-3); background: var(--bg-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); transition: box-shadow var(--transition-base); }
.career-card:hover { box-shadow: var(--shadow-hover); }
.career-card > i { color: var(--color-primary-600); font-size: 1.25rem; flex-shrink: 0; margin-top: 0.15rem; }
.career-card__role { font-weight: 700; font-size: 0.9375rem; color: var(--text-primary); margin: 0 0 0.15rem; }
.career-card__desc { color: var(--text-secondary); font-size: 0.875rem; margin: 0; }

/* Why choose prose */
.course-prose { color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
.course-prose p { margin: 0 0 var(--space-2); }
.course-prose p:last-child { margin-bottom: 0; }

/* Sidebar cards */
.enroll-card { background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-500)); color: #fff; border-radius: var(--radius-xl); padding: var(--space-4); box-shadow: var(--shadow-lg); }
.enroll-card h3 { color: #fff; font-size: 1.375rem; margin: 0 0 0.5rem; }
.enroll-card p { color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; margin: 0 0 var(--space-3); }

.side-card { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: var(--space-3); }
.side-card__title { font-size: 1.0625rem; margin: 0 0 var(--space-2); }
.side-card__text { color: var(--text-secondary); font-size: 0.9375rem; margin: 0 0 var(--space-3); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.side-list li { display: flex; align-items: flex-start; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9375rem; }
.side-list i { color: var(--color-accent-500); margin-top: 0.15rem; flex-shrink: 0; }

.info-row { display: flex; justify-content: space-between; gap: var(--space-2); padding-block: 0.45rem; font-size: 0.9375rem; }
.info-row + .info-row { border-top: 1px solid var(--border-default); }
.info-row__label { color: var(--text-tertiary); }
.info-row__value { color: var(--text-primary); font-weight: 600; }
.info-row--fee .info-row__value { color: var(--color-primary-600); font-weight: 800; font-size: 1.0625rem; }

/* Responsive */
@media (max-width: 900px) {
  .course-detail-hero__grid { grid-template-columns: 1fr; }
  .course-detail-hero__media { order: -1; max-width: 22rem; margin-inline: auto; }
  .course-detail-hero__media img { max-height: 170px; }
  .course-detail__layout { grid-template-columns: 1fr; }
  .course-detail__aside { position: static; }
  .course-detail-hero__title { font-size: 2rem; }
}
@media (max-width: 640px) {
  .learn-grid, .career-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   AWS COURSE PAGE — certification cards + section helpers
   Additive component styles (no existing rules changed).
   Reuses .card / .card__body / .card-link / .grid.
   ============================================================ */
.cert-card { display: flex; flex-direction: column; height: 100%; }
.cert-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #ffffff 60%, var(--color-orange-50) 100%);
  border-bottom: 1px solid var(--border-default);
}
.cert-card__media img { max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.cert-card .card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0.6rem; }
.cert-card__title { font-size: 1.125rem; margin: 0; }
.cert-card__desc { color: var(--text-secondary); font-size: 0.9375rem; margin: 0; flex-grow: 1; }
.cert-card__link { margin-top: 0.4rem; align-self: flex-start; }

/* Narrow, centred wrapper for AWS text/list sections */
.aws-narrow { max-width: 52rem; margin-inline: auto; }

/* ============================================================
   AWS PAGE — subtle Cloudiofy-blue visual polish
   Scoped to .aws-page only; no other page is affected.
   Clean white background + a single blue accent (no extra colors).
   ============================================================ */

/* Wider hero paragraph on desktop (natural full-width, still centred) */
.aws-page .page-hero__subtitle { max-width: 70rem; }

/* Section headings in Cloudiofy blue */
.aws-page .section__title { color: var(--color-primary-700); }

/* Certification cards: premium, brand-connected blue accent */
.aws-page .cert-card {
  border-top: 3px solid var(--color-primary-600);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}
.aws-page .cert-card:hover {
  border-color: var(--color-primary-300);
  border-top-color: var(--color-primary-600);
}
/* Clean blue-only media tint (drops the orange for a calmer, on-brand look) */
.aws-page .cert-card__media {
  background: linear-gradient(135deg, var(--color-blue-50) 0%, #ffffff 100%);
}
.aws-page .cert-card__title { color: var(--color-primary-700); }

/* ============================================================
   ABOUT PAGE - visual polish (scoped, additive)
   Reproduces the Cloudiofy.Training.App About look/feel using
   theme tokens only. Everything here is scoped via "--about"
   modifiers so shared classes and other pages (Courses / AWS
   heroes that also use .page-hero-light) are unaffected.
   ============================================================ */

/* Hero: more generous spacing, larger heading, decorative blobs */
.page-hero-light--about { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.page-hero-light--about::before,
.page-hero-light--about::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: var(--radius-full);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.page-hero-light--about::before { top: -7rem; left: -7rem; background: rgba(37, 99, 235, 0.18); }
.page-hero-light--about::after { bottom: -7rem; right: -7rem; background: rgba(249, 115, 22, 0.16); }
.page-hero-light--about > .container { position: relative; z-index: 1; max-width: 60rem; }
.page-hero-light--about .page-hero__title { font-size: clamp(2.5rem, 5vw, 3.5rem); margin-bottom: var(--space-2); }
.page-hero-light--about .page-hero__lead { color: var(--text-primary); font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin-bottom: var(--space-3); }
.page-hero-light--about .page-hero__subtitle { max-width: 48rem; font-size: 1.15rem; line-height: 1.7; }
.page-hero-light--about .cta-hero__buttons { margin-top: var(--space-3); }

/* Section below hero (Who We Are): clearer structure, roomier layout */
.split2--about { gap: var(--space-8); }
.split2--about .checklist { grid-template-columns: 1fr; gap: 0.6rem; }
.split2--about .checklist li {
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.split2--about .checklist li:hover {
  border-color: var(--color-primary-300);
  box-shadow: var(--shadow-hover);
  transform: translateX(3px);
}
.split2--about .checklist li i {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--radius-full);
  background: var(--color-blue-50);
  color: var(--color-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.split2--about .whatwedo { padding: var(--space-5); border-radius: var(--radius-2xl); }
.split2--about .whatwedo__item { transition: background var(--transition-base), transform var(--transition-base); }
.split2--about .whatwedo__item:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }

@media (max-width: 860px) {
  .split2--about { grid-template-columns: 1fr; }
}

/* ============================================================
   CONTACT PAGE - scoped polish (additive; Contact-only)
   Hero background matches the About hero (soft blue->white->orange
   gradient from .page-hero-light + the same blurred blobs), a
   slightly larger/readable intro paragraph, and a distinct
   professional colour per contact icon. All selectors are
   Contact-only, so no other page is affected.
   ============================================================ */

/* Hero background: same visual style as the About hero (blobs over the gradient) */
.page-hero-light--contact::before,
.page-hero-light--contact::after {
  content: "";
  position: absolute;
  width: 22rem;
  height: 22rem;
  border-radius: var(--radius-full);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.page-hero-light--contact::before { top: -7rem; left: -7rem; background: rgba(37, 99, 235, 0.18); }
.page-hero-light--contact::after { bottom: -7rem; right: -7rem; background: rgba(249, 115, 22, 0.16); }
.page-hero-light--contact > .container { position: relative; z-index: 1; }

/* Intro paragraph: wider so it wraps to ~2 lines, slightly larger + more readable */
.page-hero-light--contact .page-hero__subtitle { font-size: 1.2rem; line-height: 1.8; margin-top: var(--space-2); max-width: 60rem; }

/* Tighter gap between the hero and the contact cards (Contact page only) */
.page-hero-light--contact { padding-bottom: var(--space-4); }
.page-hero-light--contact + .section { padding-top: var(--space-5); }

/* Distinct, professional colour per contact icon (fixed order in the template) */
.contact-info__item:nth-child(1) i { color: #2563eb; background: #eff6ff; } /* Address  - blue   */
.contact-info__item:nth-child(2) i { color: #ea580c; background: #fff7ed; } /* Email    - orange */
.contact-info__item:nth-child(3) i { color: #16a34a; background: #f0fdf4; } /* Phone    - green  */
.contact-info__item:nth-child(4) i { color: #0891b2; background: #ecfeff; } /* WhatsApp - cyan   */
.contact-info__item:nth-child(5) i { color: #7c3aed; background: #f5f3ff; } /* Hours    - violet */

/* ============================================================
   BLOG REDESIGN — category cards, breadcrumbs, badge links
   Additive; reuses existing tokens and .card / .icon-tile /
   .grid / .section__header / .badge / .post-card / .page-hero-light.
   ============================================================ */

/* "Explore Our Blog" category cards (blog index) */
.blog-categories { margin-top: var(--space-2); }
.blog-category-card { display: block; height: 100%; text-decoration: none; color: inherit; }
.blog-category-card .card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  height: 100%;
}
.blog-category-card h3 { margin: 0; }
.blog-category-card p { flex-grow: 1; }
.blog-category-card .card-link { margin-top: auto; }

/* Category landing hero icon */
.page-hero__icon { margin-bottom: var(--space-2); }

/* Breadcrumbs (category + post pages) */
.breadcrumbs { font-size: 0.875rem; color: var(--text-tertiary); margin-bottom: var(--space-2); }
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--color-primary-600); }
.breadcrumbs__sep { margin: 0 0.45rem; color: var(--text-tertiary); }
.breadcrumbs__current { color: var(--text-tertiary); }

/* Category / tag badges rendered as links */
a.badge { text-decoration: none; transition: filter var(--transition-base); }
a.badge:hover { filter: brightness(0.95); }

/* Empty category listing */
.blog-empty { color: var(--text-secondary); text-align: center; padding: var(--space-6) 0; }

/* ============================================================
   BOOK FREE COUNSELLING POPUP
   Theme-rendered functional form (see Views/Content-Page.liquid).
   Shown on the Home and Courses pages; posts to /counselling/submit.
   ============================================================ */
.counsel-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
}
.counsel-modal[hidden] { display: none; }

.counsel-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  backdrop-filter: blur(2px);
}

.counsel-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--bg-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hover);
  padding: var(--space-4);
  animation: counsel-pop var(--transition-base);
}

@keyframes counsel-pop {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.counsel-modal__close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--transition-base), color var(--transition-base);
}
.counsel-modal__close:hover { background: var(--color-gray-100); color: var(--text-primary); }

.counsel-modal__title { font-size: 1.5rem; margin: 0.35rem 0 0.35rem; }
.counsel-modal__lead { color: var(--text-secondary); margin-bottom: var(--space-3); }

.counsel-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: var(--space-3);
}
.counsel-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}
.counsel-option:hover { border-color: var(--color-primary-400); }
.counsel-option input {
  accent-color: var(--color-primary-600);
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.counsel-option__label { font-weight: 600; color: var(--text-primary); }
/* Highlight the selected option (progressive enhancement; ignored where :has() is unsupported). */
.counsel-option:has(input:checked) {
  border-color: var(--color-primary-600);
  background: var(--color-primary-50);
}

.counsel-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: var(--space-2);
}

.counsel-step--success { text-align: center; }
.counsel-success__icon { font-size: 3rem; color: #16a34a; margin-bottom: 0.25rem; }

.counsel-status { margin: 0.75rem 0 0; font-weight: 600; }
.counsel-status[hidden] { display: none; }

@media (max-width: 30rem) {
  .counsel-modal__dialog { padding: var(--space-3); }
  .counsel-actions { flex-direction: column-reverse; }
  .counsel-actions .btn { width: 100%; }
}

/* ============================================================
   404 / NOT FOUND PAGE
   Mirrors the LMS (Cloudiofy.Training.App) NotFound design so both
   apps share the same 404 experience. Rendered by
   Views/HttpError-NotFound.liquid inside the theme layout.
   ============================================================ */
.nf {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding-block: var(--space-8);
}

.nf__inner {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

/* 404 number with the search-icon overlay */
.nf__illustration {
  position: relative;
  display: inline-block;
  margin-bottom: var(--space-4);
  line-height: 1;
}

.nf__code {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(7.5rem, 15vw + 1rem, 11.25rem); /* 120px -> 180px */
  line-height: 1;
  color: var(--color-primary-600);
  opacity: 0.1;
}

.nf__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3.75rem, 8vw + 1rem, 6rem); /* text-6xl -> text-8xl */
  color: var(--color-primary-400);
}

.nf__title {
  font-size: clamp(1.875rem, 1.2rem + 2vw, 2.25rem); /* text-3xl -> text-4xl */
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--space-2);
}

.nf__message {
  font-size: 1.125rem; /* text-lg */
  color: var(--text-secondary);
  max-width: 28rem;
  margin: 0 auto var(--space-4);
}

.nf__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* Primary "Go Back Home" button - matches the LMS lg primary button */
.nf__home {
  height: 3rem;
  padding-inline: 1.5rem;
  gap: 0.5rem;
  font-size: 1.0625rem;
  border-radius: var(--radius-md);
}

.nf__home i {
  font-size: 1.125rem;
}

/* Side-by-side actions from the small breakpoint up (matches LMS sm:flex-row) */
@media (min-width: 640px) {
  .nf__actions {
    flex-direction: row;
    gap: var(--space-3);
  }
}