/* CookieConsent — Styleshet dla strony produktu cookieconsent.entgema.com */

:root{
  --primary:#1e4d7b;
  --primary-h:#163a5e;
  --akzent:#f5b50a;
  --akzent-h:#dca108;
  --success:#147a3d;
  --grau:#f5f6f7;
  --dunkel:#1f2024;
  --text:#2a2d33;
  --muted:#6b7280;
}
*{ -webkit-tap-highlight-color: transparent; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color:var(--text); background:#fff; margin:0;
  line-height:1.5;
}
img{ max-width:100%; height:auto; }
a{ color:var(--primary); }
a:hover{ color:var(--primary-h); }
h1,h2,h3,h4,h5{ letter-spacing:-.02em; font-weight:800; margin-top:0; }

/* Skip link dla a11y */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:10000;
  background:var(--dunkel); color:#fff; padding:.7rem 1.2rem;
  text-decoration:none; font-weight:600;
}
.skip-link:focus{ left:8px; top:8px; }

*:focus-visible{ outline:3px solid var(--akzent); outline-offset:2px; }

/* === Navbar === */
.navbar{ background:#fff; border-bottom:1px solid #e5e7eb; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.navbar-brand{ font-weight:800; color:var(--primary)!important; font-size:1.3rem; letter-spacing:-.02em; }
.navbar-brand .cookie{ font-size:1.5rem; }
.nav-link{ color:#4b5563!important; font-weight:500; }
.nav-link:hover, .nav-link:focus{ color:var(--primary)!important; }
.btn-akzent{ background:var(--akzent); color:#1a1a1a; border:none; font-weight:700; padding:.7rem 1.4rem; transition:.2s; }
.btn-akzent:hover{ background:var(--akzent-h); color:#1a1a1a; transform:translateY(-1px); }
.btn-primary-c{ background:var(--primary); color:#fff; border:none; font-weight:600; padding:.7rem 1.4rem; }
.btn-primary-c:hover{ background:var(--primary-h); color:#fff; }

/* === Hero === */
.hero{
  background:
    radial-gradient(circle at 30% 20%, rgba(245,181,10,.18) 0%, transparent 50%),
    radial-gradient(circle at 70% 80%, rgba(30,77,123,.15) 0%, transparent 50%),
    linear-gradient(180deg, #fff 0%, var(--grau) 100%);
  padding:5rem 0 4rem;
}
.hero-badge{
  background:#fff5d6; color:#7a5a0e;
  padding:.35rem .9rem; border-radius:99px; font-size:.78rem; font-weight:700;
  letter-spacing:.5px; display:inline-block; margin-bottom:1.2rem;
  border:1px solid #fde7b8;
}
.hero h1{ font-size:clamp(2rem, 4.5vw, 3.2rem); line-height:1.1; color:var(--text); margin-bottom:1rem; }
.hero h1 .hl{ color:var(--primary); }
.hero h1 .ak{ color:var(--akzent); }
.hero-sub{ font-size:1.15rem; color:#4b5563; line-height:1.5; max-width:600px; }
.hero-stats{ display:flex; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.hero-stat-num{ font-size:1.6rem; font-weight:800; color:var(--primary); line-height:1; }
.hero-stat-label{ font-size:.85rem; color:var(--muted); }

.banner-preview{
  background:var(--dunkel); color:#f2f2f3;
  border-radius:14px; padding:1.5rem;
  box-shadow:0 20px 60px rgba(30,77,123,.25);
  max-width:380px; margin-left:auto;
  transform:perspective(800px) rotateY(-3deg);
}
.banner-preview h5{ font-weight:700; margin-bottom:.5rem; font-size:1rem; }
.banner-preview p{ color:#a0a3ad; font-size:.85rem; line-height:1.4; margin-bottom:.8rem; }
.banner-preview .cat{
  background:#2a2c32; border:1px solid #3a3d45; border-radius:6px;
  padding:.5rem .7rem; margin-bottom:.4rem;
  display:flex; align-items:center; gap:.5rem; font-size:.82rem;
}
.banner-preview .cat input{ accent-color:var(--akzent); }
.banner-preview .actions{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem; margin-top:.8rem; }
.banner-preview .btn-grey{ background:#2a2c32; color:#f2f2f3; border:1px solid #3a3d45; font-size:.75rem; padding:.4rem .5rem; border-radius:6px; }
.banner-preview .btn-yel{ background:var(--akzent); color:#1a1a1a; border:none; font-weight:700; font-size:.75rem; padding:.4rem .5rem; border-radius:6px; }

/* === Sections === */
.section{ padding:5rem 0; }
.section-grau{ background:var(--grau); }
.section-dark{ background:var(--dunkel); color:#f2f2f3; }
.section-title{ color:var(--primary); margin-bottom:.5rem; }
.section-sub{ color:var(--muted); margin-bottom:3rem; font-size:1.05rem; }

/* === Cards === */
.feature-card{
  background:#fff; border:1px solid #eef0f3; border-radius:10px;
  padding:1.6rem; height:100%; transition:.25s;
}
.feature-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(30,77,123,.1); border-color:var(--primary); }
.feature-icon{
  width:54px; height:54px; border-radius:10px;
  background:rgba(245,181,10,.15); color:var(--akzent);
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; margin-bottom:1rem;
}
.feature-card h3{ color:var(--primary); font-weight:700; margin-bottom:.5rem; font-size:1.05rem; }
.feature-card p{ color:#4b5563; font-size:.92rem; line-height:1.5; margin:0; }

/* === Comparison === */
.compare-table{ background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.06); }
.compare-table table{ width:100%; margin:0; border-collapse:collapse; }
.compare-table th{ background:var(--grau); padding:1rem; text-align:left; font-weight:700; color:var(--primary); border-bottom:2px solid var(--akzent); }
.compare-table th.us{ background:var(--primary); color:#fff; }
.compare-table td{ padding:.9rem 1rem; border-bottom:1px solid #eef0f3; font-size:.92rem; }
.compare-table tr:last-child td{ border-bottom:none; }
.compare-table .yes{ color:var(--success); font-weight:600; }
.compare-table .no{ color:#9ca3af; }
.compare-table .num{ font-weight:700; color:var(--primary); }

/* === Steps === */
.step-num{
  width:60px; height:60px; border-radius:50%;
  background:var(--akzent); color:#1a1a1a;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:800; margin:0 auto 1rem;
  box-shadow:0 4px 12px rgba(245,181,10,.4);
}

/* === Code snippet === */
.code-snip{
  background:var(--dunkel); color:#f2f2f3;
  border-radius:10px; padding:1.2rem 1.4rem;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size:.85rem; line-height:1.5; overflow-x:auto;
  box-shadow:0 4px 14px rgba(0,0,0,.1);
  white-space:pre;
}
.code-snip .com{ color:#7a8593; }
.code-snip .tag{ color:#7dd3fc; }
.code-snip .at{ color:#fbbf24; }
.code-snip .str{ color:#86efac; }

/* === Pricing === */
.price-card{
  background:#fff; border:2px solid #eef0f3; border-radius:12px; padding:2rem;
  height:100%; position:relative; transition:.25s;
}
.price-card:hover{ border-color:var(--primary); transform:translateY(-3px); }
.price-card.featured{ border-color:var(--akzent); transform:scale(1.03); }
.price-card.featured::before{
  content:"Beliebt"; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--akzent); color:#1a1a1a; padding:.25rem .9rem; border-radius:99px;
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.price-card h3{ color:var(--primary); font-weight:800; font-size:1.3rem; margin-bottom:.3rem; }
.price{ font-size:2.5rem; font-weight:800; color:var(--primary); }
.price small{ font-size:.95rem; color:#9ca3af; font-weight:500; }
.price-card ul{ list-style:none; padding:0; margin:1.5rem 0; }
.price-card li{ padding:.4rem 0; color:#4b5563; font-size:.93rem; }
.price-card li i{ color:var(--success); margin-right:.5rem; }
.price-card li.muted i{ color:#9ca3af; }

/* === Plugins === */
.plugin-card{ background:#fff; border:1px solid #eef0f3; border-radius:10px; padding:1.5rem; text-align:center; transition:.25s; }
.plugin-card:hover{ transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.08); }
.plugin-card .ph{ width:64px; height:64px; margin:0 auto 1rem; display:flex; align-items:center; justify-content:center; border-radius:12px; font-size:2rem; }
.plugin-card .ph-wp{ background:#21759b; color:#fff; }
.plugin-card .ph-t3{ background:#ff8700; color:#fff; }
.plugin-card h3{ color:var(--primary); font-weight:700; }
.plugin-card .v{ color:var(--muted); font-size:.85rem; margin-bottom:1rem; }

/* === FAQ === */
.faq-item{ background:#fff; border:1px solid #eef0f3; border-radius:8px; margin-bottom:.8rem; overflow:hidden; }
.faq-item summary{ padding:1.1rem 1.3rem; font-weight:600; color:var(--primary); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-size:1.5rem; color:var(--akzent); font-weight:300; }
.faq-item[open] summary::after{ content:"−"; }
.faq-item summary:hover{ background:var(--grau); }
.faq-item .answer{ padding:0 1.3rem 1.2rem; color:#4b5563; line-height:1.6; font-size:.95rem; }

/* === CTA banner === */
.cta-banner{ background:linear-gradient(135deg, var(--primary), var(--primary-h)); color:#fff; padding:4rem 0; text-align:center; }
.cta-banner h2{ color:#fff; margin-bottom:.5rem; }
.cta-banner p{ color:rgba(255,255,255,.85); margin-bottom:2rem; font-size:1.1rem; }

/* === Trust strip === */
.trust-strip{ background:#fff; padding:2rem 0; border-bottom:1px solid #f0f1f3; }
.trust-item{ color:var(--muted); font-weight:600; text-align:center; }
.trust-item i{ color:var(--akzent); font-size:1.3rem; margin-right:.4rem; }

/* === Page hero (subpages) === */
.page-hero{ background:linear-gradient(135deg, var(--primary) 0%, var(--primary-h) 100%); color:#fff; padding:3rem 0 2.5rem; }
.page-hero h1{ font-weight:800; margin-bottom:.4rem; }
.page-hero .breadcrumb{ background:transparent; padding:0; margin-bottom:.8rem; font-size:.85rem; list-style:none; display:flex; gap:.5rem; }
.page-hero .breadcrumb a{ color:rgba(255,255,255,.85); text-decoration:none; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero .breadcrumb-sep{ color:rgba(255,255,255,.5); }
.page-hero .breadcrumb-active{ color:var(--akzent); }

/* === Legal pages content === */
.legal-content{ padding:3rem 0; }
.legal-content h2{ color:var(--primary); font-weight:700; font-size:1.4rem; margin-top:2.5rem; margin-bottom:1rem; padding-bottom:.5rem; border-bottom:2px solid var(--akzent); }
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{ color:var(--primary); font-weight:600; font-size:1.1rem; margin-top:1.5rem; margin-bottom:.7rem; }
.legal-content p, .legal-content ul, .legal-content ol{ line-height:1.7; color:#4b5563; }
.legal-content li{ margin-bottom:.3rem; }
.legal-content strong{ color:var(--text); }

/* === Forms (kontakt) === */
.form-card{ background:#fff; border:1px solid #eef0f3; border-radius:12px; padding:2rem; box-shadow:0 4px 14px rgba(0,0,0,.04); }
.form-card label{ display:block; font-weight:600; color:var(--text); margin-bottom:.4rem; font-size:.92rem; }
.form-card input, .form-card textarea, .form-card select{
  width:100%; padding:.7rem .9rem; border:1px solid #d1d5db; border-radius:6px;
  font-size:.95rem; font-family:inherit; margin-bottom:1rem;
}
.form-card input:focus, .form-card textarea:focus{ border-color:var(--primary); outline:2px solid rgba(30,77,123,.15); }
.form-card textarea{ min-height:120px; resize:vertical; }
.form-card .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-card .form-note{ font-size:.83rem; color:var(--muted); margin-bottom:1.2rem; }
.form-success{ background:#d3f3df; color:#147a3d; padding:1rem 1.5rem; border-radius:8px; font-weight:600; }

/* === Footer === */
footer{ background:var(--dunkel); color:#9ca3af; padding:3rem 0 1.5rem; }
footer h6{ color:#fff; font-weight:700; margin-bottom:1rem; text-transform:uppercase; font-size:.85rem; letter-spacing:.5px; }
footer a{ color:var(--akzent); text-decoration:none; }
footer a:hover{ color:#fff; }
footer .small-line{ border-top:1px solid #3a3d44; padding-top:1.2rem; margin-top:2rem; font-size:.85rem; }

@media (max-width:767px){
  .banner-preview{ transform:none; margin:2rem auto; }
  .hero{ padding:3rem 0 2rem; }
  .section{ padding:3rem 0; }
  .form-card .form-row{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}
