/* =====================================================================
   DashSMS design polish layer (homepage) — Oct 2026
   Loaded last on index.php. Unifies colours, section headings, cards,
   buttons, hero layout and motion on top of the older stylesheets.
   Brand: navy #17283A + orange #F15A24, neutrals, green only for WhatsApp/success.
   ===================================================================== */

:root {
  --ds-navy: #17283A;
  --ds-navy-900: #0D1B2A;
  --ds-navy-800: #12233A;
  --ds-navy-700: #1F3550;
  --ds-orange: #F15A24;
  --ds-orange-600: #D94B18;
  --ds-orange-soft: rgba(241, 90, 36, .10);
  --ds-orange-line: rgba(241, 90, 36, .28);
  --ds-ink: #13263A;
  --ds-text: #334155;
  --ds-muted: #5B6B7F;
  --ds-line: #DCE4EC;
  --ds-paper: #F5F7FA;
  --ds-white: #FFFFFF;
  --ds-success: #0E9F6E;
  --ds-radius-card: 20px;
  --ds-radius-sm: 12px;
  --ds-shadow-card: 0 1px 2px rgba(19, 38, 58, .04), 0 8px 24px rgba(19, 38, 58, .06);
  --ds-shadow-hover: 0 2px 4px rgba(19, 38, 58, .05), 0 18px 40px rgba(19, 38, 58, .12);
  --ds-shadow-dark: 0 14px 34px rgba(0, 0, 0, .22);
  --ds-ease: cubic-bezier(.2, .7, .2, 1);
  --ds-fast: 180ms;
  --ds-med: 320ms;
}

/* ---------- 1. Section rhythm & headings ---------- */
.qdash-saas #about-section,
.qdash-saas .about-section,
.qdash-saas #services,
.qdash-saas #pricing,
.qdash-saas #sectors,
.qdash-saas #integrations,
.qdash-saas #campaign-tracking,
.qdash-saas #how-it-works,
.qdash-saas #faq,
.qdash-saas #articles,
.qdash-saas #clients,
.qdash-saas #projects {
  padding-block: clamp(64px, 8vw, 104px) !important;
}

/* Alternate light backgrounds so two grey sections never touch */
.qdash-saas #sectors { background: var(--ds-white) !important; }
.qdash-saas #integrations { background: var(--ds-paper) !important; }
.qdash-saas #campaign-tracking { background: var(--ds-white) !important; border: 0 !important; }
.qdash-saas #how-it-works { background: var(--ds-paper) !important; }
.qdash-saas #faq { background: var(--ds-white) !important; }
.qdash-saas #articles { background: var(--ds-paper) !important; }
.qdash-saas #clients { background: var(--ds-white) !important; }
.qdash-saas #projects { background: var(--ds-paper) !important; }

/* One colour for every heading on light sections */
.qdash-saas :is(.about-section, #services, #media-link, #pricing, #sectors, #integrations, #campaign-tracking, #how-it-works, #faq, #articles, #clients, #projects) > div > :is(.text-center, .qd-heading, div) h2,
.qdash-saas :is(.about-section, #services, #pricing, #clients, #projects, #campaign-tracking, #how-it-works) h2.text-3xl {
  color: var(--ds-ink) !important;
}
.qdash-saas :is(.about-section, #services, #media-link, #pricing, #sectors, #integrations, #campaign-tracking, #how-it-works, #faq, #articles, #clients, #projects) :is(.text-gray-900, .text-slate-900):not(.sector-card *):not([class*="bg-slate-9"] *):not([class*="bg-gray-9"] *):not(.pricing-footer-cta *):not(.pricing-slide.pt-4 *) { color: var(--ds-ink) !important; }
.qdash-saas :is(.about-section, #services, #media-link, #pricing, #integrations, #campaign-tracking, #how-it-works, #faq, #articles, #clients, #projects) :is(.text-gray-600, .text-slate-600, .text-gray-500):not([class*="bg-slate-9"] *):not([class*="bg-gray-9"] *):not(.pricing-footer-cta *):not(.pricing-slide.pt-4 *) { color: var(--ds-muted) !important; }

/* Section heading rhythm */
.qdash-saas section h2.text-3xl,
.qdash-saas section .qd-heading h2,
.qdash-saas section .delivery-board-header h2 {
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.3 !important;
}

/* Small kicker pills above headings: one style */
.qdash-saas .qd-heading > span:first-child,
.qdash-saas #campaign-tracking .text-center > span:first-child,
.qdash-saas .mlink-kicker,
.qdash-saas .delivery-board-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.qdash-saas section:not(.qd-theme-dark):not(#why-qdash) .qd-heading > span:first-child,
.qdash-saas #campaign-tracking .text-center > span:first-child {
  background: var(--ds-orange-soft) !important;
  color: #C2410C !important;
  border: 1px solid var(--ds-orange-line) !important;
}

/* Footer headings were rendering at section-title size (beat `.qdash-saas section h2:not(.text-xl):not(.text-2xl)`) */
body.qdash-saas footer section h2:not(.text-xl):not(.text-2xl) {
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
body.qdash-saas footer section.dashsms-footer-brand h2:not(.text-xl):not(.text-2xl) { font-size: 1.35rem !important; }
body.qdash-saas footer section.footer-growth-promo h2:not(.text-xl):not(.text-2xl) { font-size: clamp(1.3rem, 2.2vw, 1.7rem) !important; }

/* ---------- 2. Brand colour mapping (replace stray Tailwind blues/purples) ---------- */
.qdash-saas section:not(#home) :is(.text-blue-600, .text-blue-700, .text-indigo-600, .text-purple-600, .text-violet-600, .text-sky-600) { color: var(--ds-orange) !important; }
.qdash-saas section:not(#home) :is(.bg-blue-50, .bg-indigo-50, .bg-purple-50, .bg-violet-50, .bg-sky-50, .bg-emerald-50, .bg-amber-50, .bg-orange-50) { background-color: var(--ds-orange-soft) !important; }
.qdash-saas section:not(#home) :is(.text-emerald-600, .text-amber-600, .text-orange-600) { color: var(--ds-orange) !important; }
.qdash-saas section:not(#home) :is(.bg-blue-600, .bg-indigo-600) { background-color: var(--ds-navy) !important; }
.qdash-saas section:not(#home) :is(.hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover) { background-color: var(--ds-navy-700) !important; }

/* Dark "why DashSMS" feature cards: one accent instead of a rainbow */
.qdash-saas #features .smart-card-badge,
.qdash-saas #features .smart-card-icon-wrap {
  color: #FF8A5B !important;
  background: rgba(241, 90, 36, .12) !important;
  border-color: rgba(241, 90, 36, .30) !important;
}
.qdash-saas #features .smart-card-metric-pill {
  color: #E2E8F0 !important;
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .14) !important;
}
.qdash-saas #features .smart-card-metric-pill svg { color: #FF8A5B !important; }

/* Services: icons in brand orange */
.qdash-saas #services .service-card svg[class*="text-"] { color: var(--ds-orange) !important; }

/* Campaign lifecycle: neutral cards, orange accents, step bar in brand */
.qdash-saas #campaign-tracking .campaign-lifecycle-grid > div > div:first-child[class*="bg-"],
.qdash-saas #campaign-tracking .campaign-lifecycle-grid [class*="rounded-xl"][class*="bg-"] {
  background: var(--ds-orange-soft) !important;
  color: var(--ds-orange) !important;
}
.qdash-saas #campaign-tracking .campaign-lifecycle-grid [class*="text-"][class*="-600"] { color: var(--ds-orange) !important; }

/* ---------- 3. Cards: one radius, border, shadow and hover ---------- */
.qdash-saas :is(
  .service-card,
  .process-step-node,
  .article-card,
  .feature-panel,
  .pricing-card-shell,
  .faq-item,
  #clients .feature-card,
  #projects .feature-card,
  #campaign-tracking .campaign-lifecycle-grid > div,
  .about-values-grid > div,
  .mlink-limit:not(.mlink-limit--accent)
) {
  border-radius: var(--ds-radius-card) !important;
  border: 1px solid var(--ds-line) !important;
  background-color: var(--ds-white);
  box-shadow: var(--ds-shadow-card) !important;
  transition: transform var(--ds-med) var(--ds-ease), box-shadow var(--ds-med) var(--ds-ease), border-color var(--ds-fast) ease !important;
}
.qdash-saas .mlink-limit--accent { border-radius: var(--ds-radius-card) !important; }

/* Dark cards */
.qdash-saas :is(.smart-feature-card, .sector-card, .benefit-card, #smart-board .campaign-panel > div > div, #contact .animate-fade-in-up) {
  border-radius: var(--ds-radius-card) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: var(--ds-shadow-dark) !important;
  transition: transform var(--ds-med) var(--ds-ease), box-shadow var(--ds-med) var(--ds-ease), border-color var(--ds-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .qdash-saas :is(
    .service-card, .process-step-node, .article-card, .feature-panel, .pricing-card-shell,
    #clients .feature-card, #projects .feature-card, #campaign-tracking .campaign-lifecycle-grid > div
  ):hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ds-shadow-hover) !important;
    border-color: var(--ds-orange-line) !important;
  }
  .qdash-saas :is(.smart-feature-card, .sector-card, .benefit-card):hover {
    transform: translateY(-4px) !important;
    border-color: rgba(241, 90, 36, .45) !important;
    box-shadow: 0 22px 46px rgba(0, 0, 0, .32) !important;
  }
}

/* Popular pricing plan keeps its emphasis */
.qdash-saas .pricing-card-shell.border-orange-400,
.qdash-saas .pricing-card-shell[class*="bg-slate-9"],
.qdash-saas .pricing-card-shell[class*="bg-gray-9"] {
  border: 2px solid var(--ds-orange) !important;
}

/* Clients & projects cards: keep logos/images tidy */
.qdash-saas #clients .feature-card { padding: 18px !important; display: grid; place-items: center; min-height: 120px; }
.qdash-saas #clients .feature-card img { max-height: 64px; width: auto; object-fit: contain; filter: grayscale(.25); opacity: .9; transition: filter var(--ds-med), opacity var(--ds-med); }
.qdash-saas #clients .feature-card:hover img { filter: none; opacity: 1; }
.qdash-saas #projects .feature-card { overflow: hidden; }
.qdash-saas #projects .feature-card img { transition: transform 600ms var(--ds-ease); }
.qdash-saas #projects .feature-card:hover img { transform: scale(1.04); }

/* Icon tiles inside cards: same size everywhere */
.qdash-saas :is(.smart-card-icon-wrap, .sector-card-icon-box) { border-radius: 14px !important; }

/* ---------- 4. Buttons & focus ---------- */
.qdash-saas a[class*="bg-orange-6"],
.qdash-saas button[class*="bg-orange-6"],
.qdash-saas .qd-button-primary,
.qdash-saas .mlink-btn--primary,
.qdash-saas .hero-booking-cta {
  background-color: var(--ds-orange) !important;
  color: #fff !important;
  transition: background-color var(--ds-fast) ease, transform var(--ds-fast) var(--ds-ease), box-shadow var(--ds-fast) ease !important;
}
.qdash-saas a[class*="bg-orange-6"]:hover,
.qdash-saas button[class*="bg-orange-6"]:hover,
.qdash-saas .qd-button-primary:hover,
.qdash-saas .mlink-btn--primary:hover,
.qdash-saas .hero-booking-cta:hover {
  background-color: var(--ds-orange-600) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 26px rgba(241, 90, 36, .28) !important;
}
.qdash-saas :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid rgba(241, 90, 36, .55) !important;
  outline-offset: 3px !important;
  border-radius: 10px;
}

/* ---------- 5. Hero ---------- */
/* Keyword H1 lives inside the small badge — keep badge size (beats saas-redesign's hero h1 rule) */
[dir] .qdash-saas .hero-slide h1.hero-kicker-h1,
[dir] .qdash-saas #home .hero-slide h1.hero-kicker-h1 {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  max-width: none !important;
  display: inline !important;
  color: inherit !important;
  text-shadow: none !important;
  animation: none !important;
  font-weight: 800 !important;
}

/* Slide titles (now h2) use the hero display size */
[dir] .qdash-saas #home .hero-slide h2 {
  font-size: clamp(2.1rem, 3.6vw, 3.3rem) !important;
  line-height: 1.22 !important;
  font-weight: 800 !important;
  color: #fff !important;
  margin-bottom: 1.1rem !important;
}
[dir] .qdash-saas #home .hero-slide h2 span { margin-top: .35rem !important; }
.qdash-saas #home .hero-slide p { font-size: clamp(1rem, 1.35vw, 1.2rem) !important; line-height: 1.85 !important; margin-bottom: 1.75rem !important; max-width: 560px; }
.qdash-saas #home .hero-slide .text-center > .flex { flex-wrap: wrap; gap: 12px !important; }
.qdash-saas #home .hero-slide .text-center > .flex > a {
  padding: 13px 22px !important;
  font-size: 1rem !important;
  border-radius: 12px !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}

/* Keep the text column clear of the demo console on laptop widths */
@media (min-width: 1024px) {
  .qdash-saas #home .hero-slide > .relative { padding-inline: max(32px, calc((100vw - 1216px) / 2)) !important; }
  .qdash-saas #home .hero-slide .text-center {
    max-width: min(580px, 47vw) !important;
    margin-inline: 0 auto !important;
    text-align: start !important;
  }
  .qdash-saas #home .hero-slide .text-center > .flex { justify-content: flex-start !important; }
  .qdash-saas .hero-console { width: min(40vw, 540px) !important; inset-inline-end: max(28px, calc((100vw - 1216px) / 2)) !important; }
}

/* Cleaner slide change: old text leaves fast, new text arrives after the fade */
.qdash-saas #home .hero-slide { transition: opacity 700ms var(--ds-ease), visibility 700ms !important; transform: none !important; }
.qdash-saas #home .hero-slide:not(.active) .relative { opacity: 0; transition: opacity 200ms ease; }
.qdash-saas #home .hero-slide.active .relative { opacity: 1; transition: opacity 420ms ease 120ms; }

/* ---------- 6. Motion: one reveal style for the whole page ---------- */
html.motion-ready .qdash-saas :is(.motion-item, .motion-card, .reveal-item, .reveal-up):not(.is-visible) {
  opacity: 0 !important;
  transform: translate3d(0, 18px, 0) !important;
}
html.motion-ready .qdash-saas :is(.motion-item, .motion-card, .reveal-item, .reveal-up).is-visible {
  opacity: 1 !important;
  transform: none;
  transition:
    opacity 600ms var(--ds-ease) calc(var(--motion-order, 0) * 70ms),
    transform 600ms var(--ds-ease) calc(var(--motion-order, 0) * 70ms),
    box-shadow var(--ds-med) var(--ds-ease),
    border-color var(--ds-fast) ease !important;
}
/* Cards inside sliders animate with the slider, not on scroll */
html.motion-ready .qdash-saas :is(.articles-track, .pricing-slider, .clients-slider, .projects-slider) :is(.motion-item, .motion-card, .reveal-item, .reveal-up) {
  opacity: 1 !important;
  transform: none !important;
}
/* Hovered cards: hover lift wins over the reveal transform */
@media (hover: hover) and (pointer: fine) {
  html.motion-ready .qdash-saas :is(.service-card, .process-step-node, .article-card, .feature-panel, .pricing-card-shell, .smart-feature-card, .sector-card, .benefit-card).is-visible:hover {
    transform: translateY(-4px) !important;
  }
}

/* Gentle ambient motion stays, but slower and calmer */
@media (prefers-reduced-motion: no-preference) {
  .qdash-saas .console-window { animation-duration: 8s !important; }
}

/* Respect reduced-motion everywhere on the homepage */
@media (prefers-reduced-motion: reduce) {
  .qdash-saas *, .qdash-saas *::before, .qdash-saas *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html.motion-ready .qdash-saas :is(.motion-item, .motion-card, .reveal-item, .reveal-up) { opacity: 1 !important; transform: none !important; }
}

/* ---------- 7. Mobile tidy-up ---------- */
@media (max-width: 767px) {
  .qdash-saas :is(.service-card, .process-step-node, .article-card, .feature-panel, .smart-feature-card, .sector-card, .benefit-card) { border-radius: 18px !important; }
  [dir] .qdash-saas #home .hero-slide h2 { font-size: clamp(1.85rem, 8.4vw, 2.3rem) !important; }
  .qdash-saas #home .hero-slide .text-center > .flex > a { width: 100%; }
}

/* ---------- 8. Pricing details ---------- */
/* Discount banner sits on a dark panel: keep its text light */
.qdash-saas #pricing .pricing-footer-cta :is(h3, .text-gray-900) { color: #fff !important; }
.qdash-saas #pricing .pricing-footer-cta :is(p, .text-gray-600) { color: #CBD5E1 !important; }
.qdash-saas #pricing .pricing-footer-cta { border-radius: var(--ds-radius-card) !important; }
/* "Send detailed request" links in brand colour */
.qdash-saas #pricing .pricing-request-link { color: var(--ds-orange) !important; font-weight: 700; text-underline-offset: 4px; }
.qdash-saas #pricing .pricing-request-link:hover { color: var(--ds-orange-600) !important; text-decoration: underline; }
.qdash-saas #pricing [class*="bg-slate-9"] .pricing-request-link,
.qdash-saas #pricing [class*="bg-gray-9"] .pricing-request-link { color: #FFB08F !important; }
.qdash-saas #pricing .pricing-comparison { border-radius: var(--ds-radius-card) !important; border-color: var(--ds-line) !important; }

/* ---------- 9. Titles on dark cards stay light ---------- */
/* styles.css forces `#features h3` / `.sector-card h3` to navy; these cards are dark */
.qdash-saas #features .smart-feature-card :is(h3, h4),
.qdash-saas #features .sms-stage-node :is(h3, h4),
.qdash-saas .sector-card :is(h3, .sector-card-title),
.qdash-saas .benefit-card :is(h3, h4) { color: #fff !important; }
.qdash-saas #features .smart-feature-card p,
.qdash-saas .sector-card :is(p, .sector-card-desc) { color: #CBD5E1 !important; }