/* ===========================================================================
   Teljoiner design system  ·  "Modern SaaS, light & luxurious"  ·  Telegram blue
   ---------------------------------------------------------------------------
   One place for the look of the redesigned site: colour, type, spacing, radii,
   shadows (the tokens), and the handful of components built on them (buttons,
   cards, badges, section headers, container). Everything is additive and
   namespaced `.ds-` / `--ds-`, so adopting it is opt-in per page and nothing
   here disturbs the Bootstrap pages that have not been migrated yet.

   Accent: Telegram blue #229ED9. Neutrals are biased a touch toward blue, not
   pure grey, so the palette reads as chosen rather than default.
   ======================================================================== */
:root {
  /* --- accent ------------------------------------------------------------ */
  --ds-accent:       #229ED9;
  --ds-accent-bright:#2EC5FF;
  --ds-accent-600:   #1B87BB;
  --ds-accent-700:   #1264A3;   /* "ink" blue, for text on wash */
  --ds-accent-300:   #8FD2F0;
  --ds-accent-wash:  #E8F4FD;
  --ds-accent-wash-2:#F2F9FE;
  --ds-grad: linear-gradient(135deg, #2EC5FF 0%, #229ED9 55%, #1B87BB 100%);
  --ds-grad-soft: linear-gradient(135deg, #EAF7FE, #F2FBF7);

  /* --- neutrals (blue-biased) ------------------------------------------- */
  --ds-ink:     #0D1B2A;   /* headings - deep blue-black */
  --ds-body:    #3B4A5C;   /* body copy */
  --ds-muted:   #64748B;   /* secondary / captions */
  --ds-faint:   #94A3B2;
  --ds-line:    #E5EAF1;   /* hairline borders */
  --ds-line-2:  #EEF2F7;
  --ds-surface: #FFFFFF;
  --ds-surface-2:#F6F9FC;  /* alternating section ground */
  --ds-page:    #FFFFFF;

  /* --- semantic ---------------------------------------------------------- */
  --ds-success: #17A673;
  --ds-success-wash: #E6FAF0;
  --ds-warn:    #E38A00;
  --ds-warn-wash: #FFF3E0;
  --ds-danger:  #E5484D;
  --ds-danger-wash: #FDECEC;

  /* --- radii ------------------------------------------------------------- */
  --ds-r-sm: 10px;
  --ds-r:    14px;
  --ds-r-lg: 20px;
  --ds-r-xl: 28px;
  --ds-r-pill: 999px;

  /* --- shadows (soft, Modern SaaS) -------------------------------------- */
  --ds-shadow-sm: 0 1px 2px rgba(13,27,42,.06), 0 1px 3px rgba(13,27,42,.05);
  --ds-shadow:    0 12px 30px -18px rgba(13,27,42,.30);
  --ds-shadow-lg: 0 34px 70px -34px rgba(13,27,42,.40);
  --ds-shadow-accent: 0 14px 30px -12px rgba(34,158,217,.55);

  /* --- type -------------------------------------------------------------- */
  --ds-font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --ds-font-body: inherit;

  /* --- layout ------------------------------------------------------------ */
  --ds-container: 1160px;
  --ds-gutter: clamp(16px, 5vw, 32px);
}

/* ---------------------------------------------------------------------------
   Primitives
   ------------------------------------------------------------------------ */
.ds-container {
  width: 100%;
  max-width: var(--ds-container);
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}

.ds-section { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.ds-section--tint { background: var(--ds-surface-2); }

/* Eyebrow / kicker */
.ds-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ds-font-display);
  font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ds-accent-700);
}
.ds-eyebrow--chip {
  padding: .4rem .8rem; border-radius: var(--ds-r-pill);
  background: var(--ds-accent-wash); border: 1px solid #d4ebf9;
}

/* Headings */
.ds-h1 {
  font-family: var(--ds-font-display);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.07;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  color: var(--ds-ink); margin: 0; text-wrap: balance;
}
.ds-h2 {
  font-family: var(--ds-font-display);
  font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
  font-size: clamp(1.55rem, 1.15rem + 1.7vw, 2.4rem);
  color: var(--ds-ink); margin: 0; text-wrap: balance;
}
.ds-h3 {
  font-family: var(--ds-font-display);
  font-weight: 700; letter-spacing: -.015em;
  font-size: 1.15rem; color: var(--ds-ink); margin: 0;
}
.ds-lead { color: var(--ds-body); font-size: clamp(1rem, .96rem + .35vw, 1.2rem); line-height: 1.6; }
.ds-muted { color: var(--ds-muted); }
.ds-gradient-text {
  background: var(--ds-grad); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

.ds-section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: 2.5rem; }
.ds-section-head .ds-eyebrow { margin-bottom: .75rem; }
.ds-section-head p { color: var(--ds-muted); margin: .6rem 0 0; font-size: 1.05rem; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--ds-font-display);
  font-weight: 700; font-size: .975rem; line-height: 1;
  padding: .85rem 1.3rem; border-radius: var(--ds-r); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
.ds-btn:focus-visible { outline: 3px solid var(--ds-accent-300); outline-offset: 2px; }
.ds-btn-lg { padding: 1.05rem 1.7rem; font-size: 1.05rem; border-radius: var(--ds-r); }
.ds-btn i { font-size: 1.05em; }

.ds-btn-primary { background: var(--ds-grad); color: #fff; box-shadow: var(--ds-shadow-accent); }
.ds-btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(34,158,217,.7); }
.ds-btn-primary:active { transform: translateY(0); }

.ds-btn-ghost { background: #fff; color: var(--ds-accent-700); border-color: var(--ds-line); box-shadow: var(--ds-shadow-sm); }
.ds-btn-ghost:hover { color: var(--ds-accent-700); border-color: var(--ds-accent-300); background: var(--ds-accent-wash-2); transform: translateY(-2px); }

.ds-btn-quiet { background: transparent; color: var(--ds-body); }
.ds-btn-quiet:hover { color: var(--ds-accent-700); background: var(--ds-accent-wash-2); }

/* ---------------------------------------------------------------------------
   Cards, badges, chips
   ------------------------------------------------------------------------ */
.ds-card {
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-sm);
}
.ds-card--pad { padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.ds-card--hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.ds-card--hover:hover { transform: translateY(-4px); border-color: #d4ebf9; box-shadow: var(--ds-shadow); }

.ds-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: var(--ds-r); flex: 0 0 auto;
  background: var(--ds-accent-wash); color: var(--ds-accent-700); font-size: 1.35rem;
}
.ds-ico--grad { background: var(--ds-grad); color: #fff; box-shadow: var(--ds-shadow-accent); }

.ds-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem; border-radius: var(--ds-r-pill);
  font-size: .76rem; font-weight: 700; letter-spacing: .01em;
  background: var(--ds-accent-wash); color: var(--ds-accent-700);
}
.ds-badge--success { background: var(--ds-success-wash); color: var(--ds-success); }

.ds-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem; border-radius: var(--ds-r-pill);
  background: #fff; border: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-sm);
  font-size: .85rem; font-weight: 600; color: var(--ds-body);
}
.ds-chip i { color: var(--ds-accent); }

/* live dot */
.ds-dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--ds-success);
  box-shadow: 0 0 0 0 rgba(23,166,115,.5); animation: ds-pulse 2.2s ease-out infinite;
}
@keyframes ds-pulse {
  0% { box-shadow: 0 0 0 0 rgba(23,166,115,.5); }
  70% { box-shadow: 0 0 0 .5rem rgba(23,166,115,0); }
  100% { box-shadow: 0 0 0 0 rgba(23,166,115,0); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-btn, .ds-card--hover { transition: none; }
  .ds-btn-primary:hover, .ds-btn-ghost:hover, .ds-card--hover:hover { transform: none; }
  .ds-dot { animation: none; }
}