/* Tokeny z design systemu „ogarnij.” */
  :root {
    color-scheme: light;
    --cream: #F5EFE6;
    --sand: #E3D5C1;
    --line: #D2BFA5;
    --ink: #1E1C1A;
    --ink-muted: #5E574F;
    --blue: #2F4B7A;
    --mist: #B7CBE3;
    --terracotta: #B8633A;
    --radius: 18px;
    --pill: 899.1px;
    --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --body: Figtree, "Segoe UI", system-ui, sans-serif;
    --gap: 40px;
    --ease: cubic-bezier(.16,1,.3,1);
  }
  @media (min-width: 900px) { :root { --gap: 60px; } }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 21.6px; }
  body {
    margin: 0; background: var(--cream); color: var(--ink);
    font: 400 15.3px/25.2px var(--body); -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { display: block; width: 100%; height: 100%; object-fit: cover; }
  a { color: var(--blue); text-underline-offset: 3px; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  p, ul, ol, dl, dd { margin: 0; padding: 0; }
  ul, ol { list-style: none; }

  .skip { position: absolute; left: 14.4px; top: -90px; z-index: 5; background: var(--cream); padding: 10.8px 14.4px; border-radius: 7.2px; }
  .skip:focus { top: 10.8px; }

  .wrap { width: 100%; max-width: 1062px; margin-inline: auto; padding-inline: 14.4px; }
  @media (min-width: 720px) { .wrap { padding-inline: 28.8px; } }
  section { padding-block: var(--gap); }

  h1, h2, h3 { font-family: var(--display); margin: 0; color: inherit; text-wrap: balance; }
  h1 { font-weight: 700; font-size: clamp(41.4px, 5.94vw, 75.6px); line-height: 1.02; letter-spacing: -0.025em; }
  h2 { font-weight: 600; font-size: clamp(27px, 3.6vw, 43.2px); line-height: 1.1; letter-spacing: -0.02em; }
  h3 { font-weight: 600; font-size: 19.8px; line-height: 25.2px; letter-spacing: -0.01em; }
  .lead { font-size: 17.1px; line-height: 27px; }
  .muted { color: var(--ink-muted); }
  .small { font-size: 12.6px; line-height: 19.8px; }
  .accent { color: var(--terracotta); }
  .sec-head { display: grid; gap: 14.4px; max-width: 648px; margin-bottom: 36px; }

  .photo { border-radius: var(--radius); overflow: hidden; background: var(--sand); }

  .pill {
    display: inline-block; background: var(--mist); color: var(--ink);
    border-radius: var(--pill); padding: 5.4px 12.6px;
    font-size: 12.6px; line-height: 16.2px; font-weight: 600;
  }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
    padding: 12.6px 23.4px; border-radius: var(--pill);
    font: 600 14.4px/18px var(--body); text-decoration: none; cursor: pointer;
    transition: background-color .2s ease, color .2s ease, transform .2s var(--ease);
  }
  .btn:active { transform: translateY(1px) scale(.98); }
  .btn-main { background: var(--ink); color: var(--cream); }
  .btn-main:hover { background: var(--blue); }
  .btn-alt { background: var(--sand); color: var(--ink); }
  .btn-alt:hover { background: var(--line); }

  /* Miejsca do decyzji Żanety: widoczne tylko w szkicu */
  .draft-bar { background: var(--ink); color: var(--cream); font-size: 12.6px; line-height: 18px; padding: 7.2px 0; }
  .todo { border: 2px dashed var(--terracotta); border-radius: 10.8px; padding: 10.8px 14.4px; }

  /* Nagłówek */
  header { padding-block: 14.4px; }
  .bar { display: flex; align-items: center; justify-content: space-between; gap: 14.4px; }
  .logo { font: 700 25.2px/1 var(--display); letter-spacing: -0.025em; color: var(--ink); text-decoration: none; }
  .logo span { color: var(--terracotta); }
  nav { display: none; gap: 28.8px; }
  nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.4px; }
  nav a:hover { color: var(--blue); text-decoration: underline; }
  @media (min-width: 860px) { nav { display: flex; } }
  .bar .btn { padding: 9px 18px; }

  /* Góra strony: tekst i poranny przegląd zamiast zdjęcia */
  .hero { padding-block: 28.8px var(--gap); }
  .hero-grid { display: grid; gap: 36px; align-items: center; }
  .hero-text { display: grid; gap: 21.6px; justify-items: start; }
  .actions { display: flex; flex-wrap: wrap; gap: 7.2px 10.8px; }
  @media (min-width: 900px) {
    .hero { padding-top: 50.4px; }
    .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 64.8px; }
  }
  .js .hero-text > *, .js .hero .photo { animation: rise .8s var(--ease) both; }
  .hero .photo { aspect-ratio: 4 / 5; max-width: 468px; width: 100%; }
  .hero .photo img { object-position: center 15%; }
  @media (min-width: 900px) { .hero .photo { aspect-ratio: auto; height: min(74dvh, 576px); } }
  .js .hero-text > :nth-child(2) { animation-delay: .06s; }
  .js .hero-text > :nth-child(3) { animation-delay: .12s; }
  .js .hero-text > :nth-child(4) { animation-delay: .18s; }
  .js .hero .photo { animation-delay: .1s; }
  @keyframes rise { from { opacity: 0; transform: translateY(12.6px); } to { opacity: 1; transform: none; } }

  /* Lista „do ogarnięcia” (motyw marki) */
  .list-card { background: var(--sand); border-radius: var(--radius); padding: 25.2px 21.6px; display: grid; gap: 18px; }
  @media (min-width: 720px) { .list-card { padding: 32.4px 36px; } }
  .ticks { display: grid; gap: 14.4px; }
  .ticks li { display: grid; grid-template-columns: 21.6px 1fr; gap: 10.8px; align-items: start; }
  .tick { width: 21.6px; height: 21.6px; border-radius: 50%; margin-top: 2px; position: relative; background: var(--terracotta); }
  .tick::after {
    content: ""; position: absolute; left: 7.2px; top: 3.6px; width: 5.4px; height: 9.9px;
    border: solid var(--cream); border-width: 0 2px 2px 0; transform: rotate(45deg);
  }
  .tick.open { background: transparent; border: 2px solid var(--ink); }
  .tick.open::after { display: none; }
  .ticks strong { font-weight: 600; }
  /* Punkty odhaczają się po kolei: praca jest zrobiona, zanim usiądziesz */
  .js .ticks .tick { transform: scale(0); transition: transform .4s var(--ease); transition-delay: calc(var(--i) * 220ms + 350ms); }
  .js .list-card.in .tick { transform: none; }

  /* Znajome: duże zdania */
  .pain-grid { display: grid; gap: 28.8px; }
  @media (min-width: 900px) { .pain-grid { grid-template-columns: 1.1fr 1fr; gap: 64.8px; align-items: start; } }
  .pain-grid .pains { margin-top: 21.6px; }
  .pains li { padding: 16.2px 0; border-bottom: 1px solid var(--line); font: 600 clamp(18px, 2.07vw, 22.5px)/1.3 var(--display); letter-spacing: -0.01em; }
  .pains li:first-child { padding-top: 0; }

  /* Usługi główne: szeroka + węższa */
  #co-robie { padding-top: 0; }
  .main-offer { display: grid; gap: 36px; }
  @media (min-width: 900px) { .main-offer { grid-template-columns: 1.35fr 1fr; gap: 64.8px; align-items: start; } }
  .offer { display: grid; gap: 14.4px; }
  .offer h3, .side-offer h3 { font-size: clamp(23.4px, 2.52vw, 30.6px); line-height: 1.1; font-weight: 700; letter-spacing: -0.015em; }
  .todo-list { display: grid; gap: 3.6px 36px; margin-top: 7.2px; }
  @media (min-width: 720px) { .todo-list { grid-template-columns: 1fr 1fr; } }
  .todo-list li { padding: 10.8px 0; border-top: 1px solid var(--line); }
  .todo-list b { font-weight: 600; display: block; }
  .side-offer { background: var(--sand); border-radius: var(--radius); padding: 25.2px 21.6px; display: grid; gap: 14.4px; }
  @media (min-width: 720px) { .side-offer { padding: 32.4px; } }
  .side-offer dt { font-weight: 600; }
  .side-offer dl { display: grid; gap: 10.8px; }
  .explain { margin-top: 36px; max-width: 684px; font: 600 clamp(18px, 1.98vw, 21.6px)/1.35 var(--display); letter-spacing: -0.01em; }

  /* Pasek z mocnymi zdaniami na całą szerokość */
  .manifesto { background: var(--ink); color: var(--cream); }
  .manifesto p { font: 600 clamp(25.2px, 3.24vw, 45px)/1.15 var(--display); letter-spacing: -0.02em; max-width: 936px; }
  .manifesto p + p { margin-top: 21.6px; }
  .manifesto em { font-style: normal; color: var(--mist); }
  .manifesto .last { font: 400 17.1px/27px var(--body); letter-spacing: 0; max-width: 558px; margin-top: 28.8px; color: var(--cream); }

  /* Social media */
  .sm-grid { display: grid; gap: 36px; }
  @media (min-width: 900px) { .sm-grid { grid-template-columns: 1.35fr 1fr; gap: 64.8px; } }
  .sm-steps li { display: grid; gap: 7.2px; padding: 18px 0; border-top: 2px solid var(--ink); }
  @media (min-width: 720px) { .sm-steps li { grid-template-columns: 180px 1fr; gap: 21.6px; } }
  .sm-steps h3 { font-size: 18px; }
  .package { display: grid; gap: 10.8px; align-content: start; }
  .package ul { display: grid; gap: 7.2px; }
  .package li { padding-left: 18px; position: relative; }
  .package li::before { content: ""; position: absolute; left: 0; top: 11.7px; width: 9px; height: 2px; background: var(--terracotta); }

  /* Inne sprawy */
  .others-head { margin-top: 57.6px; }
  .others { display: grid; gap: 25.2px 43.2px; margin-top: 18px; }
  @media (min-width: 720px) { .others { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1040px) { .others { grid-template-columns: repeat(3, 1fr); } }
  .others > div { display: grid; gap: 7.2px; align-content: start; border-top: 1px solid var(--line); padding-top: 14.4px; }
  .others h3 { font-size: 17.1px; line-height: 23.4px; }

  /* Jak zaczynamy: oś z numerami */
  #droga { padding-top: 0; }
  .path { display: grid; gap: 25.2px; counter-reset: krok; }
  @media (min-width: 900px) {
    .path { grid-template-columns: repeat(4, 1fr); gap: 28.8px; border-top: 2px solid var(--ink); }
    .path li { padding-top: 18px; }
  }
  .path li { display: grid; gap: 7.2px; align-content: start; counter-increment: krok; }
  .path li::before { content: counter(krok); font: 700 39.6px/1 var(--display); color: var(--terracotta); }
  .path .when { font-weight: 600; }
  .path-note { margin-top: 28.8px; max-width: 648px; }

  /* Cennik */
  #cennik { background: var(--sand); }
  .price-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14.4px 28.8px; margin-bottom: 36px; }
  .price-head .sec-head { margin-bottom: 0; }
  .price-group { display: grid; gap: 10.8px; padding-block: 21.6px; border-top: 2px solid var(--ink); }
  @media (min-width: 900px) { .price-group { grid-template-columns: 216px 1fr; gap: 28.8px; } }
  .price-row { display: grid; gap: 2px 28.8px; padding-block: 10.8px; }
  .price-row + .price-row { border-top: 1px solid var(--line); }
  .price-row:first-child { padding-top: 0; }
  .price-row:last-child { padding-bottom: 0; }
  @media (min-width: 720px) { .price-row { grid-template-columns: 1fr 252px; } }
  .price { font-weight: 600; }
  @media (min-width: 720px) { .price { text-align: right; } }
  .price-note { padding-top: 21.6px; border-top: 2px solid var(--ink); }

  /* O mnie: jedno zdjęcie */
  .about { display: grid; gap: 28.8px; align-items: start; }
  @media (min-width: 900px) { .about { grid-template-columns: 0.7fr 1.3fr; gap: 64.8px; } }
  .about .photo { aspect-ratio: 4 / 5; max-width: 378px; }
  .about .photo img { object-position: center 45%; }
  .about-text { display: grid; gap: 14.4px; }
  .years { margin-top: 7.2px; }
  .years li { display: grid; gap: 0 21.6px; padding: 9px 0; border-top: 1px solid var(--line); }
  @media (min-width: 600px) { .years li { grid-template-columns: 117px 1fr; } }
  .years span { font-weight: 600; }

  /* Z kim */
  #z-kim { padding-top: 0; }
  .fit { display: grid; gap: 36px; }
  @media (min-width: 900px) { .fit { grid-template-columns: 1.2fr 1fr; gap: 64.8px; } }
  .fit-yes li { font: 600 clamp(18px, 2.07vw, 23.4px)/1.25 var(--display); letter-spacing: -0.01em; padding: 14.4px 0; border-top: 1px solid var(--line); }
  .fit-no { display: grid; gap: 10.8px; align-content: start; }
  .fit-no ul { display: grid; gap: 9px; }
  .opinions { margin-top: 43.2px; }

  /* Pytania */
  #pytania { padding-top: 0; }
  .faq { max-width: 738px; }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq details:first-of-type { border-top: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; list-style: none; padding: 18px 0;
    font: 600 18px/25.2px var(--display);
    display: flex; justify-content: space-between; align-items: center; gap: 14.4px;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font: 400 25.2px/1 var(--body); color: var(--blue); transition: transform .2s ease; }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details > div { padding-bottom: 18px; display: grid; gap: 10.8px; }

  /* Kontakt */
  #kontakt { padding-top: 0; }
  .contact { background: var(--mist); border-radius: var(--radius); padding: 36px 21.6px; display: grid; gap: 14.4px; justify-items: start; }
  @media (min-width: 720px) { .contact { padding: 57.6px; } }
  .contact h2 { font-size: clamp(32.4px, 4.86vw, 61.2px); font-weight: 700; line-height: 1.02; }
  .contact .lead { max-width: 558px; }
  .contact .btn { margin-top: 7.2px; }
  .contact a:not(.btn) { color: var(--ink); }

  footer { padding-block: 0 43.2px; }
  .foot { display: grid; gap: 14.4px; border-top: 1px solid var(--line); padding-top: 28.8px; }
  @media (min-width: 900px) { .foot { grid-template-columns: auto 1fr 1fr; gap: 28.8px; align-items: start; } }
  .foot .todo { display: grid; gap: 3.6px; }

  /* Pojawianie się sekcji: prowadzi wzrok przy pierwszym czytaniu */
  .js .reveal { opacity: 0; transform: translateY(14.4px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .js .ticks .tick, .js .hero-text > *, .js .hero .photo { animation: none; transform: none; transition: none; }
    .btn, .faq summary::after { transition: none; }
  }

  /* Podstrony i nowe sekcje (6.11.2026) */
  nav a[aria-current="page"] { color: var(--terracotta); }
  .more { margin-top: 28.8px; }
  .power { background: var(--sand); }
  .power-grid { display: grid; gap: 3.6px 36px; }
  @media (min-width: 720px) { .power-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1040px) { .power-grid { grid-template-columns: repeat(3, 1fr); } }
  .power-grid li { padding: 16.2px 0; border-top: 2px solid var(--ink); display: grid; gap: 5.4px; align-content: start; }
  .power-grid h3 { font-size: 18px; }
  .power-note { margin-top: 28.8px; max-width: 684px; font: 600 clamp(18px, 1.98vw, 21.6px)/1.35 var(--display); letter-spacing: -0.01em; }
  .teaser { display: grid; gap: 21.6px; align-items: center; }
  @media (min-width: 900px) { .teaser { grid-template-columns: 1.4fr 1fr; gap: 64.8px; } }
  .teaser-text { display: grid; gap: 14.4px; justify-items: start; }
  .crumbs { font-size: 12.6px; color: var(--ink-muted); }
  .crumbs a { color: var(--ink-muted); }
  .page-head { padding-block: 28.8px var(--gap); }
  .page-head .wrap { display: grid; gap: 18px; justify-items: start; max-width: 1062px; }
  .page-head h1 { font-size: clamp(36px, 5.04vw, 64.8px); max-width: 16ch; }
  .page-head .lead { max-width: 62ch; }
  .chips { display: flex; flex-wrap: wrap; gap: 7.2px; }
  .chips a { font-size: 12.6px; text-decoration: none; color: var(--ink); background: var(--sand); padding: 5.4px 12.6px; border-radius: var(--pill); }
  .chips a:hover { background: var(--mist); }
  .sub-sec { padding-top: 0; }
  .rows { border-top: 2px solid var(--ink); }
  .row { display: grid; gap: 9px 36px; padding-block: 21.6px; border-bottom: 1px solid var(--line); }
  @media (min-width: 820px) { .row { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
  .row h3 { font-size: 18.9px; line-height: 1.25; }
  .row .txt { display: grid; gap: 9px; max-width: 66ch; }
  .lbl { font-weight: 600; color: var(--blue); }
  .ex { color: var(--ink-muted); font-style: italic; }
  .mcp { background: var(--sand); border-radius: var(--radius); padding: 25.2px 21.6px; display: grid; gap: 19.8px; margin-bottom: 25.2px; }
  @media (min-width: 720px) { .mcp { padding: 36px; } }
  .mcp h3 { font-size: clamp(21.6px, 2.34vw, 27px); }
  .flow { display: grid; gap: 10.8px; align-items: center; }
  @media (min-width: 820px) { .flow { grid-template-columns: auto auto auto auto minmax(0, 1fr); } }
  .node { background: var(--cream); border-radius: 10.8px; padding: 10.8px 14.4px; font-weight: 600; text-align: center; }
  .node small { display: block; font-weight: 400; color: var(--ink-muted); font-size: 11.7px; }
  .arrow { font: 700 19.8px/1 var(--display); color: var(--terracotta); text-align: center; }
  @media (max-width: 819px) { .arrow { transform: rotate(90deg); } }
  .apps { display: flex; flex-wrap: wrap; gap: 7.2px; }
  .apps span { background: var(--cream); border-radius: var(--pill); padding: 5.4px 10.8px; font-size: 12.6px; }
  .apps .plug { background: var(--ink); color: var(--cream); font-weight: 600; }
  .asks { display: grid; gap: 12.6px 25.2px; }
  @media (min-width: 720px) { .asks { grid-template-columns: 1fr 1fr; } }
  .asks li { display: grid; gap: 2px; }
  .asks q { font-weight: 600; }
  .asks span { color: var(--ink-muted); font-size: 13.5px; }
  .rule { border-top: 2px solid var(--terracotta); padding-top: 10.8px; max-width: 66ch; }
  .gloss { display: grid; border-top: 2px solid var(--ink); }
  @media (min-width: 600px) { .gloss { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); } }
  .gloss dt, .gloss dd { padding-block: 12.6px; border-bottom: 1px solid var(--line); margin: 0; }
  .gloss dt { font: 600 16.2px/1.3 var(--display); padding-right: 18px; }
  @media (max-width: 599px) { .gloss dt { border-bottom: 0; padding-bottom: 0; } }

  /* Formularz kontaktowy */
  .contact-grid { justify-items: stretch; }
  @media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; } }
  .contact-text { display: grid; gap: 14px; justify-items: start; align-content: start; }
  .form { display: grid; gap: 14px; }
  .field { display: grid; gap: 6px; }
  .field label { font-weight: 600; font-size: 15px; }
  .field .opt { font-weight: 400; color: var(--ink-muted); }
  .field input[type=text], .field input[type=email], .field input[type=tel], .field textarea {
    font: 400 16px/1.5 var(--body); color: var(--ink); background: var(--cream);
    border: 1.5px solid var(--ink-muted); border-radius: 12px; padding: 10px 14px; width: 100%;
  }
  .field textarea { resize: vertical; min-height: 110px; }
  .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
  .field [aria-invalid=true] { border-color: #8E2F1E; }
  .err { color: #8E2F1E; font-size: 14px; font-weight: 600; }
  .check label { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-weight: 400; font-size: 14px; line-height: 1.5; }
  .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
  .todo-inline { border-bottom: 2px dashed var(--terracotta); }
  .form .btn { justify-self: start; }
  .form .btn:disabled { opacity: .6; cursor: wait; }
  .form-msg { font-weight: 600; min-height: 1em; }
  .hp { position: absolute; left: -9999px; }

  /* Polityka prywatności */
  .legal { display: grid; gap: 14px; max-width: 760px; }
  .legal h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 24px; }
  .legal ul { list-style: disc; padding-left: 22px; display: grid; gap: 6px; }

  /* Nagłówek podstrony ze zdjęciem */
  .head-grid { display: grid; gap: 32px; align-items: center; }
  .head-text { display: grid; gap: 20px; justify-items: start; }
  .with-photo .head-grid { max-width: 1180px; justify-items: stretch; }
  .with-photo .photo { aspect-ratio: 4 / 5; max-width: 460px; width: 100%; }
  .with-photo .photo img { object-position: center 40%; }
  @media (min-width: 900px) {
    .head-grid { grid-template-columns: 1.3fr 1fr; gap: 64px; }
    .with-photo .photo { justify-self: end; aspect-ratio: auto; height: min(70dvh, 560px); }
  }
  .sm-steps .txt { display: grid; gap: 10px; }

  /* ===== Dopracowanie wyglądu (6.11.2026): jedna skala liter, więcej niebieskiego i terakoty ===== */
  :root {
    --fs-h1: clamp(34px, 4.4vw, 54px);
    --fs-h2: clamp(26px, 2.8vw, 36px);
    --fs-h3: 20px;
    --fs-lead: 18px;
    --fs-body: 16px;
    --fs-small: 14px;
  }
  body { font: 400 var(--fs-body)/1.6 var(--body); }
  h1, .page-head h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; }
  h2, .contact h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
  h3, .offer h3, .side-offer h3, .sm-steps h3, .others h3, .power-grid h3, .row h3, .mcp h3, .path h3, .package h3, .fit-no h3, .list-card h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
  .faq summary, .gloss dt { font-size: 18px; }
  .lead, .manifesto .last { font-size: var(--fs-lead); line-height: 1.6; }
  .small, .crumbs, .asks span, .err { font-size: var(--fs-small); }

  /* Duże zdania tekstem, nie drugą czcionką */
  .pains li, .fit-yes li, .explain, .power-note {
    font-family: var(--body); font-weight: 600; font-size: var(--fs-lead); line-height: 1.5; letter-spacing: 0;
  }
  .manifesto p { font-size: clamp(22px, 2.6vw, 32px); }

  /* Terakotowa kreska nad nagłówkami sekcji */
  main h2::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--terracotta); margin-bottom: 16px; }
  .legal h2::before { display: none; }
  .legal h2 { font-size: 22px; }

  /* Przyciski i linki w niebieskim */
  .btn-main { background: var(--blue); color: var(--cream); }
  .btn-main:hover { background: var(--ink); }
  .lbl, .price, .path .when, .years span { color: var(--blue); }
  h3 { color: inherit; }
  .offer h3, .list-card h3, .price-group h3, .package h3, .power-grid h3, .row h3 { color: var(--blue); }

  /* Zdjęcia z kolorową ramą przesuniętą w bok */
  .hero .photo { box-shadow: 14px 14px 0 var(--terracotta); }
  .about .photo { box-shadow: -14px 14px 0 var(--blue); }
  .with-photo .photo { box-shadow: 14px 14px 0 var(--mist); }
  @media (max-width: 899px) { .hero .photo, .about .photo, .with-photo .photo { box-shadow: 8px 8px 0 var(--terracotta); margin-right: 8px; } }

  /* Karta porannego przeglądu */
  .list-card { border-top: 6px solid var(--terracotta); }
  .tick.open { border-color: var(--blue); }

  /* Karta szkolenia na niebieskim */
  .side-offer { background: var(--blue); color: var(--cream); }
  .side-offer h3 { color: var(--cream); }
  .side-offer dt { color: var(--mist); }
  .side-offer a { color: var(--cream); font-weight: 600; }

  /* Pasek z mocnymi zdaniami na niebieskim */
  .manifesto { background: var(--blue); }
  .manifesto em { color: var(--sand); text-decoration: underline; text-decoration-color: var(--terracotta); text-decoration-thickness: 4px; text-underline-offset: 6px; }

  /* Sekcja „Nie jestem programistką” */
  .power-grid li { border-top: 3px solid var(--terracotta); }

  /* Pas o social mediach jako niebieska karta */
  .teaser { background: var(--blue); color: var(--cream); border-radius: var(--radius); padding: 32px 24px; }
  @media (min-width: 720px) { .teaser { padding: 48px; } }
  .teaser h2 { color: var(--cream); }
  .teaser .btn-main { background: var(--cream); color: var(--ink); }
  .teaser .btn-main:hover { background: var(--mist); }

  /* Oś kroków i cennik */
  .path { border-top-color: var(--blue); }
  .path li::before { font-size: 36px; }
  .price-group { border-top-color: var(--blue); }
  .price-note { border-top-color: var(--blue); }
  .rows, .sm-steps li, .gloss { border-top-color: var(--blue); }
  .todo-list li { border-top-color: var(--line); }
  .todo-list b { color: var(--blue); }

  /* Kontakt */
  .contact { border-top: 6px solid var(--terracotta); }
  /* O mnie: jedna wielkość tekstu */
  .about-text p, .about-text .lead { font-size: 17px; line-height: 1.65; font-weight: 400; }
  .about-text a[href*="szron"] { color: var(--terracotta); font-weight: 700; }

/* 7.11: hero w proporcjach zdjęcia, żeby nie ucinać stóp ani głowy */
.hero .photo { aspect-ratio: 1067 / 1248; height: auto; max-width: min(468px, calc(74dvh * 1067 / 1248)); }
@media (min-width: 900px) { .hero .photo { aspect-ratio: 1067 / 1248; height: auto; } }
/* 7.11: bez terakotowego tła za zdjęciem w hero */
.hero .photo { box-shadow: none !important; margin-right: 0 !important; }