/* =============================================
   BASE RESET & GLOBAL STYLES — KochajSię.pl
   ============================================= */

*,
*::before,
*::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}

html {
     scroll-behavior: smooth;
}

body {
     font-family: var(--sans);
     background: var(--cream);
     color: var(--ink);
     font-size: 16px;
     line-height: 1.7;
     overflow-x: hidden;
}

img {
     max-width: 100%;
     height: auto;
     display: block;
}

a {
     color: inherit;
}

/* ─── LAYOUT ─────────────────────────────────── */
.wrap {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 36px;
}

.wrap-sm {
     max-width: 760px;
     margin: 0 auto;
     padding: 0 36px;
}

.wrap-lg {
     max-width: 1360px;
     margin: 0 auto;
     padding: 0 40px;
}

/* ─── SPACING HELPERS ─────────────────────────── */
.sec {
     padding: var(--space-xl) 0;
}

.sec-sm {
     padding: 56px 0;
}

.mb8 {
     margin-bottom: 8px;
}

.mb12 {
     margin-bottom: 12px;
}

.mb16 {
     margin-bottom: 16px;
}

.mb24 {
     margin-bottom: 24px;
}

.mb32 {
     margin-bottom: 32px;
}

.mb48 {
     margin-bottom: 48px;
}

.mt48 {
     margin-top: 48px;
}

.tc {
     text-align: center;
}

/* ─── GRID UTILITY ────────────────────────────── */
.g3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 22px;
}

/* ─── MESH BACKGROUNDS ───────────────────────── */
.mesh-a {
     background:
          radial-gradient(ellipse 80% 65% at 15% 35%, rgba(244, 192, 203, .6) 0%, transparent 60%),
          radial-gradient(ellipse 60% 75% at 85% 65%, rgba(212, 86, 106, .16) 0%, transparent 60%),
          #FDF0F2;
}

.mesh-b {
     background:
          radial-gradient(ellipse 70% 80% at 10% 50%, rgba(249, 221, 228, .5) 0%, transparent 55%),
          radial-gradient(ellipse 55% 60% at 90% 20%, rgba(212, 86, 106, .10) 0%, transparent 50%),
          var(--warm);
}

.mesh-c {
     background:
          radial-gradient(ellipse 80% 70% at 30% 30%, rgba(248, 214, 220, .7) 0%, transparent 55%),
          radial-gradient(ellipse 55% 80% at 75% 70%, rgba(232, 136, 154, .3) 0%, transparent 55%),
          var(--parch);
}

.mesh-dark {
     background:
          radial-gradient(ellipse 60% 70% at 20% 40%, rgba(158, 32, 56, .8) 0%, transparent 60%),
          radial-gradient(ellipse 70% 60% at 80% 60%, rgba(107, 17, 39, .9) 0%, transparent 60%),
          #6B1127;
}