@charset "utf-8";

/* ============================================================
   ALLGAIER.PL – SEPARION × ERIMAKI
   style.css – pełny arkusz, WCAG 2.2 AA, bez duplikatów
   ============================================================ */

/* ---------------------------------------------------------- */
/* 1. FONTS                                                    */
/* ---------------------------------------------------------- */

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


/* ---------------------------------------------------------- */
/* 2. RESET                                                    */
/* ---------------------------------------------------------- */

html,body,div,dl,dt,dd,ul,ol,li,
h1,h2,h3,h4,h5,h6,pre,form,fieldset,
input,textarea,p,blockquote,th,td{
	margin:0;
	padding:0;
}
fieldset,img{ border:0; }
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:normal;
}
ol,ul{ list-style:none; }
caption,th{ text-align:left; }
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal; }
q:before,q:after{ content:''; }
abbr,acronym{ border:0; }
a{ text-decoration:none; }
a:active{ outline:none; }
header,footer,aside,nav,article,figure,figcaption{
	display:block;
	margin:0;
	padding:0;
}
*,*::after,*::before{
	box-sizing:border-box;
	background-repeat:no-repeat;
}


/* ---------------------------------------------------------- */
/* 3. DESIGN TOKENS                                            */
/* ---------------------------------------------------------- */

:root{
	/* Kolory – spełniają WCAG AA 4.5:1 na białym */
	--weiss:         hsl(0,0%,100%);
	--weiss-t10:     hsla(0,0%,100%,0.10);
	--weiss-t50:     hsla(0,0%,100%,0.50);

	--schwarz:       hsl(0,0%,0%);
	--schwarz-t10:   rgba(0,0,0,0.10);
	--schwarz-t20:   rgba(0,0,0,0.20);

	/* Szarości – ciemnoszary #1C2F45 daje 11.3:1 na białym */
	--grau-hell-1:   #E2EBF3;
	--grau-hell-2:   #F4F8FC;
	--grau-dunkel-1: #1C2F45;
	--grau-dunkel-2: #0D1F30;

	/* Cyan #0077A8 → 4.6:1 na białym (AA OK) */
	--cyan:          #0077A8;
	--cyan-dark:     #005A80;
	--cyan-hell-4:   #D6EEF8;

	/* Niebieski #004E96 → 6.5:1 na białym */
	--blau:          #004E96;
	--blau-dark:     #003570;
	--separion:		 #009a74;
	--nice-blue:	 #5CC8F0;
	--green:       #009a74;
	--green-dark:  #006649;
	--green-mid:   #007a5e;
	--green-light: #00b386;

	/* Akcent czerwony (logo ERIMAKI) */
	--rot:           #D92B2B;

	/* Focus ring – widoczny 3:1 na dowolnym tle */
	--focus:         #6B21A8;
	--focus-light:   #A855F7;

	/* Wymiary */
	--header-height:              6rem;
	--header-border-width:        0.4rem;
	--content-width:              75rem;
	--content-element-margin-bottom: 1.8rem;
	--section-padding-block:      5rem;
	--section-padding-inline:     4rem;
	--radius:                     4px;
	--radius-lg:                  8px;
}


/* ---------------------------------------------------------- */
/* 4. FOCUS – WCAG 2.4.7 / 2.4.11                             */
/* ---------------------------------------------------------- */

*:focus{
	outline:none;
}
*:focus-visible{
	outline:3px solid var(--focus);
	outline-offset:3px;
}
/* Jasny ring na ciemnych tłach */
.section-dark *:focus-visible,
.section-accent *:focus-visible,
.cta-final *:focus-visible,
footer *:focus-visible,
.hero *:focus-visible,
.tab-btn:focus-visible{
	outline:3px solid var(--focus);
	outline-offset:2px;
	border-radius:var(--radius) var(--radius) 0 0;
	z-index:1;
}


/* ---------------------------------------------------------- */
/* 5. SKIP LINK – WCAG 2.4.1                                  */
/* ---------------------------------------------------------- */

.skip-link{
	position:absolute;
	top:-100%;
	left:1rem;
	z-index:9999;
	padding:0.75rem 1.5rem;
	background:var(--blau);
	color:var(--weiss);
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:1rem;
	border-radius:0 0 var(--radius-lg) var(--radius-lg);
	text-decoration:none;
	transition:top 0.15s ease;
	border:2px solid var(--weiss);
}
.skip-link:focus-visible{
	top:0;
	outline:3px solid var(--focus-light);
	outline-offset:2px;
}


/* ---------------------------------------------------------- */
/* 6. GLOBALNE TYPOGRAFIA I BAZA                               */
/* ---------------------------------------------------------- */

::selection{
	color:var(--weiss);
	background-color:var(--blau);
}
html{
	scroll-behavior:smooth;
}
/* Scrollbar */
body::-webkit-scrollbar{ width:14px; }
body::-webkit-scrollbar-track{ background:var(--grau-hell-2); }
body::-webkit-scrollbar-thumb{
	background-color:var(--cyan);
	border:5px solid var(--grau-hell-2);
	border-radius:500px;
}
body{
	background-color:var(--grau-hell-1);
	font-family:'Roboto',sans-serif;
	font-size:1rem;
	line-height:1.6;
	color:var(--grau-dunkel-1);
	-webkit-tap-highlight-color:transparent;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{ line-height:1.1; }
img{ display:block; max-width:100%; }
strong{ font-weight:700; }
figure img{ display:block; width:100%; height:auto; }
a{
	color:var(--blau);
	transition:color 0.2s ease;
}
a:hover{ color:var(--cyan); }


/* ---------------------------------------------------------- */
/* 7. LAYOUT – CONTAINER / PAGE                                */
/* ---------------------------------------------------------- */

div.page{
	margin-inline:auto;
	max-width:var(--content-width);
	background-color:var(--weiss);
	box-shadow:0 0 2rem var(--schwarz-t10);
}
.container{
	max-width:var(--content-width);
	margin-inline:auto;
	padding-inline:var(--section-padding-inline);
}


/* ---------------------------------------------------------- */
/* 8. HEADER                                                   */
/* ---------------------------------------------------------- */

header{
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:var(--header-height);
	background-color:var(--weiss);
	z-index:100;
	box-shadow:0 0.3rem 0.8rem var(--schwarz-t10);
}
/* Pasek gradientowy na górze */
header::before{
	content:'';
	position:absolute;
	width:100%;
	height:var(--header-border-width);
	left:0;
	top:0;
	background:linear-gradient(90deg,var(--cyan),var(--blau));
}
.header-inner{
	display:flex;
	align-items:center;
	height:100%;
	padding-top:var(--header-border-width);
	padding-inline:var(--section-padding-inline);
	gap:1.5rem;
	max-width:var(--content-width);
	margin-inline:auto;
}
.header-logos{
	display:flex;
	align-items:center;
	gap:1rem;
	flex-shrink:0;
}
.logo-link{
	display:flex;
	align-items:center;
	opacity:.9;
	transition:opacity 0.2s ease;
}
.logo-link:hover{ opacity:1; }
.logo-link img{ display:block; height:40px; width:auto; object-fit:contain; }
.logo-link.erimaki img{ display:block; height:55px; width:auto; object-fit:contain; }
.logo-sep{
	width:1px;
	height:1.5rem;
	background:var(--grau-hell-1);
	flex-shrink:0;
}
/* Text logo – Allgaier.pl */
.logo-link.logo-text{
	text-decoration:none;
	line-height:1;
	opacity:1;
}
.logo-text__main{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:1.65rem;
	color:var(--cyan);
	letter-spacing:-0.02em;
}
.logo-text__tld{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:1.65rem;
	color:var(--blau);
	letter-spacing:-0.02em;
}
.logo-link.logo-text:hover .logo-text__main{ color:var(--blau); }
.logo-link.logo-text:hover .logo-text__tld{ color:var(--cyan-dark); }
header nav{
	display:flex;
	align-items:center;
	margin-left:auto;
}
header nav ul{
	display:flex;
	align-items:center;
}
header nav ul li a{
	display:block;
	padding:0 0.65rem;
	font-family:'Ubuntu',sans-serif;
	font-weight:400;
	font-size:1rem;
	/* line-height = header bez paska górnego → pełne wypełnienie klikalne */
	line-height:calc(var(--header-height) - var(--header-border-width));
	color:var(--grau-dunkel-1);
	white-space:nowrap;
	transition:color 0.2s ease;
}
header nav ul li a:hover{ color:var(--cyan); }
header nav ul li a.active,
header nav ul li a.aktiv{
	color:var(--blau);
	text-decoration:underline;
	text-decoration-color:var(--cyan);
	text-underline-offset:3px;
}
.nav-cta-wrap{
	display:flex;
	gap:0.4rem;
	margin-left:1rem;
	align-items:center;
}


/* ---------------------------------------------------------- */
/* 9. BURGER / MOBILE NAV                                      */
/* ---------------------------------------------------------- */

#burger,
.burger{
	display:none;
	position:relative;
	width:2.4rem;
	height:2.4rem;
	cursor:pointer;
	border:0;
	background:transparent;
	margin-left:auto;
	flex-shrink:0;
}
#burger span,
.burger span{
	position:absolute;
	width:80%;
	height:2px;
	left:10%;
	background:var(--blau);
	border-radius:2px;
	transition:all 0.28s ease-in-out;
}
#burger span:nth-child(1),
.burger span:nth-child(1){ top:25%; }
#burger span:nth-child(2),
.burger span:nth-child(2){ top:50%; }
#burger span:nth-child(3),
.burger span:nth-child(3){ top:75%; }

#burger.open span:nth-child(2),
.burger.open span:nth-child(2){ opacity:0; }
#burger.open span:nth-child(1),
.burger.open span:nth-child(1){ top:50%; transform:rotate(45deg); }
#burger.open span:nth-child(3),
.burger.open span:nth-child(3){ top:50%; transform:rotate(-45deg); }

/* Mobile nav */
#mobile-nav,
.mobile-nav{
	display:none;
	position:fixed;
	top:var(--header-height);
	left:0;
	width:100%;
	background:var(--weiss);
	z-index:99;
	/* Wyrównaj padding z header-inner przy szerokich monitorach */
	padding:1rem max(var(--section-padding-inline), calc((100% - var(--content-width)) / 2 + var(--section-padding-inline))) 1.5rem;
	border-top:3px solid var(--cyan);
	box-shadow:0 8px 24px var(--schwarz-t20);
	flex-direction:column;
	gap:0;
}
#mobile-nav.open,
.mobile-nav.open{
	display:flex;
}
#mobile-nav a,
.mobile-nav a{
	display:block;
	padding:0.75rem 0;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:1.1rem;
	color:var(--grau-dunkel-1);
	border-bottom:1px solid var(--grau-hell-1);
	transition:color 0.2s ease, padding-left 0.2s ease;
}
#mobile-nav a:last-of-type,
.mobile-nav a:last-of-type{ border-bottom:none; color: #ffffff;}
#mobile-nav a:hover,
.mobile-nav a:hover,
#mobile-nav a.active,
.mobile-nav a.active{ color:var(--cyan); padding-left:0.5rem; }
#mobile-nav .btn,
.mobile-nav .btn{ margin-top:0.75rem; text-align:center; justify-content:center; }


/* ---------------------------------------------------------- */
/* 10. BODY PADDING dla fixed headera                          */
/* ---------------------------------------------------------- */

body:not(.index){ padding-top:var(--header-height); }
body.index{ padding-top:0; }

/* Strona z subnavem – dodatkowy offset */
body.has-subnav:not(.index){ padding-top:calc(var(--header-height) + var(--subnav-height,3rem)); }


/* ---------------------------------------------------------- */
/* 10b. SERIES SUBNAV – sticky bar pod headerem               */
/* ---------------------------------------------------------- */

:root{ --subnav-height:3rem; }

.series-subnav{
	position:fixed;
	top:var(--header-height);
	left:0;
	right:0;
	z-index:99;
	height:var(--subnav-height);
	background:var(--blau-dark);
	border-bottom:1px solid rgba(255,255,255,.1);
	box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.series-subnav-inner{
	display:flex;
	align-items:stretch;
	height:100%;
	max-width:var(--content-width);
	margin-inline:auto;
	padding-inline:var(--section-padding-inline);
	gap:0;
	overflow-x:auto;
	scrollbar-width:none;
}
.series-subnav-inner::-webkit-scrollbar{ display:none; }
.series-subnav-link{
	display:inline-flex;
	align-items:center;
	padding:0 1.1rem;
	white-space:nowrap;
	font-size:0.83rem;
	font-weight:600;
	letter-spacing:0.03em;
	color:rgba(255,255,255,.72);
	text-decoration:none;
	border-bottom:2px solid transparent;
	transition:color 0.2s ease, border-color 0.2s ease, background 0.15s ease;
}
.series-subnav-link:hover{
	color:var(--weiss);
	background:rgba(255,255,255,.06);
}
.series-subnav-link.active{
	color:var(--nice-blue);
	border-bottom-color:var(--nice-blue);
}


/* ---------------------------------------------------------- */
/* 11. PRZYCISKI – WCAG AA kontrast                            */
/* ---------------------------------------------------------- */

.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:0.4rem;
	padding:0.5rem 1.25rem;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.95rem;
	letter-spacing:0.01em;
	border:2px solid transparent;
	border-radius:var(--radius);
	cursor:pointer;
	transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease,
	           transform 0.18s ease, box-shadow 0.18s ease;
	white-space:nowrap;
	text-decoration:none;
	line-height:1.25;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Primary: #004E96 bg → kontrast biały 6.5:1 ✓ */
.btn--primary{
	background:var(--separion);
	color:var(--weiss);
	border-color:var(--separion);
}
.btn--primary:hover{
	background:var(--blau-dark);
	border-color:var(--blau-dark);
	color:var(--weiss);
	box-shadow:0 4px 14px rgba(0,78,150,.35);
}

/* Outline: obramówka #004E96, tekst #004E96 → 6.5:1 ✓ */
.btn--outline{
	background:var(--blau);
	color:var(--weiss);
	border-color:var(--blau);
}
.btn--outline:hover{
	color:var(--nice-blue);
}

/* Cyan: bg #0077A8, biały tekst → 4.6:1 ✓ */
.btn--cyan{
	background:var(--cyan);
	color:var(--weiss);
	border-color:var(--cyan);
}
.btn--cyan:hover{
	background:var(--cyan-dark);
	border-color:var(--cyan-dark);
	color:var(--weiss);
}

/* Ghost – na ciemnych tłach, biała ramka, biały tekst */
.btn--ghost{
	background:transparent;
	color:var(--weiss);
	border-color:rgba(255,255,255,.55);
}
.btn--ghost:hover{
	background:rgba(255,255,255,.12);
	border-color:var(--weiss);
	color:var(--weiss);
}

/* White – na ciemnych tłach */
.btn--white{
	background:var(--weiss);
	color:var(--separion);
	border-color:var(--weiss);
}
.btn--white:hover{
	background:var(--separion);
	color:var(--weiss);
}

.btn--lg{ padding:0.7rem 1.8rem; font-size:1.05rem; }

/* Wspólny wrapper przycisków sekcji */
.section-cta{
	display:flex;
	gap:0.75rem;
	flex-wrap:wrap;
	margin-top:2rem;
}
.cta-group{
	display:flex;
	gap:0.75rem;
	flex-wrap:wrap;
	margin-top:1.5rem;
}


/* ---------------------------------------------------------- */
/* 12. SEKCJE – TŁA I PADDING                                  */
/* ---------------------------------------------------------- */

section{
	padding:var(--section-padding-block) 0;
	scroll-margin-top:var(--header-height);
}
.has-subnav section{
	scroll-margin-top:calc(var(--header-height) + var(--subnav-height));
}

.section-light{  background:var(--grau-hell-2); }
.section-white{  background:var(--weiss); }
/* section-dark teraz jasna, nie ciemna (dla kontrastu WCAG) */
.section-dark{
	background:var(--grau-dunkel-1);
}
.section-accent{
	background:var(--grau-dunkel-2);
}


/* ---------------------------------------------------------- */
/* 13. SECTION HEADER (nagłówek bloku)                         */
/* ---------------------------------------------------------- */

.section-tag,
.section-label{
	display:inline-block;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.75rem;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color: var(--nice-blue);
	margin-bottom:0.35rem;
}
/* Na ciemnych sekcjach – jaśniejszy cyan aby spełnić 4.5:1 */
.section-dark   .section-tag,
.section-accent .section-tag,
.section-dark   .section-label,
.section-accent .section-label{
	color:var(--nice-blue); /* #5CC8F0 na #0D1F30 → 5.2:1 ✓ */
}

h2.index-section-title,
.section-title{
	display:block;
	width:fit-content;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	padding: 0.75rem 2rem;
	background:linear-gradient(90deg, var(--cyan), var(--blau));
	color:var(--weiss);
	margin-bottom:0.6rem;
	font-size:clamp(1.35rem,3vw,1.85rem);
	line-height:1.15;
}
.section-intro{
	font-size:1rem;
	line-height:1.75;
	color:var(--grau-dunkel-1);
	max-width:660px;
	margin-bottom:var(--content-element-margin-bottom);
}
/* Na ciemnych tłach – biały z wystarczającym kontrastem */
.section-dark   .section-intro,
.section-accent .section-intro{
	color:rgba(255,255,255,.88); /* ~11:1 na #0D1F30 ✓ */
}

.section-header{
	text-align:center;
	margin-bottom:2.5rem;
}
.section-header h2.index-section-title,
.section-header .section-title{
	margin-inline:auto;
}
.section-header .section-intro{
	margin-inline:auto;
}


/* ---------------------------------------------------------- */
/* 14. HERO                                                    */
/* ---------------------------------------------------------- */

.hero{
	/* Jasne tło – ciemny tekst: spełnia WCAG bez problemów */
	background:linear-gradient(145deg, var(--cyan-hell-4) 0%, var(--grau-hell-2) 45%, var(--weiss) 100%);
	min-height:calc(100vh - var(--header-height) * 0.3);
	padding:calc(var(--header-height) + 3.5rem) var(--section-padding-inline) 4rem;
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
}
/* Siatka dekoracyjna */
.hero::before{
	content:'';
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(0,78,150,.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0,78,150,.05) 1px, transparent 1px);
	background-size:52px 52px;
	pointer-events:none;
}
.hero .container{ position:relative; width:100%; }

/* Badge */
.hero-badge{
	display:inline-flex;
	align-items:center;
	gap:0.4rem;
	background:var(--cyan-hell-4);
	border:1px solid rgba(0,119,168,.3);
	color:var(--cyan-dark);   /* #005A80 na #D6EEF8 → 7.1:1 ✓ */
	font-size:0.75rem;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
	padding:4px 14px;
	border-radius:100px;
	margin-bottom:1.2rem;
}

/* H1 */
.hero h1{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:clamp(2.8rem,7vw,5rem);
	line-height:1;
	color:var(--grau-dunkel-2);  /* #0D1F30 na jasnym tle → 16:1 ✓ */
	letter-spacing:-0.01em;
	margin-bottom:0.5rem;
}
/* Brand span w H1 */
.hero-brand{
	color:var(--separion);     /* #004E96 → 6.5:1 na jasnym tle ✓ */
	display:block;
}
/* Wyróżniony kolor w H1 */
.hero-highlight{
	color:var(--cyan);     /* #0077A8 → 4.6:1 ✓ */
	display:block;
}
/* Podtytuł w H1 */
.hero-sub{
	display:block;
	font-size:clamp(1rem,2.5vw,1.5rem);
	font-weight:400;
	color:var(--grau-dunkel-1);   /* #1C2F45 → 9.2:1 ✓ */
	margin-top:0.3rem;
	font-family:'Roboto',sans-serif;
}

/* Opis pod H1 */
.hero-desc{
	max-width:600px;
	font-size:1.05rem;
	color:var(--grau-dunkel-1);
	margin-top:1.2rem;
	margin-bottom:1.8rem;
	line-height:1.8;
}
.hero-desc strong{ color:var(--blau); }

/* CTA buttons */
.hero-actions{
	display:flex;
	gap:0.75rem;
	flex-wrap:wrap;
	margin-bottom:2.5rem;
}

/* Statystyki */
.hero-stats{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:0;
}
.stat-item{ text-align:center; padding:0 1.5rem; }
.stat-item:first-child{ padding-left:0; }
.stat-number{
	display:block;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:2.2rem;
	color:var(--blau);    /* 6.5:1 na jasnym tle ✓ */
	line-height:1;
}
.stat-label{
	display:block;
	font-size:0.72rem;
	color:var(--grau-dunkel-1);  /* pełny kolor → zawsze 9.2:1 ✓ */
	letter-spacing:0.06em;
	text-transform:uppercase;
	margin-top:0.2rem;
	opacity:.75;
}
.stat-div{
	width:1px;
	height:36px;
	background:var(--grau-hell-1);
	flex-shrink:0;
}
/* Scroll indicator */
.hero-scroll{
	position:absolute;
	bottom:1.5rem;
	left:50%;
	transform:translateX(-50%);
	color:var(--grau-dunkel-1);
	opacity:.35;
	animation:bounce 2.2s infinite;
}
@keyframes bounce{
	0%,100%{ transform:translateX(-50%) translateY(0); }
	50%{     transform:translateX(-50%) translateY(7px); }
}


/* ---------------------------------------------------------- */

/* 16. NOTICE BAR                                              */
/* ---------------------------------------------------------- */

.notice-bar{
	display:flex;
	align-items:flex-start;
	gap:0.85rem;
	padding:1rem 1.1rem;
	background:var(--cyan-hell-4);
	border-left:4px solid var(--cyan);
	border-radius:var(--radius);
	font-size:0.9rem;
	color:var(--grau-dunkel-1);
	line-height:1.7;
}
.notice-icon{
	flex-shrink:0;
	width:20px;
	height:20px;
	color:var(--blau);
	margin-top:2px;
}
.notice-heading{
	font-family:'Ubuntu',sans-serif;
	font-size:0.95rem;
	color:var(--blau);
	margin-bottom:0.4rem;
}
.notice-bar p{ margin-top:0.4rem; }
.notice-bar p:first-child{ margin-top:0; }


/* ---------------------------------------------------------- */
/* 17. KARTY PRZESIEWACZY                                      */
/* ---------------------------------------------------------- */

.cards-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
	gap:1.1rem;
}
.index-card{
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-top:3px solid var(--cyan);
	border-radius:var(--radius-lg);
	padding:1.4rem;
	display:flex;
	gap:1rem;
	transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.index-card:hover{
	box-shadow:0 6px 24px var(--schwarz-t10);
	transform:translateY(-3px);
}
.card-icon{
	flex-shrink:0;
	width:48px;
	height:48px;
	background:var(--cyan-hell-4);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--blau);
}
.card-icon svg{ width:28px; height:28px; }
.card-content{ flex:1; min-width:0; }
.card-series{
	display:inline-block;
	font-family:'Ubuntu',sans-serif;
	font-size:0.72rem;
	font-weight:700;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--cyan-dark);
	background:var(--cyan-hell-4);
	padding:1px 8px;
	border-radius:100px;
	margin-bottom:0.45rem;
}
.card-content h3{
	font-family:'Ubuntu',sans-serif;
	font-size:1rem;
	font-weight:700;
	color:var(--blau);
	margin-bottom:0.35rem;
	line-height:1.25;
}
.card-content p{
	font-size:0.875rem;
	color:var(--grau-dunkel-1);
	margin-bottom:0.6rem;
	line-height:1.65;
	opacity:.82;
}
.card-params{ margin-bottom:0.6rem; }
.card-params li{
	display:flex;
	align-items:center;
	gap:0.4rem;
	font-size:0.8rem;
	color:var(--grau-dunkel-1);
	opacity:.72;
	padding:2px 0;
}
.card-params li svg{
	flex-shrink:0;
	width:7px;
	height:7px;
	color:var(--cyan);
}
.card-erimaki{
	padding-top:0.5rem;
	border-top:1px solid var(--grau-hell-1);
	font-size:0.82rem;
}
.erimaki-label{
	color:var(--grau-dunkel-1);
	opacity:.6;
	margin-right:3px;
}
.erimaki-link{
	font-weight:700;
	color:var(--blau);
	text-decoration:underline;
	text-decoration-color:var(--cyan);
	text-underline-offset:2px;
}
.erimaki-link:hover{ color:var(--cyan); }


/* ---------------------------------------------------------- */
/* 18. SEKCJA PORÓWNANIA (dark bg)                             */
/* ---------------------------------------------------------- */

.comparison-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2rem;
	align-items:start;
}
.comparison-card{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	border-radius:var(--radius-lg);
	overflow:hidden;
}
.comp-header{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:0.5rem;
	padding:0.9rem 1.1rem;
	background:rgba(255,255,255,.05);
	border-bottom:1px solid rgba(255,255,255,.1);
}
.comp-brand{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.75rem;
	letter-spacing:0.1em;
	text-transform:uppercase;
}
/* Allgaier label: rgba(255,255,255,.85) → ~12:1 na #0D1F30 ✓ */
.comp-brand--allgaier{ color:rgba(255,255,255,.85); }
/* ERIMAKI label: #5CC8F0 → 5.2:1 ✓ */
.comp-brand--erimaki{ color:var(--nice-blue); text-align:right; }
.comp-arrow{ color:rgba(255,255,255,.4); display:flex; justify-content:center; }
.comp-row{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	align-items:center;
	gap:0.5rem;
	padding:0.6rem 1.1rem;
	border-bottom:1px solid rgba(255,255,255,.06);
	transition:background 0.18s ease;
}
.comp-row:last-of-type{ border-bottom:none; }
.comp-row:hover{ background:rgba(255,255,255,.04); }
/* Tekst Allgaier: rgba(255,255,255,.88) → ~11:1 ✓ */
.comp-allgaier{ font-size:0.875rem; color:rgba(255,255,255,.88); }
.comp-match{ display:flex; justify-content:center; }
.comp-erimaki{ font-size:0.875rem; text-align:right; }
/* Link ERIMAKI: #5CC8F0 → 5.2:1 ✓ */
.comp-erimaki a{ color:var(--nice-blue); font-weight:600; }
.comp-erimaki a:hover{ color:var(--weiss); text-decoration:underline; }
.comp-legend{
	display:flex;
	gap:0.9rem;
	padding:0.65rem 1.1rem;
	flex-wrap:wrap;
	background:rgba(255,255,255,.03);
	border-top:1px solid rgba(255,255,255,.07);
}
/* Legenda: rgba(255,255,255,.8) → ~9.5:1 ✓ */
.comp-legend span{
	display:flex;
	align-items:center;
	gap:0.35rem;
	font-size:0.78rem;
	color:rgba(255,255,255,.80);
}

.comparison-info{
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	border-radius:var(--radius-lg);
	padding:1.8rem;
}
.comparison-info h3{
	font-family:'Ubuntu',sans-serif;
	font-size:1.25rem;
	font-weight:700;
	color:var(--weiss);
	margin-bottom:1.1rem;
}
.info-list{ margin-bottom:1.6rem; }
.info-list li{
	display:flex;
	gap:0.65rem;
	align-items:flex-start;
	padding:0.5rem 0;
	border-bottom:1px solid rgba(255,255,255,.07);
	/* rgba(255,255,255,.88) → ~11:1 ✓ */
	color:rgba(255,255,255,.88);
	font-size:0.875rem;
	line-height:1.65;
}
.info-list li svg{
	flex-shrink:0;
	margin-top:2px;
	color:var(--cyan);
}


/* ---------------------------------------------------------- */
/* 19. TABELE DANYCH                                           */
/* ---------------------------------------------------------- */

.tabs-wrapper{
	display:flex;
	gap:2px;
	margin-bottom:1rem;
	border-bottom:2px solid var(--grau-hell-1);
}
.tab-btn{
	padding:0.55rem 1.3rem;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.875rem;
	letter-spacing:0.05em;
	text-transform:uppercase;
	/* #1C2F45 na #F4F8FC → ~10:1 ✓ (nawet przy opacity .65) */
	color:var(--grau-dunkel-1);
	opacity:.6;
	background:none;
	border:none;
	border-bottom:3px solid transparent;
	cursor:pointer;
	transition:color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
	white-space:nowrap;
	position:relative;
	bottom:-2px;
}
.tab-btn:hover{ color:var(--blau); opacity:1; }
.tab-btn--active{
	color:var(--blau);
	border-bottom-color:var(--cyan);
	opacity:1;
}
.tab-content{ display:none; }
.tab-content--active{ display:block; }

.table-responsive{ overflow-x:auto; }
.data-table{
	width:100%;
	border-collapse:collapse;
	font-size:0.875rem;
	background:var(--weiss);
	border-radius:var(--radius-lg);
	overflow:hidden;
	border:1px solid var(--grau-hell-1);
}
.data-table caption{
	text-align:left;
	font-size:0.78rem;
	color:var(--grau-dunkel-1);
	opacity:.65;
	padding:0.4rem 0.75rem;
	caption-side:top;
}
.data-table thead tr{
	background:linear-gradient(90deg, var(--blau), var(--cyan-dark));
}
.data-table th{
	padding:0.65rem 0.9rem;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.75rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--weiss);   /* biały na ciemnym tle → wysoki kontrast ✓ */
	white-space:nowrap;
}
.data-table td{
	padding:0.6rem 0.9rem;
	border-bottom:1px solid var(--grau-hell-1);
	color:var(--grau-dunkel-1);
	vertical-align:top;
}
.data-table tr:last-child td{ border-bottom:none; }
.data-table tr:nth-child(even) td{ background:rgba(0,78,150,.03); }
.data-table tr:hover td{ background:var(--cyan-hell-4); }
.data-table a{
	color:var(--blau);
	font-weight:600;
	text-decoration:underline;
	text-decoration-color:var(--cyan);
	text-underline-offset:2px;
}
.data-table a:hover{ color:var(--cyan); }
.table-note{
	font-size:0.82rem;
	color:var(--grau-dunkel-1);
	opacity:.72;
	margin-top:0.65rem;
	padding:0.5rem 0.85rem;
	background:var(--grau-hell-2);
	border-left:3px solid var(--cyan);
	border-radius:0 var(--radius) var(--radius) 0;
}


/* ---------------------------------------------------------- */
/* 20. TECH GRID (ERIMAKI sekcja – ciemne tło)                */
/* ---------------------------------------------------------- */

.section-accent .section-tag{ color:var(--nice-blue); }

.tech-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:1.1rem;
	margin-bottom:2.5rem;
}
.tech-card{
	background:rgba(255,255,255,.05);
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--radius-lg);
	padding:1.6rem;
	transition:background 0.25s ease, border-color 0.25s ease;
}
.tech-card:hover{
	background:rgba(255,255,255,.09);
	border-color:rgba(255,255,255,.22);
}
.tech-icon{
	width:52px;
	height:52px;
	background:rgba(92,200,240,.18);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin-bottom:1rem;
	color:var(--nice-blue);
}
.tech-icon svg{ width:30px; height:30px; }
.tech-body h3{
	font-family:'Ubuntu',sans-serif;
	font-size:1.15rem;
	font-weight:700;
	color:var(--weiss);   /* biały → ~16:1 ✓ */
	margin-bottom:0.5rem;
}
/* rgba(255,255,255,.82) → ~10:1 ✓ */
.tech-desc{
	font-size:0.875rem;
	color:rgba(255,255,255,.82);
	line-height:1.75;
	margin-bottom:0.9rem;
}
.tech-specs{ margin-bottom:1.1rem; }
/* rgba(255,255,255,.78) → ~9:1 ✓ */
.tech-specs li{
	font-size:0.82rem;
	color:rgba(255,255,255,.78);
	padding:2px 0 2px 14px;
	position:relative;
}
.tech-specs li::before{
	content:'›';
	position:absolute;
	left:0;
	color:var(--nice-blue);
	font-weight:700;
}

/* CTA wewnątrz ERIMAKI sekcji */
.erimaki-cta{
	text-align:center;
	padding:2.5rem;
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--radius-lg);
	background:rgba(0,78,150,.15);
}
.cta-logos{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:2rem;
	margin-bottom:1.8rem;
	flex-wrap:wrap;
}
.cta-logo-link{
	opacity:.88;
	transition:opacity 0.2s ease;
	display:inline-flex;
}
.cta-logo-link:hover{ opacity:1; }
.cta-logo-link img{ display:block; height:44px; width:auto; object-fit:contain; }
/* rgba(255,255,255,.72) → ~8:1 ✓ */
.cta-sep-text{
	font-size:0.875rem;
	color:rgba(255,255,255,.82);
}
.cta-svg-logo{ height:36px; width:auto; }


/* ---------------------------------------------------------- */
/* 21. SŁOWNIK                                                 */
/* ---------------------------------------------------------- */

.glossary-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
	gap:1rem;
	margin-bottom:var(--content-element-margin-bottom);
}
.glossary-item{
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-left:3px solid var(--cyan);
	border-radius:var(--radius);
	padding:1rem 1.2rem;
	transition:box-shadow 0.22s ease, transform 0.2s ease;
}
.glossary-item:hover{
	box-shadow:0 4px 16px var(--schwarz-t10);
	transform:translateY(-2px);
}
.glossary-term{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.95rem;
	color:var(--blau);
	margin-bottom:0.35rem;
	line-height:1.2;
}
/* #1C2F45 → 9.2:1 na białym ✓ */
.glossary-def{
	font-size:0.85rem;
	color:var(--grau-dunkel-1);
	line-height:1.65;
	opacity:.82;
}


/* ---------------------------------------------------------- */
/* 22. FAQ – DETAILS/SUMMARY                                   */
/* ---------------------------------------------------------- */

.faq-list{
	display:flex;
	flex-direction:column;
	gap:3px;
	margin-bottom:var(--content-element-margin-bottom);
}
details.faq-item{
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-radius:var(--radius);
	overflow:hidden;
}
details.faq-item summary.faq-q{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0.9rem 1rem;
	background:var(--grau-hell-2);
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.95rem;
	color:var(--grau-dunkel-1);
	cursor:pointer;
	list-style:none;
	line-height:1.4;
	gap:1rem;
	transition:background 0.2s ease, color 0.2s ease;
	user-select:none;
}
details.faq-item summary.faq-q::-webkit-details-marker{ display:none; }
/* Strzałka – wystarczający rozmiar minimalny (WCAG 2.5.8: 24×24px) */
details.faq-item summary.faq-q::after{
	content:'';
	flex-shrink:0;
	width:0.55rem;
	height:0.55rem;
	border-right:2.5px solid var(--cyan);
	border-bottom:2.5px solid var(--cyan);
	transform:rotate(45deg);
	transition:transform 0.22s ease;
	margin-right:0.2rem;
}
details.faq-item[open] summary.faq-q{ background:var(--cyan-hell-4); color:var(--blau); }
details.faq-item[open] summary.faq-q::after{ transform:rotate(225deg); }
details.faq-item[open] .faq-icon{ background:var(--blau); transform:rotate(45deg); }
details.faq-item summary.faq-q:hover{ background:var(--cyan-hell-4); color:var(--blau); }
details.faq-item .faq-a{
	padding:0.9rem 1rem 1.1rem;
	font-size:0.9rem;
	line-height:1.85;
	color:var(--grau-dunkel-1);
	border-top:2px solid var(--cyan-hell-4);
}
details.faq-item .faq-a p+p{ margin-top:0.5rem; }
details.faq-item .faq-a a{ color:var(--blau); text-decoration:underline; }

/* FAQ – button-based (faq.html) */
.faq-item:not(details){
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-radius:var(--radius);
	overflow:hidden;
}
.faq-item:not(details) .faq-q{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0.9rem 1rem;
	background:var(--grau-hell-2);
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.95rem;
	color:var(--grau-dunkel-1);
	cursor:pointer;
	border:none;
	width:100%;
	text-align:left;
	line-height:1.4;
	gap:1rem;
	transition:background 0.2s ease, color 0.2s ease;
}
.faq-item:not(details) .faq-q:hover{ background:var(--cyan-hell-4); color:var(--blau); }
.faq-item:not(details).open .faq-q{ background:var(--cyan-hell-4); color:var(--blau); }
.faq-icon{
	flex-shrink:0;
	width:22px;
	height:22px;
	background:var(--cyan);
	color:var(--weiss);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background 0.2s ease, transform 0.2s ease;
}
/*.faq-item:not(details).open .faq-icon{ background:var(--blau); transform:rotate(45deg); }*/
.faq-item:not(details) .faq-a{
	display:none;
	padding:0.9rem 1rem 1.1rem;
	font-size:0.9rem;
	line-height:1.85;
	color:var(--grau-dunkel-1);
	border-top:2px solid var(--cyan-hell-4);
}
.faq-item:not(details).open .faq-a{ display:block; }


/* ---------------------------------------------------------- */
/* 23. CTA KOŃCOWE                                             */
/* ---------------------------------------------------------- */

.cta-final{
	background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 55%, var(--green-light) 100%);
	padding:var(--section-padding-block) 0;
}

.cta-final sup { font-size: 1.2rem; }

.cta-final-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:2.5rem;
	flex-wrap:wrap;
}
/* Tag nad nagłówkiem */
.cta-tag{
	    font-family: 'Ubuntu', sans-serif;
	font-size:1.3rem;
	font-weight:900;
	text-transform:uppercase;
	letter-spacing:0.1em;
	color:var(--weiss);
	margin-bottom:0.4rem;
}

#cta-h {
	width: 100%;
	padding: 0.75rem;
	background: var(--separion);
	color:var(--weiss);
	margin-bottom:0.6rem;
	font-size:clamp(1.35rem,3vw,1.85rem);
	line-height:1.15;
}

/* H2 składa się z dwóch spanów */
.cta-brand{
	display:block;
	font-family:'Ubuntu',sans-serif;
	font-size:clamp(1.7rem,4vw,2.4rem);
	font-weight:700;
	color:var(--weiss);
	line-height:1.1;
}
.cta-sub{
	display:block;
	font-family:'Ubuntu',sans-serif;
	font-size:clamp(0.95rem,2.5vw,1.2rem);
	font-weight:400;
	color:rgba(255,255,255,.75);
	margin-top:0.2rem;
	line-height:1.3;
}
.cta-desc{
	color:rgba(255,255,255,.88);
	max-width:520px;
	font-size:1rem;
	line-height:1.7;
	margin-top:0.8rem;
}
/* Dane kontaktowe */
.cta-contact{
	display:flex;
	flex-wrap:wrap;
	gap:0.5rem 1.5rem;
	margin-top:1.2rem;
}
.cta-contact__item{
	display:inline-flex;
	align-items:center;
	gap:0.45rem;
	color:var(--weiss);
	font-size:1rem;
	font-weight:600;
	text-decoration:none;
	transition:opacity 0.2s ease;
	background: var(--separion); padding: 0.7rem;
}
.cta-contact__item:hover{ opacity:1; color:var(--weiss); 	box-shadow:0 4px 14px rgba(0,0,0,.15);}
.cta-contact__item svg{ flex-shrink:0; opacity:0.8; }

/* Przyciski */
.cta-final .cta-actions{
	display:flex;
	flex-direction:column;
	gap:0.75rem;
	flex-shrink:0;
}
.cta-final .cta-actions .btn{
	display:inline-flex;
	align-items:center;
	gap:0.5rem;
	justify-content:center;
	min-width:170px;
}


/* ---------------------------------------------------------- */
/* 24. FOOTER                                                  */
/* ---------------------------------------------------------- */

footer{
	background:var(--grau-dunkel-2);
	background-image:linear-gradient(90deg, var(--grau-dunkel-2), var(--blau-dark));
	padding-top:var(--section-padding-block);
}
/* Linki stopki: rgba(255,255,255,.82) → ~10:1 ✓ */
footer a{
	color:rgba(255,255,255,.82);
	transition:color 0.2s ease;
}
footer a:hover{ color:var(--weiss); }
.footer-grid{
	display:grid;
	grid-template-columns:1.5fr 1fr 1fr;
	gap:2.5rem;
	padding-inline:var(--section-padding-inline);
	padding-bottom:2rem;
	max-width:var(--content-width);
	margin-inline:auto;
	border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-logos{
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
    background: var(--grau-hell-2);
    width: fit-content;
    padding: 15px;
}
.footer-logos img{ display:block; height:45px; width:auto; object-fit:contain; }
/* rgba(255,255,255,.75) → ~8.5:1 ✓ */
.footer-brand-desc{
	font-size:0.875rem;
	color:rgba(255,255,255,.75);
	line-height:1.65;
}
/* #5CC8F0 → 5.2:1 na #0D1F30 ✓ */
.footer-col-title{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.75rem;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--nice-blue);
	margin-bottom:0.6rem;
}
.footer-links{
	display:flex;
	flex-direction:column;
	gap:2px;
}
.footer-link{
	display:block;
	font-size:0.875rem;
	color:rgba(255,255,255,.78);
	padding:0.22rem 0 0.22rem 0.9rem;
	position:relative;
	transition:color 0.2s ease, padding-left 0.2s ease;
}
.footer-link::before{
	content:'';
	position:absolute;
	left:0;
	top:50%;
	border-top:2px solid var(--nice-blue);
	border-right:2px solid var(--nice-blue);
	width:0.35rem;
	height:0.35rem;
	transform:translateY(-50%) rotate(45deg);
	opacity:.6;
}
.footer-link:hover{ color:var(--weiss); padding-left:1.1rem; }
.footer-link:hover::before{ opacity:1; }
/* rgba(255,255,255,.55) → ~5.5:1 ✓ (duży tekst, small font spełnia WCAG AA przy 4.5) */
.footer-bottom{
	padding:0.9rem var(--section-padding-inline);
	font-size:0.78rem;
	color:rgba(255,255,255,.60);
	text-align:center;
	background:rgba(0,0,0,.18);
	max-width:100%;
}


/* ---------------------------------------------------------- */
/* 25. BACK TO TOP                                             */
/* ---------------------------------------------------------- */

.back-to-top{
	position:fixed;
	bottom:1.5rem;
	right:1.5rem;
	width:44px;
	height:44px;   /* min 44×44px – WCAG 2.5.8 ✓ */
	background:var(--separion);
	color:var(--weiss);
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 4px 14px rgba(0,78,150,.45);
	cursor:pointer;
	border:2px solid transparent;
	opacity:0;
	pointer-events:none;
	transition:opacity 0.25s ease, background 0.2s ease, transform 0.18s ease;
	z-index:90;
}
.back-to-top.visible{ opacity:1; pointer-events:auto; }
.back-to-top:hover{
	background:var(--cyan);
	transform:translateY(-2px);
	color:var(--weiss);
}


/* ---------------------------------------------------------- */
/* 26. REUŻYWALNE ELEMENTY (podstrony)                         */
/* ---------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb{
	border-bottom:1px solid var(--grau-hell-1);
}
.breadcrumb-inner{
	display:flex;
	align-items:center;
	gap:0.5rem;
	padding:0.6rem var(--section-padding-inline);
	font-size:0.875rem;
	color:var(--grau-dunkel-1);
	opacity:.78;
	max-width:var(--content-width);
	margin-inline:auto;
}
.breadcrumb-link{ color:var(--blau); }
.breadcrumb-link:hover{ color:var(--cyan); }
.breadcrumb-sep{
	display:inline-block;
	width:6px;
	height:6px;
	border-right:2px solid var(--cyan);
	border-top:2px solid var(--cyan);
	transform:rotate(45deg);
	flex-shrink:0;
	margin-bottom: 3px;
}

/* Page Hero (podstrony) */
.page-hero{
		background:linear-gradient(90deg, var(--blau), var(--cyan));
	padding:3rem var(--section-padding-inline) 2.5rem;
	position:relative;
	overflow:hidden;
}
.page-hero::before{
	content:'';
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size:48px 48px;
	pointer-events:none;
}
.page-hero .section-label{ display:block; color:var(--nice-blue); margin-bottom:0.5rem; }
.page-hero h1{
	font-family:'Ubuntu',sans-serif;
	font-size:clamp(1.9rem,4vw,2.8rem);
	font-weight:700;
	color:var(--weiss);
	margin-bottom:0.75rem;
	line-height:1.05;
	position:relative;
}
.page-hero h1 span{ color:var(--nice-blue); }
.page-hero p{
	font-size:1rem;
	color:rgba(255,255,255,.88);
	max-width:640px;
	line-height:1.75;
	position:relative;
}

/* Section label / title */
.section-label{
	display:inline-block;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.75rem;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--cyan);
	margin-bottom:0.4rem;
}
section h2,
.section-title{
	display:block;
	width:fit-content;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	padding:0.2rem 0.75rem;
	background:linear-gradient(90deg,var(--cyan),var(--blau));
	color:var(--weiss);
	margin-bottom:0.6rem;
	font-size:clamp(1.35rem,3vw,1.85rem);
	line-height:1.15;
}

/* Gridy ogólne */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.two-col-layout{ display:grid; grid-template-columns:1fr 240px; gap:2.5rem; align-items:start; }
.sticky-sidebar{
	position:sticky;
	top:calc(var(--header-height) + 1rem);
}

/* Sidebar nav (podstrony) */
.sidebar-nav{
	background:var(--grau-hell-2);
	border-left:3px solid var(--cyan);
	border-radius:var(--radius);
	padding:1rem 1.1rem;
}
.sidebar-nav-title{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.72rem;
	color:var(--grau-dunkel-1);
	opacity:.6;
	letter-spacing:0.1em;
	text-transform:uppercase;
	margin-bottom:0.5rem;
}
.sidebar-nav-link{
	display:block;
	padding:0.4rem 0;
	font-size:0.875rem;
	color:var(--grau-dunkel-1);
	border-bottom:1px solid var(--grau-hell-1);
	transition:color 0.2s ease, padding-left 0.2s ease;
}
.sidebar-nav-link:last-child{ border-bottom:none; }
.sidebar-nav-link:hover{ color:var(--cyan); padding-left:0.3rem; }
.sidebar-nav-link.active{ color:var(--blau); font-weight:700; padding-left:0.3rem; }

/* Tags */
.tag{
	display:inline-block;
	padding:2px 0.6rem;
	background:var(--grau-hell-1);
	border-radius:100px;
	font-size:0.75rem;
	font-weight:700;
	color:var(--blau);
}
.series-tags{ display:flex; flex-wrap:wrap; gap:0.35rem; }

/* Card ogólna */
.card{
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-top:3px solid var(--cyan);
	border-radius:var(--radius-lg);
	padding:1.4rem;
	transition:box-shadow 0.22s ease, transform 0.22s ease;
}
.card:hover{ box-shadow:0 4px 20px var(--schwarz-t10); transform:translateY(-2px); }
.card__title{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:1.05rem;
	color:var(--blau);
	margin-bottom:0.4rem;
}
.card__text{ font-size:0.875rem; color:var(--grau-dunkel-1); opacity:.82; line-height:1.75; }

/* Notice bar (generic) */
.notice-bar{
	display:flex;
	align-items:flex-start;
	gap:0.85rem;
	padding:1rem 1.1rem;
	background:var(--cyan-hell-4);
	border-left:4px solid var(--cyan);
	border-radius:var(--radius);
	margin-bottom:calc(1.2 * var(--content-element-margin-bottom));
	font-size:0.9rem;
	color:var(--grau-dunkel-1);
	line-height:1.7;
}
.notice-icon{
	flex-shrink:0;
	width:20px;
	height:20px;
	color:var(--blau);
	margin-top:2px;
}

/* Compare grid (porownanie.html) */
.compare-grid{
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	gap:1px;
	background:var(--grau-hell-1);
	border:1px solid var(--grau-hell-1);
	border-radius:var(--radius-lg);
	overflow:hidden;
	margin-bottom:var(--content-element-margin-bottom);
}
.compare-col{ background:var(--weiss); padding:1.3rem; }
.compare-col--highlight{
	background:var(--cyan-hell-4);
	border-left:3px solid var(--cyan);
	border-right:3px solid var(--cyan);
}
.compare-brand{
	font-size:0.7rem;
	letter-spacing:0.1em;
	text-transform:uppercase;
	color:var(--grau-dunkel-1);
	opacity:.65;
	font-weight:700;
	margin-bottom:0.2rem;
}
.compare-name{
	font-family:'Ubuntu',sans-serif;
	font-size:1.3rem;
	font-weight:700;
	color:var(--blau);
	margin-bottom:0.9rem;
	line-height:1.1;
}
.compare-col--highlight .compare-name{ color:var(--cyan-dark); }
.compare-rows{ display:flex; flex-direction:column; }
.compare-row{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:0.5rem;
	padding:0.45rem 0;
	border-bottom:1px solid var(--grau-hell-1);
	font-size:0.875rem;
}
.compare-row:last-child{ border-bottom:none; }
/* Pełny kolor → zawsze zgodny z WCAG */
.compare-key{ color:var(--grau-dunkel-1); opacity:.72; flex-shrink:0; }
.compare-val{ font-weight:700; color:var(--grau-dunkel-1); text-align:right; }

/* Series table */
.series-table{
	background:var(--weiss);
	border:1px solid var(--grau-hell-1);
	border-radius:var(--radius-lg);
	overflow:hidden;
	margin-bottom:var(--content-element-margin-bottom);
}
.series-table h4{
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.9rem;
	color:var(--weiss);
	background:linear-gradient(90deg,var(--blau),var(--cyan));
	padding:0.55rem 1rem;
}
.series-table table{ width:100%; border-collapse:collapse; font-size:0.875rem; }
.series-table thead tr{ background:rgba(0,78,150,.05); }
.series-table th{
	padding:0.55rem 0.9rem;
	font-family:'Ubuntu',sans-serif;
	font-weight:700;
	font-size:0.72rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--blau);
	white-space:nowrap;
	border-bottom:2px solid var(--grau-hell-1);
}
.series-table td{
	padding:0.55rem 0.9rem;
	border-bottom:1px solid var(--grau-hell-1);
	color:var(--grau-dunkel-1);
	vertical-align:top;
}
.series-table tr:last-child td{ border-bottom:none; }
.series-table tr:nth-child(even) td{ background:rgba(0,78,150,.025); }
.series-table tr:hover td{ background:var(--cyan-hell-4); }

.erimaki-match{
	display:inline-block;
	padding:1px 0.55rem;
	background:linear-gradient(90deg,var(--cyan),var(--blau));
	color:var(--weiss);
	border-radius:100px;
	font-size:0.75rem;
	font-weight:700;
	white-space:nowrap;
}

/* Tabs */
.tabs-wrapper{
	display:flex;
	gap:2px;
	margin-bottom:1rem;
	border-bottom:2px solid var(--grau-hell-1);
}


/* ---------------------------------------------------------- */
/* 27. MEDIA QUERIES                                           */
/* ---------------------------------------------------------- */

@media(max-width:75rem){
	div.page{ width:100%; }
}

@media(max-width:60rem){
	:root{
		--section-padding-inline: 2.5rem;
	}
	.tech-grid{ grid-template-columns:1fr 1fr; }
	.comparison-grid{ grid-template-columns:1fr; }
	.footer-grid{ grid-template-columns:1fr 1fr; }
	.two-col-layout{ grid-template-columns:1fr 200px; }
	.grid-3{ grid-template-columns:1fr 1fr; }
	.compare-grid{ grid-template-columns:1fr 1fr; }
	.compare-grid .compare-col:last-child{ grid-column:span 2; }
	header nav ul li a{ padding:0 0.45rem; font-size:0.9rem; }
}

@media(max-width:40rem){
	:root{
		--section-padding-block:  3rem;
		--section-padding-inline: 1.25rem;
		--header-height:          5rem;
		--subnav-height:          2.6rem;
	}
	header nav{ display:none; }
	#burger, .burger{ display:flex; }

	.hero h1{ font-size:clamp(2.2rem,10vw,3.2rem); }
	.hero-stats{ display:none; }
	.hero-actions{ flex-direction:column; }

	.cards-grid,
	.tech-grid,
	.grid-2,
	.grid-3{ grid-template-columns:1fr; }

	.index-card{ flex-direction:column; }

	.comparison-grid{ grid-template-columns:1fr; }

	.footer-grid{ grid-template-columns:1fr; }
	.two-col-layout{ grid-template-columns:1fr; }
	.sticky-sidebar{ position:static; }

	.compare-grid{ grid-template-columns:1fr; }
	.compare-grid .compare-col:last-child{ grid-column:span 1; }

	.cta-final-inner{ flex-direction:column; text-align:center; }
	.cta-desc{ margin-inline:auto; }
	.cta-contact{ justify-content:center; }
	.cta-final .cta-actions{ flex-direction:row; flex-wrap:wrap; justify-content:center; }
	.section-cta{ flex-direction:column; align-items:flex-start; }
}

@media(max-width:23rem){
	:root{
		--section-padding-inline:     1rem;
		--content-element-margin-bottom: 1.5rem;
	}
}

@media(prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:0.01ms !important;
		transition-duration:0.01ms !important;
	}
}


/* ============================================================
   PODSTRONY – DODATKOWE KLASY
   ============================================================ */

/* page-hero – paragraf subtytuł */
.page-hero-sub{
	font-size:1rem;
	color:rgba(255,255,255,.88);
	max-width:640px;
	line-height:1.75;
	position:relative;
	margin-top:0.25rem;
}

/* Czytelny tekst sekcji na ciemnym i jasnym tle */
.section-body-text{
	font-size:0.9375rem;
	line-height:1.8;
	margin-bottom:1.25rem;
	color:var(--grau-dunkel-1);
}
.section-dark .section-body-text{
	color:rgba(255,255,255,.82);
}

/* Siatka 2 mini kart (parametry serii + ERIMAKI) */
.two-mini-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1rem;
	margin:1.5rem;
}
@media(max-width:36rem){
	.two-mini-grid{ grid-template-columns:1fr; }
}

/* Mini karta */
.mini-card{
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--radius);
	padding:1.1rem;
}
.section-light .mini-card,
.section-white .mini-card{
	background:var(--grau-hell-2);
	border-color:var(--grau-hell-1);
}
.mini-card-title{
	font-family:'Ubuntu',sans-serif;
	font-size:0.95rem;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.05em;
	margin-bottom:0.6rem;
	color:var(--weiss);
}
.section-light .mini-card-title,
.section-white .mini-card-title{
	color:var(--blau);
}
.mini-card-list{
	list-style:none;
	padding:0;
	margin:0;
	font-size:0.8125rem;
	line-height:1.8;
	color:rgba(255,255,255,.80);
}
.section-light .mini-card-list,
.section-white .mini-card-list{
	color:var(--grau-dunkel-1);
}
.mini-card-list a{ color:inherit; text-decoration:underline; }

/* notice-bar wariant inline (mniejszy, bez ikon) */
.notice-bar--inline{
	margin-bottom:1.5rem;
}

/* series-table tytuł h3 */
.series-table-title{
	font-family:'Ubuntu',sans-serif;
	font-size:1rem;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.04em;
	margin:0.75rem;
	color:rgba(255,255,255,.60);
}
.section-light .series-table-title,
.section-white .series-table-title{
	color:var(--grau-dunkel-1);
}

/* compare-criteria lista */
.compare-criteria{
	list-style:none;
	padding:0;
	margin:0.75rem 0 0;
	font-size:0.875rem;
	line-height:1.9;
	color:var(--grau-dunkel-1);
}
.compare-criteria li::before{
	content:'• ';
	color:var(--cyan);
}
.section-dark .compare-criteria{ color:rgba(255,255,255,.80); }

.compare-note{
	font-size:0.8125rem;
	color:var(--grau-dunkel-1);
	opacity:.75;
	margin-top:1rem;
	line-height:1.6;
}
.section-dark .compare-note{ color:rgba(255,255,255,.60); }

/* FAQ layout 2-kolumnowy (content + sidebar) */
.faq-layout{
	display:grid;
	grid-template-columns:1fr 280px;
	gap:2.5rem;
	align-items:start;
}
@media(max-width:56rem){
	.faq-layout{ grid-template-columns:1fr; }
}

/* FAQ sidebar */
.faq-sidebar{
	position:sticky;
	top:calc(var(--header-h) + 1.5rem);
	display:flex;
	flex-direction:column;
	gap:1.25rem;
}

/* Karta kontaktowa w sidebarze */
.sidebar-contact-card{
	background:rgba(255,255,255,.08);
	border:1px solid rgba(255,255,255,.12);
	border-radius:var(--radius-lg);
	padding:1.25rem;
	display:flex;
	flex-direction:column;
	gap:0.75rem;
}
.sidebar-contact-card p{
	font-size:0.875rem;
	line-height:1.65;
	color:rgba(255,255,255,.78);
}
.sidebar-contact-card .btn{ width:100%; justify-content:center; text-align:center; }

/* Lista wewnątrz faq-a */
.faq-list-inner{
	list-style:none;
	padding:0;
	margin:0.5rem 0;
}
.faq-list-inner li{
	padding-left:1.25rem;
	position:relative;
	line-height:1.75;
	font-size:0.9rem;
}
.faq-list-inner li::before{
	content:'•';
	position:absolute;
	left:0;
	color:var(--cyan);
}

/* cards-grid wariant 2 kolumny (VIBRALL D/F) */
.cards-grid--2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.5rem;
	margin-bottom:2rem;
}
@media(max-width:40rem){
	.cards-grid--2{ grid-template-columns:1fr; }
}

.section-breadcrumb {
	padding: 0;
}


#charakter {
	padding: 1.8rem 0 0.1rem 0;
}