/*
Theme Name: WebDNA
Theme URI: https://webdna.pl
Author: WebDNA.pl
Author URI: https://webdna.pl
Description: Autorski motyw dla WebDNA.pl — tworzenie stron internetowych i sklepów. Ciemny motyw "cyfrowe laboratorium", pełne wsparcie edytora blokowego Gutenberg, rozwijane menu Oferta, typ treści Realizacje (case studies), szablon landingów usługowych/branżowych, baza wiedzy z kategoriami. Formularze przygotowane pod Contact Form 7.
Version: 1.3.6
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webdna
Tags: business, portfolio, blog, custom-colors, custom-menu, featured-images, translation-ready, block-styles, wide-blocks
*/
/* ===================================================================
   WebDNA.pl — arkusz stylów
   Motyw: cyfrowe laboratorium (ciemny)
   =================================================================== */

:root{
  --bg:        #0B0F1A;
  --bg-2:      #101725;
  --bg-3:      #161E2F;
  --line:      #1E2A3F;
  --line-2:    #27364F;
  --cyan:      #2DD4BF;
  --cyan-dim:  #1BA896;
  --coral:     #FF6B6B;
  --coral-dim: #E24B4A;
  --violet:    #8B5CF6;
  --ink:       #F1F5F9;
  --ink-2:     #94A3B8;
  --ink-3:     #64748B;
  --radius:    14px;
  --radius-sm: 8px;
  --maxw:      1140px;
  --font-disp: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

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

html{ scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--cyan); color:#04342C; padding:10px 18px; border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip-link:focus{ left:0; }

a{ color:var(--cyan); text-decoration:none; }

/* ---- Typografia współdzielona ---- */
h1,h2,h3{ font-family:var(--font-disp); font-weight:600; line-height:1.12; letter-spacing:-0.02em; }

.section-eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:14px; display:inline-flex; align-items:center; gap:9px;
}
.section-eyebrow::before{
  content:""; width:22px; height:1px; background:var(--cyan); display:inline-block;
}
.section-title{ font-size:clamp(28px, 4.4vw, 44px); margin-bottom:16px; max-width:20ch; }
.section-sub{ color:var(--ink-2); font-size:clamp(16px,1.6vw,19px); max-width:60ch; margin-bottom:40px; }

section{ padding:clamp(72px,10vw,120px) 0; position:relative; }

/* ---- Przyciski ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-disp); font-weight:500; font-size:16px;
  padding:15px 28px; border-radius:var(--radius-sm); border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn-primary{ background:var(--coral); color:#3A1109; box-shadow:0 0 0 0 rgba(255,107,107,.5); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(255,107,107,.55); }
.btn-ghost{ background:transparent; border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px); }
.btn-block{ width:100%; }
.btn-lg{ padding:18px 40px; font-size:18px; }

/* =====================  HEADER  ===================== */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,15,26,.78); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }

.logo{ display:flex; align-items:center; gap:11px; color:var(--ink); }
.logo-text{ font-family:var(--font-disp); font-weight:700; font-size:22px; letter-spacing:-0.03em; }
.logo-accent{ color:var(--cyan); }
.logo-dot{ color:var(--ink-3); font-weight:400; }
.logo-mark{ position:relative; width:26px; height:26px; display:inline-block; }
.logo-strand{ position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--cyan); border-right-color:transparent; border-left-color:transparent;
  animation:spin 3.4s linear infinite; }
.logo-strand:nth-child(2){ border:2px solid var(--coral); border-top-color:transparent; border-bottom-color:transparent; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav a{ color:var(--ink-2); font-size:15px; font-weight:500; transition:color .18s; }
.site-nav a:hover{ color:var(--ink); }
.nav-cta{ color:var(--cyan) !important; border:1px solid var(--line-2); padding:9px 18px; border-radius:var(--radius-sm); transition:border-color .18s, background .18s; }
.nav-cta:hover{ border-color:var(--cyan); background:rgba(45,212,191,.08); }

/* ---- Rozwijane podmenu (np. Oferta) ---- */
.nav-item{ position:relative; display:flex; align-items:center; padding:26px 0; }
.nav-caret{ font-size:9px; margin-left:6px; opacity:.65; display:inline-block; transition:transform .18s; }
.nav-item:hover .nav-caret, .nav-item.open .nav-caret{ transform:translateY(1px); opacity:1; }
.sub-menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,6px);
  display:flex; flex-direction:column; min-width:264px; padding:10px;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  box-shadow:0 20px 44px rgba(2,6,14,.5);
  opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s;
  z-index:130;
}
.nav-item:hover .sub-menu, .nav-item:focus-within .sub-menu, .nav-item.open .sub-menu{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}
.sub-menu a{ padding:10px 14px; border-radius:6px; font-size:14.5px; white-space:nowrap; }
.sub-menu a:hover{ background:var(--bg-3); color:var(--ink); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.25s; }

/* =====================  HERO  ===================== */
.hero{ padding-top:clamp(60px,8vw,96px); padding-bottom:0; overflow:hidden; }
.hero-helix{ position:absolute; top:0; right:0; width:48%; height:100%; z-index:0; opacity:.9; pointer-events:none; }
.hero-inner{ position:relative; z-index:2; }
.hero-copy{ max-width:640px; }

.eyebrow{
  font-family:var(--font-mono); font-size:13px; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:7px 15px; border:1px solid var(--line); border-radius:99px; background:var(--bg-2);
}
.eyebrow-dot{ width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(45,212,191,.18); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 7px rgba(45,212,191,0); } }

.hero h1{ font-size:clamp(38px, 6.5vw, 74px); font-weight:700; margin-bottom:26px; }
.grad{
  background:linear-gradient(100deg, var(--cyan), var(--violet));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.lead{ font-size:clamp(17px,1.7vw,20px); color:var(--ink-2); max-width:56ch; margin-bottom:34px; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px; }

.hero-proof{ list-style:none; display:flex; gap:38px; flex-wrap:wrap; padding-top:30px; border-top:1px solid var(--line); }
.hero-proof li{ font-size:14px; color:var(--ink-2); }
.hero-proof strong{ display:block; font-family:var(--font-disp); font-size:28px; color:var(--ink); font-weight:600; letter-spacing:-0.02em; }

.hero-terminal{
  position:relative; z-index:2; max-width:var(--maxw); margin:56px auto 0; padding:0 24px;
  font-family:var(--font-mono); font-size:13.5px;
}
.hero-terminal .term-line{ display:block; color:var(--ink-3); padding:3px 0; }
.hero-terminal .term-c{ color:var(--coral); }
.hero-terminal .term-ok{ color:var(--cyan); border-left:2px solid var(--line-2); padding-left:14px; margin-top:2px; }

/* =====================  GENY  ===================== */
.genes{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.gene-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.gene{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .22s ease;
}
.gene::after{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--gc,var(--cyan)); opacity:.85; }
.gene:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.gene-a{ --gc:var(--cyan); }
.gene-t{ --gc:var(--coral); }
.gene-g{ --gc:var(--violet); }
.gene-c{ --gc:#F7DC6F; }
.gene-letter{
  font-family:var(--font-disp); font-size:52px; font-weight:700; line-height:1;
  color:var(--gc,var(--cyan)); display:block; margin-bottom:18px; letter-spacing:-0.04em;
}
.gene h3{ font-size:20px; margin-bottom:11px; }
.gene p{ font-size:15px; color:var(--ink-2); line-height:1.6; }

/* =====================  AUDYT  ===================== */
.audit-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; }
.audit-list{ list-style:none; display:grid; gap:12px; }
.audit-list li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:16px; }
.audit-list li::before{
  content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700;
  width:20px; height:20px; border:1px solid var(--cyan-dim); border-radius:5px;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.audit-form{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; display:flex; flex-direction:column;
}
.audit-form label{ font-size:13px; font-family:var(--font-mono); color:var(--ink-2); margin:14px 0 7px; letter-spacing:.5px; }
.audit-form label:first-child{ margin-top:0; }
.audit-form input{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:13px 15px; color:var(--ink); font-family:var(--font-body); font-size:16px;
  transition:border-color .18s, box-shadow .18s;
}
.audit-form input::placeholder{ color:var(--ink-3); }
.audit-form input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(45,212,191,.15); }
.audit-form .btn{ margin-top:22px; }
.form-note{ font-size:12.5px; color:var(--ink-3); text-align:center; margin-top:14px; font-family:var(--font-mono); }
.form-status{ font-size:14px; text-align:center; margin-top:12px; min-height:20px; }
.form-status.ok{ color:var(--cyan); }
.form-status.err{ color:var(--coral); }

/* =====================  OFERTA  ===================== */
.offer-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.offer-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 32px; transition:transform .22s, border-color .22s;
}
.offer-card:hover{ transform:translateY(-4px); border-color:var(--cyan-dim); }
.offer-tag{
  font-family:var(--font-mono); font-size:19px; color:var(--cyan);
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border:1px solid var(--line-2); border-radius:12px;
  background:var(--bg); margin-bottom:22px;
}
.offer-card h3{ font-size:22px; margin-bottom:13px; }
.offer-card p{ color:var(--ink-2); font-size:15.5px; margin-bottom:22px; }
.offer-link{ font-family:var(--font-mono); font-size:14px; font-weight:500; transition:letter-spacing .2s; }
.offer-link:hover{ letter-spacing:.4px; }

/* =====================  PROCES  ===================== */
.proc-list{ list-style:none; display:grid; grid-template-columns:repeat(4,1fr); gap:0; counter-reset:none; position:relative; }
.proc-step{ padding:34px 26px 34px 0; border-top:1px solid var(--line-2); position:relative; }
.proc-step::before{
  content:""; position:absolute; left:0; top:-1px; width:34px; height:3px; background:var(--cyan);
}
.proc-code{ font-family:var(--font-mono); font-size:13px; color:var(--coral); letter-spacing:1px; display:block; margin-bottom:16px; }
.proc-step h3{ font-size:21px; margin-bottom:12px; }
.proc-step p{ font-size:15px; color:var(--ink-2); }

/* =====================  REALIZACJE  ===================== */
.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.case-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px; transition:transform .22s, border-color .22s;
}
.case-card:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.case-metrics{ display:flex; gap:34px; margin-bottom:26px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.case-metric strong{ font-family:var(--font-disp); font-size:27px; color:var(--cyan); display:block; letter-spacing:-0.02em; }
.case-metric span{ font-size:13px; color:var(--ink-3); }
.case-card h3{ font-size:20px; margin-bottom:11px; }
.case-card p{ color:var(--ink-2); font-size:15px; }
.case-placeholder{ border-style:dashed; }
.case-card h3 a{ color:var(--ink); }
.case-card h3 a:hover{ color:var(--cyan); }
.case-card .offer-link{ display:inline-block; margin-top:16px; }
.cases-more{ margin-top:26px; }
.archive-cases{ padding:clamp(48px,6vw,80px) 0; }

/* =====================  DLA BRANZ  ===================== */
.industries{ border-top:1px solid var(--line); }
.industry-grid{ display:flex; flex-wrap:wrap; gap:12px; }

/* =====================  POROWNANIE  ===================== */
.compare{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.compare-inner{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; align-items:center; }
.compare-table{ width:100%; border-collapse:collapse; font-size:15px; background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.compare-table th,.compare-table td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); }
.compare-table thead th{ font-family:var(--font-mono); font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-2); background:var(--bg-3); }
.compare-table td:first-child{ color:var(--ink-2); }
.compare-table tbody tr:last-child td{ border-bottom:0; }
.compare-table td:not(:first-child){ color:var(--ink); font-weight:500; }

/* =====================  FAQ  ===================== */
.faq-list{ max-width:820px; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:24px 44px 24px 0; position:relative;
  font-family:var(--font-disp); font-size:19px; font-weight:500; color:var(--ink);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:26px; color:var(--cyan); font-weight:400; transition:transform .25s;
}
.faq-item[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.faq-item p{ color:var(--ink-2); font-size:16px; padding:0 44px 26px 0; margin-top:-4px; }

/* =====================  CTA KONCOWE  ===================== */
.final-cta{ text-align:center; overflow:hidden; border-top:1px solid var(--line); }
.cta-helix{ position:absolute; inset:0; width:100%; height:100%; opacity:.25; z-index:0; pointer-events:none; }
.final-inner{ position:relative; z-index:2; }
.final-cta .section-eyebrow{ justify-content:center; }
.final-cta h2{ font-size:clamp(30px,5vw,52px); margin-bottom:18px; max-width:22ch; margin-left:auto; margin-right:auto; }
.final-cta .section-sub{ margin-left:auto; margin-right:auto; margin-bottom:38px; }

/* =====================  FOOTER  ===================== */
.site-footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:64px 0 32px; }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid var(--line); }
.footer-brand .logo-text{ font-family:var(--font-disp); font-weight:700; font-size:22px; }
.footer-brand p{ color:var(--ink-3); font-size:14.5px; margin-top:14px; max-width:44ch; }
.footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; align-content:start; }
.footer-nav a{ color:var(--ink-2); font-size:14.5px; transition:color .18s; }
.footer-nav a:hover{ color:var(--cyan); }
.footer-bottom{ display:flex; justify-content:space-between; padding-top:26px; color:var(--ink-3); font-size:13px; font-family:var(--font-mono); flex-wrap:wrap; gap:8px; }

/* =====================  RESPONSYWNOSC  ===================== */
@media (max-width:900px){
  .site-nav{
    position:fixed; inset:72px 0 auto 0; flex-direction:column; gap:0;
    background:var(--bg-2); border-bottom:1px solid var(--line); padding:12px 24px 24px;
    transform:translateY(-120%); transition:transform .3s ease; align-items:stretch;
  }
  .site-nav.open{ transform:translateY(0); }
  .site-nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-cta{ text-align:center; margin-top:12px; border-color:var(--cyan) !important; }

  /* Podmenu na telefonie: rozwinięte na stałe, wcięte pod rodzicem */
  .nav-item{ flex-direction:column; align-items:stretch; padding:0; }
  .nav-item .nav-caret{ display:none; }
  .sub-menu{
    position:static; transform:none; opacity:1; visibility:visible;
    min-width:0; padding:0 0 4px 18px; background:transparent; border:0; box-shadow:none;
  }
  .sub-menu a{ font-size:14px; color:var(--ink-3); padding:10px 0; border-bottom:0; white-space:normal; }
  .nav-toggle{ display:flex; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .hero-helix{ width:100%; opacity:.32; }
  .gene-grid{ grid-template-columns:repeat(2,1fr); }
  .audit-inner{ grid-template-columns:1fr; gap:38px; }
  .proc-list{ grid-template-columns:repeat(2,1fr); }
  .compare-inner{ grid-template-columns:1fr; gap:32px; }
}

@media (max-width:600px){
  body{ font-size:16px; }
  .wrap{ padding:0 18px; }
  .hero-proof{ gap:24px; }
  .hero-proof strong{ font-size:23px; }
  .gene-grid{ grid-template-columns:1fr; }
  .offer-grid{ grid-template-columns:1fr; }
  .proc-list{ grid-template-columns:1fr; }
  .case-grid{ grid-template-columns:1fr; }
  .case-metrics{ gap:24px; }
  .footer-inner{ grid-template-columns:1fr; gap:32px; }
  .hero-terminal{ font-size:11.5px; }
  .btn{ width:100%; }
  .hero-cta{ flex-direction:column; }
}

/* =====================  BAJERY  ===================== */

/* Terminal: migający kursor */
.term-caret{ color:var(--cyan); animation:caretBlink 1s step-end infinite; margin-left:1px; }
@keyframes caretBlink{ 50%{ opacity:0; } }
.term-result{ opacity:0; transition:opacity .5s ease; }
.term-result.show{ opacity:1; }

/* Scroll-reveal: sekcje i karty wjeżdżają miękko */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); will-change:opacity,transform; }
.reveal.in{ opacity:1; transform:none; }
/* Kaskada dla elementów w siatce */
.reveal-stagger > *{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal-stagger.in > *{ opacity:1; transform:none; }
.reveal-stagger.in > *:nth-child(1){ transition-delay:.02s; }
.reveal-stagger.in > *:nth-child(2){ transition-delay:.10s; }
.reveal-stagger.in > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger.in > *:nth-child(4){ transition-delay:.26s; }

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{ opacity:1 !important; transform:none !important; }
  .term-caret{ animation:none; }
  .term-result{ opacity:1; }
}

/* ===================================================================
   BLOG
   =================================================================== */

/* Nagłówek bloga */
.blog-head{ position:relative; overflow:hidden; padding-top:clamp(56px,7vw,92px); padding-bottom:clamp(48px,6vw,72px); border-bottom:1px solid var(--line); }
.blog-head .cta-helix{ position:absolute; inset:0; width:100%; height:100%; opacity:.16; z-index:0; }
.blog-head-inner{ position:relative; z-index:2; max-width:760px; }
.blog-head h1{ font-size:clamp(34px,5.4vw,60px); font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin-bottom:22px; }
.blog-head .lead{ font-size:clamp(16px,1.7vw,20px); color:var(--ink-2); max-width:60ch; }

/* Filtr kategorii */
.blog-filter-wrap{ position:sticky; top:72px; z-index:50; background:rgba(11,15,26,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); padding:16px 0; }
.blog-filter{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink-2);
  background:var(--bg-2); border:1px solid var(--line); border-radius:99px;
  padding:9px 17px; cursor:pointer; transition:border-color .18s, color .18s, background .18s;
}
.chip:hover{ color:var(--ink); border-color:var(--line-2); }
.chip.is-active{ color:var(--bg); background:var(--cyan); border-color:var(--cyan); font-weight:500; }
.chip.is-active .chip-dot{ display:none; }
.chip-dot{ width:8px; height:8px; border-radius:50%; }
.chip-wp{ background:var(--cyan); }
.chip-ps{ background:var(--coral); }
.chip-seo{ background:var(--violet); }
.chip-cost{ background:#F7DC6F; }
.chip-case{ background:#5DCAA5; }

/* Etykiety kategorii na kartach */
.cat-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.6px; text-transform:uppercase; padding:4px 10px; border-radius:6px; font-weight:500; }
.cat-wp{ background:rgba(45,212,191,.12); color:var(--cyan); }
.cat-ps{ background:rgba(255,107,107,.12); color:var(--coral); }
.cat-seo{ background:rgba(139,92,246,.14); color:#A78BFA; }
.cat-cost{ background:rgba(247,220,111,.12); color:#F7DC6F; }
.cat-case{ background:rgba(93,202,165,.12); color:#5DCAA5; }

.post-meta{ display:flex; align-items:center; gap:14px; margin-bottom:15px; flex-wrap:wrap; }
.post-date,.post-read{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); }

/* Wyróżniony wpis */
.blog-featured-sec{ padding:clamp(48px,6vw,72px) 0 clamp(28px,4vw,44px); }
.featured{
  display:grid; grid-template-columns:1fr 1.05fr; gap:0;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  transition:border-color .22s;
}
.featured:hover{ border-color:var(--line-2); }
.featured-media{
  background:linear-gradient(140deg, #0E1524, #131C2E);
  border-right:1px solid var(--line); position:relative; min-height:280px;
  display:flex; align-items:center; padding:38px;
}
.featured-media::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, var(--cyan), var(--violet), var(--coral));
}
.featured-code{ font-family:var(--font-mono); font-size:15px; line-height:2; color:var(--ink-2); }
.featured-code span{ display:block; }
.tk-c{ color:var(--violet); }
.tk-v{ color:var(--cyan); }
.tk-n{ color:#5DCAA5; }
.tk-num{ color:var(--coral); }
.featured-body{ padding:clamp(30px,4vw,44px); display:flex; flex-direction:column; justify-content:center; }
.featured-body h2{ font-size:clamp(23px,2.6vw,31px); line-height:1.18; margin-bottom:15px; }
.featured-body h2 a{ color:var(--ink); transition:color .18s; }
.featured-body h2 a:hover{ color:var(--cyan); }
.featured-body p{ color:var(--ink-2); font-size:16px; margin-bottom:22px; }

/* Siatka wpisów */
.blog-grid-sec{ padding:clamp(20px,3vw,32px) 0 clamp(72px,9vw,110px); }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.post-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease;
}
.post-card:hover{ transform:translateY(-5px); border-color:var(--cyan-dim); }
.post-thumb{
  height:130px; background:linear-gradient(140deg, #0E1524, #131C2E);
  border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.post-thumb::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(45,212,191,.10) 1px, transparent 0);
  background-size:18px 18px;
}
.thumb-glyph{ font-family:var(--font-mono); font-size:38px; font-weight:500; color:var(--cyan); opacity:.55; position:relative; z-index:1; }
.post-card:nth-child(3n+2) .thumb-glyph{ color:var(--coral); }
.post-card:nth-child(3n+3) .thumb-glyph{ color:var(--violet); }
.post-card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.post-card h3{ font-size:19px; line-height:1.28; margin-bottom:11px; }
.post-card h3 a{ color:var(--ink); transition:color .18s; }
.post-card h3 a:hover{ color:var(--cyan); }
.post-card p{ color:var(--ink-2); font-size:14.5px; line-height:1.6; }

.no-results{ text-align:center; color:var(--ink-2); font-size:16px; padding:48px 0; }

.blog-more{ text-align:center; margin-top:48px; }

/* Newsletter */
.blog-news{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.blog-news-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }

/* Responsywnosc bloga */
@media (max-width:900px){
  .blog-filter-wrap{ top:0; }
  .featured{ grid-template-columns:1fr; }
  .featured-media{ border-right:0; border-bottom:1px solid var(--line); min-height:200px; }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
  .blog-news-inner{ grid-template-columns:1fr; gap:34px; }
}
@media (max-width:600px){
  .post-grid{ grid-template-columns:1fr; }
  .blog-filter{ gap:8px; }
  .chip{ font-size:12.5px; padding:8px 14px; }
  .post-thumb{ height:110px; }
}

/* ===================================================================
   WORDPRESS — style specyficzne
   =================================================================== */

/* Wyrównania bloków Gutenberg */
.alignwide{ max-width:1140px; margin-left:auto; margin-right:auto; }
.alignfull{ max-width:100%; }
.aligncenter{ text-align:center; }
.alignleft{ float:left; margin-right:1.5rem; }
.alignright{ float:right; margin-left:1.5rem; }

/* Obrazy wyróżnione i treść wpisu */
.entry-content{ max-width:760px; margin:0 auto; }
.entry-content > *{ margin-bottom:1.4rem; }
.entry-content h2{ font-size:clamp(24px,3vw,34px); margin-top:2.4rem; margin-bottom:1rem; }
.entry-content h3{ font-size:clamp(20px,2.4vw,26px); margin-top:2rem; margin-bottom:.8rem; }
.entry-content p{ color:var(--ink); font-size:17px; line-height:1.8; }
.entry-content a{ color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.entry-content ul,.entry-content ol{ padding-left:1.4rem; color:var(--ink); }
.entry-content li{ margin-bottom:.5rem; line-height:1.7; }
.entry-content img{ border-radius:var(--radius); height:auto; }
.entry-content blockquote{
  border-left:3px solid var(--cyan); padding:.4rem 0 .4rem 1.4rem; margin:1.8rem 0;
  color:var(--ink-2); font-style:italic; font-size:19px;
}
.entry-content code{ font-family:var(--font-mono); background:var(--bg-3); padding:.15em .4em; border-radius:5px; font-size:.9em; color:var(--cyan); }
.entry-content pre{ background:var(--bg-3); border:1px solid var(--line); border-radius:var(--radius); padding:1.2rem; overflow-x:auto; }
.entry-content pre code{ background:none; padding:0; }
.wp-block-image figcaption{ text-align:center; color:var(--ink-3); font-size:14px; margin-top:.5rem; }

/* Pojedynczy wpis — nagłówek */
.single-hero{ padding:clamp(48px,6vw,80px) 0 clamp(32px,4vw,48px); border-bottom:1px solid var(--line); position:relative; }
.single-hero .wrap{ max-width:820px; }
.single-title{ font-family:var(--font-disp); font-weight:700; font-size:clamp(30px,4.6vw,52px); line-height:1.12; letter-spacing:-0.02em; margin:16px 0 20px; }
.single-featured{ max-width:1140px; margin:0 auto clamp(32px,4vw,48px); padding:0 24px; }
.single-featured img{ width:100%; border-radius:var(--radius); border:1px solid var(--line); }
.single-body{ padding:clamp(32px,4vw,48px) 0 clamp(64px,8vw,100px); }

/* Paginacja */
.wp-pagination{ display:flex; justify-content:center; gap:8px; margin-top:56px; flex-wrap:wrap; }
.wp-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink-2); font-family:var(--font-mono); font-size:14px; transition:.18s;
}
.wp-pagination .page-numbers:hover{ border-color:var(--cyan); color:var(--cyan); }
.wp-pagination .page-numbers.current{ background:var(--cyan); color:var(--bg); border-color:var(--cyan); font-weight:600; }

/* Powiązane / nawigacja wpisów */
.post-nav{ display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:820px; margin:0 auto; padding:48px 24px 0; }
.post-nav a{ display:block; padding:22px; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); transition:.2s; }
.post-nav a:hover{ border-color:var(--cyan-dim); transform:translateY(-3px); }
.post-nav .nav-label{ font-family:var(--font-mono); font-size:12px; color:var(--ink-3); display:block; margin-bottom:8px; }
.post-nav .nav-title{ color:var(--ink); font-family:var(--font-disp); font-weight:500; font-size:16px; }
.post-nav .nav-next{ text-align:right; }

/* Komentarze */
.comments-area{ max-width:760px; margin:64px auto 0; padding:0 24px; }
.comments-area h2{ font-size:24px; margin-bottom:24px; }
.comment-list{ list-style:none; }
.comment-body{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:22px; margin-bottom:16px; }
.comment-author{ font-weight:500; color:var(--ink); }
.comment-metadata{ font-size:13px; color:var(--ink-3); font-family:var(--font-mono); }
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{
  width:100%; background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:12px 15px; color:var(--ink); font-family:var(--font-body); margin-bottom:14px;
}
.comment-form textarea:focus,.comment-form input:focus{ outline:none; border-color:var(--cyan); }

/* Sidebar / widgety (opcjonalnie) */
.widget{ margin-bottom:32px; }
.widget-title{ font-family:var(--font-disp); font-size:18px; margin-bottom:14px; }

/* Formularze CF7 — dopasowanie do naszego stylu */
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=url],.wpcf7-form textarea{
  background:var(--bg); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:13px 15px; color:var(--ink); font-family:var(--font-body); font-size:16px; width:100%; margin-bottom:6px;
}
.wpcf7-form input:focus,.wpcf7-form textarea:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(45,212,191,.15); }
.wpcf7-form .wpcf7-submit{
  background:var(--coral); color:#3A1109; border:0; border-radius:var(--radius-sm);
  padding:15px 28px; font-family:var(--font-disp); font-weight:500; font-size:16px; cursor:pointer; width:100%; margin-top:10px;
  transition:transform .18s;
}
.wpcf7-form .wpcf7-submit:hover{ transform:translateY(-2px); }
.wpcf7-response-output{ border-radius:var(--radius-sm); margin-top:14px !important; font-size:14px; }

/* =====================  NEWSLETTER (MailPoet)  ===================== */
/* Dopasowanie formularza MailPoet do motywu — nadpisuje domyślne style wtyczki. */
.mailpoet_form{ background:transparent !important; padding:0 !important; max-width:none !important; }
.mailpoet_form_widget{ background:transparent !important; }
.mailpoet_paragraph{ margin:0 0 14px !important; }
.mailpoet_form h1, .mailpoet_form h2, .mailpoet_form h3, .mailpoet_form p.mailpoet_form_paragraph{
  font-family:var(--font-disp) !important; color:var(--ink) !important;
}
.mailpoet_text, .mailpoet_email, .mailpoet_form input.mailpoet_text, .mailpoet_form input.mailpoet_email{
  background:var(--bg) !important; border:1px solid var(--line-2) !important; color:var(--ink) !important;
  border-radius:var(--radius-sm) !important; padding:14px 16px !important; width:100% !important;
  font-family:var(--font-body) !important; font-size:15px !important;
}
.mailpoet_text::placeholder, .mailpoet_email::placeholder{ color:var(--ink-3) !important; }
.mailpoet_text:focus, .mailpoet_email:focus{ border-color:var(--cyan) !important; outline:none !important; }
.mailpoet_submit, .mailpoet_form input.mailpoet_submit{
  background:var(--cyan) !important; color:#04342C !important; border:0 !important;
  border-radius:var(--radius-sm) !important; padding:15px 28px !important; width:100% !important;
  font-family:var(--font-disp) !important; font-weight:500 !important; font-size:16px !important;
  cursor:pointer !important; transition:transform .18s !important; margin-top:4px !important;
}
.mailpoet_submit:hover, .mailpoet_form input.mailpoet_submit:hover{ transform:translateY(-2px) !important; }
.mailpoet_validate_success{ color:var(--cyan) !important; }
.mailpoet_validate_error{ color:var(--coral) !important; }
.mailpoet_message p{ font-size:14px !important; }

/* Admin bar fix */
.admin-bar .site-header{ top:32px; }
.admin-bar .blog-filter-wrap{ top:104px; }
@media (max-width:782px){
  .admin-bar .site-header{ top:46px; }
  .admin-bar .blog-filter-wrap{ top:0; }
}

/* Screen reader */
.screen-reader-text{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* Post-nav responsywnosc */
@media (max-width:600px){ .post-nav{ grid-template-columns:1fr; } }

/* ===================================================================
   LANDING v1.3.0 — sekcje treści budowane w Gutenbergu
   Klasy używane przez wzorce blokowe "WebDNA — Landing"
   (kategoria wzorców: webdna-landing, plik: inc/block-patterns.php)
   =================================================================== */

/* Na szablonie "Landing — usługa / branża" treść zajmuje pełną
   szerokość; każda sekcja sama pilnuje swojego wnętrza (.wrap). */
.page-template-page-landing .single-body{ padding:0; }
.page-template-page-landing .single-body > .wrap{ max-width:none; padding:0; }
.page-template-page-landing .entry-content{ max-width:none; }
.page-template-page-landing .entry-content > *{ margin-bottom:0; }

/* --- Sekcja landingowa --- */
.wdna-sec{ padding:clamp(64px,9vw,110px) 0; }
.wdna-sec .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.wdna-sec-alt{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* Rytm pionowy sekcji — jeden spójny system odstępów.
   Nagłówek (eyebrow → tytuł → podtytuł) trzyma się ciasno,
   a między blokiem nagłówka a treścią/siatką jest wyraźny, równy oddech. */
.wdna-sec .wrap > * + *{ margin-top:44px; }              /* domyślny odstęp między blokami sekcji */
.wdna-sec .wrap > .section-title{ margin-top:14px; }     /* tytuł tuż pod eyebrow */
.wdna-sec .wrap > .section-sub{ margin-top:18px; }        /* podtytuł tuż pod tytułem */
.wdna-sec .wrap > .section-sub + *{ margin-top:64px; }    /* treść po podtytule — duży oddech */
.wdna-sec .wrap > .section-title + :not(.section-sub){ margin-top:56px; } /* sekcja bez podtytułu (np. liczby w hero) */
.wdna-sec .section-eyebrow,
.wdna-sec .section-title,
.wdna-sec .section-sub{ margin-bottom:0; }
/* Siatki (Kolumny) same nie dokładają marginesu — rytm pilnuje kontener */
.wdna-sec .wrap > .wp-block-columns{ margin-top:64px; margin-bottom:0; }
/* Tabela porównawcza i przyciski dostają ten sam, większy oddech nad sobą */
.wdna-sec .wrap > .wp-block-table{ margin-top:40px; }
.wdna-sec .wrap > .wp-block-buttons{ margin-top:44px; }
/* Zabezpieczenie: wiersz CTA .wdna-btns po siatce kolumn zawsze z oddechem */
.wdna-sec .wp-block-columns + .wp-block-buttons.wdna-btns{ margin-top:40px; }
.wdna-center{ text-align:center; }
.wdna-center .section-eyebrow{ justify-content:center; }
.wdna-center .section-title,
.wdna-center .section-sub{ margin-left:auto; margin-right:auto; }

/* Odstęp między kolumnami w siatkach landingowych — spójny na desktopie */
.wdna-sec .wp-block-columns{ gap:22px; align-items:stretch; }
/* Karty w jednej siatce wyrównują wysokość — równy dolny brzeg, równe CTA */
.wdna-sec .wp-block-column.wdna-card,
.wdna-sec .wp-block-column.wdna-plan,
.wdna-sec .wp-block-column.wdna-step{ height:100%; }
@media (max-width:781px){
  /* Gdy kolumny się zwijają w pion — równy odstęp pionowy zamiast poziomego */
  .wdna-sec .wp-block-columns{ gap:18px; }
  .wdna-sec .wp-block-column{ margin-bottom:0; }
}

/* --- Karty "geny" (core/columns > core/column) --- */
.wdna-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; position:relative; overflow:hidden;
  transition:transform .22s ease, border-color .22s ease;
}
.wdna-sec-alt .wdna-card{ background:var(--bg); }
.wdna-card::after{ content:""; position:absolute; left:0; top:0; width:100%; height:3px; background:var(--gc,var(--cyan)); opacity:.85; }
.wdna-card:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.wdna-card-a{ --gc:var(--cyan); }
.wdna-card-t{ --gc:var(--coral); }
.wdna-card-g{ --gc:var(--violet); }
.wdna-card-c{ --gc:#F7DC6F; }
.wdna-card > * + *{ margin-top:12px; }
.wdna-letter{
  font-family:var(--font-disp); font-size:46px; font-weight:700; line-height:1;
  color:var(--gc,var(--cyan)); display:block; letter-spacing:-0.04em; margin-bottom:14px;
}
.wdna-card h3{ font-size:20px; }
.wdna-card p{ font-size:15px; color:var(--ink-2); line-height:1.65; }

/* --- Lista z "check" (core/list) --- */
ul.wdna-check{ list-style:none; padding:0; display:grid; gap:12px; }
ul.wdna-check li{ position:relative; padding-left:30px; color:var(--ink-2); font-size:16px; }
ul.wdna-check li::before{
  content:"✓"; position:absolute; left:0; top:2px; color:var(--cyan); font-weight:700;
  width:20px; height:20px; border:1px solid var(--cyan-dim); border-radius:5px;
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
ul.wdna-check li strong{ color:var(--ink); }

/* --- Chipy branż (core/list) --- */
ul.wdna-chips{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
ul.wdna-chips li{
  font-family:var(--font-mono); font-size:13.5px; color:var(--ink-2);
  background:var(--bg-2); border:1px solid var(--line); border-radius:99px; padding:9px 17px;
  transition:border-color .18s, color .18s;
}
ul.wdna-chips li:hover{ color:var(--ink); border-color:var(--line-2); }
.wdna-sec-alt ul.wdna-chips li{ background:var(--bg); }
.wdna-center ul.wdna-chips{ justify-content:center; }

/* --- Kroki procesu (core/columns) --- */
.wdna-step{ border-top:1px solid var(--line-2); padding:30px 22px 4px 0; position:relative; }
.wdna-step::before{ content:""; position:absolute; left:0; top:-1px; width:34px; height:3px; background:var(--cyan); }
.wdna-step > * + *{ margin-top:12px; }
.wdna-step-code{ font-family:var(--font-mono); font-size:13px; color:var(--coral); letter-spacing:1px; display:block; }
.wdna-step h3{ font-size:21px; }
.wdna-step p{ font-size:15px; color:var(--ink-2); }

/* --- Karta ceny --- */
.wdna-price{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:38px 32px; text-align:center;
}
.wdna-sec-alt .wdna-price{ background:var(--bg); }
.wdna-price > * + *{ margin-top:14px; }
.wdna-badge{
  display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--cyan); border:1px solid var(--cyan-dim);
  border-radius:99px; padding:6px 14px;
}
.wdna-price-tag{ font-family:var(--font-disp); font-size:clamp(36px,4.4vw,52px); font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.05; }
.wdna-price-tag em{ font-style:normal; color:var(--cyan); }
.wdna-price-note{ font-family:var(--font-mono); font-size:13px; color:var(--ink-3); }

/* --- Metryki / liczby (core/columns) --- */
.wdna-metric{ text-align:center; }
.wdna-metric strong{
  font-family:var(--font-disp); font-size:clamp(30px,3.4vw,44px); font-weight:600;
  color:var(--cyan); display:block; letter-spacing:-0.02em; line-height:1.1; margin-bottom:6px;
}
.wdna-metric span,.wdna-metric p{ font-size:14px; color:var(--ink-2); }
.wdna-metric:nth-child(2) strong{ color:var(--coral); }
.wdna-metric:nth-child(3) strong{ color:var(--violet); }

/* --- Tabela porównawcza (core/table.compare-table) --- */
.wp-block-table.compare-table{ margin:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.wp-block-table.compare-table table{ width:100%; border-collapse:collapse; font-size:15px; }
.wp-block-table.compare-table th,
.wp-block-table.compare-table td{ padding:15px 18px; text-align:left; border:0; border-bottom:1px solid var(--line); }
.wp-block-table.compare-table thead th{ font-family:var(--font-mono); font-size:12px; letter-spacing:.8px; text-transform:uppercase; color:var(--ink-2); background:var(--bg-3); }
.wp-block-table.compare-table td:first-child{ color:var(--ink-2); }
.wp-block-table.compare-table td:not(:first-child){ color:var(--ink); font-weight:500; }
.wp-block-table.compare-table tbody tr:last-child td{ border-bottom:0; }
@media (max-width:700px){
  .wp-block-table.compare-table{ overflow-x:auto; }
  .wp-block-table.compare-table table{ min-width:560px; }
}

/* --- FAQ (core/details w grupie .wdna-faq) --- */
.wdna-faq{ max-width:820px; }
.wdna-faq .wp-block-details{ border-bottom:1px solid var(--line); margin:0; }
.wdna-faq .wp-block-details summary{
  cursor:pointer; list-style:none; padding:24px 44px 24px 0; position:relative;
  font-family:var(--font-disp); font-size:19px; font-weight:500; color:var(--ink);
}
.wdna-faq .wp-block-details summary::-webkit-details-marker{ display:none; }
.wdna-faq .wp-block-details summary::after{
  content:"+"; position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-size:26px; color:var(--cyan); font-weight:400; transition:transform .25s;
}
.wdna-faq .wp-block-details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.wdna-faq .wp-block-details p{ color:var(--ink-2); font-size:16px; padding:0 44px 24px 0; margin:0; }
.wdna-faq .wp-block-details a{ text-decoration:underline; text-underline-offset:3px; }

/* --- Przyciski (core/buttons.wdna-btns) --- */
.wdna-btns{ gap:18px; }
/* Akapit wyjaśniający tuż pod przyciskami (np. o godzinach rozwojowych) */
.wdna-sec .wrap > .wp-block-buttons + p,
.wdna-sec .wrap > .wp-block-buttons + .wp-block-paragraph{ margin-top:26px; color:var(--ink-3); font-size:14.5px; }
.wdna-btns .wp-block-button__link{
  font-family:var(--font-disp); font-weight:500; font-size:16px;
  padding:15px 28px; border-radius:var(--radius-sm); border:1px solid transparent;
  background:var(--coral); color:#3A1109; transition:transform .18s, box-shadow .18s;
}
.wdna-btns .wp-block-button__link:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(255,107,107,.55); }
.wdna-btns .is-style-outline .wp-block-button__link{
  background:transparent; border-color:var(--line-2); color:var(--ink); box-shadow:none;
}
.wdna-btns .is-style-outline .wp-block-button__link:hover{ border-color:var(--cyan); color:var(--cyan); }
.wdna-center .wdna-btns{ justify-content:center; }

/* --- Cytat / opinia w sekcjach landingowych --- */
.wdna-sec blockquote{
  border-left:3px solid var(--cyan); padding:.4rem 0 .4rem 1.4rem;
  color:var(--ink-2); font-style:italic; font-size:19px; max-width:60ch;
}
.wdna-sec blockquote cite{ display:block; margin-top:10px; font-style:normal; font-family:var(--font-mono); font-size:13px; color:var(--ink-3); }

/* --- Drobna responsywność sekcji --- */
@media (max-width:781px){
  /* Na mniejszych ekranach sekcje i tak są niższe — skalujemy oddech proporcjonalnie */
  .wdna-sec .wrap > * + *{ margin-top:36px; }
  .wdna-sec .wrap > .section-sub + *{ margin-top:48px; }
  .wdna-sec .wrap > .section-title + :not(.section-sub){ margin-top:44px; }
  .wdna-sec .wrap > .wp-block-columns{ margin-top:48px; }
  .wdna-sec .wrap > .wp-block-buttons{ margin-top:36px; }
  .wdna-btns{ flex-direction:column; }
  .wdna-btns .wp-block-button{ width:100%; }
  .wdna-btns .wp-block-button__link{ width:100%; text-align:center; }
}
@media (max-width:600px){
  .wdna-price{ padding:30px 22px; }
  ul.wdna-chips{ gap:8px; }
  ul.wdna-chips li{ font-size:12.5px; padding:8px 14px; }
  .wdna-plan{ padding:30px 24px; }
}

/* ===================================================================
   LANDING v1.3.1 — pakiety abonamentowe + lista ostrzegawcza
   =================================================================== */

/* Lista "ostrzeżeń" — wariant checklisty z ✕ (co się dzieje bez opieki) */
ul.wdna-check.wdna-x li::before{
  content:"✕"; color:var(--coral); border-color:rgba(255,107,107,.45);
}

/* --- Karty pakietów (core/columns > core/column.wdna-plan) --- */
.wdna-plan{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 28px; position:relative;
  transition:transform .22s ease, border-color .22s ease;
}
.wdna-sec-alt .wdna-plan{ background:var(--bg); }
.wdna-plan:hover{ transform:translateY(-5px); border-color:var(--line-2); }
.wdna-plan{ display:flex; flex-direction:column; }
.wdna-plan > * + *{ margin-top:16px; }
.wdna-plan-price{ margin-top:12px !important; }        /* cena tuż pod nazwą planu */
.wdna-plan-note{ margin-top:6px !important; }          /* dopisek pod ceną */
.wdna-plan p{ margin-top:16px !important; }
.wdna-plan ul.wdna-check{ margin-top:20px !important; } /* lista wyraźnie oddzielona od opisu */
.wdna-plan-featured{
  border-color:var(--cyan-dim);
  box-shadow:0 0 0 1px var(--cyan-dim), 0 24px 50px -18px rgba(45,212,191,.18);
}
.wdna-plan-featured:hover{ border-color:var(--cyan); }
.wdna-plan-name{ font-family:var(--font-mono); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-2); }
.wdna-plan-featured .wdna-plan-name{ color:var(--cyan); }
.wdna-plan-price{ font-family:var(--font-disp); font-size:clamp(28px,3vw,36px); font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1.05; }
.wdna-plan-price em{ font-style:normal; color:var(--cyan); }
.wdna-plan-note{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-3); }
.wdna-plan p{ font-size:15px; color:var(--ink-2); }
.wdna-plan ul.wdna-check{ gap:9px; }
.wdna-plan ul.wdna-check li{ font-size:14.5px; }
.wdna-plan .wdna-btns .wp-block-button__link{ width:100%; text-align:center; }
.wdna-plan .wdna-btns .wp-block-button{ width:100%; }

/* ===================================================================
   LANDING v1.3.3 — pary "objaw → diagnoza" (usługi naprawcze)
   Struktura: core/columns > 2 x core/column
     .wdna-symptom (lewa: co widzi klient)  |  .wdna-fix (prawa: co robimy)
   Owinięte w .wdna-diag (grupa) — kolejne wiersze same się układają.
   =================================================================== */
.wdna-diag{ display:grid; gap:14px; }
.wdna-diag .wp-block-columns{ gap:0; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0; }
.wdna-sec-alt .wdna-diag .wp-block-columns{ background:var(--bg); }
.wdna-diag .wp-block-columns:hover{ border-color:var(--line-2); }
.wdna-symptom, .wdna-fix{ padding:24px 26px; }
.wdna-symptom > * + *, .wdna-fix > * + *{ margin-top:8px; }
.wdna-symptom{ border-right:1px solid var(--line); position:relative; }
.wdna-symptom::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--coral); opacity:.8; }
.wdna-diag-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.2px; text-transform:uppercase; display:block; }
.wdna-symptom .wdna-diag-tag{ color:var(--coral); }
.wdna-fix .wdna-diag-tag{ color:var(--cyan); }
.wdna-symptom h3, .wdna-fix h3{ font-size:17px; line-height:1.35; }
.wdna-symptom p, .wdna-fix p{ font-size:14.5px; color:var(--ink-2); line-height:1.6; }
@media (max-width:781px){
  .wdna-diag .wp-block-columns{ display:block; }
  .wdna-symptom{ border-right:0; border-bottom:1px solid var(--line); }
}

/* ===================================================================
   LANDING v1.3.5 — karty "przed → po" (efekt optymalizacji)
   Struktura: core/columns.wdna-beforeafter > 3 kolumny:
     .wdna-ba-before  (stan przed)  →  strzałka  →  .wdna-ba-after (po)
   =================================================================== */
.wdna-beforeafter{ align-items:stretch; }
.wdna-ba-before, .wdna-ba-after{
  border:1px solid var(--line); border-radius:var(--radius); padding:28px 26px;
  display:flex; flex-direction:column; justify-content:center; text-align:center;
}
.wdna-ba-before{ background:var(--bg-2); }
.wdna-sec-alt .wdna-ba-before{ background:var(--bg); }
.wdna-ba-after{ background:var(--bg-2); border-color:var(--cyan-dim); box-shadow:0 0 0 1px var(--cyan-dim), 0 24px 50px -20px rgba(45,212,191,.16); }
.wdna-sec-alt .wdna-ba-after{ background:var(--bg); }
.wdna-ba-before > * + *, .wdna-ba-after > * + *{ margin-top:8px; }
.wdna-ba-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--ink-3); }
.wdna-ba-after .wdna-ba-label{ color:var(--cyan); }
.wdna-ba-num{ font-family:var(--font-disp); font-size:clamp(30px,3.6vw,44px); font-weight:700; letter-spacing:-0.02em; line-height:1.05; color:var(--ink); }
.wdna-ba-before .wdna-ba-num{ color:var(--coral); }
.wdna-ba-after .wdna-ba-num{ color:var(--cyan); }
.wdna-ba-cap{ font-size:13.5px; color:var(--ink-2); }
/* Środkowa kolumna ze strzałką */
.wdna-ba-arrow{ display:flex; align-items:center; justify-content:center; }
.wdna-ba-arrow p{ font-family:var(--font-disp); font-size:34px; color:var(--cyan); line-height:1; }
@media (max-width:781px){
  .wdna-ba-arrow{ min-height:44px; }
  .wdna-ba-arrow p{ transform:rotate(90deg); }
}

/* ===================================================================
   LANDING v1.3.6 — wiersze cennikowe (usługi jednorazowe / dodatki)
   Struktura: grupa .wdna-pricelist > akapity .wdna-prow
   Każdy wiersz: nazwa (strong) ..... cena (span.wdna-prow-price)
   =================================================================== */
.wdna-pricelist{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
}
.wdna-sec-alt .wdna-pricelist{ background:var(--bg); }
.wdna-prow{
  display:flex; align-items:baseline; gap:16px;
  padding:20px 26px; margin:0 !important; border-bottom:1px solid var(--line);
  font-size:16px; color:var(--ink-2);
}
.wdna-prow:last-child{ border-bottom:0; }
.wdna-prow strong{ color:var(--ink); font-weight:600; }
.wdna-prow .wdna-prow-desc{ display:block; font-size:13.5px; font-weight:400; color:var(--ink-3); margin-top:3px; }
/* Kropkowana linia wypełniająca między nazwą a ceną */
.wdna-prow-fill{ flex:1; border-bottom:1px dotted var(--line-2); transform:translateY(-4px); min-width:24px; }
.wdna-prow-price{
  font-family:var(--font-disp); font-weight:600; font-size:17px; color:var(--cyan);
  white-space:nowrap; letter-spacing:-0.01em;
}
.wdna-prow-price.is-free{ color:var(--cyan); }
@media (max-width:600px){
  .wdna-prow{ flex-wrap:wrap; gap:6px 12px; padding:18px 20px; }
  .wdna-prow-fill{ display:none; }
  .wdna-prow-price{ font-size:16px; }
}

/* Karta pakietu: dopisek pod ceną z jednostką (np. "/ projekt") */
.wdna-plan-price small{ font-family:var(--font-body); font-size:14px; font-weight:400; color:var(--ink-3); letter-spacing:0; }

/* Nota pod cennikiem (mały disclaimer) */
.wdna-pricenote{ font-family:var(--font-mono); font-size:13px; color:var(--ink-3); text-align:center; }