/* ============================================================
   _style_100_custom.css — okienko-cookies.pl
   Wow-components dla Neve (CMS Zielony) — wzorzec /old/
   Każdy [BLOCK: nazwa] jest idempotentny — css_patch.py
   wymienia tylko zawartość między START i END.
   ============================================================ */

/* === [BLOCK: page-base] START === */
/* Lokalne dodatkowe zmienne (NIE pulsujące — tylko ok-* niestandardowe) */
:root {
	--ok-ink:#0A1330;        /* granat hero */
	--ok-ink-2:#101A3D;
	--ok-cta:#5EFFB6;        /* neonowy CTA */
	--ok-cta-ink:#082019;
	--ok-amber:#FFB547;
	--ok-blue:#2563EB;
}

body { background:#FAFBFC; color:#0F172A; }
a { transition: color .2s, background .2s, transform .2s, box-shadow .2s; }

/* Nagłówki — większe, śmielsze niż domyślne (fit do hero-look) */
h1, .h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); letter-spacing:-0.02em; line-height:1.05; font-weight:800; }
h2, .h2 { font-size: clamp(1.6rem, 4.5vw, 2.6rem); letter-spacing:-0.015em; line-height:1.1; font-weight:800; }
h3, .h3 { font-size: clamp(1.15rem, 2.5vw, 1.35rem); letter-spacing:-0.005em; line-height:1.25; font-weight:700; }
/* === [BLOCK: page-base] END === */


/* === [BLOCK: section-eyebrow] START === */
/* Mała etykieta nad H2 z paskiem — np. "Co to jest", "Porównanie", "FAQ" */
.eyebrow {
	display:inline-flex; align-items:center; gap:.55rem;
	font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color:var(--mark-dark); margin-bottom:.6rem;
}
.eyebrow::before {
	content:""; width:28px; height:2px; background:var(--mark); display:inline-block; border-radius:2px;
}
.bg-ok-ink .eyebrow, .bg-ok-ink-2 .eyebrow { color:var(--ok-cta); }
.bg-ok-ink .eyebrow::before, .bg-ok-ink-2 .eyebrow::before { background:var(--ok-cta); }
/* === [BLOCK: section-eyebrow] END === */


/* === [BLOCK: hero-dark] START === */
/* Hero ciemny granat z neonowym akcentem + radial glows */
.bg-ok-ink {
	background:
		radial-gradient(900px 500px at 12% 10%, rgba(94,255,182,.10), transparent 60%),
		radial-gradient(700px 400px at 90% 0%, rgba(110,92,255,.18), transparent 65%),
		linear-gradient(180deg, #0A1330 0%, #0E1740 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-ink h1, .bg-ok-ink h2, .bg-ok-ink h3, .bg-ok-ink h4, .bg-ok-ink p, .bg-ok-ink li { color:#F1F5F9; }
.bg-ok-ink em { color:var(--ok-cta); font-style:normal; }
.bg-ok-ink strong { color:#fff; }
.bg-ok-ink .eyebrow { color:var(--ok-cta); }
.bg-ok-ink .eyebrow::before { background:var(--ok-cta); }
.bg-ok-ink .pill { background:rgba(94,255,182,.12); color:var(--ok-cta); border:1px solid rgba(94,255,182,.3); }

/* Plakietka „nowość" / banner u góry hero */
.hero-banner {
	display:inline-flex; align-items:center; gap:.5rem;
	background:rgba(255,181,71,.12); color:#FFD79A; border:1px solid rgba(255,181,71,.35);
	padding:.4rem .85rem; border-radius:999px; font-size:.82rem; font-weight:600;
	margin-bottom:1.25rem;
}
.hero-banner::before { content:"●"; color:#FFB547; font-size:.6rem; }
/* === [BLOCK: hero-dark] END === */
/* === [BLOCK: gradient-sections] START === */
.bg-ok-ink-2 {
	background:linear-gradient(135deg, #101A3D 0%, #1A2456 50%, #0F1A45 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-ink-2 h1,.bg-ok-ink-2 h2,.bg-ok-ink-2 h3,.bg-ok-ink-2 h4,.bg-ok-ink-2 p,.bg-ok-ink-2 li{ color:#F1F5F9; }

.bg-ok-blue {
	background:linear-gradient(135deg, #1E40AF 0%, #2563EB 60%, #3B82F6 100%) !important;
	color:#F1F5F9 !important;
}
.bg-ok-blue h1,.bg-ok-blue h2,.bg-ok-blue h3,.bg-ok-blue h4,.bg-ok-blue p,.bg-ok-blue li{ color:#F1F5F9; }

.bg-ok-mint {
	background:linear-gradient(135deg, #064E3B 0%, #047857 60%, #059669 100%) !important;
	color:#ECFDF5 !important;
}
.bg-ok-mint h1,.bg-ok-mint h2,.bg-ok-mint h3,.bg-ok-mint h4,.bg-ok-mint p,.bg-ok-mint li{ color:#ECFDF5; }
/* === [BLOCK: gradient-sections] END === */


/* === [BLOCK: glass-card] START === */
/* Szklana karta — cookie-banner preview po prawej w hero, plus inne miejsca */
.glass {
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.14);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius:18px;
	padding:1.5rem !important;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
}
.glass.dark {
	background:rgba(10,19,48,.55);
}
.glass h3 { font-size:1.05rem !important; margin:.25rem 0 .75rem !important; }
.glass p { font-size:.92rem; opacity:.85; }
.glass .glass-actions { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem; }
.glass .glass-actions .gb {
	font-size:.82rem; font-weight:600; padding:.55rem .9rem; border-radius:10px;
	display:inline-block; cursor:default;
}
.glass .glass-actions .gb.primary { background:var(--ok-cta); color:var(--ok-cta-ink); }
.glass .glass-actions .gb.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.glass .glass-actions .gb.muted { color:rgba(255,255,255,.6); }
.glass .glass-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:1rem; padding-top:1rem; border-top:1px dashed rgba(255,255,255,.15); }
.glass .glass-tags span {
	font-size:.7rem; font-weight:600; letter-spacing:.05em;
	color:rgba(255,255,255,.7); background:rgba(255,255,255,.06);
	padding:.3rem .55rem; border-radius:6px;
}
/* === [BLOCK: glass-card] END === */


/* === [BLOCK: neon-cta] START === */
/* Neonowy CTA przycisk — używamy dla najmocniejszych call-to-action */
nav.neon p > a, .btn-neon {
	background:var(--ok-cta) !important;
	color:var(--ok-cta-ink) !important;
	font-weight:700 !important;
	padding:.95rem 1.6rem !important;
	border-radius:12px !important;
	display:inline-flex !important; align-items:center; gap:.5rem;
	box-shadow: 0 12px 32px -8px rgba(94,255,182,.55), inset 0 -2px 0 rgba(0,0,0,.12) !important;
	border:none !important;
	transition: transform .15s, box-shadow .2s;
}
nav.neon p > a:hover, .btn-neon:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 40px -10px rgba(94,255,182,.7), inset 0 -2px 0 rgba(0,0,0,.12) !important;
}
nav.neon p > a::after, .btn-neon::after {
	content:"→"; margin-left:.25rem; font-weight:800; font-size:1.1em;
}

/* Ghost button do hero (drugorzędny) */
nav.ghost p > a {
	background:transparent !important;
	color:#fff !important;
	border:1.5px solid rgba(255,255,255,.35) !important;
	padding:.9rem 1.5rem !important;
	border-radius:12px !important;
	font-weight:600 !important;
}
nav.ghost p > a:hover { background:rgba(255,255,255,.1) !important; border-color:rgba(255,255,255,.6) !important; }
/* === [BLOCK: neon-cta] END === */


/* === [BLOCK: feature-cards] START === */
/* Karty feature — duże ikony emoji w kółku, biały kafelek z subtelną ramką */
.feature-card {
	background:#fff; border:1px solid #E5E9F2; border-radius:16px;
	padding:1.5rem !important;
	transition: transform .2s, box-shadow .2s, border-color .2s;
	height:100%;
}
.feature-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px -16px rgba(15,23,42,.18); border-color:#D1D5DB; }
.feature-card .feat-ico {
	display:inline-flex; align-items:center; justify-content:center;
	width:52px; height:52px; border-radius:12px; font-size:1.6rem;
	background:linear-gradient(135deg, rgba(14,190,127,.12), rgba(110,92,255,.12));
	margin-bottom:1rem;
}
.feature-card h3 { font-size:1.1rem !important; margin:.25rem 0 .5rem !important; color:#0F172A; line-height:1.3; }
.feature-card p { font-size:.92rem; color:#475569; line-height:1.55; margin:0; }

/* Wariant karty z plakietką „Gratis" / „W cenie" */
.feature-card .feat-tag {
	display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	padding:.3rem .55rem; border-radius:6px; margin-bottom:.7rem;
}
/* === [BLOCK: feature-cards] END === */


/* === [BLOCK: comparison-table] START === */
/* Tabela porównawcza vs konkurencja */
.compare-table { width:100%; border-collapse:separate; border-spacing:0; margin:1.5rem 0; font-size:.95rem; }
.compare-table thead th {
	background:#F8FAFC; color:#475569; font-weight:600; text-align:left;
	padding:1rem .9rem; border-bottom:2px solid #E2E8F0; font-size:.85rem;
	letter-spacing:.02em;
}
.compare-table thead th.us {
	background:linear-gradient(135deg, var(--mark-dark), var(--mark));
	color:#fff; border-bottom:2px solid var(--mark-dark);
	position:relative;
}
.compare-table thead th.us::before { content:"✦ "; }
.compare-table tbody td {
	padding:.95rem .9rem; border-bottom:1px solid #EEF2F7; color:#1E293B; vertical-align:top;
}
.compare-table tbody td:first-child { font-weight:600; color:#0F172A; }
.compare-table tbody tr:hover td { background:#FCFCFD; }
.compare-table td.us-col {
	background:rgba(14,190,127,.06); font-weight:600; color:var(--mark-dark);
	border-left:1px solid rgba(14,190,127,.2);
	border-right:1px solid rgba(14,190,127,.2);
}
.compare-table tbody tr:last-child td.us-col { border-bottom:1px solid rgba(14,190,127,.2); border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
@media (max-width: 700px) {
	.compare-table { font-size:.82rem; }
	.compare-table thead th, .compare-table tbody td { padding:.7rem .55rem; }
}
/* === [BLOCK: comparison-table] END === */


/* === [BLOCK: pill-chips] START === */
/* Chipy / tagi — np. "RODO · Consent Mode v2 · GTM" */
.pills { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.pill {
	display:inline-flex; align-items:center; gap:.4rem;
	padding:.45rem .85rem; border-radius:999px;
	background:rgba(14,190,127,.1); color:var(--mark-dark);
	font-size:.82rem; font-weight:600; border:1px solid rgba(14,190,127,.25);
}
.pill.amber { background:rgba(255,181,71,.12); color:#B8730E; border-color:rgba(255,181,71,.3); }
.pill.violet { background:rgba(110,92,255,.12); color:var(--mark2-dark); border-color:rgba(110,92,255,.25); }
.pill.rose { background:rgba(255,107,107,.12); color:#C0392B; border-color:rgba(255,107,107,.25); }
/* === [BLOCK: pill-chips] END === */


/* === [BLOCK: bullet-icon-list] START === */
/* Lista punktowana z ikoną w kółku po lewej (sekcja "tematy prawne", "consent mode") */
.icon-list { list-style:none !important; padding:0 !important; margin:1.25rem 0 !important; }
.icon-list li {
	display:flex; align-items:flex-start; gap:1rem;
	padding:.95rem 1.1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
	border-radius:12px; margin-bottom:.65rem;
}
.bg-white .icon-list li, body:not(.dark_mode) .icon-list:not(.dark) li {
	background:#fff; border:1px solid #E5E9F2;
}
.icon-list li .il-ico {
	display:inline-flex; align-items:center; justify-content:center;
	width:36px; height:36px; border-radius:10px; font-size:1.1rem; flex-shrink:0;
	background:rgba(94,255,182,.15);
}
.bg-white .icon-list li .il-ico, body:not(.dark_mode) .icon-list:not(.dark) li .il-ico {
	background:linear-gradient(135deg, rgba(14,190,127,.15), rgba(110,92,255,.1));
}
.icon-list li .il-body { flex:1; line-height:1.5; }
.icon-list li .il-body h4 { margin:0 0 .25rem !important; font-size:1rem; }
.icon-list li .il-body p { margin:0; font-size:.92rem; opacity:.85; }
/* === [BLOCK: bullet-icon-list] END === */


/* === [BLOCK: checklist-grid] START === */
/* Siatka „GA4 events gratis" — small chips z check.
   Kontrast: tekst #FFF na ciemnym, mocniejszy background, mocniejsza ramka. */
.check-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:.6rem; margin:1.25rem 0; }
/* Domyślny ciemny — używany w sekcjach bg-ok-ink/bg-ok-ink-2 */
.bg-ok-ink .check-grid .ck, .bg-ok-ink-2 .check-grid .ck {
	background:rgba(94,255,182,.18); border:1.5px solid rgba(94,255,182,.5);
	color:#FFFFFF; font-weight:600;
}
.check-grid .ck {
	background:rgba(14,190,127,.1); border:1.5px solid rgba(14,190,127,.35);
	color:#0F172A; padding:.75rem 1rem; border-radius:10px; font-size:.92rem; font-weight:600;
	display:flex; align-items:center; gap:.6rem; line-height:1.3;
}
.check-grid .ck::before { content:"✓"; color:var(--ok-cta); font-weight:900; font-size:1.1em; flex-shrink:0; }
.bg-ok-ink .check-grid .ck::before, .bg-ok-ink-2 .check-grid .ck::before { color:var(--ok-cta); }
/* === [BLOCK: checklist-grid] END === */


/* === [BLOCK: faq-pretty] START === */
/* Lifting domyślnego .faq z core — większy padding, ładny accordion z plus/minus */
.faq { max-width:860px; margin:0 auto; }
.faq .f {
	background:#fff !important; border:1px solid #E5E9F2 !important;
	border-radius:14px !important; padding:0 !important; margin-bottom:.7rem !important;
	overflow:hidden; transition: border-color .2s, box-shadow .2s;
}
.faq .f.active { border-color:rgba(14,190,127,.4) !important; box-shadow:0 8px 28px -10px rgba(14,190,127,.2); }
.faq .f h3 {
	padding:1.1rem 1.3rem !important; margin:0 !important;
	font-size:1.02rem !important; font-weight:600 !important; color:#0F172A;
	display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq .f h3 span.faq_arrow {
	float:none !important; flex-shrink:0;
	width:28px; height:28px; border-radius:50%;
	background:rgba(14,190,127,.12); color:var(--mark-dark);
	display:inline-flex !important; align-items:center; justify-content:center;
	font-size:1.1rem !important; transition: transform .2s, background .2s;
}
.faq .f.active h3 span.faq_arrow { background:var(--mark); color:#fff; transform:rotate(45deg); }
.faq .f .t { padding:0 1.3rem 1.2rem !important; color:#475569; line-height:1.6; font-size:.95rem; }
/* === [BLOCK: faq-pretty] END === */


/* === [BLOCK: contact-form-dark] START === */
/* Formularz kontaktowy w sekcji ciemnej — input pola na granacie */
.bg-ok-ink form input[type=text],
.bg-ok-ink form input[type=email],
.bg-ok-ink form input[type=tel],
.bg-ok-ink form textarea,
.bg-ok-ink form select,
.bg-ok-ink-2 form input[type=text],
.bg-ok-ink-2 form input[type=email],
.bg-ok-ink-2 form input[type=tel],
.bg-ok-ink-2 form textarea,
.bg-ok-ink-2 form select {
	background:rgba(255,255,255,.06) !important; color:#F1F5F9 !important;
	border:1.5px solid rgba(255,255,255,.15) !important; border-radius:10px !important;
	padding:.85rem 1rem !important; font-size:.95rem;
}
.bg-ok-ink form input::placeholder, .bg-ok-ink-2 form input::placeholder,
.bg-ok-ink form textarea::placeholder, .bg-ok-ink-2 form textarea::placeholder {
	color:rgba(241,245,249,.4) !important;
}
.bg-ok-ink form button[type=submit], .bg-ok-ink-2 form button[type=submit] {
	background:var(--ok-cta) !important; color:var(--ok-cta-ink) !important;
	font-weight:700 !important; padding:1rem 1.6rem !important; border-radius:12px !important;
	box-shadow: 0 12px 32px -8px rgba(94,255,182,.55) !important;
	width:100%; cursor:pointer; border:none !important;
}
.bg-ok-ink form button[type=submit]:hover, .bg-ok-ink-2 form button[type=submit]:hover {
	transform:translateY(-1px);
	box-shadow: 0 18px 40px -10px rgba(94,255,182,.7) !important;
}
.bg-ok-ink form .form-check, .bg-ok-ink-2 form .form-check { color:rgba(241,245,249,.75); font-size:.85rem; }
.bg-ok-ink form .form-check a, .bg-ok-ink-2 form .form-check a { color:var(--ok-cta); }
/* === [BLOCK: contact-form-dark] END === */


/* === [BLOCK: section-spacing] START === */
/* Większy oddech w hero/features — ładniej niż domyślne 4rem.
   UWAGA: sekcja dnt_creator JEST kontenerem, nie ma dziecka .container.
   Dlatego selector na sekcji bezpośrednio. Inline style padding="" wygra
   z tym CSS — ale gdy padding jest pusty, klasa zadziała. */
section.section-tight { padding-top:1.5rem !important; padding-bottom:1.5rem !important; }
section.section-roomy { padding-top:5rem !important; padding-bottom:5rem !important; }
@media (max-width:700px){
	section.section-roomy { padding-top:3rem !important; padding-bottom:3rem !important; }
}
/* === [BLOCK: section-spacing] END === */


/* === [BLOCK: cookie-floating-icon] START === */
/* Pływająca ikona ciastka jako dekoracja w hero (po lewej, lekko obrócona) */
.cookie-deco {
	position:absolute; pointer-events:none; opacity:.08; font-size:14rem;
	transform:rotate(-15deg); top:15%; right:-3rem; z-index:0;
}
.bg-ok-ink, .bg-ok-ink-2 { position:relative; overflow:hidden; }
.bg-ok-ink > .container, .bg-ok-ink-2 > .container { position:relative; z-index:1; }
/* === [BLOCK: cookie-floating-icon] END === */

@media all {

}
@media (max-width: 1200px) {

}
@media (max-width: 1000px) {
	.glass { padding:1.2rem !important; }
}
@media (max-width: 700px) {
	.glass { padding:1rem !important; border-radius:14px; }
	.feature-card { padding:1.2rem !important; }
}