/* Wyglad B Radar Studio: ten sam uklad i HTML, wlasny charakter.
   Kierunek: plakat redakcyjny. Chlodna biel, kobalt jako kolor marki, zolty marker na jednym slowie,
   szeryfowy Newsreader prosty (bez kursywy) w naglowkach, DM Sans w tekscie, zaokraglone karty i przyciski.
   Wszystkie reguly pod html[data-wyglad="b"]. Fonty: Newsreader i DM Sans (OFL), lokalnie. */

@font-face{font-family:"Radar Serif";src:url(assets/fonts/b/newsreader-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Radar Serif";src:url(assets/fonts/b/newsreader-latin-ext.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Radar Sans";src:url(assets/fonts/b/dm-sans-n-latin.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2191,U+2193}
@font-face{font-family:"Radar Sans";src:url(assets/fonts/b/dm-sans-n-latin-ext.woff2) format("woff2");font-weight:400 800;font-display:swap;unicode-range:U+0100-024F,U+1E00-1EFF}

html[data-wyglad="b"]{
  --bg:#f3f4f6;--ink:#14161b;--ink-2:#30343c;--muted:#5d6370;--line:#dfe2e8;--line-2:#c9ced8;--panel:#e8ebf1;
  --red:#2747e6;--red-ink:#2140d6;--red-on-dark:#ffd23f;
  --kobalt:#2747e6;--kobalt-2:#1d36b8;--zolty:#ffd23f;--karta:#ffffff;
  --display:"Radar Serif",Georgia,serif;--sans:"Radar Sans","Segoe UI",system-ui,sans-serif;--mono:"Radar Sans","Segoe UI",system-ui,sans-serif;
  --r:20px;--r-s:12px;
}
html[data-wyglad="b"] body{background:var(--bg)}
html[data-wyglad="b"] ::selection{background:var(--zolty);color:var(--ink)}
html[data-wyglad="b"] .grid-overlay,html[data-wyglad="b"] .grid-toggle{display:none}

/* Naglowki: prosty szeryf, lzejszy, ciasny */
html[data-wyglad="b"] .hero-title,
html[data-wyglad="b"] .mod-head h2,html[data-wyglad="b"] .raport-copy h2,html[data-wyglad="b"] .about-copy h2{font-family:var(--display);font-weight:500;letter-spacing:-.035em;line-height:1.02}
html[data-wyglad="b"] .hero-title{font-size:clamp(2.7rem,5.6vw,6rem);max-width:14ch}
html[data-wyglad="b"] .hero-title .dot{color:var(--kobalt)}
html[data-wyglad="b"] .ak{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--kobalt);background:linear-gradient(transparent 62%,var(--zolty) 62%,var(--zolty) 92%,transparent 92%);padding:0 .06em}
html[data-wyglad="b"] .dark .ak{color:#fff;background:linear-gradient(transparent 74%,var(--zolty) 74%,var(--zolty) 88%,transparent 88%)}
html[data-wyglad="b"] h3,html[data-wyglad="b"] .checks li,html[data-wyglad="b"] .checks-line,html[data-wyglad="b"] .people-line,
html[data-wyglad="b"] .faq-list summary,html[data-wyglad="b"] .q legend,html[data-wyglad="b"] .oc-name,html[data-wyglad="b"] .concept-t,
html[data-wyglad="b"] .facts b,html[data-wyglad="b"] .plan-price b,html[data-wyglad="b"] .step-n,html[data-wyglad="b"] .footer-big,
html[data-wyglad="b"] .brief-head p,html[data-wyglad="b"] .q-contact-t,html[data-wyglad="b"] .result-dir,html[data-wyglad="b"] .steps-bar p,html[data-wyglad="b"] .logo-name{font-family:var(--display);letter-spacing:-.02em}
html[data-wyglad="b"] .footer-big{font-weight:500}

/* Etykiety: bez maszynopisu, male wersaliki w DM Sans */
html[data-wyglad="b"] .hero-meta,html[data-wyglad="b"] .mod-num,html[data-wyglad="b"] .oc-label,html[data-wyglad="b"] .concept-tag,
html[data-wyglad="b"] .quiz-step,html[data-wyglad="b"] .q-n,html[data-wyglad="b"] .brief-rows dt,html[data-wyglad="b"] .brief-note-k,
html[data-wyglad="b"] .result-k,html[data-wyglad="b"] .contact-list span,html[data-wyglad="b"] .site-footer h2,html[data-wyglad="b"] .concept-n,html[data-wyglad="b"] .plan-k{font-family:var(--sans);letter-spacing:.08em}

/* Naglowek strony */
html[data-wyglad="b"] .site-header{background:rgba(243,244,246,.92);backdrop-filter:saturate(1.4) blur(10px)}
html[data-wyglad="b"] .logo-mark{background:var(--kobalt)}
html[data-wyglad="b"] .logo-mark::after{background:var(--zolty)}
html[data-wyglad="b"] .logo-name{font-size:1.3rem;font-weight:600}
html[data-wyglad="b"] .logo-name b{color:var(--kobalt);font-weight:500}
html[data-wyglad="b"] .nav a{font-weight:500}
html[data-wyglad="b"] .nav a::after{height:3px;border-radius:2px;background:var(--zolty)}
html[data-wyglad="b"] .nav .nav-report{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:9px 16px}
html[data-wyglad="b"] .nav .nav-report:hover{background:var(--kobalt)}
html[data-wyglad="b"] .header-phone svg{color:var(--kobalt)}
html[data-wyglad="b"] .menu-toggle,html[data-wyglad="b"] .header-phone{border-radius:999px}
html[data-wyglad="b"] .menu-toggle{background:var(--karta)}
html[data-wyglad="b"] .mobile-menu{background:var(--bg)}
html[data-wyglad="b"] .mobile-menu a{font-family:var(--display);font-weight:500}
html[data-wyglad="b"] .mobile-menu .mm-report{border-radius:999px;background:var(--kobalt);font-family:var(--sans)}

/* Przyciski: pigulki */
html[data-wyglad="b"] .btn{border-radius:999px;font-weight:700;min-height:56px}
html[data-wyglad="b"] .btn-red{background:var(--kobalt);color:#fff}
html[data-wyglad="b"] .btn-red:hover{background:var(--ink)}
html[data-wyglad="b"] .btn-line{border-color:var(--line-2);background:var(--karta)}
html[data-wyglad="b"] .btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
html[data-wyglad="b"] .dark .btn-red,html[data-wyglad="b"] .plan-main .btn-red{background:var(--zolty);color:var(--ink)}
html[data-wyglad="b"] .dark .btn-red:hover,html[data-wyglad="b"] .plan-main .btn-red:hover{background:#fff;color:var(--ink)}
html[data-wyglad="b"] .btn-line-light{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
html[data-wyglad="b"] .btn-line-light:hover{background:#fff;color:var(--ink)}
html[data-wyglad="b"] :focus-visible{outline-color:var(--kobalt)}

/* Hero */
html[data-wyglad="b"] .hero{padding-bottom:clamp(56px,7vw,96px)}
html[data-wyglad="b"] .hero-meta{border:0;padding:0;gap:10px}
html[data-wyglad="b"] .hero-meta span{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--karta);color:var(--ink-2);font-weight:600;font-size:.74rem}
html[data-wyglad="b"] .hero-meta span:first-child{background:var(--ink);color:#fff}
html[data-wyglad="b"] .hero-txt p{font-size:1.3rem}
html[data-wyglad="b"] .hero-koncepcja{border:0;border-radius:var(--r);overflow:hidden;background:var(--karta);box-shadow:0 30px 60px -30px rgba(20,22,27,.35);transform:rotate(1.2deg)}
html[data-wyglad="b"] .hero-koncepcja .oc-body{border-top:0;display:flex;align-items:center;gap:10px}
html[data-wyglad="b"] .hero-koncepcja .oc-label{color:var(--ink-2);font-weight:700}
html[data-wyglad="b"] .hero-koncepcja .oc-label::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--zolty);box-shadow:0 0 0 3px rgba(255,210,63,.35)}
html[data-wyglad="b"] .facts{gap:12px}
html[data-wyglad="b"] .facts li{border:0;padding:18px 20px;border-radius:var(--r-s);background:var(--karta)}
html[data-wyglad="b"] .facts li:first-child{background:var(--kobalt)}
html[data-wyglad="b"] .facts li:first-child b{color:#fff}
html[data-wyglad="b"] .facts b{font-weight:500;font-size:clamp(1.2rem,1.7vw,1.6rem)}

/* Sekcje */
html[data-wyglad="b"] .mod-num{gap:12px;color:var(--muted);font-weight:700}
html[data-wyglad="b"] .mod-num span{min-width:30px;height:30px;border-radius:50%;background:var(--zolty);color:var(--ink);font-family:var(--sans)}
html[data-wyglad="b"] .mod-num::after{display:none}
html[data-wyglad="b"] .dark{background:var(--kobalt)}
html[data-wyglad="b"] .dark .mod-num{color:rgba(255,255,255,.8)}
html[data-wyglad="b"] .dark .mod-lead,html[data-wyglad="b"] .step p,html[data-wyglad="b"] .raport-copy p:not(.mod-num){color:rgba(255,255,255,.86)}

/* Dla kogo: karty */
html[data-wyglad="b"] .checks{gap:14px}
html[data-wyglad="b"] .checks li{border:0;padding:26px;border-radius:var(--r);background:var(--karta);font-weight:500;font-size:1.3rem;line-height:1.3}
html[data-wyglad="b"] .checks svg{width:40px;height:40px;padding:8px;border-radius:50%;background:var(--zolty);color:var(--ink)}
html[data-wyglad="b"] .checks-line{font-weight:500;color:var(--kobalt)}

/* Przyklady */
html[data-wyglad="b"] .concept picture{border:0;border-radius:var(--r);box-shadow:0 18px 40px -26px rgba(20,22,27,.45)}
html[data-wyglad="b"] .concept-tag{border-radius:999px;padding:6px 10px;background:var(--karta);color:var(--ink-2)}
html[data-wyglad="b"] .concept-t{font-weight:500}
html[data-wyglad="b"] .car-btn{border-radius:50%;border-color:var(--line-2);background:var(--karta)}

/* Pakiety */
html[data-wyglad="b"] .plans{gap:16px}
html[data-wyglad="b"] .plan{border:0;border-radius:var(--r);background:var(--karta);padding:34px}
html[data-wyglad="b"] .plan-main{background:var(--kobalt)}
html[data-wyglad="b"] .plan h3{font-family:var(--sans);font-weight:700;font-size:1rem;letter-spacing:.1em}
html[data-wyglad="b"] .plan-k{display:none}
html[data-wyglad="b"] .plan-price b{font-weight:500;font-size:clamp(2.6rem,4vw,3.6rem)}
html[data-wyglad="b"] .plan li{border-top:0;padding:7px 0 7px 26px;position:relative}
html[data-wyglad="b"] .plan li::before{content:"";position:absolute;left:0;top:15px;width:12px;height:12px;border-radius:50%;background:var(--zolty)}
html[data-wyglad="b"] .plan-main .plan-price,html[data-wyglad="b"] .plan-main .plan-d{color:rgba(255,255,255,.88)}

/* Diagnoza */
html[data-wyglad="b"] .konsultacja{background:var(--panel)}
html[data-wyglad="b"] .quiz-form,html[data-wyglad="b"] .brief{border:0;border-radius:var(--r);overflow:hidden}
html[data-wyglad="b"] .brief-head{background:var(--ink)}
html[data-wyglad="b"] .opt{border-radius:var(--r-s);border-color:var(--line)}
html[data-wyglad="b"] .opt:has(input:checked){background:var(--kobalt);border-color:var(--kobalt)}
html[data-wyglad="b"] .opt:has(input:checked)::before{background:var(--zolty);border-color:var(--zolty)}
html[data-wyglad="b"] .quiz-progress,html[data-wyglad="b"] .quiz-progress i{border-radius:3px}
html[data-wyglad="b"] .result{border-left:0;border-radius:var(--r-s);background:#fff8dc}
html[data-wyglad="b"] .brief-person picture{border-radius:50%}

/* Proces (sekcja zastapiona makieta, reguly zostaja dla zgodnosci ukladu) */
html[data-wyglad="b"] .step::before{background:rgba(255,255,255,.3)}
html[data-wyglad="b"] .step::after{background:var(--zolty)}
html[data-wyglad="b"] .step-n{font-weight:400;color:var(--zolty)}
html[data-wyglad="b"] .steps-bar{border-top-color:rgba(255,255,255,.3)}
html[data-wyglad="b"] .steps-bar p{font-weight:500;font-size:1.3rem}

/* Kto */
html[data-wyglad="b"] .person{border:0;border-radius:var(--r);overflow:hidden;background:var(--karta)}
html[data-wyglad="b"] .person .oc-body{border-top:0;border-left:0}
html[data-wyglad="b"] .person .oc-name{font-weight:500;font-size:1.5rem}
html[data-wyglad="b"] .people-line{font-weight:500;color:var(--kobalt)}

/* Pytania */
html[data-wyglad="b"] .faq-list{border-top:0;display:grid;gap:10px}
html[data-wyglad="b"] .faq-list details{border:0;border-radius:var(--r-s);background:var(--karta);padding:0 22px}
html[data-wyglad="b"] .faq-list summary{font-weight:500;font-size:1.25rem}
html[data-wyglad="b"] .faq-list summary::before,html[data-wyglad="b"] .faq-list summary::after{right:2px}
html[data-wyglad="b"] .faq-list details[open] summary::before{background:var(--kobalt)}
html[data-wyglad="b"] .faq-list summary:hover{color:var(--kobalt)}

/* Formularz */
html[data-wyglad="b"] .kontakt{border-top:0}
html[data-wyglad="b"] .contact-form{border:0;border-radius:var(--r);background:var(--karta)}
html[data-wyglad="b"] .contact-list{border-top:0}
html[data-wyglad="b"] .contact-list li{font-size:1.1rem}
html[data-wyglad="b"] .field::after{background:var(--kobalt)}
html[data-wyglad="b"] .form-status{border-left:0;border-radius:var(--r-s);background:#fff8dc;color:var(--ink)}

/* Stopka i pasek na telefonie */
html[data-wyglad="b"] .site-footer{background:var(--ink);color:#fff;border-top:0}
html[data-wyglad="b"] .site-footer .logo-name b{color:var(--zolty)}
html[data-wyglad="b"] .footer-big span{color:var(--zolty)}
html[data-wyglad="b"] .footer-grid,html[data-wyglad="b"] .footer-bottom{border-color:rgba(255,255,255,.18)}
html[data-wyglad="b"] .footer-brand p,html[data-wyglad="b"] .site-footer h2,html[data-wyglad="b"] .footer-bottom{color:rgba(255,255,255,.7)}
html[data-wyglad="b"] .footer-bottom a{color:#fff}
html[data-wyglad="b"] .site-footer li a:hover{color:var(--zolty)}
html[data-wyglad="b"] .mbar a:nth-child(2){background:var(--kobalt)}

/* Od makiety do strony */
html[data-wyglad="b"] .stage{border:0;border-radius:var(--r);overflow:hidden;background:var(--karta);box-shadow:0 24px 50px -30px rgba(20,22,27,.35)}
html[data-wyglad="b"] .mk-badge{border-radius:999px;background:var(--zolty);color:var(--ink);font-family:var(--sans)}
html[data-wyglad="b"] .mk-ready{border:0;border-radius:var(--r-s);box-shadow:0 14px 30px -14px rgba(20,22,27,.4)}
html[data-wyglad="b"] .ss-num{font-family:var(--sans);color:var(--kobalt);font-weight:700}
html[data-wyglad="b"] .story-step h3{font-weight:500}
html[data-wyglad="b"] .story-stage-wrap{background:var(--bg)}

/* Bezplatny podglad */
html[data-wyglad="b"] .raport-points li{color:#fff}
html[data-wyglad="b"] .raport-points li::before{border-radius:50%;background:var(--zolty)}
html[data-wyglad="b"] .raport-card{border:0;border-radius:var(--r);background:var(--karta);color:var(--ink)}
html[data-wyglad="b"] .rc-top{color:var(--muted);font-family:var(--sans)}
html[data-wyglad="b"] .rc-url{color:var(--kobalt)}
html[data-wyglad="b"] .rc-rows li{color:var(--ink-2);border-bottom-color:var(--line)}
html[data-wyglad="b"] .rc-rows b{color:var(--muted);font-family:var(--sans)}
html[data-wyglad="b"] .rc-foot{color:var(--ink-2);border-top-color:var(--line)}

/* Kontakt, dymek, przyklady */
html[data-wyglad="b"] .after{border-radius:var(--r);overflow:hidden}
html[data-wyglad="b"] .after-person picture{border-radius:50%}
html[data-wyglad="b"] .nudge{border:0;border-radius:var(--r-s);border-top:5px solid var(--kobalt)}
html[data-wyglad="b"] .concept-d{color:var(--ink-2)}
html[data-wyglad="b"] .oc-who .oc-name{font-family:var(--display);font-weight:500}

@media (max-width:767px){
  html[data-wyglad="b"] .hero-title{font-size:clamp(2.3rem,10.4vw,3.2rem)}
  html[data-wyglad="b"] .hero-koncepcja{transform:none}
  html[data-wyglad="b"] .hero-meta span:nth-child(2){display:inline-flex}
  html[data-wyglad="b"] .checks li{padding:20px;font-size:1.12rem}
  html[data-wyglad="b"] .plan{padding:24px}
  html[data-wyglad="b"] .person .oc-name{font-size:1.15rem}
  html[data-wyglad="b"] .faq-list details{padding:0 16px}
  html[data-wyglad="b"] .faq-list summary{font-size:1.08rem}
}