/* =====================================================================
   Render9 — Apple-inspired monotone design layer
   Loaded LAST so it refines the base template into a calm, minimal,
   near-monochrome system: SF-style type, generous whitespace, flat
   surfaces with hairline borders, one restrained blue accent.
   ===================================================================== */

:root {
  /* Palette — graphite & light, Apple-like */
  --ink: #1d1d1f;        /* primary text / near-black */
  --ink-2: #424245;      /* strong secondary */
  --muted: #6e6e73;      /* body / captions */
  --line: #d2d2d7;       /* hairline borders */
  --line-soft: #e8e8ed;  /* softest dividers */
  --paper: #ffffff;      /* surfaces */
  --wash: #f5f5f7;       /* section background */
  --wash-2: #fbfbfd;     /* faint background */
  --accent: #008080;     /* the single accent — Render9 teal, CTAs & links */
  --accent-press: #004d4d;

  /* Re-point the base template's teal tokens to graphite so every
     inherited component desaturates in one move. */
  --primary: #1d1d1f;
  --secondary: #1d1d1f;
  --r9: #1d1d1f;
  --r9-dark: #1d1d1f;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --shadow-lift: 0 2px 6px rgba(0,0,0,.06), 0 18px 40px rgba(0,0,0,.08);
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
        "Helvetica Neue", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- Base type ------------------------------------------------------ */
body {
  font-family: var(--sf) !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
h1, h2, h3, h4, h5, h6,
.section-title h2, .r9-spotlight h2 {
  font-family: var(--sf) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  line-height: 1.07 !important;
}
p { color: var(--muted); }

/* Links: neutral by default, accent only where it reads as interactive */
a { color: var(--ink); }
a.nav-link, .navbar a, footer a { color: var(--ink-2) !important; }

/* Kill the template's restless motion for a calmer, Apple-like feel */
#hero .hero-img img { animation: none !important; }
.back-to-top { animation: none !important; }
*, *::before, *::after { }

/* ---- Header / nav — frosted, thin, monochrome ---------------------- */
#header {
  /* NOTE: no backdrop-filter here. A filtered ancestor becomes the containing
     block for position:fixed descendants, which clipped the full-screen mobile
     menu (a fixed child of #navbar) to the 60px header — making it invisible on
     open. A near-opaque white bg keeps the clean look without that side effect. */
  background: rgba(255,255,255,0.94) !important;
  border-bottom: 1px solid var(--line-soft);
  box-shadow: none !important;
  height: 60px;
}
#header .logo h1 a,
#header .logo h1 a span,
#header .logo h1 a:hover { color: var(--ink) !important; font-weight: 600 !important; letter-spacing: -0.02em; }
#navbar a, #navbar a:focus {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
}
#navbar a:hover, #navbar .active, #navbar .active:focus { color: var(--ink) !important; }
#navbar a::before { display: none !important; }
/* Login / Get-started pill — ID-level specificity so its white text beats the
   `#navbar a` graphite rule above (which otherwise wins over a class selector
   and leaves dark text on the teal fill). */
#navbar a.getstarted,
#navbar a.getstarted:focus,
#navbar a.getstarted:hover,
.navbar .getstarted, .navbar .getstarted:focus {
  background: var(--accent) !important;
  color: #fff !important;
  border-radius: 980px !important;
  padding: 8px 18px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  border: 0 !important;
}
#navbar a.getstarted:hover,
.navbar .getstarted:hover { background: var(--accent-press) !important; color: #fff !important; transform: none !important; }

/* Mobile menu toggle: the base theme colours it white for the old teal header,
   which is invisible against the new frosted-white header. Dark hamburger when
   closed (on the white header); white X when open (over the dark menu overlay). */
.mobile-nav-toggle { color: var(--ink) !important; }
.navbar-mobile .mobile-nav-toggle { color: #fff !important; }
/* Keep the open mobile menu above everything (defensive) and its panel legible. */
/* The Jan-22 "optimization" commit reordered the head so style.css loads BEFORE
   bootstrap.min.css. Bootstrap's `.navbar { position: relative }` then outranks
   style.css's `.navbar-mobile { position: fixed; inset: 0 }` at equal
   specificity, so the open menu rendered as a 0-width relative box — the icon
   toggled but no overlay ever appeared. Restore the overlay geometry here, in
   the last-loaded sheet, instead of reordering the links (months of styling
   have been built on the current order). */
.navbar-mobile {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
}
.navbar-mobile { z-index: 9999 !important; }
.navbar-mobile ul { background: #fff !important; z-index: 10000 !important; }
.navbar-mobile ul a, .navbar-mobile ul a:focus { color: var(--ink) !important; }

/* ---- Hero — calm, spacious, monochrome ----------------------------- */
#hero, .r9-teal-soft, .bg-gradient {
  background: linear-gradient(180deg, var(--wash-2), var(--paper)) !important;
}
#hero h1 {
  font-size: clamp(40px, 5.4vw, 68px) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
#hero h1 a { color: var(--ink) !important; }
#hero h2 {
  color: var(--muted) !important;
  font-size: clamp(18px, 2vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  margin-top: 18px;
}

/* Hero pills → quiet monochrome chips */
.r9-pills { gap: 8px; }
.r9-pill {
  background: var(--wash) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  border-radius: 980px !important;
}

/* ---- Buttons — Apple pills ----------------------------------------- */
.r9-btn { border-radius: 980px !important; font-weight: 500 !important; padding: 12px 26px !important; box-shadow: none !important; }
/* Icon always follows its button's text colour so it can never render as a
   different (e.g. white) colour than the label — fixes the WhatsApp glyph
   disappearing on light button backgrounds. */
.r9-btn i, .r9-btn-primary i, .r9-btn-ghost i,
.r9-btn-ghost:hover i, .r9-btn-primary:hover i { color: inherit !important; }
.r9-btn-primary { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }
.r9-btn-primary:hover { background: var(--accent-press) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.r9-btn-ghost { background: transparent !important; color: var(--accent) !important; border: 1px solid var(--line) !important; }
.r9-btn-ghost:hover { background: var(--wash) !important; color: var(--accent) !important; transform: none !important; }

/* ---- Trust strip — flat, light ------------------------------------- */
.r9-trust { background: var(--wash) !important; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.r9-trust .r9-titem { color: var(--ink-2) !important; font-weight: 500 !important; }
.r9-trust .r9-titem i { color: var(--accent) !important; }

/* ---- Section rhythm — generous whitespace -------------------------- */
#about, #features, #pricing, .about, .services, .faq { padding: 92px 0; }
.section-title { padding-bottom: 44px; }
.section-title h2 { font-size: clamp(30px, 3.6vw, 44px) !important; }
.section-title h2::after { display: none !important; }
.section-bg, .services.section-bg { background: var(--wash) !important; }

.r9-group-title { margin: 56px 0 26px; }
.r9-group-title span {
  color: var(--muted) !important;
  background: transparent !important;
  padding: 0 !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.r9-group-title .line { background: var(--line) !important; height: 1px !important; }

/* ---- Cards — flat, hairline, subtle lift --------------------------- */
.feature-card, .r9-highlight {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover, .r9-highlight:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--shadow-lift) !important;
  border-color: var(--line) !important;
}
.feature-card .fc-icon {
  background: var(--wash) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
}
.feature-card h4, .r9-highlight h4 { color: var(--ink) !important; font-weight: 600 !important; }
.feature-card p, .r9-highlight p { color: var(--muted) !important; }
.r9-highlight i { color: var(--ink) !important; }

/* Module cards were teal gradients → invert to clean dark tiles (Apple
   uses occasional near-black cards for emphasis) */
.module-card {
  background: var(--ink) !important;
  color: #f5f5f7 !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.module-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lift) !important; }
.module-card i { color: #fff !important; }
.module-card h4 { color: #fff !important; font-weight: 600 !important; }
.module-card p { color: #a1a1a6 !important; }

/* ---- Spotlight band — soft wash ------------------------------------ */
.r9-spotlight { background: var(--wash) !important; border: 1px solid var(--line-soft); border-radius: 28px !important; }
.r9-spotlight h2 { color: var(--ink) !important; }
.r9-spotlight .badge-ai { background: var(--ink) !important; color: #fff !important; border-radius: 980px !important; font-weight: 500 !important; }
.r9-spotlight .badge-ai i { color: #fff !important; }
.r9-spotlight ul li { color: var(--ink-2) !important; }
.r9-spotlight ul li i { color: var(--accent) !important; }

/* ---- Pricing — flat, monochrome; accent only on the featured plan -- */
.r9-price-card {
  background: var(--paper) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.r9-price-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lift) !important; }
.r9-price-card.featured { border: 1px solid var(--ink) !important; box-shadow: var(--shadow) !important; }
.r9-price-card.featured .r9-price-head { background: var(--ink) !important; }
.r9-price-card.featured .r9-price-head * { color: #fff !important; }
.r9-plan-name { color: var(--muted) !important; }
.r9-price-card.featured .r9-plan-name { color: #a1a1a6 !important; }
.r9-price { color: var(--ink) !important; font-weight: 700 !important; }
.r9-plan-sub { color: var(--muted) !important; }
.r9-feat li { color: var(--ink-2) !important; border-bottom-color: var(--line-soft) !important; }
.r9-feat li i.yes { color: var(--accent) !important; }
.r9-feat li i.no { color: var(--line) !important; }
.r9-ribbon { background: var(--accent) !important; color: #fff !important; box-shadow: none !important; }

/* ---- Clients — dynamic logo wall ----------------------------------- */
.r9-clients {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px 44px;
  max-width: 940px;
  margin: 0 auto;
}
.r9-client {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 6px;
}
.r9-client img {
  max-height: 46px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  /* Apple-style restraint: quiet grayscale logos that come alive on hover */
  filter: grayscale(1);
  opacity: 0.62;
  transition: filter .3s ease, opacity .3s ease, transform .3s ease;
}
.r9-client img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
.r9-client-chip {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 980px;
  white-space: nowrap;
  transition: border-color .3s ease, color .3s ease;
}
.r9-client-chip:hover { color: var(--ink); border-color: var(--ink); }

/* ---- Footer — quiet -------------------------------------------------*/
#footer { background: var(--wash) !important; border-top: 1px solid var(--line-soft); color: var(--muted); }
#footer h3, #footer h4 { color: var(--ink) !important; }

/* ---- Generic overrides to desaturate inherited teal ---------------- */
.about i, .services i { color: var(--ink) !important; }
.about .content h3 { color: var(--ink) !important; }
[class*="bg-gradient"], .r9-teal-soft { background: var(--wash-2) !important; }