/* ===========================================================================
   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:   #0B6FAB;   /* "ink" blue, for text on white and on wash */
  --ds-accent-300:   #8FD2F0;
  --ds-accent-wash:  #E8F4FD;
  --ds-accent-wash-2:#F2F9FE;
  /* Decoration: icon tiles, progress fills. White on it is for icons only. */
  --ds-grad: linear-gradient(135deg, #27A7E7 0%, #1589C9 55%, #0B75B2 100%);
  /* Buttons. White text clears 4.5:1 here, which it does not on the bright brand
     blue. Same fill as .btn-primary, so the two can sit side by side. */
  --ds-cta: linear-gradient(180deg, #1385C5 0%, #0B75B2 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 10px 22px -12px rgba(11,117,178,.6);

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

  /* --- layout ------------------------------------------------------------ */
  --ds-container: 1200px;
  --ds-gutter: clamp(16px, 3vw, 24px);
}

/* ---------------------------------------------------------------------------
   Primitives
   ------------------------------------------------------------------------ */
/* One content width for the whole site, so every section shares a left edge.
   The hero used to sit on 1160px and the sections under it on Bootstrap's
   1320px, which made the page visibly step sideways. */
.ds-container,
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--ds-gutter);
}
.ds-container { max-width: var(--ds-container); }
@media (min-width: 1200px) {
  .container { max-width: var(--ds-container); }
}

.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: linear-gradient(120deg, #1596D6 0%, #0B6FAB 100%); -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: .75rem; 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: 1rem 1.6rem; font-size: 1.02rem; }
.ds-btn i { font-size: 1.05em; }

.ds-btn-primary { background: var(--ds-cta); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(13,27,42,.14); }
.ds-btn-primary:hover { color: #fff; background: linear-gradient(180deg, #0F7DBB 0%, #0A6CA4 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px -10px rgba(11,111,171,.75); text-decoration: none; }
.ds-btn-primary:active { background: #095E8F; }

.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); text-decoration: none; }

.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-card--hover:hover { transform: none; }
  .ds-dot { animation: none; }
}