/* ═══════════════════════════════════════════════════════════════
   DIGIBROOD DESIGN SYSTEM — layout.css
   Containers, grids, wrappers, and structural utilities.
   Reused on every page of the site.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── Global reset (scoped to .db) ─────────────────────────── */
[class^="db-"],
[class^="db-"]::before,
[class^="db-"]::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.db-section a            { text-decoration: none; color: inherit; }
.db-section ul,
.db-section li           { list-style: none; }

/* ── Section base ─────────────────────────────────────────── */
.db-section {
  font-family: var(--db-font);
  position: relative;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.db-section--dark {
  background: var(--db-bg-primary);
  color: var(--db-text-body);
}

/* ── Container ────────────────────────────────────────────── */
.db-container {
  max-width: var(--db-max-width);
  margin: 0 auto;
  padding: 0 var(--db-sp-6);
  position: relative;
  z-index: 1;
}

/* ── Two-column grid ──────────────────────────────────────── */
.db-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--db-grid-gap);
  align-items: center;
}

/* ── Centered content column ──────────────────────────────── */
.db-col--center {
  text-align: center;
}

/* ── Flex column utility ──────────────────────────────────── */
.db-flex-col {
  display: flex;
  flex-direction: column;
}

/* ── Section padding presets ──────────────────────────────── */
.db-section--pad-hero {
  padding: var(--db-sp-15) var(--db-sp-6) 0;
}

.db-section--pad-default {
  padding: var(--db-sp-14) var(--db-sp-6);
}

/* ── Decorative grid background ───────────────────────────── */
.db-bg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
  z-index: 0;
}

/* ── Decorative blobs ─────────────────────────────────────── */
.db-blob {
  position: absolute;
  border-radius: var(--db-radius-circle);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.db-blob--orange {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(255, 106, 0, .20) 0%, transparent 70%);
}

.db-blob--indigo {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, .18) 0%, transparent 70%);
}

.db-blob--cyan {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(6, 182, 212, .13) 0%, transparent 70%);
}

/* ── Divider ──────────────────────────────────────────────── */
.db-divider {
  border-top: 1px solid var(--db-border-subtle);
}

.db-trust__header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto var(--db-space-xl);
}

.db-trust__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--db-space-sm);
  margin-bottom: var(--db-space-xl);
}

.db-trust__logos {
  margin-bottom: var(--db-space-xl);
}

.db-trust__proof {
  margin-top: var(--db-space-lg);
}

.db-trust__cta {
  text-align: center;
  margin-top: var(--db-space-xl);
}