/* Sybernetic v3 — home page: hero with its media frame and the optional scan (Panel → Wygląd strony). */
.sy-hero { position: relative; padding-block: clamp(36px, 4vw + 16px, 88px) clamp(48px, 4vw + 24px, 96px); overflow: hidden; }
.sy-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(70% 60% at 78% 40%, rgba(168, 213, 178, .06), transparent 70%),
        linear-gradient(180deg, transparent 70%, rgba(18, 26, 21, .9));
}
.sy-hero__grid { position: relative; display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .sy-hero__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 13fr); gap: 32px; } }
.sy-hero__copy { max-width: 36rem; }
.sy-hero h1 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.75rem); }
@media (min-width: 960px) and (max-width: 1199px) { .sy-hero h1 { font-size: clamp(2.5rem, 1rem + 3.6vw, 3.5rem); } }
/* Wide screens: the hero takes the wider content area (--container) with it. The text fills its column,
   the title grows to 96 px, and the photo frame turns 3:2 (the photo's own shape) so it grows in width
   without getting taller than the first screen. */
@media (min-width: 1440px) {
    .sy-hero__grid { gap: clamp(32px, 4vw - 24px, 72px); }
    .sy-hero__copy { max-width: none; }
    .sy-hero h1 { font-size: clamp(4.75rem, 1.75rem + 3.2vw, 6rem); }
    .sy-hero .sy-lead { max-width: 40rem; }
}
.sy-hero .sy-lead { margin-top: 22px; }
@media (max-width: 479px) { .sy-hero .sy-lead { margin-top: 18px; font-size: 1.0625rem; } }
.sy-hero .sy-cta { margin-top: 30px; }
/* Three facts that make the first message easy, right under the buttons */
.sy-hero__proof { list-style: none; display: grid; gap: 10px; margin: 28px 0 0; padding: 0; color: var(--tx-2); font: 500 var(--t-sm)/1.4 var(--ff-display); }
.sy-hero__proof li { display: flex; align-items: center; gap: 12px; }
.sy-hero__proof svg { flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; background: rgba(168, 213, 178, .12); color: var(--ac-400); }

/* Media on the right (desktop only): the workbench photo from content/hero-media.json in a viewfinder
   frame; a film set there plays over it (hero-media.js). Phones show the text and buttons alone, and the
   photo is not downloaded there (the <source> matches only from 960 px).
   Panel → Wygląd strony → animacja: a scanning line passes over the frame twice (about 4.5 s, no loop). */
.sy-hero__media { display: none; }
@media (min-width: 960px) {
    .sy-hero__media { position: relative; display: block; min-width: 0; margin: 0; }
    .sy-hero__frame { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border: 1px solid var(--line-2); border-radius: var(--r-xl); background: var(--bg1); }
    .sy-hero__photo, .sy-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .sy-hero__video { opacity: 0; transition: opacity 500ms var(--ease-out); }
    .is-playing .sy-hero__video { opacity: 1; }
    /* Shade at the edges, then four viewfinder corners */
    .sy-hero__frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(12, 16, 14, .55)), linear-gradient(180deg, transparent 60%, rgba(12, 16, 14, .45)); }
    .sy-hero__frame::after {
        --c: var(--ac-400); content: ''; position: absolute; inset: 18px; z-index: 2; pointer-events: none;
        background:
            linear-gradient(var(--c), var(--c)) left top / 30px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 30px no-repeat,
            linear-gradient(var(--c), var(--c)) right top / 30px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 30px no-repeat,
            linear-gradient(var(--c), var(--c)) left bottom / 30px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 30px no-repeat,
            linear-gradient(var(--c), var(--c)) right bottom / 30px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 30px no-repeat;
    }
    /* The line is a band in a background three times the frame's height; moving the background moves the
       band from above the frame to below it, while the element itself never leaves the frame. */
    .sy-hero__scan { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(180deg, transparent 0 42%, rgba(168, 213, 178, .1) 48%, rgba(210, 231, 197, .45) 49.8%, transparent 50%) 0 100% / 100% 300% no-repeat; }
    .sy-hero__cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--tx-3); font: 500 var(--t-sm)/1.4 var(--ff-display); }
    .sy-hero__cap::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ac-400); box-shadow: 0 0 0 4px rgba(168, 213, 178, .16); }
    .sy-hero__pause { position: absolute; right: 16px; bottom: 16px; z-index: 3; min-height: 44px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r-md); background: rgba(12, 16, 14, .78); color: var(--tx); font: 600 .875rem/1 var(--ff-display); cursor: pointer; }
    .sy-hero__pause:hover { border-color: var(--ac-400); }
}
@media (min-width: 1440px) { .sy-hero__frame { aspect-ratio: 3 / 2; } }
@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
    .sy-hero--anim .sy-hero__scan { animation: sy-scan 2.2s var(--ease-in-out) .5s 2; }
}
@keyframes sy-scan { from { opacity: 1; background-position: 0 100%; } to { opacity: 1; background-position: 0 0; } }

/* "Ważna informacja" notice: text, position and sizes as before (site-preview-notice.css); only the
   colours follow the v3 palette, and the type uses the v3 families because the old fonts are not loaded. */
.site-preview-notice { position: fixed; inset: 0; z-index: 5000; padding: 1rem; display: grid; place-items: center; background: rgba(5, 8, 6, .84); }
.site-preview-notice[hidden] { display: none; }
.site-preview-notice:not([hidden]) { animation: sy-fade-in 320ms var(--ease-out) both; }
.site-preview-notice:not([hidden]) .site-preview-notice__panel { animation: sy-pop 420ms var(--ease-out) 60ms both; }
.site-preview-notice.is-leaving { animation: sy-fade-out 220ms var(--ease-in-out) forwards; pointer-events: none; }
.site-preview-notice.is-leaving .site-preview-notice__panel { animation: sy-pop-out 220ms var(--ease-in-out) forwards; }
.site-preview-notice__panel { width: min(100%, 560px); padding: clamp(1.6rem, 5vw, 2.5rem); background: var(--bg2); border: 1px solid rgba(255, 255, 255, .16); border-top: 3px solid var(--ac-400); border-radius: 8px; }
.site-preview-notice__eyebrow { margin: 0 0 .75rem; color: var(--ac-300); font: 600 .72rem/1.3 var(--ff-display); letter-spacing: .18em; text-transform: uppercase; }
.site-preview-notice__panel h2 { margin: 0; color: var(--tx); font-family: var(--ff-display); font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.08; }
.site-preview-notice__panel p:not(.site-preview-notice__eyebrow) { margin: 1rem 0 0; color: var(--tx-2); font-family: var(--ff-text); font-size: 1rem; line-height: 1.6; }
.site-preview-notice__close { width: 100%; min-height: 50px; margin-top: 1.5rem; padding: .8rem 1.2rem; background: var(--ac-500); border: 1px solid var(--ac-500); border-radius: 7px; color: var(--on-ac); font: 600 .95rem/1 var(--ff-display); cursor: pointer; }
.site-preview-notice__close:hover, .site-preview-notice__close:focus-visible { background: var(--ac-400); border-color: var(--ac-400); }
body.preview-notice-open { overflow: hidden; }