:root{
  --green:#0C7951;
  --green-deep:#0A5C3E;
  --accent-hi:#12A069;
  --focus:#E8630A;
  --bg:#F3F6F4;
  --ink:#0D1512;
  --ink-mid:rgba(13,21,18,.58);
  --ink-dim:rgba(13,21,18,.18);
  --line:rgba(13,21,18,.1);
  --card:rgba(255,255,255,.72);
  --card-strong:#fff;
  --dark:#070C0A;
  --dark-soft:#0B120F;
  --dark-line:rgba(255,255,255,.13);
  --mono:'JetBrains Mono',monospace;
  --display:"Archivo",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --body:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  min-height:100vh;
  overflow-x:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(243,246,244,0) 260px),
    var(--bg);
  color:var(--ink);
  font-family:var(--body);
}
a{color:inherit;text-decoration:none}

.grain{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}

.bb-nav{
  position:fixed;
  top:18px;
  left:50%;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:min(92vw,760px);
  min-height:56px;
  padding:8px 12px;
  transform:translateX(-50%);
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  box-shadow:0 18px 44px -28px rgba(13,21,18,.4);
  backdrop-filter:blur(14px);
}
.bb-nav__group{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
}
.bb-nav__group--left{justify-content:flex-end}
.bb-nav__group--right{justify-content:flex-start}
.bb-nav__mark{
  position:relative;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  flex:0 0 48px;
  padding:0;
  border-radius:16px;
  background:rgba(255,255,255,.48);
  border:1px solid rgba(13,21,18,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46),0 18px 34px -28px rgba(7,17,13,.6);
  isolation:isolate;
}
.bb-nav__mark::before{
  content:"";
  position:absolute;
  right:1px;
  bottom:0;
  width:24px;
  height:24px;
  border-radius:9px;
  background:radial-gradient(circle,rgba(88,208,82,.62) 0,rgba(88,208,82,.28) 34%,rgba(88,208,82,0) 72%);
  filter:blur(7px);
  transform:translate(22%,22%);
  z-index:-1;
}
.bb-nav__mark img{
  width:25px;
  height:auto;
  display:block;
}
.bb-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 13px;
  border-radius:999px;
  color:var(--ink-mid);
  font-size:13px;
  font-weight:600;
}
.bb-nav a:hover,
.bb-nav a[aria-current="page"]{
  background:rgba(13,21,18,.05);
  color:var(--ink);
}

.bb-page{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:132px 0 74px;
}
.bb-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:44px;
  align-items:end;
  min-height:560px;
  padding:72px;
  border:1px solid var(--line);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.46)),
    repeating-linear-gradient(90deg,rgba(13,21,18,.035) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(13,21,18,.03) 0 1px,transparent 1px 56px);
  box-shadow:0 28px 70px -52px rgba(13,21,18,.6);
}
.bb-hero__copy{min-width:0}
.bb-kicker{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  min-height:32px;
  margin-bottom:18px;
  padding:0 14px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  color:var(--green);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
}
.bb-hero h1{
  max-width:860px;
  font-family:var(--display);
  font-size:48px;
  line-height:1.2;
  font-weight:900;
  font-stretch:116%;
  letter-spacing:0;
  text-transform:uppercase;
}
.bb-hero h1 span{color:var(--green)}
.bb-hero__intro{
  max-width:720px;
  margin-top:28px;
  color:var(--ink-mid);
  font-size:20px;
  line-height:1.6;
}
.bb-hero__intro b,
.bb-hero__intro strong{color:var(--ink)}
.bb-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:34px;
}
.bb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.bb-btn:hover{transform:translateY(-2px);background:#fff}
.bb-btn.primary{
  border-color:var(--green);
  background:var(--green);
  color:#fff;
}
.bb-btn.ghost{color:var(--ink-mid)}

.image-panel{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(7,12,10,.96),rgba(13,21,18,.82)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 42px);
  box-shadow:0 24px 70px -44px rgba(13,21,18,.75);
}
.image-panel img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.image-panel__empty{
  display:grid;
  align-content:end;
  min-height:100%;
  padding:22px;
  color:#EDF3F0;
}
.image-panel__empty span{
  width:max-content;
  min-height:28px;
  margin-bottom:12px;
  padding:7px 10px;
  border-radius:999px;
  background:var(--focus);
  font-family:var(--mono);
  font-size:10px;
  text-transform:uppercase;
}
.image-panel__empty b{
  max-width:260px;
  color:#fff;
  font-family:var(--display);
  font-size:28px;
  line-height:1;
  font-weight:850;
  text-transform:uppercase;
}
.bb-device{
  aspect-ratio:4/5;
  border-radius:30px;
}
.bb-device::after{
  content:"";
  position:absolute;
  inset:18px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  pointer-events:none;
}
.bb-showcase{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  grid-template-areas:"wide wide" "left right";
  gap:14px;
  margin-top:26px;
}
.bb-showcase .wide{
  grid-area:wide;
  aspect-ratio:16/7;
  background:linear-gradient(135deg,var(--green),var(--dark));
}
.bb-showcase .tall{aspect-ratio:1/1.1}
.bb-showcase .tall:nth-child(2){grid-area:left}
.bb-showcase .tall:nth-child(3){grid-area:right}

.bb-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:26px;
}
.bb-metric{
  min-height:128px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--dark-soft);
  color:#EDF3F0;
}
.bb-metric b{
  display:block;
  color:var(--accent-hi);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
}
.bb-metric span{
  display:block;
  margin-top:24px;
  color:rgba(237,243,240,.72);
  font-size:15px;
  line-height:1.45;
}

.bb-section{
  margin-top:26px;
  padding:48px;
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--card);
}
.bb-grid-2{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:44px;
  align-items:start;
}
.bb-section h2{
  font-family:var(--display);
  font-size:46px;
  line-height:1;
  font-weight:850;
  font-stretch:112%;
  letter-spacing:0;
  text-transform:uppercase;
}
.bb-copy{
  display:grid;
  gap:18px;
  color:var(--ink-mid);
  font-size:17px;
  line-height:1.75;
}
.bb-copy b{color:var(--ink)}
.bb-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:26px;
}
.bb-head p{
  max-width:430px;
  color:var(--ink-mid);
  font-size:15px;
  line-height:1.65;
}

.swatches{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
.swatch{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:168px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--c);
}
.swatch span{
  font-family:var(--mono);
  font-size:11px;
}
.swatch b{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
}
.swatch.light{color:var(--ink)}
.swatch.dark{color:#fff}

.type-stack{
  display:grid;
  gap:12px;
}
.type-card{
  min-height:96px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.74);
}
.type-card.display{
  font-family:var(--display);
  font-size:54px;
  line-height:1;
  font-weight:900;
  font-stretch:116%;
  text-transform:uppercase;
  color:var(--green);
}
.type-card.body{
  color:var(--ink-mid);
  font-size:18px;
  line-height:1.65;
}
.type-card.mono{
  min-height:64px;
  color:var(--focus);
  font-family:var(--mono);
  font-size:13px;
  line-height:1.6;
}

.component-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.sample-card{
  min-height:290px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card-strong);
}
.sample-card h3{
  margin-top:22px;
  font-family:var(--display);
  font-size:28px;
  line-height:1;
  font-weight:850;
  font-stretch:112%;
  letter-spacing:0;
}
.sample-card p{
  margin-top:14px;
  color:var(--ink-mid);
  font-size:15px;
  line-height:1.65;
}
.sample-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  background:#2B2D2C;
  color:#fff;
  font-size:12px;
  font-weight:600;
}
.sample-kicker span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#58D052;
}
.sample-actions{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:22px;
}
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tags span{
  min-height:30px;
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(243,246,244,.88);
  color:var(--green);
  font-family:var(--mono);
  font-size:11px;
}
.sample-card.dark{
  border-color:var(--dark-line);
  background:var(--dark-soft);
  color:#EDF3F0;
}
.sample-card.dark p{color:rgba(237,243,240,.62)}
.sample-card.dark .sample-kicker{
  border:1px solid var(--dark-line);
  background:rgba(255,255,255,.06);
  color:#2FD08C;
}

.voice-list{
  display:grid;
  gap:12px;
}
.voice-list div{
  min-height:70px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.74);
  color:var(--ink-mid);
  font-size:16px;
  line-height:1.6;
}
.voice-list b{color:var(--ink)}

.rules-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.rule{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:14px;
  min-height:104px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.74);
}
.rule b{
  color:var(--focus);
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
}
.rule span{
  color:var(--ink-mid);
  font-size:15px;
  line-height:1.55;
}

.bb-assets{
  margin-top:clamp(72px,10vw,150px);
  padding:clamp(46px,6vw,86px) 0 0;
  border-top:1px solid var(--line);
  scroll-margin-top:112px;
}
.bb-assets h2{
  font-family:var(--display);
  font-size:clamp(42px,5vw,78px);
  line-height:1;
  font-weight:720;
  letter-spacing:0;
}
.bb-assets__head p{max-width:600px}
.asset-specs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.asset-spec{
  display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(300px,1.28fr);
  gap:18px 24px;
  min-height:190px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.74);
}
.asset-spec__name{
  color:var(--ink);
  font-family:var(--display);
  font-size:24px;
  font-weight:800;
  line-height:1.05;
  text-transform:uppercase;
}
.asset-spec__meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.asset-spec__meta span{
  min-width:0;
  color:var(--ink);
  font-family:var(--mono);
  font-size:12px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.asset-spec__meta small{
  display:block;
  margin-bottom:6px;
  color:var(--ink-mid);
  font-family:var(--body);
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
}
.asset-spec p{
  grid-column:1/-1;
  align-self:end;
  color:var(--ink-mid);
  font-size:14px;
  line-height:1.55;
}
.asset-rules{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.asset-rule{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:12px;
  min-height:92px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--dark-soft);
  color:#EDF3F0;
}
.asset-rule b{
  color:#2FD08C;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
}
.asset-rule span{font-size:14px;line-height:1.5}

.bb-footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  width:min(1120px,calc(100% - 40px));
  margin:0 auto 28px;
  padding:22px 4px 0;
  color:var(--ink-mid);
  font-size:13px;
}
.bb-footer a{
  color:var(--green);
  font-weight:800;
}

@media(max-width:980px){
  .bb-page{width:min(100% - 28px,720px);padding-top:116px}
  .bb-hero{grid-template-columns:1fr;min-height:auto;padding:50px 34px}
  .bb-hero h1{font-size:64px}
  .bb-hero__intro{font-size:18px}
  .bb-grid-2{grid-template-columns:1fr;gap:22px}
  .bb-section{padding:34px}
  .bb-section h2{font-size:38px}
  .bb-head{display:grid;gap:16px}
  .swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .component-grid{grid-template-columns:1fr}
  .rules-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .asset-specs{grid-template-columns:1fr}
  .asset-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:680px){
  .bb-nav{
    top:12px;
    width:min(92vw,360px);
    min-height:54px;
    justify-content:center;
    padding:7px 9px;
  }
  .bb-nav__group{display:none}
  .bb-nav__mark{display:grid}
  .bb-page{width:calc(100% - 20px);padding:88px 0 48px}
  .bb-hero{
    padding:34px 22px;
    border-radius:22px;
  }
  .bb-hero h1{
    font-size:42px;
    overflow-wrap:anywhere;
  }
  .bb-hero__intro{font-size:16px;line-height:1.55}
  .bb-actions{display:grid}
  .bb-btn{width:100%}
  .bb-showcase{grid-template-columns:1fr;grid-template-areas:"wide" "left" "right";gap:10px;margin-top:16px}
  .bb-showcase .wide{aspect-ratio:1/1}
  .bb-metrics{grid-template-columns:1fr;margin-top:16px}
  .bb-section{
    margin-top:16px;
    padding:24px 18px;
    border-radius:20px;
  }
  .bb-section h2{font-size:30px}
  .bb-kicker{font-size:11px}
  .bb-copy,.voice-list div{font-size:15px}
  .swatches{grid-template-columns:1fr 1fr;gap:9px}
  .swatch{min-height:132px;border-radius:15px}
  .type-card{padding:18px}
  .type-card.display{font-size:34px;overflow-wrap:anywhere}
  .type-card.body{font-size:16px}
  .sample-card{min-height:auto;padding:20px;border-radius:16px}
  .sample-card h3{font-size:24px}
  .rules-grid{grid-template-columns:1fr}
  .rule{min-height:auto}
  .asset-spec{grid-template-columns:1fr;min-height:auto;padding:20px}
  .asset-spec__meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .asset-spec p{grid-column:auto}
  .asset-rules{grid-template-columns:1fr}
  .asset-rule{min-height:auto}
  .bb-assets{margin-top:64px;padding-top:40px}
  .bb-footer{
    display:grid;
    width:calc(100% - 20px);
    margin-bottom:20px;
    font-size:12px;
  }
}

/* Premium clean alignment */
:root{
  --bg:#F6F8F6;
  --ink:#07110D;
  --ink-mid:rgba(7,17,13,.58);
  --line:rgba(7,17,13,.095);
  --card:rgba(255,255,255,.62);
  --card-strong:rgba(255,255,255,.78);
  --green:#0C7951;
  --accent-hi:#1C6B47;
  --focus:#D96A19;
}
body{
  background:
    radial-gradient(115% 88% at 72% 28%,rgba(47,169,110,.2) 0%,rgba(28,107,71,.1) 30%,transparent 62%),
    radial-gradient(78% 58% at 14% 96%,rgba(28,107,71,.09) 0%,transparent 55%),
    var(--bg);
}
.grain{opacity:.34}
.bb-nav{
  background:rgba(255,255,255,.58);
  box-shadow:0 18px 48px -38px rgba(7,17,13,.32);
}
.bb-hero{
  border-radius:26px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.64),rgba(255,255,255,.28)),
    repeating-linear-gradient(90deg,rgba(7,17,13,.026) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(7,17,13,.022) 0 1px,transparent 1px 56px);
  box-shadow:0 28px 80px -58px rgba(7,17,13,.42);
}
.bb-hero h1,
.bb-section h2{
  font-weight:720;
  font-stretch:100%;
  letter-spacing:0;
  text-transform:none;
}
.bb-kicker,
.bb-btn.ghost,
.type-card,
.sample-card,
.voice-list div,
.rule,
.bb-section{
  background:var(--card);
  box-shadow:none;
}
.bb-btn.primary,
.bb-nav .nav-cta{
  background:linear-gradient(150deg,var(--accent-hi),var(--green));
  border-color:transparent;
}
.image-panel{
  box-shadow:0 28px 80px -58px rgba(7,17,13,.5);
}
.bb-metric,
.sample-card.dark{
  background:#07110D;
}
.swatch,
.sample-card,
.type-card,
.voice-list div,
.rule,
.bb-section{
  border-color:var(--line);
}

/* Premium deck effects — jak realizacje na stronie głównej */
.bb-page{
  width:min(1220px,calc(100% - 40px));
}
.bb-hero{
  position:relative;
  overflow:hidden;
}
.bb-hero::before{
  content:"BartoszRobi.pro";
  position:absolute;
  right:-.08em;
  bottom:-.2em;
  z-index:0;
  color:rgba(12,121,81,.055);
  font-family:var(--display);
  font-size:clamp(86px,14vw,210px);
  font-weight:900;
  line-height:.8;
  white-space:nowrap;
  pointer-events:none;
}
.bb-hero > *{position:relative;z-index:1}
.bb-showcase{
  display:block;
  margin-top:34px;
  padding-bottom:10vh;
}
.bb-showcase .image-panel{
  position:relative;
  min-height:min(78vh,760px);
  margin:0 0 34px;
  border-radius:30px;
  transform-origin:50% 0;
  transition:border-color .25s ease,box-shadow .25s ease;
}
@media(min-width:981px){
  .bb-showcase .image-panel.is-stack-stable{
    position:sticky;
    top:98px;
    transform:translateY(calc(var(--i,0) * 8px)) scale(calc(1 - (var(--stack,0) * .055)));
    opacity:calc(1 - (var(--stack,0) * .46));
  }
}
.bb-showcase .image-panel:nth-child(1){--i:0}
.bb-showcase .image-panel:nth-child(2){--i:1}
.bb-showcase .image-panel:nth-child(3){--i:2}
.bb-showcase .image-panel:hover{
  border-color:color-mix(in srgb,var(--green) 48%,var(--line));
  box-shadow:0 46px 130px -72px rgba(12,121,81,.58);
}
.bb-showcase .wide,
.bb-showcase .tall{
  aspect-ratio:auto;
}
.bb-showcase .wide{
  background:
    radial-gradient(90% 72% at 72% 34%,rgba(47,169,110,.42),transparent 58%),
    linear-gradient(145deg,#07110D,#0C1B14);
}
.bb-showcase .tall{
  background:
    radial-gradient(88% 74% at 28% 28%,rgba(232,99,10,.22),transparent 55%),
    linear-gradient(145deg,#07110D,#0D2017);
}
.image-panel__empty{
  min-height:min(78vh,760px);
  padding:34px;
}
.image-panel__empty::before{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black,transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,black,transparent 80%);
}
.image-panel__empty::after{
  content:"BR.PRO";
  position:absolute;
  right:28px;
  top:28px;
  color:rgba(255,255,255,.08);
  font-family:var(--display);
  font-size:clamp(58px,9vw,128px);
  font-weight:900;
  line-height:.8;
}
.image-panel__empty span,
.image-panel__empty b{position:relative;z-index:1}
.image-panel__empty b{
  max-width:620px;
  font-size:clamp(36px,6vw,86px);
  font-weight:900;
}
.bb-stack-card.is-stack-stable{
  will-change:transform,opacity;
}
.bb-content-deck{
  position:relative;
  width:100%;
  padding-bottom:clamp(28px,4vw,58px);
}
@media(min-width:981px){
  .bb-content-deck > .bb-section.bb-stack-card.is-stack-stable{
    position:sticky;
    top:104px;
    min-height:min(72vh,680px);
    display:grid;
    align-content:center;
    transform:translateY(calc(var(--i,0) * 6px)) scale(calc(1 - (var(--stack,0) * .045)));
    opacity:calc(1 - (var(--stack,0) * .38));
    transform-origin:50% 0;
    box-shadow:0 42px 110px -70px rgba(7,17,13,.48);
    backdrop-filter:blur(18px);
  }
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(1){--i:0}
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(3){--i:1}
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(4){--i:2}
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(5){--i:3}
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(6){--i:4}
  .bb-content-deck > .bb-section.bb-stack-card:nth-of-type(7){--i:5}
}
.bb-section[id],
.bb-metrics[id],
.bb-assets[id]{scroll-margin-top:112px}
.bb-section.bb-stack-card{
  position:relative;
  overflow:hidden;
}
.bb-section.bb-stack-card::after{
  content:"";
  position:absolute;
  inset:auto -18% -44% auto;
  width:min(46vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(12,121,81,.16),transparent 62%);
  filter:blur(34px);
  pointer-events:none;
}
.swatches{
  gap:14px;
}
.swatch{
  min-height:220px;
  border-radius:22px;
  box-shadow:0 24px 60px -46px rgba(7,17,13,.42);
  transition:transform .25s ease,box-shadow .25s ease;
}
.swatch:hover{
  transform:translateY(-5px);
  box-shadow:0 32px 88px -52px rgba(7,17,13,.56);
}
.type-stack{
  gap:16px;
}
.type-card{
  border-radius:22px;
}
.type-card.display{
  min-height:180px;
  display:flex;
  align-items:end;
  padding:28px;
  color:#EDF3F0;
  background:
    radial-gradient(78% 86% at 78% 26%,rgba(47,169,110,.44),transparent 60%),
    linear-gradient(145deg,#07110D,#0D2017);
}
.component-grid{
  gap:16px;
}
.sample-card{
  min-height:340px;
  border-radius:22px;
  box-shadow:0 30px 80px -58px rgba(7,17,13,.42);
}
.sample-card.dark{
  background:
    radial-gradient(78% 86% at 78% 26%,rgba(47,169,110,.3),transparent 60%),
    #07110D;
}
.voice-list div,
.rule{
  box-shadow:0 20px 54px -46px rgba(7,17,13,.38);
}

@media(max-width:980px){
  .bb-showcase{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    padding-bottom:0;
  }
  .bb-showcase .image-panel{
    position:relative;
    top:auto;
    min-height:auto;
    margin:0;
    aspect-ratio:16/11;
    transform:none;
    opacity:1;
  }
  .image-panel__empty{min-height:100%}
}

@media(max-width:680px){
  .bb-page{width:calc(100% - 20px)}
  .bb-showcase .image-panel{border-radius:20px}
  .image-panel__empty{
    padding:22px;
  }
  .image-panel__empty b{
    font-size:32px;
  }
  .swatch{min-height:150px}
  .type-card.display{min-height:128px}
}

/* Result-style metrics — większe karty zamiast czterech kafli */
.bb-metrics{
  position:relative;
  display:block;
  min-height:760px;
  margin-top:34px;
  padding:54px 54px 0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:30px;
  background:
    radial-gradient(92% 70% at 78% 26%,rgba(12,121,81,.12),transparent 62%),
    color-mix(in srgb,var(--bg) 82%,#fff);
  color:var(--ink);
  box-shadow:0 42px 120px -72px rgba(7,17,13,.5);
}
.bb-metrics::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:118px;
  border-radius:28px 28px 0 0;
  background:linear-gradient(135deg,var(--green),var(--green-deep));
}
.bb-metrics::after{
  content:"";
  position:absolute;
  right:8%;
  bottom:92px;
  width:170px;
  height:170px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(12,121,81,.18),transparent 66%);
  filter:blur(18px);
}
.bb-metrics__head{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);
  gap:48px;
  align-items:start;
}
.bb-metrics__head h2{
  font-family:var(--display);
  font-size:clamp(72px,12vw,164px);
  line-height:.78;
  font-weight:850;
  font-stretch:112%;
  letter-spacing:0;
  text-transform:uppercase;
}
.bb-metrics__about{
  padding-top:34px;
  color:var(--ink-mid);
  font-size:15px;
  line-height:1.45;
}
.bb-metrics__about span,
.bb-metrics__about b{display:block}
.bb-metrics__about b{font-weight:500}
.bb-metrics__copy{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(280px,.58fr);
  gap:72px;
  margin-top:118px;
}
.bb-metrics__lead{
  max-width:610px;
  font-family:var(--display);
  font-size:clamp(30px,4vw,50px);
  line-height:1.16;
  font-weight:760;
  font-stretch:106%;
  letter-spacing:0;
}
.bb-metrics__lead b,
.bb-metrics__lead strong{font-weight:600}
.bb-metrics__text{
  max-width:430px;
  font-size:16px;
  line-height:1.62;
  color:var(--ink-mid);
}
.bb-metrics__text b,
.bb-metrics__text strong{color:var(--ink)}
.bb-metrics__cards{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:22px;
  margin-top:72px;
  padding-bottom:38px;
}
.bb-metrics .bb-metric{
  position:relative;
  min-height:0;
  padding:38px 42px;
  border:1px solid var(--line);
  border-radius:34px;
  box-shadow:0 34px 90px -54px rgba(0,0,0,.45);
}
.bb-metrics .bb-metric:nth-child(1){
  grid-column:1 / span 5;
  min-height:360px;
  align-self:end;
}
.bb-metrics .bb-metric:nth-child(2){
  grid-column:8 / span 5;
  min-height:290px;
  margin-top:-16px;
}
.bb-metrics .bb-metric:nth-child(3){
  grid-column:6 / span 3;
  min-height:210px;
}
.bb-metrics .bb-metric:nth-child(4){
  grid-column:9 / span 4;
  min-height:210px;
}
.bb-metrics .bb-metric.is-dark{
  border-color:rgba(237,243,240,.12);
  background:
    radial-gradient(84% 82% at 80% 20%,rgba(47,169,110,.24),transparent 62%),
    #07110D;
  color:#EDF3F0;
}
.bb-metrics .bb-metric.is-light{
  background:
    linear-gradient(145deg,rgba(255,255,255,.9),rgba(255,255,255,.58));
  color:var(--ink);
}
.bb-metrics .bb-metric b{
  display:block;
  color:inherit;
  font-family:var(--display);
  font-size:clamp(72px,8vw,116px);
  line-height:.85;
  font-weight:850;
  font-stretch:112%;
}
.bb-metrics .bb-metric span{
  display:block;
  max-width:280px;
  margin-top:24px;
  color:currentColor;
  opacity:.86;
  font-size:20px;
  line-height:1.12;
}
.bb-metrics .bb-metric:nth-child(n+3) b{
  font-size:clamp(42px,4vw,64px);
}
.bb-metrics .bb-metric:nth-child(n+3) span{
  font-size:15px;
  line-height:1.35;
}

@media(min-width:981px){
  .bb-page > .bb-metrics.bb-stack-card{
    position:sticky;
    top:104px;
    transform:translateY(calc(var(--i,0) * 6px)) scale(calc(1 - (var(--stack,0) * .045)));
    opacity:calc(1 - (var(--stack,0) * .38));
    transform-origin:50% 0;
  }
}

@media(max-width:980px){
  .bb-metrics{
    min-height:auto;
    padding:40px 28px 0;
  }
  .bb-metrics__head,
  .bb-metrics__copy{
    grid-template-columns:1fr;
    gap:24px;
  }
  .bb-metrics__copy{margin-top:64px}
  .bb-metrics__cards{
    grid-template-columns:1fr 1fr;
    margin-top:50px;
  }
  .bb-metrics .bb-metric:nth-child(n){
    grid-column:auto;
    min-height:240px;
    margin-top:0;
  }
}

@media(max-width:680px){
  .bb-metrics{
    margin-top:16px;
    padding:30px 18px 0;
    border-radius:22px;
  }
  .bb-metrics::before{height:78px}
  .bb-metrics__head>*{min-width:0}
  .bb-metrics__head h2{max-width:100%;font-size:clamp(48px,14vw,56px);overflow-wrap:anywhere}
  .bb-metrics__about{min-width:0;max-width:100%;padding-top:0;font-size:13px;overflow-wrap:anywhere}
  .bb-metrics__copy{margin-top:42px}
  .bb-metrics__lead{font-size:30px}
  .bb-metrics__text{font-size:15px}
  .bb-metrics__cards{
    grid-template-columns:1fr;
    gap:14px;
    margin-top:34px;
    padding-bottom:24px;
  }
  .bb-metrics .bb-metric:nth-child(n){
    min-height:190px;
    padding:28px;
    border-radius:24px;
  }
  .bb-metrics .bb-metric b{font-size:58px}
  .bb-metrics .bb-metric span{font-size:17px}
}

/* Full-bleed presentation layout */
@media(min-width:981px){
  .bb-page{
    width:100%;
    padding:132px clamp(24px,4vw,72px) 74px;
  }
  .bb-hero,
  .bb-showcase,
  .bb-metrics,
  .bb-section,
  .bb-assets{
    width:100%;
    max-width:none;
  }
  .bb-hero{
    min-height:min(82vh,820px);
    grid-template-columns:minmax(0,1.05fr) minmax(420px,.68fr);
    padding:clamp(56px,5.2vw,92px);
  }
  .bb-hero h1{
    max-width:1040px;
    font-size:48px;
    line-height:1.2;
  }
  .bb-hero__intro{
    max-width:660px;
  }
  .bb-showcase .image-panel{
    min-height:min(82vh,820px);
  }
  .bb-content-deck > .bb-section.bb-stack-card{
    min-height:min(76vh,760px);
    padding:clamp(52px,5vw,86px);
  }
  .bb-grid-2{
    grid-template-columns:minmax(360px,.8fr) minmax(520px,1.2fr);
  }
  .bb-section h2{
    font-size:clamp(46px,5vw,88px);
  }
  .bb-copy,
  .voice-list{
    max-width:760px;
  }
  .bb-metrics{
    min-height:min(86vh,900px);
    padding:clamp(54px,5vw,86px) clamp(54px,5vw,86px) 0;
  }
  .bb-metrics__head h2{
    font-size:clamp(110px,13vw,230px);
  }
  .bb-metrics__lead{
    max-width:760px;
    font-size:clamp(42px,4.4vw,76px);
  }
  .bb-metrics__text{
    max-width:520px;
  }
  .swatches{
    grid-template-columns:repeat(6,minmax(150px,1fr));
  }
  .component-grid{
    grid-template-columns:repeat(3,minmax(280px,1fr));
  }
  .bb-footer{
    width:auto;
    max-width:none;
    margin-inline:clamp(24px,4vw,72px);
  }
}

/* Subtelne wejścia sekcji */
.motion-reveal{
  opacity:0;
  translate:0 24px;
  filter:blur(8px);
  transition:
    opacity .72s cubic-bezier(.2,.7,.2,1),
    translate .72s cubic-bezier(.2,.7,.2,1),
    filter .72s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--reveal-order,0) * 55ms);
}
.motion-reveal.is-visible{
  opacity:1;
  translate:0 0;
  filter:blur(0);
}

@media(prefers-reduced-motion:reduce){
  .motion-reveal{
    opacity:1!important;
    translate:0 0!important;
    filter:none!important;
    transition:none!important;
  }
}

/* Dark mode współdzielony z nawigacją Portfolio / Studio */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#070C0A;
  --ink:#EDF3F0;
  --ink-mid:rgba(237,243,240,.62);
  --line:rgba(237,243,240,.13);
  --card:rgba(255,255,255,.045);
  --card-strong:rgba(255,255,255,.065);
  --accent-hi:#2FD08C;
  --focus:#FF9A3D;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(115% 88% at 72% 28%,rgba(47,208,140,.12) 0%,rgba(12,121,81,.07) 30%,transparent 62%),
    radial-gradient(78% 58% at 14% 96%,rgba(47,208,140,.06) 0%,transparent 55%),
    var(--bg);
}
html[data-theme="dark"] .bb-hero{
  background:
    linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
    repeating-linear-gradient(90deg,rgba(237,243,240,.035) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(237,243,240,.03) 0 1px,transparent 1px 56px);
}
html[data-theme="dark"] .bb-kicker,
html[data-theme="dark"] .bb-btn.ghost,
html[data-theme="dark"] .type-card,
html[data-theme="dark"] .sample-card:not(.dark),
html[data-theme="dark"] .voice-list div,
html[data-theme="dark"] .rule,
html[data-theme="dark"] .asset-spec,
html[data-theme="dark"] .bb-section{
  background:rgba(255,255,255,.045);
}
html[data-theme="dark"] .bb-btn:hover{background:rgba(255,255,255,.1)}
html[data-theme="dark"] .tags span{background:rgba(255,255,255,.055)}
html[data-theme="dark"] .bb-metrics .bb-metric.is-light{
  background:linear-gradient(145deg,#F7FAF8,#E6ECE8);
  color:#07110D;
}

/* Hero: opis po lewej, animowany znak po prawej */
.bb-hero{
  grid-template-columns:minmax(0,1fr) minmax(360px,1fr);
  align-items:center;
  gap:clamp(40px,5vw,88px);
}
.bb-hero h1{
  max-width:760px;
  font-size:48px;
  line-height:1.2;
}
.bb-hero__visual{align-self:stretch;min-width:0}
.bb-logo-stage{
  --bb-logo-screen:#070c0a;
  --bb-logo-mark:#edf3f0;
  --bb-logo-square:#12a069;
  display:grid;place-items:center;width:100%;height:100%;min-height:460px;overflow:hidden;
  background:var(--bb-logo-screen);color:var(--bb-logo-mark)
}
html[data-theme="dark"] .bb-logo-stage{--bb-logo-screen:#edf3f0;--bb-logo-mark:#050f0d;--bb-logo-square:#198a5f}
.bb-logo-stage__scene{
  display:flex;flex-direction:column;align-items:center;gap:clamp(22px,3vw,34px);
  width:min(78%,390px)
}
.bb-logo-stage__mark{display:block;width:min(64%,250px);height:auto;overflow:visible}
.bb-logo-stage__shape{
  fill:var(--bb-logo-mark);fill-opacity:0;stroke:var(--bb-logo-mark);stroke-width:2.4;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:bb-logo-draw 5s cubic-bezier(.65,0,.35,1) infinite
}
.bb-logo-stage__square{
  fill:var(--bb-logo-square);opacity:0;filter:url(#bbLogoSquareGlow);
  transform:scale(.4);transform-box:fill-box;transform-origin:center;
  animation:bb-logo-square 5s cubic-bezier(.22,1,.36,1) infinite
}
.bb-logo-stage__wordmark{
  position:relative;width:max-content;max-width:100%;height:1.2em;
  font-family:var(--body);font-size:clamp(19px,2vw,30px);font-weight:600;line-height:1.2;
  letter-spacing:0;white-space:nowrap;opacity:0;transform:translateY(14px);
  animation:bb-logo-wordmark 5s cubic-bezier(.22,1,.36,1) infinite
}
.bb-logo-stage__name{display:block;color:var(--bb-logo-mark)}
.bb-logo-stage__name b{color:var(--bb-logo-square);font-weight:600}
.bb-logo-stage__name--first{animation:bb-logo-name-first 5s ease infinite}
.bb-logo-stage__name--second{position:absolute;inset:0;opacity:0;animation:bb-logo-name-second 5s ease infinite}

@keyframes bb-logo-draw{
  0%{stroke-dashoffset:1;stroke-opacity:1;fill-opacity:0}
  34%{stroke-dashoffset:0;stroke-opacity:1;fill-opacity:0}
  42%,90%{stroke-dashoffset:0;stroke-opacity:0;fill-opacity:1}
  100%{stroke-dashoffset:0;stroke-opacity:0;fill-opacity:0}
}
@keyframes bb-logo-square{
  0%,42%{opacity:0;transform:scale(.4);filter:url(#bbLogoSquareGlow) drop-shadow(0 0 0 rgba(255,255,255,0))}
  50%{opacity:1;transform:scale(1);filter:url(#bbLogoSquareGlow) drop-shadow(0 0 20px rgba(255,255,255,.62))}
  70%,90%{opacity:1;transform:scale(1);filter:url(#bbLogoSquareGlow) drop-shadow(0 0 10px rgba(255,255,255,.28))}
  100%{opacity:0;transform:scale(1)}
}
@keyframes bb-logo-wordmark{0%,54%{opacity:0;transform:translateY(14px)}66%,90%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes bb-logo-name-first{0%,76%{opacity:1}80%,100%{opacity:0}}
@keyframes bb-logo-name-second{0%,80%{opacity:0}84%,100%{opacity:1}}

@media(max-width:980px){
  .bb-hero{grid-template-columns:1fr;align-items:start;gap:46px}
  .bb-hero h1{font-size:45px}
  .bb-hero__visual{width:100%;min-height:0}
  .bb-logo-stage{height:auto;min-height:0;aspect-ratio:16/11}
}
@media(max-width:680px){
  .bb-hero{gap:34px}
  .bb-hero h1{font-size:30px;line-height:1.02}
  .bb-logo-stage{aspect-ratio:4/5}
  .bb-logo-stage__scene{width:min(82%,320px)}
  .bb-logo-stage__mark{width:min(68%,210px)}
  .bb-logo-stage__wordmark{font-size:clamp(18px,6vw,25px)}
}
@media(prefers-reduced-motion:reduce){
  .bb-logo-stage__shape{animation:none;stroke:none;fill-opacity:1}
  .bb-logo-stage__square{animation:none;opacity:1;transform:scale(1);filter:none}
  .bb-logo-stage__wordmark{animation:none;opacity:1;transform:none}
  .bb-logo-stage__name--first{animation:none;opacity:1}
  .bb-logo-stage__name--second{display:none;animation:none}
}