/* Sybernetic v3 — shared blocks: facts, service tiles, process timeline, illustrations with
   information points, about, questions, closing call to action. */

/* ---------- Cena, czas, gwarancja ---------- */
.sy-facts-band { border-block: 1px solid var(--line); }
.sy-facts__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.sy-facts__head h2 { font-size: var(--t-xl); }
.sy-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 1024px) { .sy-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sy-fact { background: var(--bg1); padding: clamp(16px, 2vw, 28px); display: grid; align-content: start; gap: 6px; }
.sy-facts-band:not(.sy-section--alt) .sy-fact { background: var(--bg0); }
.sy-fact dt { color: var(--tx-2); font: 600 var(--t-sm)/1.3 var(--ff-display); }
.sy-fact dd { margin: 0; display: grid; gap: 8px; }
.sy-fact strong { color: var(--ac-300); font: 500 clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem)/1.02 var(--ff-head); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.sy-fact span { color: var(--tx-2); font: 400 .9688rem/1.45 var(--ff-text); }
@media (max-width: 479px) { .sy-fact span { font-size: .9375rem; } }

/* ---------- Service tiles: 4 in a row from 1024 px, 2 × 2 below; the whole tile is the link ---------- */
.sy-tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
@media (min-width: 1024px) { .sy-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.sy-tile {
    position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 10px; min-width: 0;
    padding: 0 0 22px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
    transition: border-color 220ms var(--ease-out), background-color 220ms var(--ease-out);
}
/* The parts of the tiles in one row line up (title, sentence), whatever their length. */
@supports (grid-template-rows: subgrid) {
    .sy-tile { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; align-content: start; }
    .sy-tile h3 { align-self: end; }
}
/* A soft light follows the pointer over the tile (ui/sy.js sets --mx and --my). */
.sy-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 30%), rgba(168, 213, 178, .13), transparent 65%); opacity: 0; transition: opacity 260ms var(--ease-out); }
.sy-tile__art { display: grid; place-items: center; aspect-ratio: 16 / 10; background: radial-gradient(80% 90% at 50% 40%, rgba(168, 213, 178, .07), transparent 70%); border-bottom: 1px solid var(--line); }
.sy-tile__art .sy-symbol { width: 128px; height: 128px; transition: transform 240ms var(--ease-out); }
@media (max-width: 479px) { .sy-tile__art .sy-symbol { width: 96px; height: 96px; } }
.sy-tile h3 { padding: 6px 18px 0; font: 500 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.18 var(--ff-head); }
.sy-tile__link { color: var(--tx); text-decoration: none; }
.sy-tile__link::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.sy-tile__link:focus-visible { outline: none; }
.sy-tile:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.sy-tile p { margin: 0; padding: 0 18px; color: var(--tx-2); font: 400 .9688rem/1.5 var(--ff-text); }
.sy-tile__go { position: absolute; right: 14px; top: 14px; pointer-events: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(12, 16, 14, .7); border: 1px solid var(--line-2); color: var(--ac-300); transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out); }
@media (hover: hover) {
    .sy-tile:hover { border-color: var(--ac-400); background-color: var(--bg2); }
    .sy-tile:hover::before { opacity: 1; }
    .sy-tile:hover .sy-tile__art .sy-symbol { transform: translateY(-3px) scale(1.04); }
    .sy-tile:hover .sy-tile__go { background: var(--ac-500); color: var(--on-ac); transform: rotate(-45deg); }
}
@media (max-width: 479px) {
    .sy-tile { gap: 8px; row-gap: 8px; padding-bottom: 16px; }
    .sy-tile h3 { padding: 4px 12px 0; }
    .sy-tile p { padding: 0 12px; font-size: .875rem; }
    .sy-tile__go { width: 30px; height: 30px; right: 8px; top: 8px; }
}

/* ---------- Process: numbered steps with every description visible; a row from 900 px, a column below.
   While the page scrolls, the steps light up one after another: the number fills with mint and glows,
   the title is underlined and the line to the next step fills (ui/sy.js adds .is-lit). Without the
   script, or with reduced motion, every step is lit. ---------- */
.sy-flow { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.sy-flow__step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding-bottom: 26px; }
.sy-flow__step::before, .sy-flow__step::after { content: ''; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px; background: var(--line-2); }
.sy-flow__step::after { background: linear-gradient(180deg, var(--ac-400), var(--ac-600)); transform-origin: 50% 0; transform: scaleY(0); transition: transform 520ms var(--ease-out) 120ms; }
.sy-flow__step:last-child { padding-bottom: 0; }
.sy-flow__step:last-child::before, .sy-flow__step:last-child::after { display: none; }
.sy-flow__n {
    position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--line-ui); background: var(--bg0); color: var(--tx-2); font: 600 1rem/1 var(--ff-head); font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 0 rgba(168, 213, 178, 0);
    transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out), color 300ms var(--ease-out), transform 300ms var(--ease-out), box-shadow 420ms var(--ease-out);
}
.sy-section--alt .sy-flow__n { background: var(--bg1); }
.sy-flow__t { position: relative; justify-self: start; align-self: end; padding-top: 4px; font: 600 1.0625rem/1.3 var(--ff-head); transition: color 300ms var(--ease-out); }
.sy-flow__t::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 2px; border-radius: 2px; background: var(--ac-400); transform-origin: 0 50%; transform: scaleX(0); transition: transform 420ms var(--ease-out) 160ms; }
.sy-flow__step p { margin: 10px 0 0; color: var(--tx-2); font: 400 .9688rem/1.55 var(--ff-text); max-width: 34rem; }
/* Lit */
.sy-flow__step.is-lit .sy-flow__n, :root:not(.js) .sy-flow__n { background: var(--ac-500); border-color: var(--ac-500); color: var(--on-ac); transform: scale(1.06); box-shadow: 0 0 0 6px rgba(168, 213, 178, .14), 0 0 26px rgba(168, 213, 178, .4); }
.sy-flow__step.is-lit .sy-flow__t, :root:not(.js) .sy-flow__t { color: var(--ac-300); }
.sy-flow__step.is-lit .sy-flow__t::after, :root:not(.js) .sy-flow__t::after { transform: scaleX(1); }
.sy-flow__step.is-lit::after, :root:not(.js) .sy-flow__step::after { transform: scaleY(1); }
@media (min-width: 900px) {
    .sy-flow { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: 20px; }
    .sy-flow__step { grid-template-columns: 1fr; row-gap: 16px; padding-bottom: 0; }
    .sy-flow__step::before, .sy-flow__step::after { left: 52px; right: -20px; top: 25px; bottom: auto; width: auto; height: 2px; }
    .sy-flow__step::after { background: linear-gradient(90deg, var(--ac-400), var(--ac-600)); transform-origin: 0 50%; transform: scaleX(0); }
    .sy-flow__step.is-lit::after, :root:not(.js) .sy-flow__step::after { transform: scaleX(1); }
    .sy-flow__n { grid-row: auto; }
    .sy-flow__t { padding-top: 0; }
    .sy-flow__step p { margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
    .sy-flow__step::after, .sy-flow__n, .sy-flow__t, .sy-flow__t::after { transition: none; }
}

/* ---------- About ---------- */
.sy-about { overflow: hidden; }
.sy-about__grid { display: grid; gap: 28px; align-items: end; }
@media (min-width: 900px) { .sy-about__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } }
.sy-about__portrait { position: relative; margin: 0; max-width: min(420px, 82vw); justify-self: center; }
@media (max-width: 899px) { .sy-about__portrait { max-width: min(340px, 78vw); } }
.sy-about__portrait::before { content: ''; position: absolute; inset: 18% -8% 0; background: radial-gradient(60% 60% at 50% 60%, rgba(168, 213, 178, .28), transparent 70%); }
.sy-about__portrait img { position: relative; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.sy-about__copy { padding-bottom: clamp(0px, 3vw, 40px); }
.sy-about__copy .sy-lead { margin-top: 18px; }
.sy-certs { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 560px) { .sy-certs { grid-template-columns: 1fr 1fr; } }
.sy-cert { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px; background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-md); }
.sy-section--alt .sy-cert { background: var(--bg2); }
.sy-cert__thumb { position: relative; display: block; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg2); overflow: hidden; cursor: zoom-in; }
.sy-cert__thumb img { width: 100%; height: 96px; object-fit: cover; object-position: top; }
.sy-cert__thumb svg { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: rgba(12, 16, 14, .8); color: var(--tx); }
.sy-cert h3 { font: 600 1rem/1.3 var(--ff-head); }
.sy-cert p { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 6px; color: var(--ac-300); font: 500 .875rem/1.2 var(--ff-display); }
.sy-cert p svg { width: 16px; height: 16px; }
.sy-about__event { margin: clamp(32px, 4vw, 56px) auto 0; }
.sy-about__event button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-lg); overflow: hidden; }
/* Wider than the photo (3:2) on every screen, so only the bottom is cropped: all faces stay visible */
.sy-about__event img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 16%; }
@media (min-width: 640px) { .sy-about__event img { aspect-ratio: 2 / 1; } }
@media (min-width: 1024px) { .sy-about__event img { aspect-ratio: 12 / 5; } }
.sy-about__event figcaption { margin-top: 12px; color: var(--tx-2); font: 500 var(--t-sm)/1.5 var(--ff-display); }

/* ---------- Questions ---------- */
.sy-faq-grid { display: grid; gap: 28px; }
@media (min-width: 1024px) { .sy-faq-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; } .sy-faq-grid .sy-head { position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; } }
.sy-faq-grid .sy-head .sy-link { margin-top: 8px; }

/* ---------- Closing call to action (accent band) ---------- */
.sy-end__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .sy-end__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; } .sy-end__grid .sy-cta { justify-self: end; } }
.sy-end h2 { max-width: 18ch; }
.sy-end .sy-lead { margin-top: 16px; color: #d9ead2; }
.sy-section--accent .sy-btn--ghost { border-color: rgba(217, 234, 210, .55); }
.sy-section--accent .sy-btn--ghost:hover { background: rgba(255, 255, 255, .06); border-color: var(--ac-300); }
.sy-more { margin-top: 28px; }