/* ============================================================
   bargiel.AI — NEW page-block styles (extends styles.css)
   Blocks the canonical builder does not render yet, plus the
   "The Current" wave integration and layout variants exposed
   through Tweaks. Built on Brand System v2 tokens. Light + dark.
   ============================================================ */

/* ============================================================
   "THE CURRENT" — wave host overrides (full bleed, brand motif)
   The generator (wave.js) injects an <svg> into each [data-wave].
   ============================================================ */
[data-wave]{overflow:hidden;pointer-events:none}
[data-wave] svg{width:100%;height:100%;display:block}
/* soft fade on the cut-out photo's bottom edge so it blends into the page */
body[data-herostyle="cutout"] .photo-img{
  -webkit-mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 97%);
  mask-image:linear-gradient(to bottom,#000 68%,rgba(0,0,0,0) 97%);
}
/* repurpose the legacy motif holders into full-bleed Current fields */
.hero-wave{inset:0;top:0;right:0;left:0;width:auto;height:100%;aspect-ratio:auto;background:none!important;opacity:1}
.dna-wave{inset:0;top:0;left:0;width:auto;height:100%;aspect-ratio:auto;background:none!important;opacity:1}
.banner-inner .b-wave{display:none!important}
body[data-wave-on="off"] [data-wave]{display:none}

/* ============================================================
   HERO BACKDROP — figure stage (wave behind the picture)
   Three first-screen treatments, switched via Tweaks (data-herobg):
     plate · studio panel   disc · halo portrait   card · wave card
   A .hero-stage sits BEHIND the cut-out figure so the brand wave
   reads as a backdrop, never tangled through the silhouette.
   ============================================================ */
.hero-stage{
  position:absolute;z-index:0;pointer-events:none;
  top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:min(116%,460px);
  background:radial-gradient(58% 50% at 50% 46%,var(--paper2) 0%,var(--paper3) 42%,rgba(0,0,0,0) 76%);
}
.hero-photo .photo-img{position:relative;z-index:1}

/* give the head clearance from the header so it never crops */
@media(min-width:920px){ .hero-photo{margin-top:-12px} }

@media (prefers-color-scheme: dark){
  /* faint neutral lift instead of a blue disc — no coloured halo behind the head */
  .hero-stage{background:radial-gradient(56% 48% at 50% 46%,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0) 70%)}
}

/* ============================================================
   STAKES — shared section rhythm
   ============================================================ */
.stakes .section-head{margin-bottom:clamp(20px,2.8vw,32px)}
.stk{display:none}

/* shared bits reused across variants */
.results-label{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--tx-soft);display:inline-flex;align-items:center;gap:10px;
}
.results-label::before{content:"";width:18px;height:1px;background:var(--accent)}
.field-label{
  font-family:var(--fm);font-size:11px;font-weight:500;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--mu);display:inline-flex;align-items:center;gap:9px;white-space:nowrap;flex-shrink:0;
}
.field-label::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mu);box-sizing:border-box}
/* drop the dot before "THE FIELD" labels */
.field-label::before{display:none}
.stakes-note{
  font-family:var(--fm);font-size:11.5px;letter-spacing:0.03em;color:var(--mu);
  margin-top:8px;line-height:1.5;
}

/* ---------- field panel | results list (live: split) ---------- */
body[data-stakes="split"] .stk-split{display:grid;grid-template-columns:1fr;gap:clamp(20px,3vw,34px)}
@media(min-width:820px){
  body[data-stakes="split"] .stk-split{grid-template-columns:0.92fr 1.08fr;gap:clamp(34px,4.5vw,64px);align-items:stretch}
}
.split-field{
  background:var(--paper3);border:1px solid var(--line);border-radius:14px;
  padding:clamp(28px,3.6vw,44px);display:flex;flex-direction:column;justify-content:center;gap:16px;
  position:relative;overflow:hidden;
}
/* "95%" field box — violet (approved; brand indigo→violet) */
body[data-stakes="split"] .split-field{
  background:linear-gradient(150deg,#3E2BC4 0%,#6D2FD6 52%,#8B3BE8 100%);
  border-color:rgba(255,255,255,0.16);
}
body[data-stakes="split"] .split-field .field-label{color:rgba(255,255,255,0.82)}
body[data-stakes="split"] .split-num{color:#fff}
body[data-stakes="split"] .split-claim{color:rgba(255,255,255,0.88)}
body[data-stakes="split"] .split-src{color:rgba(255,255,255,0.78)}
/* source as a link */
a.split-src{text-decoration:none;transition:color .18s ease}
a.split-src:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
a.split-src .ext{opacity:0.7;margin-left:3px}
a.split-src:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.split-num{font-family:var(--fd);font-weight:700;font-size:clamp(3.6rem,9vw,6rem);line-height:0.82;letter-spacing:-0.03em;color:var(--mu)}
.split-claim{font-size:clamp(1.06rem,1.6vw,1.26rem);color:var(--tx-soft);font-weight:500;max-width:26ch;line-height:1.4;text-wrap:pretty}
.split-src{font-family:var(--fm);font-size:11px;letter-spacing:0.06em;color:var(--mu)}
.split-results{display:flex;flex-direction:column;gap:8px;justify-content:center}
.split-list{list-style:none;display:flex;flex-direction:column;margin-top:8px}
.split-list li{display:flex;flex-direction:column;gap:8px;padding:clamp(18px,2.6vw,26px) 0;border-top:1px solid var(--line)}
.split-list li:first-child{border-top:none}
.sl-num{font-family:var(--fd);font-weight:700;font-size:clamp(1.7rem,2.4vw,2.15rem);line-height:1;color:var(--accent);letter-spacing:-0.01em}
.sl-cap{font-size:1.0rem;color:var(--tx-soft);line-height:1.46;text-wrap:pretty}
/* "Delivered, in production" — stacked: number leads, caption beneath, hairline rules */
.split-list li{flex-direction:column;align-items:flex-start;gap:8px}

/* ============================================================
   FAQ — grouped accordion. 4 categories, native <details>.
   ============================================================ */
.faq-cat{
  display:grid;grid-template-columns:1fr;gap:clamp(8px,1.4vw,16px);
  padding-top:clamp(30px,4vw,46px);margin-top:clamp(30px,4vw,46px);
  border-top:1px solid var(--line);
}
.faq-cat:first-of-type{border-top:none;margin-top:0;padding-top:0}
.faq-cat-label{align-self:start}
.faq-cat-title{font-family:var(--fm);font-size:13px;font-weight:500;letter-spacing:0.13em;text-transform:uppercase;color:var(--tx);line-height:1.45}
.faq-cat-count{font-family:var(--fm);font-size:11.5px;letter-spacing:0.05em;color:var(--mu);margin-top:10px;display:flex;align-items:center;gap:9px}
.faq-cat-count::before{content:"";width:16px;height:1px;background:var(--accent)}

.faq-list{display:flex;flex-direction:column}
.faq-item{border-top:1px solid var(--line)}
.faq-item:first-child{border-top:none}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,24px);justify-content:space-between;
  padding:clamp(18px,2.3vw,23px) 0;
  font-family:var(--fd);font-weight:700;font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.32;letter-spacing:-0.005em;
  color:var(--ink);transition:color .18s ease;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{flex:1;text-wrap:pretty}
.faq-item summary:hover{color:var(--accent)}
.faq-item summary:focus-visible{outline:2px solid #6366F1;outline-offset:3px;border-radius:4px}
.faq-mark{
  flex-shrink:0;width:26px;height:26px;border-radius:6px;position:relative;margin-top:1px;
  border:1px solid var(--line-2);transition:border-color .18s ease,background .18s ease,color .18s ease;
}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:50%;top:50%;background:currentColor;border-radius:1px;transition:transform .24s cubic-bezier(.4,0,.2,1),opacity .2s ease}
.faq-mark::before{width:12px;height:1.7px;transform:translate(-50%,-50%)}
.faq-mark::after{width:1.7px;height:12px;transform:translate(-50%,-50%)}
.faq-item summary:hover .faq-mark{border-color:var(--accent)}
.faq-item[open] .faq-mark{border-color:var(--accent);background:var(--accent);color:#fff}
.faq-item[open] .faq-mark::before{transform:translate(-50%,-50%) rotate(180deg)}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}
.faq-a{padding:0 clamp(0px,4vw,44px) clamp(22px,2.6vw,28px) 0;margin:0;max-width:64ch}
.faq-a p{font-size:1.0rem;line-height:1.62;color:var(--tx-soft);text-wrap:pretty}
.faq-a p + p{margin-top:14px}
html.js .faq-item[open] .faq-a{animation:faqIn .32s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(min-width:820px){.faq-cat{grid-template-columns:minmax(190px,250px) 1fr;gap:clamp(32px,4.5vw,60px)}}

/* "Profile and CV" link — its own line under the direct-contact email · phone */
.cta-direct-profile{
  width:100%;margin-top:12px;padding-top:14px;border-top:1px solid var(--line-dk);
}
/* mobile: left-align the Profile and CV link; its top padding matches
   .cta-final's bottom padding so the link sits vertically centred between its
   divider line above and the footer's bottom line below */
@media(max-width:899px){
  .cta-direct-profile{justify-content:flex-start;text-align:left;padding-top:clamp(44px,6vw,72px);padding-bottom:0}
}

@media(prefers-reduced-motion:reduce){
  .stat-tile:hover,.cw-card:hover{transform:none}
  html.js .faq-item[open] .faq-a{animation:none}
}

/* ============================================================
   DARK MODE — new blocks. Follows OS preference (no toggle).
   ============================================================ */
@media (prefers-color-scheme: dark){
  .stat-tile{background:#242E62;border-color:rgba(255,255,255,0.10)}
  .ledger{background:#242E62;border-color:rgba(255,255,255,0.10)}
  .sl-num,.cwc-num{color:#A5B4FC}
  .cw-big{-webkit-text-stroke-color:rgba(130,140,178,0.5)}
  .faq-item summary{color:#F4F6FF}
}

/* ============================================================
   LANGUAGE — the /pl/ version is URL-only (no on-page switcher
   or banner by decision 2026-06-04; hreflang + sitemap stay).
   Only the PL testimonials note remains as a visual element.
   ============================================================ */
.ts-note{font-size:13px;color:var(--tx-soft,#5A6072);margin:6px 0 0}