/* =============================================================================
   CloudSpark — Custom CSS for Bootstrap 5.3
   Cleaned, Documented, and Ready for Templates
   -----------------------------------------------------------------------------
   GOAL
   - Provide a single, well-structured layer of theme-aware styling for a
     Bootstrap-based template (light/dark).
   - Centralize tokens, unify “surface” treatments, and keep components
     consistent without over-specifying Bootstrap defaults.

   HOW TO READ
   - Each major section starts with a rationale.
   - “FIX:” comments mark targeted corrections or overrides that solve specific
     issues without breaking Bootstrap.

   TABLE OF CONTENTS
   01. Global / Base
       01.1 Root tokens (theme-agnostic)
       01.2 Typography & smoothing
       01.3 Unified surfaces & borders
   02. Navbar / Header
       02.1 Brand (logo + text)
       02.2 Frosted sticky bar
       02.3 Links & search
       02.4 Mobile navigation & dropdown :hover (FIX)
   03. Theme Toggle (Sun/Moon)
   04. Dropdowns (Mega menu)
   05. Heroes
       05.1 Home (landing) hero
       05.2 Inner heroes (Features, Pricing, Integrations, Contact)
       05.3 Background glow layers + vignette
   06. Trust Bar (logos + KPI chips)
   07. Value Props Grid (overflow-safe cards)
   08. Layout Rhythm & Spacing (containers, sections, gutters)
   09. Dark Theme Polish (forms, outlines, focus rings)
   10. Feature Rows (media frames + bullet list)
   11. Integrations Lane (logo tiles)
   12. Testimonials
   13. Pricing Teaser (cards)
   14. FAQ (accordion)
   15. Final CTA
   16. Footer
   17. Content Link Styling (main)
   18. Newsletter Form Link Styling (footer)
   ============================================================================= */

/* == 01. GLOBAL / BASE =====================================================
   Rationale: Define cross-cutting tokens and unify the most repeated styles. */

/* 01.1 Root tokens -------------------------------------------------------- */
:root {
  /* Branding & layout tokens */
  --brand-logo-size: 36px; /* header logo size (mobile) */
  --nav-h: 64px; /* sticky header height */
  --cs-radius: 12px; /* shared roundness for inputs/buttons */
  --cs-radius-sm: 10px; /* FIX: used on mobile menu items */

  /* “Surface” pattern — DRY container look (cards, dropdowns, etc.) */
  --cs-surface-bg: var(--bs-surface-bg);
  --cs-surface-border: var(--bs-border-color);
  --cs-surface-radius: 16px; /* default box/card radius */
}
@media (min-width: 992px) {
  :root {
    --brand-logo-size: 44px;
    --nav-h: 72px;
  }
}

/* 01.2 Typography --------------------------------------------------------- */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family:
    "Plus Jakarta Sans",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 01.3 Unified surfaces & borders ----------------------------------------
   DRY: Target the most common Bootstrap containers to share the same
   background, color, and border, keeping specificity low. */
:is(.card, .modal-content, .offcanvas, .toast, .dropdown-menu) {
  background-color: var(--cs-surface-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--cs-surface-border);
}
.navbar {
  border-bottom: 1px solid var(--cs-surface-border);
}

/* == 02. NAVBAR / HEADER ===================================================
   Rationale: Sticky, frosted, and legible in both themes. */

/* 02.1 Brand -------------------------------------------------------------- */
.navbar .brand-logo {
  width: var(--brand-logo-size);
  height: var(--brand-logo-size);
  display: inline-block;
}
.brand-text {
  color: var(--bs-primary);
}

/* 02.2 Frosted sticky bar ------------------------------------------------- */
:root[data-bs-theme="light"] {
  --nav-bg: rgba(255, 255, 255, 0.8);
}
:root[data-bs-theme="dark"] {
  --nav-bg: rgba(14, 16, 16, 0.7);
}

.header-blur {
  background-color: var(--nav-bg);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--cs-surface-border);
  padding-block: 0.35rem;
}
@media (min-width: 992px) {
  .header-blur {
    padding-block: 0.5rem;
  }
}

/* 02.3 Nav links & search ------------------------------------------------- */
.navbar .nav-link {
  color: var(--bs-body-color);
  font-weight: 500;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--bs-primary);
}
.search-btn {
  color: var(--bs-body-color);
}
.search-btn:hover {
  color: var(--bs-primary);
}

/* 02.4 Mobile menu & dropdown hover (FIX) ---------------------------------
   FIX #1: Improve dropdown :hover contrast in both themes.
   FIX #2: Make collapsed mobile nav feel like a coherent “panel”.
*/
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
}

@media (max-width: 991.98px) {
  .navbar-collapse.show,
  .navbar-collapse.collapsing {
    margin-top: 1rem;
    border-radius: var(--cs-radius);
    background-color: var(--cs-surface-bg);
    border: 1px solid var(--cs-surface-border);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
    padding: 1rem;
    animation: cs-fade-in 0.2s ease-in-out;
  }

  @keyframes cs-fade-in {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .navbar-nav {
    gap: 0.25rem;
  }

  .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    padding: 0.75rem 1rem;
    border-radius: var(--cs-radius-sm);
    font-weight: 500;
  }

  .navbar-nav .dropdown-menu {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-top: 0.25rem;
  }

  .navbar-nav .dropdown-item:focus,
  .navbar-nav .dropdown-item:hover {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
  }
}

/* == 03. THEME TOGGLE (SUN / MOON) ========================================
   Rationale: Swap icons based on [data-bs-theme] state. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 38px;
  height: 32px;
  padding: 0;
}
.icon-sun,
.icon-moon {
  display: inline-block;
}
:root[data-bs-theme="light"] .icon-sun {
  display: inline-block;
}
:root[data-bs-theme="light"] .icon-moon {
  display: none;
}
:root[data-bs-theme="dark"] .icon-sun {
  display: none;
}
:root[data-bs-theme="dark"] .icon-moon {
  display: inline-block;
}

/* == 04. DROPDOWNS (MEGA MENU) ============================================
   Rationale: Larger menu with consistent radius/shadow across themes. */
.dropdown-menu-mega {
  min-width: 520px;
  border-radius: 16px;
  border: 1px solid var(--cs-surface-border);
  background-color: var(--cs-surface-bg);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}
:root[data-bs-theme="dark"] .dropdown-menu-mega {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.dropdown-menu-mega .dropdown-header {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-gray-600);
}
.dropdown-menu-mega .dropdown-item {
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
}
.dropdown-menu-mega .dropdown-item:hover {
  background-color: var(--bs-gray-100);
  color: var(--bs-body-color);
}
:root[data-bs-theme="dark"] .dropdown-menu-mega .dropdown-item:hover {
  background-color: var(--bs-gray-200);
}

/* == 05. HEROES ============================================================
   Rationale: Header-aware vertical rhythm with layered glow backgrounds. */

/* 05.1 Landing hero ------------------------------------------------------- */
.hero-landing {
  padding-top: calc(var(--nav-h) + 48px);
  padding-bottom: clamp(4.5rem, 7vw, 6rem);
  position: relative;
  isolation: isolate;
}
.hero-title {
  color: var(--bs-heading-color);
}
.hero-subtitle {
  color: var(--bs-gray-700);
}
:root[data-bs-theme="dark"] .hero-subtitle {
  color: var(--bs-gray-600);
}
.kicker {
  color: var(--bs-secondary);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
.hero-landing .btn-lg {
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
}

/* 05.2 Inner heroes ------------------------------------------------------- */
.features-hero,
.pricing-hero,
.integrations-hero,
.contact-hero {
  padding-top: calc(var(--nav-h) + 16px);
  padding-bottom: clamp(1.125rem, 3vw, 2rem);
  position: relative;
  isolation: isolate;
}
:is(.features-hero, .pricing-hero, .integrations-hero, .contact-hero)
  > .container {
  min-height: clamp(220px, 28vh, 360px);
  display: grid;
  align-content: center;
}

/* 05.3 Background layers (glows + vignette) ------------------------------- */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(
      60% 60% at 22% 12%,
      rgba(249, 115, 22, 0.22) 0%,
      rgba(249, 115, 22, 0) 60%
    ),
    radial-gradient(
      52% 52% at 82% 28%,
      rgba(20, 184, 166, 0.12) 0%,
      rgba(20, 184, 166, 0) 60%
    );
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.05) 78%
  );
}
:root[data-bs-theme="dark"] .hero-bg {
  background:
    radial-gradient(
      60% 60% at 22% 12%,
      rgba(249, 115, 22, 0.18) 0%,
      rgba(249, 115, 22, 0) 56%
    ),
    radial-gradient(
      52% 52% at 82% 28%,
      rgba(20, 184, 166, 0.1) 0%,
      rgba(20, 184, 166, 0) 56%
    );
}
:root[data-bs-theme="dark"] .hero-vignette {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.12) 74%
  );
}

/* == 06. TRUST BAR (LOGOS + KPI CHIPS) ====================================
   Rationale: Subtle grayscale logos with interactive hover; pill KPIs. */
.trustbar {
  background: transparent;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}
.trustbar > .container {
  max-width: min(1320px, 92vw);
  padding-inline: clamp(1rem, 3.5vw, 2rem);
}
.trustbar .trust-logos {
  gap: clamp(1rem, 2.8vw, 2.25rem);
  align-items: center;
}
.trustbar .trust-logos img {
  height: clamp(32px, 3.6vw, 48px);
  width: auto;
  object-fit: contain;
  filter: grayscale(85%) contrast(96%);
  opacity: 0.95;
  transition:
    transform 0.2s,
    filter 0.2s,
    opacity 0.2s;
}
.trustbar .trust-logos img:hover {
  transform: translateY(-2px);
  filter: grayscale(0%) contrast(100%);
  opacity: 1;
}
.kpi-chips {
  gap: clamp(0.6rem, 2vw, 1rem);
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
}
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--cs-surface-border);
  background-color: var(--cs-surface-bg);
  color: var(--bs-body-color);
}
.kpi-chip strong {
  font-weight: 700;
  letter-spacing: 0.01em;
}
.border-y-subtle {
  border-top: 1px solid var(--cs-surface-border);
  border-bottom: 1px solid var(--cs-surface-border);
}

/* == 07. VALUE PROPS GRID (overflow-safe) =================================
   Rationale: Cards scale responsibly; icons inherit brand accent. */
.valueprops .vp-card {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 16px;
  padding: 1rem;
  transition:
    border-color 0.2s,
    transform 0.2s;
}
.valueprops .vp-card:hover {
  transform: translateY(-2px);
}
.valueprops .vp-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  margin-bottom: 0.75rem;
}
.valueprops .row {
  --bs-gutter-x: 2.25rem;
  --bs-gutter-y: 1.75rem;
}
.valueprops,
.valueprops .container {
  overflow-x: clip;
}
@supports not (overflow: clip) {
  .valueprops,
  .valueprops .container {
    overflow-x: hidden;
  }
}
.valueprops :is(img, svg, .vp-card, .vp-icon) {
  max-width: 100%;
  height: auto;
}

/* == 08. LAYOUT RHYTHM & SPACING ==========================================
   Rationale: Gentle, consistent paddings and gutters. */
.container {
  padding-right: max(calc(var(--bs-gutter-x) * 0.5), 1rem);
  padding-left: max(calc(var(--bs-gutter-x) * 0.5), 1rem);
}
section {
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.row {
  --bs-gutter-x: 1.75rem;
  --bs-gutter-y: 1.25rem;
}
@media (min-width: 992px) {
  .row {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .row {
    --bs-gutter-x: 2.5rem;
    --bs-gutter-y: 2rem;
  }
}
:is(h1, .display-1, .display-2, .display-3) {
  margin-bottom: 0.6em;
}
:is(h2, h3, h4, h5, h6) {
  margin-bottom: 0.5em;
}
p {
  margin-bottom: 1.1em;
} /* FIX: lowercase selector */

/* == 09. DARK THEME POLISH ================================================
   Rationale: Keep borders subtle; unify focus rings; avoid heavy glows. */
:root[data-bs-theme="dark"]
  :is(.card, .dropdown-menu, .navbar, .offcanvas, .toast) {
  border-color: var(--cs-surface-border);
  background-color: var(--cs-surface-bg);
  box-shadow: none;
}
.form-control,
.form-select,
.input-group-text,
.btn-outline-primary,
.btn-outline-secondary {
  border-color: var(--cs-surface-border) !important;
  background-color: var(--cs-surface-bg);
}
.input-group :is(.input-group-text, .form-control) {
  border-radius: var(--cs-radius);
}
.input-group .form-control::placeholder {
  color: var(--bs-gray-600);
}

:is(.form-control, .form-select, .btn):focus,
.btn:focus-visible {
  border-color: color-mix(
    in srgb,
    var(--cs-surface-border),
    var(--bs-secondary) 45%
  );
  box-shadow: 0 0 0 0.14rem
    color-mix(in srgb, var(--bs-secondary), transparent 80%);
  outline: 0;
}

.kpi-chip,
.border-subtle,
.navbar {
  border-color: var(--cs-surface-border) !important;
}

/* == 10. FEATURE ROWS ======================================================
   Rationale: Media frames with bullet list using brand checkmarks. */
.feature-row + .feature-row {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.fr-media {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 16px;
  overflow: hidden;
}
.fr-media-inner {
  border-radius: 14px;
  overflow: hidden;
}
.fr-media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fr-bullets {
  padding-left: 0;
  margin: 0 0 0.5rem 0;
  list-style: none;
}
.fr-bullets li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.4rem;
}
.fr-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 8px;
  background: rgba(var(--bs-primary-rgb), 0.12);
  border: 1px solid
    color-mix(in srgb, var(--cs-surface-border), var(--bs-primary) 35%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.02);
}
.fr-bullets li::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.6rem;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--bs-primary);
  border-bottom: 2px solid var(--bs-primary);
  transform: rotate(-45deg);
}
@media (min-width: 992px) {
  .feature-row .col-lg-6:first-child {
    padding-right: 1rem;
  }
  .feature-row .col-lg-6:last-child {
    padding-left: 1rem;
  }
}

/* == 11. INTEGRATIONS (homepage lane) =====================================
   Rationale: Larger, consistent logos; removed conflicting max-height. */
.integrations .integration-logo {
  min-height: 72px;
  display: grid;
  place-items: center;
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 14px;
  padding: 0.75rem 1rem;
  transition: transform 0.15s ease;
}
.integrations .integration-logo:hover {
  transform: translateY(-2px);
}
.integrations .integration-logo img {
  width: auto;
  max-width: 100%;
  object-fit: contain;
  height: clamp(40px, 6vw, 72px);
  filter: grayscale(100%);
  opacity: 0.9;
  transition:
    filter 0.2s,
    opacity 0.2s;
}
.integrations .integration-logo:hover img {
  filter: none;
  opacity: 1;
}
.logos-grid {
  row-gap: 1rem;
}

/* == 12. TESTIMONIALS ======================================================
   Rationale: Reuse the DRY surface pattern for consistency. */
.testimonial-card {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 16px;
  padding: 1.25rem;
}
.testimonial-card blockquote {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--bs-body-color);
}
.testimonial-card .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bs-gray-300);
}

/* == 13. PRICING TEASER (cards) ===========================================
   Rationale: Minimal pricing card; value emphasized. */
.plan-card {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 16px;
  padding: 1.25rem;
}
.plan-card .price .value {
  font-size: 1.75rem;
  font-weight: 700;
  margin-right: 0.25rem;
}
.plan-card .plan-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--bs-primary);
  margin-top: 0.45rem;
}

/* == 14. FAQ (accordion) ===================================================
   Rationale: Subtle surfaces; avoid extra drop shadows. */
.faq .accordion-item {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 12px;
  overflow: hidden;
}
.faq .accordion-item + .accordion-item {
  margin-top: 0.75rem;
}
.faq .accordion-button {
  background: transparent;
  color: var(--bs-body-color);
}
.faq .accordion-button:not(.collapsed) {
  color: var(--bs-heading-color);
  box-shadow: none;
}
.faq .accordion-button:focus {
  box-shadow: none;
}

/* == 15. FINAL CTA =========================================================
   Rationale: Elevated but quiet; respects theme surfaces. */
.final-cta .final-cta-box {
  background-color: var(--cs-surface-bg);
  border: 1px solid var(--cs-surface-border);
  border-radius: 18px;
  padding: clamp(1rem, 3vw, 1.5rem);
}

/* == 16. FOOTER ============================================================
   Rationale: Quiet, readable; hover accents on links & social buttons. */
.footer {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
.footer .footer-bottom {
  border-color: var(--cs-surface-border);
}
.footer .footer-brand {
  text-decoration: none;
}
.footer .footer-brand .brand-text {
  color: var(--bs-primary);
  font-weight: 700;
}
.footer .footer-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bs-gray-600);
  margin-bottom: 0.75rem;
}
.footer .footer-links a {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--bs-body-color);
  text-decoration: none;
}
.footer .footer-links a:hover {
  color: var(--bs-primary);
}

.footer .social-btn {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--cs-surface-border);
  border-radius: 999px;
  color: var(--bs-body-color);
  background: transparent;
  transition:
    border-color 0.15s,
    background-color 0.15s,
    color 0.15s,
    transform 0.15s;
}
.footer .social-btn:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  transform: translateY(-1px);
}

.footer .newsletter .input-group :is(.form-control, .input-group-text) {
  border-radius: var(--cs-radius);
}
.footer .newsletter .form-control {
  background-color: var(--cs-surface-bg);
  border-color: var(--cs-surface-border);
}
.footer .newsletter .form-control::placeholder {
  color: var(--bs-gray-600);
}

.footer .footer-legal a {
  color: var(--bs-gray-600);
  text-decoration: none;
}
.footer .footer-legal a:hover {
  color: var(--bs-primary);
}

@media (max-width: 991.98px) {
  .footer .footer-bottom {
    padding-top: 1rem;
  }
}

/* == 17. CONTENT LINK STYLING (MAIN) ======================================
   Rationale: Ensure standard content links adopt brand colors consistently. */
main a {
  color: var(--bs-primary); /* default: brand primary */
  text-decoration: underline; /* keep underline for content links */
  transition: color 0.15s ease-in-out;
}
main a:hover {
  color: var(--bs-secondary);
} /* hover: brand secondary */

/* == 18. NEWSLETTER FORM LINK STYLING (FOOTER) =============================
   Rationale: Target only “Terms” and “Privacy” inside the form helper text. */
.footer .newsletter .form-text a {
  color: var(--bs-primary);
  text-decoration: underline;
  transition: color 0.15s ease-in-out;
}
.footer .newsletter .form-text a:hover {
  color: var(--bs-secondary);
}