/* ==========================================================================
   Cubicsofts WhatsApp Gateway — design system
   All custom classes are namespaced `cs-` so nothing collides with Bootstrap.
   Rebranding is the :root block below and nothing else.
   ========================================================================== */

:root {
  /* Brand — taken from the Cubicsofts theme on cubicsofts.ae:
     primary #000, secondary #C30B0B, accent #F69524, text #565656. */
  --cs-primary: #c30b0b;
  --cs-primary-rgb: 195, 11, 11;
  --cs-secondary: #ed4239;
  --cs-accent: #f69524;
  --cs-deep: #1f2124;

  /* Neutrals */
  --cs-bg: #f8fafc;
  --cs-surface: #ffffff;
  --cs-ink: #1f2124;
  --cs-ink-soft: #565656;
  /* Darkened from #969ba3, which measured 2.79:1 on white and failed WCAG AA.
     This is 4.71:1 — it is used for genuinely small print, so it has to pass. */
  --cs-ink-faint: #6e747d;
  --cs-border: #e4e6ea;

  /* Status. Deliberately NOT derived from the brand: in a dashboard these carry
     meaning, not identity. Green must keep saying "connected/delivered" and red
     "failed" even though the brand itself is red — so the danger tone is kept
     visually distinct from --cs-primary, and every failure state is paired with
     an icon and a word rather than relying on hue alone. */
  --cs-success: #15803d;
  --cs-warning: #b45309;
  --cs-danger: #dc2626;
  --cs-info: #0369a1;

  /* Text-safe: every stop is at least 6:1 against white, because headings and
     body copy sit directly on this (CTA band, step numbers, brand mark).
     The accent orange is deliberately NOT a stop here — white on #F69524 is
     2.27:1, which is unreadable. Orange enters as a decorative overlay instead,
     via --cs-glow-accent, where no text sits on it. */
  --cs-gradient-brand: linear-gradient(135deg, var(--cs-deep) 0%, var(--cs-primary) 62%, #9a0808 100%);
  --cs-glow-accent: radial-gradient(circle, rgba(246, 149, 36, 0.42), transparent 68%);
  --cs-gradient-soft: linear-gradient(180deg, #fdf6f0 0%, #f8fafc 100%);

  /* WhatsApp's own colours. Used only where we are depicting WhatsApp itself —
     the hero phone mockup, the WhatsApp icon — never for our brand. */
  --cs-wa-green: #075e54;
  --cs-wa-bubble: #d9fdd3;
  --cs-wa-canvas: #ece5dd;

  --cs-radius-sm: 10px;
  --cs-radius: 14px;
  --cs-radius-lg: 18px;
  --cs-radius-xl: 24px;

  --cs-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --cs-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
  --cs-shadow-lg: 0 20px 40px -12px rgba(15, 23, 42, 0.16), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
  --cs-shadow-brand: 0 12px 28px -8px rgba(var(--cs-primary-rgb), 0.35);

  /* Poppins throughout — body and headings alike. Weight, not typeface,
     is what separates a heading from body copy here. */
  --cs-font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cs-font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --cs-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --cs-container: 1280px;
  --cs-nav-height: 74px;
}

/* -- Base ---------------------------------------------------------------- */

body.cs-body {
  font-family: var(--cs-font-body);
  color: var(--cs-ink);
  background: var(--cs-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* A Bootstrap `.row` with g-4/g-5 gutters applies negative margins wider than
     this container's padding, so columns hang a few pixels past the viewport.
     `clip` rather than `hidden`: `hidden` would make the body a scroll
     container and silently break `position: sticky` on the navbar. */
  overflow-x: clip;
}

.cs-body h1, .cs-body h2, .cs-body h3,
.cs-body h4, .cs-body h5, .cs-body h6,
.cs-display {
  font-family: var(--cs-font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cs-ink);
}

.cs-body a { text-decoration: none; }

/* The default link colour is wrapped in :where() so it carries ZERO specificity.
   Written plainly, `.cs-body a` (0,1,1) outranks `.cs-btn-primary` (0,1,0) and
   repaints every button's label in the link colour — which on a solid primary
   button means the text matches its own background and disappears. Anything
   with a class now wins over this without needing to fight it. */
:where(.cs-body a) { color: var(--cs-primary); }
:where(.cs-body a:hover) { color: var(--cs-deep); }

.cs-container {
  width: 100%;
  max-width: var(--cs-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.cs-h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; }
.cs-h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.2; }
.cs-h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.35; }
.cs-lead { font-size: 1.06rem; line-height: 1.7; color: var(--cs-ink-soft); }
.cs-text-soft { color: var(--cs-ink-soft); }
.cs-text-faint { color: var(--cs-ink-faint); }

.cs-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cs-section-sm { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.cs-bg-soft { background: var(--cs-gradient-soft); }
.cs-bg-ink { background: var(--cs-ink); color: #fff; }

.cs-section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }

.cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(var(--cs-primary-rgb), 0.09);
  color: var(--cs-primary);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* -- Buttons ------------------------------------------------------------- */

.cs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--cs-radius-sm);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}

.cs-btn:active { transform: translateY(1px); }
.cs-btn:focus-visible { outline: 3px solid rgba(var(--cs-primary-rgb), 0.35); outline-offset: 2px; }

.cs-btn-primary { background: var(--cs-primary); color: #fff; box-shadow: var(--cs-shadow-brand); }
.cs-btn-primary:hover { background: var(--cs-deep); color: #fff; transform: translateY(-1px); }

.cs-btn-outline { background: transparent; border-color: var(--cs-border); color: var(--cs-ink); }
.cs-btn-outline:hover { border-color: var(--cs-primary); color: var(--cs-primary); background: rgba(var(--cs-primary-rgb), 0.04); }

.cs-btn-light { background: #fff; color: var(--cs-primary); }
.cs-btn-light:hover { background: #f1f5f9; color: var(--cs-deep); }

.cs-btn-outline-light { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.cs-btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

.cs-btn-danger { background: var(--cs-danger); color: #fff; }
.cs-btn-danger:hover { background: #b91c1c; color: #fff; }

.cs-btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
.cs-btn-lg { padding: 0.9rem 1.8rem; font-size: 1.02rem; }
.cs-btn-block { width: 100%; }
.cs-btn.disabled, .cs-btn:disabled { opacity: 0.6; pointer-events: none; }

/* -- Navbar -------------------------------------------------------------- */

.cs-navbar { position: sticky; top: 0; z-index: 1030; }

.cs-navbar-top {
  background: var(--cs-deep);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
}
.cs-navbar-top .cs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.cs-navbar-top ul { display: flex; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.cs-navbar-top a { color: rgba(255, 255, 255, 0.9); }
.cs-navbar-top a:hover { color: #fff; text-decoration: underline; }

.cs-navbar-main {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--cs-border);
}
.cs-navbar-main .cs-container {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--cs-nav-height);
}

.cs-brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; }
.cs-brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--cs-gradient-brand);
  color: #fff;
  font-size: 1.25rem;
  box-shadow: var(--cs-shadow-brand);
}
.cs-brand-name {
  font-family: var(--cs-font-display);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--cs-ink);
  letter-spacing: -0.02em;
}

.cs-nav-links { display: flex; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.cs-nav-links a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink-soft);
  font-weight: 500;
  font-size: 0.94rem;
}
.cs-nav-links a:hover { background: rgba(var(--cs-primary-rgb), 0.07); color: var(--cs-primary); }
.cs-nav-links a.is-active { color: var(--cs-primary); background: rgba(var(--cs-primary-rgb), 0.09); font-weight: 600; }

.cs-nav-actions { display: flex; align-items: center; gap: 0.6rem; }

.cs-navbar-toggle {
  display: none;
  border: 1px solid var(--cs-border);
  background: #fff;
  border-radius: var(--cs-radius-sm);
  padding: 0.4rem 0.6rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cs-ink);
}

@media (max-width: 991.98px) {
  .cs-nav-links-desktop, .cs-nav-actions-desktop { display: none; }
  .cs-navbar-toggle { display: block; }
}

.cs-offcanvas .cs-nav-links { flex-direction: column; gap: 0.2rem; }
.cs-offcanvas .cs-nav-actions { margin-top: 1.25rem; flex-direction: column; align-items: stretch; }

/* -- Hero ---------------------------------------------------------------- */

.cs-hero {
  position: relative;
  overflow: hidden;
  background: var(--cs-gradient-soft);
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3.5rem, 7vw, 6rem);
}
.cs-hero::before {
  content: "";
  position: absolute;
  inset: -30% 55% 40% -10%;
  background: radial-gradient(circle at 50% 50%, rgba(var(--cs-primary-rgb), 0.14), transparent 62%);
  pointer-events: none;
}
.cs-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 991.98px) {
  .cs-hero-grid { grid-template-columns: 1fr; }
  .cs-hero-art { order: -1; }
}

.cs-trust-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; }
.cs-trust-list li {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.88rem; color: var(--cs-ink-soft); font-weight: 500;
}
.cs-trust-list i { color: var(--cs-success); }

/* -- Phone mockup -------------------------------------------------------- */

.cs-hero-art { position: relative; display: flex; justify-content: center; }

.cs-phone {
  position: relative;
  width: min(310px, 82vw);
  border-radius: 38px;
  padding: 12px;
  background: linear-gradient(160deg, #1e293b, #0f172a);
  box-shadow: var(--cs-shadow-lg);
}
.cs-phone-screen {
  border-radius: 28px;
  overflow: hidden;
  background: var(--cs-wa-canvas);
  display: flex;
  flex-direction: column;
  height: 480px;
}
.cs-phone-notch {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 20px;
  border-radius: 999px;
  background: #0f172a;
  z-index: 2;
}
.cs-phone-head {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 1.6rem 0.9rem 0.7rem;
  background: var(--cs-wa-green);
  color: #fff;
}
.cs-phone-avatar {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.05rem;
}
.cs-phone-head strong { font-size: 0.9rem; color: #fff; font-family: var(--cs-font-display); }

.cs-phone-body {
  flex: 1;
  padding: 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  background-color: var(--cs-wa-canvas);
  background-image: radial-gradient(rgba(31, 33, 36, 0.045) 1px, transparent 1px);
  background-size: 18px 18px;
}

.cs-bubble {
  max-width: 82%;
  padding: 0.5rem 0.65rem 1.1rem;
  border-radius: 12px;
  font-size: 0.8rem;
  line-height: 1.4;
  position: relative;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.1);
  animation: cs-bubble-in 0.45s ease both;
}
.cs-bubble-in { align-self: flex-start; background: #fff; border-top-left-radius: 3px; }
.cs-bubble-out { align-self: flex-end; background: var(--cs-wa-bubble); border-top-right-radius: 3px; }
.cs-bubble:nth-child(2) { animation-delay: 0.5s; }
.cs-bubble:nth-child(3) { animation-delay: 1s; }
.cs-bubble:nth-child(4) { animation-delay: 1.5s; }
.cs-bubble-time {
  position: absolute;
  right: 0.6rem; bottom: 0.35rem;
  font-size: 0.62rem;
  color: var(--cs-ink-faint);
  display: flex; align-items: center; gap: 0.2rem;
}
.cs-bubble-out .cs-bubble-time i { color: #34b7f1; }

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

.cs-float-card {
  position: absolute;
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 0.85rem;
  background: #fff;
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-shadow-lg);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cs-ink);
  animation: cs-float 5s ease-in-out infinite;
}
.cs-float-1 { top: 14%; left: -4%; }
.cs-float-2 { bottom: 24%; right: -6%; animation-delay: 1.2s; }
.cs-float-3 { bottom: 6%; left: 2%; animation-delay: 2.4s; }
@media (max-width: 575.98px) { .cs-float-card { display: none; } }

@keyframes cs-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* -- Cards --------------------------------------------------------------- */

.cs-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--cs-shadow-sm);
  height: 100%;
}
.cs-card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
.cs-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--cs-shadow-lg);
  border-color: rgba(var(--cs-primary-rgb), 0.3);
}

.cs-icon-tile {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(var(--cs-primary-rgb), 0.1);
  color: var(--cs-primary);
  font-size: 1.35rem;
  margin-bottom: 1rem;
}

.cs-feature-card h3 { margin-bottom: 0.45rem; }
.cs-feature-card p { color: var(--cs-ink-soft); font-size: 0.9rem; margin: 0; line-height: 1.6; }

.cs-industry-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center; padding: 1.25rem 0.75rem;
}
.cs-industry-card .cs-icon-tile { margin-bottom: 0; }
.cs-industry-card span { font-size: 0.85rem; font-weight: 600; color: var(--cs-ink); }

/* -- Tech tiles ---------------------------------------------------------- */

.cs-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(102px, 1fr));
  gap: 0.75rem;
}
.cs-tech-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem;
  padding: 1rem 0.5rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: #fff;
  color: var(--cs-ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.cs-tech-tile i { font-size: 1.5rem; color: var(--cs-primary); }
.cs-tech-tile:hover { transform: translateY(-3px); border-color: var(--cs-primary); color: var(--cs-primary); }

/* -- Steps --------------------------------------------------------------- */

.cs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  counter-reset: cs-step;
}
.cs-step { position: relative; padding-top: 2.25rem; }
.cs-step-num {
  position: absolute;
  top: -18px; left: 1.5rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--cs-gradient-brand);
  color: #fff;
  font-family: var(--cs-font-display);
  font-weight: 700;
  box-shadow: var(--cs-shadow-brand);
}
.cs-step h3 { margin-bottom: 0.4rem; }
.cs-step p { color: var(--cs-ink-soft); font-size: 0.9rem; margin: 0; line-height: 1.6; }

/* -- Benefits ------------------------------------------------------------ */

.cs-benefit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 1.5rem; margin: 0; padding: 0; }
.cs-benefit-item { display: flex; gap: 0.7rem; }
.cs-benefit-item > i { color: var(--cs-success); font-size: 1.05rem; margin-top: 0.15rem; }
.cs-benefit-item strong { display: block; font-size: 0.94rem; font-family: var(--cs-font-display); }
.cs-benefit-item p { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--cs-ink-soft); line-height: 1.5; }

.cs-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(var(--cs-primary-rgb), 0.08);
  color: var(--cs-primary);
  font-size: 0.8rem;
  font-weight: 600;
}

/* -- Code window --------------------------------------------------------- */

.cs-code-window {
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  background: #0f172a;
  box-shadow: var(--cs-shadow-lg);
  border: 1px solid #1e293b;
}
.cs-code-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 0.9rem;
  background: #1e293b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cs-code-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.cs-code-dot-r { background: #ff5f57; }
.cs-code-dot-y { background: #febc2e; }
.cs-code-dot-g { background: #28c840; }
.cs-code-title {
  margin-left: 0.6rem;
  font-family: var(--cs-font-mono);
  font-size: 0.76rem;
  color: #94a3b8;
}
.cs-code-tabs { margin-left: auto; display: flex; gap: 0.2rem; }
.cs-code-tab {
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
}
.cs-code-tab:hover { color: #e2e8f0; background: rgba(255, 255, 255, 0.06); }
.cs-code-tab.is-active { color: #fff; background: rgba(var(--cs-primary-rgb), 0.55); }

.cs-code-window pre {
  margin: 0;
  padding: 1.1rem;
  overflow-x: auto;
  font-family: var(--cs-font-mono);
  font-size: 0.79rem;
  line-height: 1.65;
  color: #e2e8f0;
  background: transparent;
}
.cs-code-window pre + pre { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.cs-code-window .tok-str { color: #86efac; }
.cs-code-window .tok-key { color: #7dd3fc; }
/* #64748b measured 3.75:1 on the #0f172a code surface. Comments in a sample are
   instructions, not decoration — they have to be readable. */
.cs-code-window .tok-com { color: #94a3b8; font-style: italic; }
.cs-code-window .tok-fn { color: #fcd34d; }

.cs-copy-btn {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #cbd5e1;
  border-radius: 7px;
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  cursor: pointer;
}
.cs-copy-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* -- Accordion (Bootstrap override) -------------------------------------- */

.cs-accordion .accordion-item {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius) !important;
  margin-bottom: 0.65rem;
  overflow: hidden;
  background: #fff;
}
.cs-accordion .accordion-button {
  font-family: var(--cs-font-display);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--cs-ink);
  padding: 1rem 1.15rem;
  background: #fff;
}
.cs-accordion .accordion-button:not(.collapsed) {
  color: var(--cs-primary);
  background: rgba(var(--cs-primary-rgb), 0.05);
  box-shadow: none;
}
.cs-accordion .accordion-button:focus { box-shadow: none; border-color: transparent; }
.cs-accordion .accordion-body { color: var(--cs-ink-soft); font-size: 0.92rem; line-height: 1.7; padding-top: 0; }

/* -- CTA band ------------------------------------------------------------ */

.cs-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-radius-xl);
  background: var(--cs-gradient-brand);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  box-shadow: var(--cs-shadow-lg);
}
/* The brand orange lives here — a corner glow well clear of the centred text. */
.cs-cta::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 420px; height: 420px;
  background: var(--cs-glow-accent);
  pointer-events: none;
}
.cs-cta h2, .cs-cta .cs-lead { color: #fff; position: relative; }
.cs-cta .cs-lead { opacity: 0.92; }

/* -- Footer -------------------------------------------------------------- */

.cs-footer { background: var(--cs-ink); color: #cbd5e1; margin-top: auto; }
.cs-footer-top { padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem; }
.cs-footer h6 {
  color: #fff;
  font-family: var(--cs-font-display);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}
.cs-footer p { font-size: 0.88rem; line-height: 1.7; color: #94a3b8; }
.cs-footer-links { list-style: none; margin: 0; padding: 0; }
.cs-footer-links li { margin-bottom: 0.55rem; font-size: 0.88rem; }
.cs-footer-links a, .cs-footer a { color: #cbd5e1; }
.cs-footer-links a:hover, .cs-footer a:hover { color: var(--cs-accent); }

.cs-social { display: flex; gap: 0.5rem; }
.cs-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cs-social a:hover { background: var(--cs-primary); }

.cs-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.09); padding: 1.1rem 0; font-size: 0.83rem; }
.cs-footer-bottom .cs-container { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; }
.cs-footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* -- Forms --------------------------------------------------------------- */

.cs-field { margin-bottom: 1rem; }
.cs-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--cs-ink); margin-bottom: 0.35rem; }
.cs-input, .cs-select, .cs-textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  font-size: 0.94rem;
  font-family: inherit;
  color: var(--cs-ink);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-input:focus, .cs-select:focus, .cs-textarea:focus {
  outline: none;
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), 0.14);
}
.cs-input.is-invalid, .cs-select.is-invalid { border-color: var(--cs-danger); }
.cs-field-error { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--cs-danger); }
.cs-field-hint { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--cs-ink-faint); }

/* -- Alerts -------------------------------------------------------------- */

.cs-alert {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: var(--cs-radius-sm);
  border: 1px solid;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
/* Links inside an alert take the alert's own text colour. The brand red is only
   4.22:1 on the info alert's pale blue, and a link that fights its container's
   tone reads as a foreign element anyway. */
.cs-alert a { color: inherit; text-decoration: underline; }
.cs-alert a:hover { color: inherit; opacity: 0.82; }

.cs-alert-success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.cs-alert-error { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.cs-alert-info { background: #f0f9ff; border-color: #bae6fd; color: #0c4a6e; }
.cs-alert-warning { background: #fffbeb; border-color: #fde68a; color: #78350f; }

/* -- Status pills -------------------------------------------------------- */

.cs-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.cs-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cs-pill-connected { background: #f0fdf4; color: var(--cs-success); border-color: #bbf7d0; }
.cs-pill-connecting, .cs-pill-qr { background: #fffbeb; color: var(--cs-warning); border-color: #fde68a; }
.cs-pill-disconnected { background: #f8fafc; color: #64748b; border-color: var(--cs-border); }
.cs-pill-logged_out, .cs-pill-failed { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.cs-pill-queued, .cs-pill-scheduled { background: #f8fafc; color: #475569; border-color: var(--cs-border); }
.cs-pill-sent { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cs-pill-delivered, .cs-pill-read { background: #f0fdf4; color: var(--cs-success); border-color: #bbf7d0; }

/* -- Reveal on scroll ---------------------------------------------------- */

/* Gated behind `.cs-js`, which an inline script in <head> sets. Without it —
   JavaScript disabled, a script error, a bot — the content is simply visible.
   An animation must never be the reason a page renders blank. */
.cs-js [data-cs-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s ease; }
.cs-js [data-cs-reveal="left"] { transform: translateX(-22px); }
.cs-js [data-cs-reveal="right"] { transform: translateX(22px); }
.cs-js [data-cs-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-cs-reveal], .cs-float-card, .cs-bubble { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* -- Auth screens -------------------------------------------------------- */

.cs-auth-body { background: var(--cs-bg); }

.cs-auth-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
}

.cs-auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
}

.cs-auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 5vw, 3.5rem);
  background: var(--cs-gradient-brand);
  position: relative;
  overflow: hidden;
}
.cs-auth-aside::after {
  content: "";
  position: absolute;
  inset: auto -25% -30% auto;
  width: 460px; height: 460px;
  background: var(--cs-glow-accent);
  pointer-events: none;
}
.cs-auth-aside > * { position: relative; }
.cs-auth-aside i { color: var(--cs-accent); }

/* The marketing panel is decoration; on a phone it would push the form
   below the fold, so it is removed rather than stacked. */
@media (max-width: 991.98px) {
  .cs-auth-wrap { grid-template-columns: 1fr; }
  .cs-auth-aside { display: none; }
}

.cs-auth-title { margin-bottom: 0.35rem; }
.cs-auth-sub { color: var(--cs-ink-soft); font-size: 0.94rem; margin-bottom: 1.75rem; }
.cs-auth-foot { margin-top: 1.5rem; font-size: 0.9rem; color: var(--cs-ink-soft); }

/* Six-digit OTP entry. Wide tracking makes a mistyped digit visible. */
.cs-otp-input {
  font-family: var(--cs-font-mono);
  font-size: 1.6rem;
  letter-spacing: 0.55em;
  text-align: center;
  padding-inline: 0.5rem;
  text-indent: 0.55em;
}

/* -- Dashboard ----------------------------------------------------------- */

.cs-app-body { background: var(--cs-bg); }
.cs-app { display: flex; min-height: 100vh; }

.cs-sidebar {
  width: 250px;
  flex-shrink: 0;
  background: var(--cs-deep);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.85rem;
  position: sticky;
  top: 0;
  height: 100vh;
}
.cs-sidebar-brand { margin: 0 0.5rem 1.75rem; }
.cs-sidebar-brand .cs-brand-name { color: #fff; }

.cs-sidenav { display: flex; flex-direction: column; gap: 0.15rem; }
.cs-sidenav-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }

.cs-sidenav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--cs-radius-sm);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}
.cs-sidenav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cs-sidenav-link.is-active { background: var(--cs-primary); color: #fff; }
.cs-sidenav-link i { font-size: 1.05rem; }

.cs-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.cs-app-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.cs-app-title { font-size: 1.15rem; margin: 0; flex-grow: 1; }
.cs-app-user { display: flex; align-items: center; gap: 0.75rem; }
.cs-app-username { color: var(--cs-ink-soft); font-size: 0.9rem; }

.cs-sidebar-toggle {
  display: none;
  background: none; border: none;
  font-size: 1.4rem; color: var(--cs-ink); cursor: pointer; padding: 0;
}

.cs-app-content { padding: 1.5rem; max-width: 1240px; width: 100%; }

@media (max-width: 991.98px) {
  .cs-sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
  }
  .cs-sidebar.is-open { transform: none; box-shadow: var(--cs-shadow-lg); }
  .cs-sidebar-toggle { display: block; }
}

.cs-page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.cs-back-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; margin-bottom: 1rem; }

/* Stat tiles */
.cs-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.cs-stat { display: flex; flex-direction: column; gap: 0.3rem; }
.cs-stat-label { font-size: 0.82rem; color: var(--cs-ink-soft); font-weight: 500; }
.cs-stat-value { font-family: var(--cs-font-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.cs-stat-of { font-size: 1rem; color: var(--cs-ink-faint); font-weight: 500; }
.cs-stat-bad { color: var(--cs-danger); }

/* Status dot + pill. Colour never carries the meaning alone — every dot sits
   next to a written status, because red/green is exactly what a colour-blind
   operator cannot separate. */
.cs-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; background: var(--cs-ink-faint);
}
.cs-status-dot[data-cs-status-dot="connected"] { background: var(--cs-success); box-shadow: 0 0 0 3px rgba(21,128,61,.15); }
.cs-status-dot[data-cs-status-dot="connecting"],
.cs-status-dot[data-cs-status-dot="qr"] { background: var(--cs-warning); animation: cs-pulse 1.4s ease-in-out infinite; }
.cs-status-dot[data-cs-status-dot="logged_out"] { background: var(--cs-danger); }

@keyframes cs-pulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
@media (prefers-reduced-motion: reduce) { .cs-status-dot { animation: none !important } }

.cs-pill {
  display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
  background: rgba(110,116,125,.12); color: var(--cs-ink-soft);
}
.cs-pill-connected, .cs-pill-delivered, .cs-pill-read, .cs-pill-sent { background: rgba(21,128,61,.12); color: var(--cs-success); }
.cs-pill-qr, .cs-pill-connecting, .cs-pill-queued, .cs-pill-scheduled, .cs-pill-sending { background: rgba(180,83,9,.12); color: var(--cs-warning); }
.cs-pill-failed, .cs-pill-logged_out { background: rgba(220,38,38,.12); color: var(--cs-danger); }

.cs-status-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.cs-status-label { font-weight: 600; text-transform: capitalize; }

/* QR stage — fixed height so the card does not jump as codes swap in and out. */
.cs-qr-stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 300px;
  background: var(--cs-bg);
  border: 1px dashed var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 1rem;
}
.cs-qr-img { width: 100%; max-width: 280px; height: auto; border-radius: 8px; background: #fff; }
.cs-qr-idle, .cs-qr-done { text-align: center; color: var(--cs-ink-soft); }
.cs-qr-idle i, .cs-qr-done i { font-size: 2.5rem; display: block; margin-bottom: 0.6rem; }
.cs-qr-done i { color: var(--cs-success); }

.cs-spinner {
  width: 34px; height: 34px; margin: 0 auto 0.6rem;
  border: 3px solid var(--cs-border); border-top-color: var(--cs-primary);
  border-radius: 50%; animation: cs-spin 0.8s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .cs-spinner { animation-duration: 3s } }

.cs-connect-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.25rem; }
.cs-help { margin-top: 1.25rem; font-size: 0.88rem; }
.cs-help summary { cursor: pointer; color: var(--cs-primary); font-weight: 500; }
.cs-help-steps { margin: 0.75rem 0; padding-left: 1.1rem; color: var(--cs-ink-soft); line-height: 1.9; }

.cs-key-reveal { border-left: 3px solid var(--cs-accent); margin-bottom: 1.25rem; }
.cs-copy-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.cs-code-inline {
  font-family: var(--cs-font-mono); font-size: 0.85rem;
  background: var(--cs-bg); border: 1px solid var(--cs-border);
  padding: 0.45rem 0.7rem; border-radius: 8px;
  word-break: break-all; flex-grow: 1;
}

.cs-detail-list dt { font-size: 0.8rem; color: var(--cs-ink-soft); font-weight: 500; }
.cs-detail-list dd { margin: 0 0 0.9rem; font-size: 0.92rem; }

.cs-danger-zone {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 0; border-top: 1px solid var(--cs-border);
}
.cs-danger-zone-destructive strong { color: var(--cs-danger); }

.cs-instance-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.cs-instance-card { display: block; color: inherit; }
.cs-instance-card-head { display: flex; align-items: center; gap: 0.7rem; }
.cs-instance-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: 1rem; }

.cs-row-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--cs-border); color: inherit;
}
.cs-row-link:last-child { border-bottom: none; }
.cs-row-link:hover { color: var(--cs-primary); }

.cs-inline-form { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cs-empty { text-align: center; padding: 3rem 1rem; }
.cs-empty .cs-icon-tile { margin: 0 auto 1rem; }
.cs-onboard { text-align: center; padding: 2.5rem 1.5rem; }

.cs-table-wrap { overflow-x: auto; }
.cs-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.cs-table th {
  text-align: left; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--cs-ink-faint); font-weight: 600;
  padding: 0 0.75rem 0.5rem 0; white-space: nowrap;
}
.cs-table td { padding: 0.6rem 0.75rem 0.6rem 0; border-top: 1px solid var(--cs-border); white-space: nowrap; }

.cs-code-copy {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,.6); cursor: pointer; padding: 0 .25rem;
}
.cs-code-copy:hover { color: #fff; }

/* -- Message log ---------------------------------------------------------- */

.cs-filter-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.8rem; border-radius: 999px;
  border: 1px solid var(--cs-border); background: var(--cs-surface);
  font-size: 0.85rem; font-weight: 500; color: var(--cs-ink-soft);
  text-transform: capitalize;
}
.cs-chip:hover { border-color: var(--cs-primary); color: var(--cs-primary); }
.cs-chip.is-active { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; }
.cs-chip-count { opacity: 0.7; font-size: 0.78rem; }

.cs-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }

.cs-message-body {
  background: var(--cs-wa-bubble); border-radius: var(--cs-radius);
  padding: 0.85rem 1rem; white-space: pre-wrap; word-break: break-word;
  font-size: 0.95rem; color: #111b21;
}

.cs-timeline { list-style: none; margin: 0; padding: 0; }
.cs-timeline-item { display: flex; gap: 0.75rem; padding-bottom: 1.1rem; position: relative; }
.cs-timeline-item:not(:last-child)::before {
  content: ""; position: absolute; left: 5px; top: 16px; bottom: 0;
  width: 2px; background: var(--cs-border);
}
.cs-timeline-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  margin-top: 4px; background: var(--cs-ink-faint); position: relative; z-index: 1;
}

/* -- Admin --------------------------------------------------------------- */

.cs-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.94rem; }
.cs-check input { width: 18px; height: 18px; accent-color: var(--cs-primary); cursor: pointer; }

.cs-admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
.cs-ledger-amount-positive { color: var(--cs-success); font-weight: 600; }
.cs-ledger-amount-negative { color: var(--cs-ink-soft); }

/* -- Usage meters --------------------------------------------------------- */

.cs-usage-row { margin-bottom: 1rem; }
.cs-usage-row:last-of-type { margin-bottom: 0; }
.cs-meter { height: 8px; border-radius: 999px; background: var(--cs-border); overflow: hidden; }
.cs-meter-fill { height: 100%; background: var(--cs-success); border-radius: 999px; transition: width .3s ease; }
/* Amber, not red: approaching the cap is a warning, and red here would collide
   with the "failed" meaning used everywhere else in the dashboard. */
.cs-meter-fill.is-high { background: var(--cs-warning); }

/* -- Webhooks ------------------------------------------------------------- */

.cs-hook-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 0; border-bottom: 1px solid var(--cs-border);
}
.cs-hook-row:last-child { border-bottom: none; }
/* URLs are long and arbitrary; without this one endpoint pushes the whole
   card wider than the viewport. */
.cs-hook-url {
  font-family: var(--cs-font-mono); font-size: 0.85rem;
  word-break: break-all; color: var(--cs-ink);
}
.cs-event-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.5rem; }
.cs-event-grid .cs-check span { font-family: var(--cs-font-mono); font-size: 0.82rem; }

.cs-inbound-row { padding: 0.7rem 0; border-bottom: 1px solid var(--cs-border); }
.cs-inbound-row:last-child { border-bottom: none; }
.cs-inbound-body {
  background: var(--cs-wa-canvas); border-radius: 10px;
  padding: 0.5rem 0.7rem; margin-top: 0.35rem;
  font-size: 0.88rem; color: #111b21; word-break: break-word;
}