/* ==========================================================================
   DigiVibe
   Paleta z wizytówki: petrolowy granat przechodzący w czerń + turkus, stonowane
   Motyw: ciemny domyślnie, jasny po przełączeniu (data-theme na <html>)
   Zaokrąglenia: przyciski pełne, panele 20px, pola i małe kafle 12px
   Warstwy (z-index): 10 nagłówek, 20 pasek telefonu, 25 zgoda na statystyki, 30 skip-link
   ========================================================================== */

/* Czcionki z własnego serwera (Unbounded i Figtree, licencja SIL OFL 1.1)
   ========================================================================== */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/figtree-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/unbounded-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Unbounded";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("../fonts/unbounded-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;

    --bg: #05151D;
    --bg-glow: rgba(1, 107, 147, 0.5);
    --surface: #0A2530;
    --ink: #E6F4F8;
    --ink-soft: #A1C3D1;
    --line: #16404F;
    --brand: #015670;
    --brand-ink: #F0FBFF;
    --brand-ink-soft: #BFDCE6;
    --accent: #35D3EA;
    --accent-ink: #05151D;
    --accent-text: #35D3EA;
    --cta-bg: #35D3EA;
    --cta-ink: #05151D;
    --tint: #0D3040;
    --accent-tint: #0B3440;
    --error: #FF9B8A;
    --shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.7);

    --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif;
    --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;

    --radius-panel: 20px;
    --radius-field: 12px;
    --radius-pill: 999px;

    --container: 1200px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-gap: clamp(4rem, 9vw, 7.5rem);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg: #EEF6F9;
    --bg-glow: rgba(1, 107, 147, 0.12);
    --surface: #FBFDFE;
    --ink: #062330;
    --ink-soft: #3F5B68;
    --line: #CFE1E8;
    --brand-ink-soft: #C8E2EC;
    --accent-text: #007389;
    --cta-bg: #015670;
    --cta-ink: #F0FBFF;
    --tint: #D9ECF2;
    --accent-tint: #D2F3F8;
    --error: #B3261E;
    --shadow: 0 24px 48px -24px rgba(1, 86, 112, 0.3);
}

/* Podstawy
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(90rem 48rem at 0% 0%, var(--bg-glow), transparent 70%) no-repeat,
        var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h2 {
    font-size: clamp(1.375rem, 2.5vw, 1.9375rem);
}

h3 {
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.3;
}

p {
    margin: 0;
    text-wrap: pretty;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-underline-offset: 0.2em;
}

:focus-visible {
    outline: 3px solid var(--accent-text);
    outline-offset: 3px;
    border-radius: 4px;
}

.contact-panel :focus-visible {
    outline-color: var(--accent);
}

.callback :focus-visible {
    outline-color: var(--accent-text);
}

address {
    font-style: normal;
}

.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 30;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: var(--radius-field);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: none;
}

/* Przyciski i linki
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 3.25rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.2s var(--ease-out), background-color 0.2s, border-color 0.2s;
}

.btn:active {
    transform: scale(0.98);
}

.btn .ph {
    font-size: 1.25rem;
}

.btn-primary {
    background: var(--cta-bg);
    color: var(--cta-ink);
}

.btn-ghost {
    border-color: var(--line);
    color: var(--ink);
}

.btn-small {
    min-height: 2.75rem;
    padding: 0.5rem 1.1rem;
}

@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-2px);
    }

    .btn-ghost:hover {
        border-color: var(--ink);
    }
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

.text-link .ph {
    transition: transform 0.2s var(--ease-out);
}

@media (hover: hover) {
    .text-link:hover .ph {
        transform: translateX(3px);
    }
}

/* Nagłówek
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--accent-text);
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
}

.brand img {
    border-radius: 50%;
}

.brand {
    margin-right: auto;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.header-tools {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.theme-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-size: 1.375rem;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s var(--ease-out);
}

.theme-toggle:active {
    transform: scale(0.94);
}

.theme-toggle .ph {
    grid-area: 1 / 1;
    transition: transform 0.6s var(--ease-out), opacity 0.3s;
}

/* Ikona pokazuje aktualny motyw: księżyc w ciemnym, słońce w jasnym */
.theme-toggle .ph-sun {
    opacity: 0;
    transform: rotate(-120deg) scale(0.3);
}

[data-theme="light"] .theme-toggle .ph-sun {
    opacity: 1;
    transform: none;
    color: var(--accent-text);
}

[data-theme="light"] .theme-toggle .ph-moon {
    opacity: 0;
    transform: rotate(120deg) scale(0.3);
}

@media (hover: hover) {
    .theme-toggle:hover {
        border-color: var(--ink);
    }
}

/* Zmiana motywu rozchodzi się kołem od przycisku (View Transitions) */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

.site-nav ul {
    display: flex;
    gap: 1.75rem;
}

.site-nav ul a {
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

@media (hover: hover) {
    .site-nav ul a:hover {
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
    }
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-size: 1.375rem;
    cursor: pointer;
}

/* Sześć pozycji menu i telefon mieszczą się w jednej linii od 1040px */
@media not all and (min-width: 1040px) {
    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        padding: 1.25rem var(--gutter) 1.5rem;
        background: var(--bg);
        box-shadow: var(--shadow);
        border-bottom: 1px solid var(--line);
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav ul {
        flex-direction: column;
        gap: 0;
    }

    .site-nav ul a {
        display: block;
        padding: 0.85rem 0;
        font-size: 1.125rem;
    }
}

/* Hero
   ========================================================================== */

.hero {
    padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 5.5rem);
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4.5rem);
}

.hero h1 {
    font-size: clamp(1.5rem, 3.9vw, 3.25rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.035em;
    text-wrap: initial;
}

.hero h1 span {
    display: block;
}

.hero h1 span:last-child {
    color: var(--accent-text);
}

.lead {
    max-width: 34rem;
    margin-top: 1.5rem;
    color: var(--ink-soft);
    font-size: clamp(1.125rem, 1.6vw, 1.25rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
}

/* Grafika zakresu: od wyszukiwania do telefonu */
.scope {
    padding: clamp(1.25rem, 3vw, 2rem);
    background:
        radial-gradient(circle at 1px 1px, var(--line) 1px, transparent 0) 0 0 / 22px 22px,
        var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow);
}

.scope-inner {
    display: grid;
}

.scope-search {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.25rem;
    padding: 0.5rem 1.25rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
}

.scope-search .ph {
    flex: none;
    color: var(--accent-text);
    font-size: 1.25rem;
}

.scope-caret {
    width: 2px;
    height: 1.2em;
    margin-left: -0.6rem;
    background: var(--accent-text);
}

.scope-lines {
    display: block;
    width: 100%;
    height: 3.25rem;
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
}

.scope-lines path {
    vector-effect: non-scaling-stroke;
}

.scope-nodes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.scope-nodes li {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.35rem;
    padding: 1rem 0.5rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    text-align: center;
}

.scope-nodes .ph {
    margin-bottom: 0.25rem;
    color: var(--accent-text);
    font-size: 1.75rem;
}

.scope-nodes strong {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.scope-nodes span {
    color: var(--ink-soft);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.scope-call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 1.25rem;
    background: var(--brand);
    border-radius: var(--radius-pill);
    color: var(--brand-ink);
    font-size: 1.0625rem;
    font-weight: 600;
}

.scope-call .ph {
    color: var(--accent);
    font-size: 1.5rem;
    transform-origin: 50% 60%;
}

.scope-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.scope-foot .ph {
    color: var(--accent-text);
    font-size: 1.125rem;
}

@media (max-width: 899px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479px) {
    .scope-nodes {
        gap: 0.5rem;
    }

    .scope-nodes strong {
        font-size: 0.875rem;
    }

    .scope-nodes span {
        display: none;
    }

    .scope-call {
        font-size: 1rem;
    }
}

@media (max-width: 479px) {
    .hero-actions .btn {
        width: 100%;
    }
}

/* Sekcje
   ========================================================================== */

.section {
    padding-block: calc(var(--section-gap) / 2);
}

.section-head {
    max-width: 44rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head p {
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
}

.plain-list {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.plain-list li {
    position: relative;
    padding-left: 1.25rem;
}

.plain-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.5rem;
    height: 2px;
    background: var(--accent);
}

/* Trzy rzeczy, o które dbamy
   ========================================================================== */

.care-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
}

.care-cell {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-panel);
}

.care-cell > .ph {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 2.25rem;
}

.care-cell p {
    margin-top: 0.75rem;
    max-width: 36rem;
}

.care-site {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: var(--brand);
    color: var(--brand-ink);
}

.care-site h3 {
    margin-top: auto;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.care-site p,
.care-site .plain-list {
    color: var(--brand-ink-soft);
}

.care-site > .ph {
    margin-bottom: 4rem;
}

.care-site > .ph {
    color: var(--accent);
}

.care-google {
    background: var(--tint);
}

.care-social {
    background: var(--surface);
    border: 1px solid var(--line);
}

.care-google p,
.care-social p {
    color: var(--ink-soft);
}

@media (max-width: 767px) {
    .care-grid {
        grid-template-columns: 1fr;
    }

    .care-site {
        grid-row: auto;
    }

}

/* Poziomy opieki
   ========================================================================== */

.plan {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    padding-block: clamp(1.75rem, 3.5vw, 2.75rem);
    border-top: 1px solid var(--line);
}

.plan h3 {
    font-size: clamp(1.25rem, 2.1vw, 1.625rem);
}

.plan-scope {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.3rem 0.85rem;
    background: var(--tint);
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 600;
}

.plan-intro p:last-child {
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

.check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 0.85rem 2rem;
}

.check-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.6rem;
}

.check-list .ph {
    margin-top: 0.15em;
    color: var(--accent-text);
    font-size: 1.25rem;
}

.plans-note {
    max-width: 44rem;
    padding-top: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
}

@media (max-width: 767px) {
    .plan,
    .check-list {
        grid-template-columns: 1fr;
    }
}

/* Rozliczenie
   ========================================================================== */

.billing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.billing-option {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
}

.billing-option p {
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

.billing-subscription {
    background: var(--tint);
    border-color: transparent;
}

.billing-option .fine-print {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink);
    font-size: 0.9375rem;
}

@media (max-width: 767px) {
    .billing {
        grid-template-columns: 1fr;
    }
}

/* Realizacja
   ========================================================================== */

.page-head {
    padding-block: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.page-head h1 {
    font-size: clamp(1.625rem, 3.3vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
}

.frame {
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow);
}

.frame img {
    width: 100%;
}

.photo-slot {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.75rem;
    min-height: 14rem;
    padding: 2rem;
    border: 2px dashed var(--line);
    border-radius: var(--radius-panel);
    color: var(--ink-soft);
    text-align: center;
    font-size: 0.9375rem;
}

.photo-slot .ph {
    font-size: 2rem;
}

/* Dla kogo
   ========================================================================== */

.audience li {
    border-top: 1px solid var(--line);
}

.audience a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: clamp(1rem, 2.4vw, 1.6rem);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2.2vw, 1.4375rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: padding-left 0.3s var(--ease-out), color 0.2s;
}

.audience .ph {
    flex: none;
    font-size: 0.8em;
    transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
    .audience a:hover {
        padding-left: 0.75rem;
    }

    .audience a:hover .ph {
        transform: translateX(-0.5rem);
    }
}

.places {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
}

.places ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.places a {
    display: inline-block;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink);
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
    .places a:hover {
        background: var(--tint);
        border-color: transparent;
    }
}

/* Co się dzieje po telefonie
   ========================================================================== */

.steps-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
}

.steps-grid h2 {
    position: sticky;
    top: 6.5rem;
}

.steps {
    display: grid;
    gap: 1rem;
    counter-reset: krok;
}

.steps li {
    position: relative;
    padding: 1.5rem 1.5rem 1.5rem 5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    counter-increment: krok;
}

.steps li::before {
    content: counter(krok);
    position: absolute;
    left: 1.5rem;
    top: 1.4rem;
    display: grid;
    place-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--accent);
    border-radius: var(--radius-pill);
    color: var(--accent-ink);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
}

.steps p {
    margin-top: 0.4rem;
    color: var(--ink-soft);
}

@media (max-width: 767px) {
    .steps-grid {
        grid-template-columns: 1fr;
    }

    .steps-grid h2 {
        position: static;
    }
}

/* Kontakt
   ========================================================================== */

.contact-panel {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(2rem, 5vw, 4rem);
    padding: clamp(1.5rem, 5vw, 4rem);
    background: var(--brand);
    border-radius: var(--radius-panel);
    color: var(--brand-ink);
}

.contact-panel-simple {
    grid-template-columns: 1fr;
}

.contact-copy p,
.contact-copy address {
    color: var(--brand-ink-soft);
}

.phone-big {
    display: inline-block;
    margin-block: 1.5rem 0.75rem;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 4.6vw, 3.25rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.035em;
    text-decoration: none;
    white-space: nowrap;
}

.contact-copy address {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(243, 245, 236, 0.2);
}

.callback {
    display: grid;
    gap: 1.25rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface);
    border-radius: var(--radius-panel);
    color: var(--ink);
}

.field {
    display: grid;
    gap: 0.5rem;
}

.field label {
    font-weight: 600;
}

.optional {
    color: var(--ink-soft);
    font-weight: 400;
}

.field input[type="text"],
.field input[type="tel"] {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    background: var(--bg);
    border: 1.5px solid var(--ink-soft);
    border-radius: var(--radius-field);
    color: var(--ink);
    font: inherit;
}

.field input[aria-invalid="true"] {
    border-color: var(--error);
}

.field-help {
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.field-error {
    color: var(--error);
    font-size: 0.9375rem;
    font-weight: 500;
}

.field-check {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 0.5rem 0.75rem;
}

.field-check input {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.15rem 0 0;
    accent-color: var(--brand);
}

.field-check label {
    font-size: 0.9375rem;
    font-weight: 400;
}

.field-check .field-error {
    grid-column: 2;
}

.callback .btn {
    justify-self: start;
}

.callback .btn[disabled] {
    opacity: 0.6;
    cursor: progress;
}

.form-status {
    padding: 0.85rem 1rem;
    background: var(--tint);
    border-radius: var(--radius-field);
    font-weight: 500;
}

.form-status.is-error {
    background: transparent;
    border: 1.5px solid var(--error);
    color: var(--error);
}

@media (max-width: 899px) {
    .contact-panel {
        grid-template-columns: 1fr;
    }
}

/* Stopka
   ========================================================================== */

.site-footer {
    margin-top: calc(var(--section-gap) / 2);
    padding-block: 3.5rem 2rem;
    border-top: 1px solid var(--line);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr repeat(4, 1fr);
    gap: 2.5rem;
}

.footer-about p {
    max-width: 22rem;
    margin-top: 1rem;
    color: var(--ink-soft);
}

.site-footer h2 {
    margin-bottom: 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.footer-grid ul {
    display: grid;
    gap: 0.6rem;
    color: var(--ink-soft);
}

.site-footer a {
    text-decoration: none;
}

@media (hover: hover) {
    .site-footer a:hover {
        color: var(--ink);
        text-decoration: underline;
    }
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.footer-bottom ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}

@media (max-width: 899px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Przycisk telefonu na małych ekranach: sama ikona w rogu
   ========================================================================== */

.call-bar {
    display: none;
}

@media (max-width: 767px) {
    .call-bar {
        position: fixed;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: 20;
        display: grid;
        place-items: center;
        width: 3.75rem;
        height: 3.75rem;
        background: var(--cta-bg);
        border-radius: var(--radius-pill);
        box-shadow: var(--shadow);
        color: var(--cta-ink);
        text-decoration: none;
        transition: transform 0.3s var(--ease-out), opacity 0.3s;
    }

    .call-bar:active {
        transform: scale(0.94);
    }

    .call-bar.is-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(150%);
    }

    .call-bar .ph {
        font-size: 1.625rem;
    }

    /* Miejsce pod stopką, żeby przycisk nie zasłaniał ostatnich linków */
    .site-footer {
        padding-bottom: 5.5rem;
    }

    /* Numer zostaje dla czytników ekranu, na ekranie widać tylko ikonę */
    .call-bar span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Ruch: wejście hero i odsłanianie sekcji przy przewijaniu
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .hero-copy > * {
        animation: wejscie 0.7s var(--ease-out) both;
    }

    .hero-copy > :nth-child(2) { animation-delay: 0.08s; }
    .hero-copy > :nth-child(3) { animation-delay: 0.16s; }

    .scope {
        animation: wejscie 0.7s var(--ease-out) 0.2s both;
    }

    .scope-lines {
        animation: przeplyw 1.4s linear infinite;
    }

    .scope-caret {
        animation: kursor 1s steps(1) infinite;
    }

    .scope-call .ph {
        animation: dzwonek 3s ease-in-out infinite;
    }

    .scope-foot .ph {
        animation: obrot 8s linear infinite;
    }

    .js .reveal {
        opacity: 0;
        transform: translateY(1.25rem);
        transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    }

    .js .reveal.is-visible {
        opacity: 1;
        transform: none;
    }
}

@keyframes przeplyw {
    to {
        stroke-dashoffset: -20;
    }
}

@keyframes kursor {
    50% {
        opacity: 0;
    }
}

@keyframes dzwonek {
    0%, 70%, 100% { transform: rotate(0); }
    75%, 85% { transform: rotate(-14deg); }
    80%, 90% { transform: rotate(14deg); }
}

@keyframes obrot {
    to {
        transform: rotate(360deg);
    }
}

@keyframes wejscie {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}

.site-nav ul a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
}

/* Podstrony: podział obowiązków, pytania, dane kontaktowe, o studiu
   ========================================================================== */

.duties {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 1rem;
}

.duties-col {
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-panel);
}

.duties-ours {
    background: var(--brand);
    color: var(--brand-ink);
}

.duties-ours .plain-list {
    color: var(--brand-ink-soft);
}

.duties-yours {
    background: var(--surface);
    border: 1px solid var(--line);
}

.duties-yours .plain-list {
    color: var(--ink-soft);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.details-grid h2 {
    margin-bottom: 1rem;
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

.details-grid p,
.details-grid address {
    color: var(--ink-soft);
}

.details-grid .text-link {
    margin-top: 1rem;
    color: var(--ink);
}

.founder {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.photo-slot-portrait {
    aspect-ratio: 4 / 5;
}

.founder-copy p {
    max-width: 38rem;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: 1.125rem;
}

.founder-copy .role {
    margin-top: 0.5rem;
    color: var(--accent-text);
    font-size: 1rem;
    font-weight: 600;
}

.principles {
    margin: 0;
    border-bottom: 1px solid var(--line);
}

.principles > div {
    display: grid;
    grid-template-columns: 0.8fr 1.6fr;
    gap: clamp(1rem, 4vw, 3rem);
    padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
    border-top: 1px solid var(--line);
}

.principles dt {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.03em;
}

.principles dd {
    max-width: 40rem;
    margin: 0;
    color: var(--ink-soft);
}

.aside-panel {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--accent-tint);
    border-radius: var(--radius-panel);
}

.aside-panel > .ph {
    flex: none;
    color: var(--accent-text);
    font-size: 2.25rem;
}

.aside-panel h2 {
    font-size: clamp(1.1875rem, 2vw, 1.5rem);
}

.aside-panel p {
    max-width: 40rem;
    margin-block: 0.75rem 1.25rem;
    color: var(--ink-soft);
}

@media (max-width: 767px) {
    .duties,
    .details-grid,
    .founder,
    .principles > div {
        grid-template-columns: 1fr;
    }

    .principles > div {
        gap: 0.5rem;
    }

    .photo-slot-portrait {
        max-width: 18rem;
    }

    .aside-panel {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Arkusze i strony prawne
   ========================================================================== */

.duties-even {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose > * {
    max-width: 46rem;
}

.prose h2 {
    margin-top: 2.5rem;
    font-size: clamp(1.0625rem, 1.7vw, 1.3125rem);
}

.prose p,
.prose ul {
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

.prose ul {
    padding-left: 1.25rem;
    list-style: disc;
}

.prose li + li {
    margin-top: 0.5rem;
}

.prose strong {
    color: var(--ink);
}

.prose a {
    color: var(--accent-text);
}

@media (max-width: 767px) {
    .duties-even {
        grid-template-columns: 1fr;
    }
}

/* Strona główna: skrót poziomów opieki
   ========================================================================== */

.levels {
    border-bottom: 1px solid var(--line);
}

.levels li {
    border-top: 1px solid var(--line);
}

.levels a {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) auto;
    align-items: center;
    gap: 0.25rem 2rem;
    padding-block: clamp(1rem, 2.4vw, 1.5rem);
    text-decoration: none;
    transition: padding-left 0.3s var(--ease-out);
}

.levels strong {
    font-family: var(--font-display);
    font-size: clamp(1.125rem, 2.2vw, 1.5rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.levels span {
    color: var(--ink-soft);
}

.levels .ph {
    font-size: 1.25rem;
    transition: transform 0.3s var(--ease-out);
}

@media (hover: hover) {
    .levels a:hover {
        padding-left: 0.75rem;
    }

    .levels a:hover .ph {
        transform: translateX(-0.5rem);
    }
}

@media (max-width: 767px) {
    .levels a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .levels span {
        grid-column: 1;
        grid-row: 2;
    }

    .levels .ph {
        grid-row: 1 / span 2;
    }
}

.contact-copy .text-link {
    margin-top: 1.5rem;
}

.details-grid .nip {
    margin-top: 0.5rem;
}

.next-link {
    padding-bottom: calc(var(--section-gap) / 2);
}

/* Realizacje: slider z kartami wczytywanymi z JSON
   ========================================================================== */

.slider-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.slider-track::-webkit-scrollbar {
    display: none;
}

.slider[data-kind="projekt"] .slider-track {
    grid-auto-columns: calc((100% - 1rem) / 2);
}

.project {
    display: grid;
    align-content: start;
    gap: clamp(1.25rem, 3vw, 2rem);
    scroll-snap-align: start;
}

.slider[data-kind="wdrozenie"] .project {
    grid-template-columns: 1.2fr 0.8fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.project .frame {
    box-shadow: none;
}

.project .frame img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: top;
}

.project-concept {
    padding: 1rem 1rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
}

.project-concept .frame {
    border-radius: var(--radius-field);
}

.project-concept .project-body {
    padding-inline: 0.5rem;
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.project-flag {
    padding: 0.2rem 0.75rem;
    background: var(--accent-tint);
    border-radius: var(--radius-pill);
    color: var(--accent-text);
    font-weight: 600;
}

.slider[data-kind="wdrozenie"] .project h3 {
    font-size: clamp(1.375rem, 2.5vw, 1.9375rem);
}

.project-text {
    max-width: 36rem;
    margin-top: 0.75rem;
    color: var(--ink-soft);
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.project-tags li {
    padding: 0.3rem 0.85rem;
    background: var(--tint);
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    font-weight: 500;
}

.project-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 1.5rem;
}

.project-social {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 1.25rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

@media (hover: hover) {
    .project-social:hover {
        border-color: var(--accent-text);
        color: var(--accent-text);
    }
}

.project-skeleton {
    min-height: clamp(14rem, 34vw, 24rem);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
}

.slider-status {
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    color: var(--ink-soft);
}

.slider-nav {
    display: none;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.slider.has-nav .slider-nav {
    display: flex;
}

.slider-btn {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink);
    font-size: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, opacity 0.2s, transform 0.2s var(--ease-out);
}

.slider-btn:active {
    transform: scale(0.94);
}

.slider-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

@media (hover: hover) {
    .slider-btn:not(:disabled):hover {
        border-color: var(--ink);
    }
}

@media (max-width: 767px) {
    .slider[data-kind="wdrozenie"] .project {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .slider[data-kind="projekt"] .slider-track {
        grid-auto-columns: 88%;
    }
}

.project-shot {
    display: block;
    overflow: hidden;
}

.project-shot img {
    transition: transform 0.6s var(--ease-out);
}

.project h3 a {
    text-decoration: none;
}

@media (hover: hover) {
    .project-shot:hover img {
        transform: scale(1.03);
    }

    .project h3 a:hover {
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
    }
}

/* Pola dotyku w stopce i formularzu: co najmniej 24px wysokości
   ========================================================================== */

.footer-grid ul {
    gap: 0.1rem;
}

.footer-grid ul a,
.footer-bottom a {
    display: inline-block;
    padding-block: 0.3rem;
}

.footer-grid li:not(:has(a)) {
    padding-block: 0.3rem;
}

.field-check input {
    width: 1.5rem;
    height: 1.5rem;
}

@media not all and (min-width: 1040px) {
    .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-about {
        grid-column: 1 / -1;
    }
}

@media (max-width: 479px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1040px) {
    .site-nav ul a {
        padding-block: 0.4rem;
    }
}

/* Pytania i odpowiedzi
   ========================================================================== */

.faq {
    max-width: 52rem;
    border-bottom: 1px solid var(--line);
}

.faq details {
    border-top: 1px solid var(--line);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: 1.25rem;
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary .ph {
    color: var(--accent-text);
    font-size: 1.25rem;
    transition: transform 0.3s var(--ease-out);
}

.faq details[open] summary .ph {
    transform: rotate(45deg);
}

.faq details p {
    max-width: 44rem;
    padding-bottom: 1.5rem;
    color: var(--ink-soft);
}


.founder {
    align-items: start;
}

.founder-copy h3 {
    margin-top: 2.25rem;
}

.founder-copy .plain-list {
    margin-top: 1rem;
    color: var(--ink-soft);
}

.founder-copy p a {
    color: var(--accent-text);
}

/* Zdjęcia: nagłówek podstrony i duży kafel na stronie głównej
   ========================================================================== */

.page-head-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.page-photo img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.care-photo {
    width: 100%;
    aspect-ratio: 3 / 2;
    margin-bottom: 1.75rem;
    object-fit: cover;
    border-radius: var(--radius-field);
}

@media (max-width: 899px) {
    .page-head-grid {
        grid-template-columns: 1fr;
    }
}

.founder-photo img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media (max-width: 767px) {
    .founder-photo {
        max-width: 18rem;
    }
}

.contact-panel-photo {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.contact-photo {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-field);
}

.contact-photo img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media (max-width: 899px) {
    .contact-panel-photo {
        grid-template-columns: 1fr;
    }
}

.footer-grid .footer-social {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.footer-grid .footer-social a {
    display: inline-grid;
    padding: 0;
    color: var(--ink);
}

/* Ikona bez adresu: widoczna, ale nieklikalna */
.project-social.is-inactive {
    border-color: var(--line);
    color: var(--ink-soft);
    opacity: 0.5;
    cursor: default;
}

/* Nagłówek H1 w dwóch liniach: duża i mniejsza ze słowami kluczowymi
   ========================================================================== */

h1 .h1-main,
h1 .h1-sub {
    display: block;
}

h1 .h1-sub {
    color: var(--accent-text);
    font-family: var(--font-body);
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
}

h1 .h1-sub:first-child {
    margin-bottom: 0.6rem;
}

h1 .h1-main + .h1-sub {
    margin-top: 0.6rem;
}

/* Ikony Phosphor (licencja MIT), tylko używane na stronie.
   Każda ikona to maska SVG, więc przyjmuje kolor i rozmiar tekstu.
   Nową ikonę dodaje się kolejną regułą .ph-nazwa z plikiem SVG z phosphoricons.com
   ========================================================================== */

.ph {
    display: inline-block;
    flex: none;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--ph) center / contain no-repeat;
    mask: var(--ph) center / contain no-repeat;
    vertical-align: -0.125em;
}

.ph-arrow-left { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph-arrow-right { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z'/%3E%3C/svg%3E"); }
.ph-arrow-up-right { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z'/%3E%3C/svg%3E"); }
.ph-arrows-clockwise { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,48V96a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h28.69L182.06,73.37a79.56,79.56,0,0,0-56.13-23.43h-.45A79.52,79.52,0,0,0,69.59,72.71,8,8,0,0,1,58.41,61.27a96,96,0,0,1,135,.79L208,76.69V48a8,8,0,0,1,16,0ZM186.41,183.29a80,80,0,0,1-112.47-.66L59.31,168H88a8,8,0,0,0,0-16H40a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V179.31l14.63,14.63A95.43,95.43,0,0,0,130,222.06h.53a95.36,95.36,0,0,0,67.07-27.33,8,8,0,0,0-11.18-11.44Z'/%3E%3C/svg%3E"); }
.ph-browser { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V88H40V56Zm0,144H40V104H216v96Z'/%3E%3C/svg%3E"); }
.ph-chats-circle { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232.07,186.76a80,80,0,0,0-62.5-114.17A80,80,0,1,0,23.93,138.76l-7.27,24.71a16,16,0,0,0,19.87,19.87l24.71-7.27a80.39,80.39,0,0,0,25.18,7.35,80,80,0,0,0,108.34,40.65l24.71,7.27a16,16,0,0,0,19.87-19.86ZM62,159.5a8.28,8.28,0,0,0-2.26.32L32,168l8.17-27.76a8,8,0,0,0-.63-6,64,64,0,1,1,26.26,26.26A8,8,0,0,0,62,159.5Zm153.79,28.73L224,216l-27.76-8.17a8,8,0,0,0-6,.63,64.05,64.05,0,0,1-85.87-24.88A79.93,79.93,0,0,0,174.7,89.71a64,64,0,0,1,41.75,92.48A8,8,0,0,0,215.82,188.23Z'/%3E%3C/svg%3E"); }
.ph-check { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E"); }
.ph-desktop-tower { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,72a8,8,0,0,1-8,8H176a8,8,0,0,1,0-16h32A8,8,0,0,1,216,72Zm-8,24H176a8,8,0,0,0,0,16h32a8,8,0,0,0,0-16Zm40-48V208a16,16,0,0,1-16,16H152a16,16,0,0,1-16-16V192H96v16h16a8,8,0,0,1,0,16H64a8,8,0,0,1,0-16H80V192H32A24,24,0,0,1,8,168V96A24,24,0,0,1,32,72H136V48a16,16,0,0,1,16-16h80A16,16,0,0,1,248,48ZM136,176V88H32a8,8,0,0,0-8,8v72a8,8,0,0,0,8,8Zm96,32V48H152V208h80Zm-40-40a12,12,0,1,0,12,12A12,12,0,0,0,192,168Z'/%3E%3C/svg%3E"); }
.ph-facebook-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z'/%3E%3C/svg%3E"); }
.ph-google-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a96,96,0,1,1-21.95-61.09,8,8,0,1,1-12.33,10.18A80,80,0,1,0,207.6,136H128a8,8,0,0,1,0-16h88A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph-image { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'/%3E%3C/svg%3E"); }
.ph-instagram-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z'/%3E%3C/svg%3E"); }
.ph-list { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E"); }
.ph-magnifying-glass { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z'/%3E%3C/svg%3E"); }
.ph-map-pin { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,64a40,40,0,1,0,40,40A40,40,0,0,0,128,64Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,128,128Zm0-112a88.1,88.1,0,0,0-88,88c0,31.4,14.51,64.68,42,96.25a254.19,254.19,0,0,0,41.45,38.3,8,8,0,0,0,9.18,0A254.19,254.19,0,0,0,174,200.25c27.45-31.57,42-64.85,42-96.25A88.1,88.1,0,0,0,128,16Zm0,206c-16.53-13-72-60.75-72-118a72,72,0,0,1,144,0C200,161.23,144.53,209,128,222Z'/%3E%3C/svg%3E"); }
.ph-moon { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M233.54,142.23a8,8,0,0,0-8-2,88.08,88.08,0,0,1-109.8-109.8,8,8,0,0,0-10-10,104.84,104.84,0,0,0-52.91,37A104,104,0,0,0,136,224a103.09,103.09,0,0,0,62.52-20.88,104.84,104.84,0,0,0,37-52.91A8,8,0,0,0,233.54,142.23ZM188.9,190.34A88,88,0,0,1,65.66,67.11a89,89,0,0,1,31.4-26A106,106,0,0,0,96,56,104.11,104.11,0,0,0,200,160a106,106,0,0,0,14.92-1.06A89,89,0,0,1,188.9,190.34Z'/%3E%3C/svg%3E"); }
.ph-phone { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M222.37,158.46l-47.11-21.11-.13-.06a16,16,0,0,0-15.17,1.4,8.12,8.12,0,0,0-.75.56L134.87,160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16,16,0,0,0,1.32-15.06l0-.12L97.54,33.64a16,16,0,0,0-16.62-9.52A56.26,56.26,0,0,0,32,80c0,79.4,64.6,144,144,144a56.26,56.26,0,0,0,55.88-48.92A16,16,0,0,0,222.37,158.46ZM176,208A128.14,128.14,0,0,1,48,80,40.2,40.2,0,0,1,82.87,40a.61.61,0,0,0,0,.12l21,47L83.2,111.86a6.13,6.13,0,0,0-.57.77,16,16,0,0,0-1,15.7c9.06,18.53,27.73,37.06,46.46,46.11a16,16,0,0,0,15.75-1.14,8.44,8.44,0,0,0,.74-.56L168.89,152l47,21.05h0s.08,0,.11,0A40.21,40.21,0,0,1,176,208Z'/%3E%3C/svg%3E"); }
.ph-phone-call { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M144.27,45.93a8,8,0,0,1,9.8-5.66,86.22,86.22,0,0,1,61.66,61.66,8,8,0,0,1-5.66,9.8A8.23,8.23,0,0,1,208,112a8,8,0,0,1-7.73-5.94,70.35,70.35,0,0,0-50.33-50.33A8,8,0,0,1,144.27,45.93Zm-2.33,41.8c13.79,3.68,22.65,12.54,26.33,26.33A8,8,0,0,0,176,120a8.23,8.23,0,0,0,2.07-.27,8,8,0,0,0,5.66-9.8c-5.12-19.16-18.5-32.54-37.66-37.66a8,8,0,1,0-4.13,15.46Zm81.94,95.35A56.26,56.26,0,0,1,168,232C88.6,232,24,167.4,24,88A56.26,56.26,0,0,1,72.92,32.12a16,16,0,0,1,16.62,9.52l21.12,47.15,0,.12A16,16,0,0,1,109.39,104c-.18.27-.37.52-.57.77L88,129.45c7.49,15.22,23.41,31,38.83,38.51l24.34-20.71a8.12,8.12,0,0,1,.75-.56,16,16,0,0,1,15.17-1.4l.13.06,47.11,21.11A16,16,0,0,1,223.88,183.08Zm-15.88-2s-.07,0-.11,0h0l-47-21.05-24.35,20.71a8.44,8.44,0,0,1-.74.56,16,16,0,0,1-15.75,1.14c-18.73-9.05-37.4-27.58-46.46-46.11a16,16,0,0,1,1-15.7,6.13,6.13,0,0,1,.57-.77L96,95.15l-21-47a.61.61,0,0,1,0-.12A40.2,40.2,0,0,0,40,88,128.14,128.14,0,0,0,168,216,40.21,40.21,0,0,0,208,181.07Z'/%3E%3C/svg%3E"); }
.ph-plus { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E"); }
.ph-scissors { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M157.73,113.13A8,8,0,0,1,159.82,102L227.48,55.7a8,8,0,0,1,9,13.21l-67.67,46.3a7.92,7.92,0,0,1-4.51,1.4A8,8,0,0,1,157.73,113.13Zm80.87,85.09a8,8,0,0,1-11.12,2.08L136,137.7,93.49,166.78a36,36,0,1,1-9-13.19L121.83,128,84.44,102.41a35.86,35.86,0,1,1,9-13.19l143,97.87A8,8,0,0,1,238.6,198.22ZM80,180a20,20,0,1,0-5.86,14.14A19.85,19.85,0,0,0,80,180ZM74.14,90.13a20,20,0,1,0-28.28,0A19.85,19.85,0,0,0,74.14,90.13Z'/%3E%3C/svg%3E"); }
.ph-sun { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,40V16a8,8,0,0,1,16,0V40a8,8,0,0,1-16,0Zm72,88a64,64,0,1,1-64-64A64.07,64.07,0,0,1,192,128Zm-16,0a48,48,0,1,0-48,48A48.05,48.05,0,0,0,176,128ZM58.34,69.66A8,8,0,0,0,69.66,58.34l-16-16A8,8,0,0,0,42.34,53.66Zm0,116.68-16,16a8,8,0,0,0,11.32,11.32l16-16a8,8,0,0,0-11.32-11.32ZM192,72a8,8,0,0,0,5.66-2.34l16-16a8,8,0,0,0-11.32-11.32l-16,16A8,8,0,0,0,192,72Zm5.66,114.34a8,8,0,0,0-11.32,11.32l16,16a8,8,0,0,0,11.32-11.32ZM48,128a8,8,0,0,0-8-8H16a8,8,0,0,0,0,16H40A8,8,0,0,0,48,128Zm80,80a8,8,0,0,0-8,8v24a8,8,0,0,0,16,0V216A8,8,0,0,0,128,208Zm112-88H216a8,8,0,0,0,0,16h24a8,8,0,0,0,0-16Z'/%3E%3C/svg%3E"); }
.ph-tiktok-logo { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,72a48.05,48.05,0,0,1-48-48,8,8,0,0,0-8-8H128a8,8,0,0,0-8,8V156a20,20,0,1,1-28.57-18.08A8,8,0,0,0,96,130.69V88a8,8,0,0,0-9.4-7.88C50.91,86.48,24,119.1,24,156a76,76,0,0,0,152,0V116.29A103.25,103.25,0,0,0,224,128a8,8,0,0,0,8-8V80A8,8,0,0,0,224,72Zm-8,39.64a87.19,87.19,0,0,1-43.33-16.15A8,8,0,0,0,160,102v54a60,60,0,0,1-120,0c0-25.9,16.64-49.13,40-57.6v27.67A36,36,0,1,0,136,156V32h24.5A64.14,64.14,0,0,0,216,87.5Z'/%3E%3C/svg%3E"); }
.ph-x { --ph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E"); }

/* Sześć pozycji menu: na węższych ekranach komputerowych mniejsze odstępy */
@media (min-width: 1040px) and (max-width: 1199px) {
    .header-inner {
        gap: 1rem;
    }

    .site-nav {
        gap: 1rem;
    }

    .site-nav ul {
        gap: 1rem;
    }
}

/* Zgoda na statystyki: pasek na dole ekranu i link do zmiany decyzji w stopce
   ========================================================================== */

.consent {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    z-index: 25;
    display: flex;
    align-items: center;
    gap: 1rem 1.5rem;
    width: min(100% - 2rem, 54rem);
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow);
    translate: -50% 0;
}

.consent-text {
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

.consent-text a {
    color: var(--ink);
    white-space: nowrap;
}

.consent-actions {
    display: flex;
    flex-shrink: 0;
    gap: 0.5rem;
}

/* Oba przyciski wyglądają tak samo: odmowa ma być równie łatwa jak zgoda */
.consent-actions .btn {
    background: none;
}

.link-button {
    padding: 0.3rem 0;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

@media (hover: hover) {
    .link-button:hover {
        text-decoration: underline;
    }
}

@media (max-width: 767px) {
    .consent {
        flex-direction: column;
        align-items: stretch;
    }

    .consent-actions .btn {
        flex: 1;
    }

    /* Pasek zgody zajmuje dół ekranu, więc przycisk telefonu czeka na decyzję */
    .has-consent-banner .call-bar {
        opacity: 0;
        pointer-events: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .consent {
        animation: wejscie 0.5s var(--ease-out) both;
    }
}

/* Podstrona projektu: zrzuty ekranu i widok na telefonie
   ========================================================================== */

.page-photo-wide img {
    aspect-ratio: 16 / 9;
    object-position: top;
}

.shots {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.shot {
    margin: 0;
}

.shot .frame {
    display: block;
    transition: transform 0.3s var(--ease-out), border-color 0.2s;
}

.shot figcaption {
    margin-top: 0.75rem;
    color: var(--ink-soft);
    font-size: 0.9375rem;
}

@media (hover: hover) {
    .shot .frame:hover {
        border-color: var(--accent);
        transform: translateY(-3px);
    }
}

.phones-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}

.phones-lead {
    margin: 1rem 0 1.5rem;
    color: var(--ink-soft);
}

.phones {
    display: flex;
    justify-content: center;
    gap: clamp(0.75rem, 2vw, 1.25rem);
}

.phone {
    width: min(48%, 15rem);
    border-radius: 1.75rem;
}

.phone img {
    aspect-ratio: 520 / 1125;
    object-fit: cover;
}

.phone:last-child {
    margin-top: 2.5rem;
}

@media (max-width: 899px) {
    .shots,
    .phones-grid {
        grid-template-columns: 1fr;
    }
}

/* Dwa linki obok siebie pod tekstem panelu bocznego */
.aside-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
}