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

:root {
	--mark:#0EBE7F;
	--mark-light:#5EFFB6;
	--mark-dark:#0A8A5A;
	--mark2:#6E5CFF;
	--mark2-light:#9D8DFF;
	--mark2-dark:#5142D4;
	--grey-dark:#424242;
	--grey-darker:#272727;
	--grey:#888888;
	--grey-light:#ccc;
	--grey-lighter:#f1f2f6;
	--black:#000;
	--white:#fff;
	--red:#D63024;
	--red-light:#FF5F5D;
	--red-dark:#AE170C;
	--green:#AED581;
	--green-light:#C5E1A5;
	--green-dark:#116201;
	--yellow:#ff0;
	--font-family-header: 'Manrope', 'Inter', system-ui, sans-serif;
	--font-family-header-light: 500;
	--font-family-header-regular: 700;
	--font-family-header-medium: 700;
	--font-family-header-bold: 800;
	--font-family-text: 'Inter', system-ui, sans-serif;
	--font-family-text-light: 400;
	--font-family-text-regular: 400;
	--font-family-text-medium: 500;
	--font-family-text-bold: 700;
	--font-family-icon-google: 'Material Symbols Outlined';
	scroll-behavior: smooth;
}
body.dark_mode {
	--mark:#0EBE7F;
	--mark-light:#5EFFB6;
	--mark-dark:#0A8A5A;
	--mark2:var(--mark);
	--mark2-light:var(--mark-light);
	--mark2-dark:var(--mark-dark);
	--grey-dark:#f1f2f6;
	--grey-darker:#ccc;
	--grey:#888888;
	--grey-light:#424242;
	--grey-lighter:#272727;
	--black:#dedede;
	--white:#141414;
	--red:#f00;
	--yellow:#ff0;
}
.fs-smallest {font-size:clamp(0.6rem, 1.2vw, 0.8rem);line-height:1.4;display: inline-block;}
.fs-small {font-size:clamp(0.8rem, 1.5vw, 1.0rem);line-height:1.5;display: inline-block;}
.fs-normal {font-size:clamp(1rem, 2vw, 1.4rem);line-height:1.6;display: inline-block;}
.fs-big {font-size:clamp(1.4rem, 3vw, 1.8rem);line-height:1.4;display: inline-block;}
.fs-bigger {font-size:clamp(1.8rem, 4vw, 2.2rem);line-height:1.3;display: inline-block;}
.fs-biggest {font-size:clamp(2.2rem, 5vw, 2.6rem);line-height:1.2;display: inline-block;}
.fs-08 {font-size:.8rem;line-height:1.4;display: inline-block;}
.fs-09 {font-size:.9rem;line-height:1.4;display: inline-block;}
.fs-10 {font-size:1rem;line-height:1.5;display: inline-block;}
.fs-11 {font-size:1.1rem;line-height:1.5;display: inline-block;}
.fs-12 {font-size:1.2rem;line-height:1.5;display: inline-block;}
.fs-13 {font-size:1.3rem;line-height:1.5;display: inline-block;}
.fs-14 {font-size:1.4rem;line-height:1.4;display: inline-block;}
.fs-15 {font-size:1.5rem;line-height:1.4;display: inline-block;}
.fs-16 {font-size:1.6rem;line-height:1.3;display: inline-block;}
.fs-17 {font-size:1.7rem;line-height:1.3;display: inline-block;}
.fs-18 {font-size:1.8rem;line-height:1.3;display: inline-block;}
.fs-19 {font-size:1.9rem;line-height:1.2;display: inline-block;}
.fs-20 {font-size:2rem;line-height:1.2;display: inline-block;}
.fs-21 {font-size:2.1rem;line-height:1.2;display: inline-block;}
.fs-22 {font-size:2.2rem;line-height:1.2;display: inline-block;}
.fs-23 {font-size:2.3rem;line-height:1.1;display: inline-block;}
.fs-24 {font-size:2.4rem;line-height:1.1;display: inline-block;}
.fs-25 {font-size:2.5rem;line-height:1.1;display: inline-block;}
.fs-26 {font-size:2.6rem;line-height:1.1;display: inline-block;}
.fs-27 {font-size:2.7rem;line-height:1.1;display: inline-block;}
.fs-28 {font-size:2.8rem;line-height:1.1;display: inline-block;}
.fs-29 {font-size:2.9rem;line-height:1.1;display: inline-block;}
.fs-30 {font-size:3rem;line-height:1.0;display: inline-block;}
.fs-35 {font-size:3.5rem;line-height:1.0;display: inline-block;}
.fs-40 {font-size:4rem;line-height:1.0;display: inline-block;}
.fs-45 {font-size:4.5rem;line-height:0.9;display: inline-block;}
.fs-50 {font-size:5rem;line-height:0.9;display: inline-block;}
.fs-55 {font-size:5.5rem;line-height:0.9;display: inline-block;}
.fs-60 {font-size:6rem;line-height:0.9;display: inline-block;}
.fs-70 {font-size:7rem;line-height:0.85;display: inline-block;}
.fs-80 {font-size:8rem;line-height:0.85;display: inline-block;}
.fs-90 {font-size:9rem;line-height:0.85;display: inline-block;}
.fs-100 {font-size:10rem;line-height:0.85;display: inline-block;}
/* PATCH:claude-utility-classes-2026-05-27-START */
/* Dodatkowe utility do landingów wow-components + AI SEO klocków.
   Reguła: preferuj klasę utility nad inline style w content JSON dnt_creator. */

/* Max-width tekstu (typografia czytelność, ch = szerokość znaku) */
.mw-text-50 {max-width:50ch;}
.mw-text-60 {max-width:60ch;}
.mw-text-70 {max-width:70ch;}
.mw-text-80 {max-width:80ch;}

/* Text-align (uzupełnienie .ta-center) */
.ta-left {text-align:left !important;}
.ta-right {text-align:right !important;}
.ta-justify {text-align:justify !important;}

/* Opacity */
.opacity-30 {opacity:.3;}
.opacity-50 {opacity:.5;}
.opacity-70 {opacity:.7;}
.opacity-90 {opacity:.9;}

/* Gap dla flex/grid */
.gap-025rem {gap:.25rem;}
.gap-05rem {gap:.5rem;}
.gap-075rem {gap:.75rem;}
.gap-1rem {gap:1rem;}
.gap-1.5rem {gap:1.5rem;}
.gap-2rem {gap:2rem;}

/* Flex utility (najczęstsze kombinacje w content.html wow) */
.flex {display:flex;}
.flex-center {display:flex; align-items:center; justify-content:center;}
.flex-start {display:flex; align-items:center; justify-content:flex-start;}
.flex-between {display:flex; align-items:center; justify-content:space-between;}
.flex-end {display:flex; align-items:center; justify-content:flex-end;}
.flex-col {display:flex; flex-direction:column;}
.flex-wrap {flex-wrap:wrap;}
.items-center {align-items:center;}
.items-start {align-items:flex-start;}
.items-end {align-items:flex-end;}
.items-baseline {align-items:baseline;}

/* Margin auto (centrowanie blokowe) */
.mx-auto {margin-left:auto; margin-right:auto;}
.my-auto {margin-top:auto; margin-bottom:auto;}
/* PATCH:claude-utility-classes-2026-05-27-END */