/* ════════════════════════════════════════════
   Aspecta Theme — components.css
   Reusable UI: kicker, buttons, cards, marquee, stats
   v6 design system
   ════════════════════════════════════════════ */

/* ── SECTION KICKER (dual-chip license-plate) ── */
.kicker {
    display: inline-flex;
    align-items: stretch;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    line-height: 1;
    /* Jednotná medzera kicker → nadpis vo VŠETKÝCH hero (blog, referencie, podstránky).
       pin-stats/pin-services si nastavujú vlastný margin (shorthand prebije). */
    margin-bottom: var(--kicker-gap);
}
.kicker__num {
    background: var(--accent);
    color: var(--text);
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
}
.kicker__num svg {
    width: 14px;
    height: 14px;
    color: var(--text);
    flex-shrink: 0;
}
.kicker__label {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: none;
    padding: 8px 14px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* When the kicker is label-only (no __num element), restore the left border. */
.kicker__label:only-child { border-left: 1px solid rgba(255, 255, 255, 0.08); }
.section--light .kicker__label:only-child,
.pin-stats .kicker__label:only-child { border-left-color: rgba(0, 0, 0, 0.08); }
/* .pin-stats je svetlá sekcia bez triedy .section--light; bez tohto pravidla mal kicker
   tmavú sivú --text-muted na svetlom podklade, 3,18 : 1 (Lighthouse, J-105). */
.section--light .kicker__label,
.pin-stats .kicker__label {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-dark-muted);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ── BUTTONS ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px 12px 22px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s var(--ease-out);
    position: relative;
    white-space: nowrap;
}

.btn--sm { padding: 8px 10px 8px 16px; font-size: var(--fs-caption); gap: 10px; }
.btn--lg { padding: 14px 16px 14px 26px; font-size: var(--fs-body); gap: 16px; }

/* Primary — RED solid with depth */
.btn--primary {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
    color: var(--text);
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 6px 18px -4px var(--accent-glow);
}
.btn--primary:hover {
    background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(0, 0, 0, 0.5),
        0 14px 36px -4px rgba(255, 49, 51, 0.55);
    transform: translateY(-1px);
}

/* Secondary — glass */
.btn--secondary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.btn--secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* Ghost — link style */
.btn--ghost {
    background: transparent;
    color: var(--text);
    padding: 12px 0;
    gap: 10px;
}
.btn--ghost:hover { color: var(--accent); }

/* Light section variants */
.section--light .btn--secondary {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-dark);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.section--light .btn--secondary:hover {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.22);
}
.section--light .btn--ghost { color: var(--text-dark); }

/* Arrow pill — rotates on hover */
.btn__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.25);
    color: var(--text);
    font-size: var(--fs-caption);
    transition: background 0.2s, transform 0.3s var(--ease-out), color 0.2s;
    flex-shrink: 0;
}
.btn--sm .btn__pill { width: 22px; height: 22px; font-size: var(--fs-mono); }
.btn--secondary .btn__pill { background: rgba(255, 255, 255, 0.1); }
.btn--ghost .btn__pill { background: rgba(255, 255, 255, 0.08); width: 24px; height: 24px; }
.section--light .btn--secondary .btn__pill { background: rgba(0, 0, 0, 0.08); color: var(--text-dark); }
.section--light .btn--ghost .btn__pill { background: rgba(0, 0, 0, 0.06); color: var(--text-dark); }

.btn--primary:hover .btn__pill {
    background: rgba(0, 0, 0, 0.4);
    transform: rotate(-45deg);
}
.btn--secondary:hover .btn__pill,
.btn--ghost:hover .btn__pill {
    background: var(--accent);
    color: var(--text);
    transform: rotate(-45deg);
}

/* ── BRAND PATTERN DIVIDER ── */
.brand-divider {
    height: 64px;
    background-color: var(--ink);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 100 100'><rect x='0' y='0' width='42' height='42' fill='%238A8A8B' opacity='0.18'/><rect x='58' y='0' width='42' height='42' fill='%238A8A8B' opacity='0.18'/><rect x='0' y='58' width='42' height='42' fill='%238A8A8B' opacity='0.18'/><rect x='58' y='58' width='42' height='42' fill='%23EC2426' opacity='0.35'/></svg>");
    background-repeat: repeat-x;
    background-size: 24px 24px;
    background-position: center;
}

/* ── CLIENT MARQUEE ── */
.clients {
    /* Symetricky. Hore bolo 8px a dole 74px ako kompenzácia za medzeru pod hero trojuholníkom
       (ten končil 2,15 % nad spodkom hera). Medzera je opravená v geometrii SVG, takže
       kompenzácia nie je potrebná a robila len to, že pás vyzeral posunutý nahor. J-085.
       Súčet ostal rovnaký (82px → 80px), takže sa nič pod pásom neposunulo. */
    padding: 40px 0;
    background: var(--bg-deep);
    overflow: hidden;
}
.clients__label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    text-align: center;
    margin-bottom: 24px;
}
.marquee {
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee__track {
    display: flex;
    align-items: center;
    gap: 72px;
    flex-shrink: 0;
    animation: marquee 28s linear infinite;
    padding-right: 72px;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }

/* Container hugs the logo's natural width — height is the only normalised dimension */
.marquee__item,
.hero-client {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    color: var(--text-muted);
    white-space: nowrap;
    letter-spacing: -0.01em;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    flex-shrink: 0;
}
.marquee__item:hover,
.hero-client:hover { color: var(--text); }

.marquee__item img {
    height: 32px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(1);
    opacity: 0.55;
    transition: opacity 0.2s;
}
.marquee__item:hover img { opacity: 0.95; }

/* Per-logo optical balance — balances visual mass across different aspect ratios */
.marquee__item--tall img { height: 40px; }   /* square / circular marks (VW, ČSOB, Telekom) */
.marquee__item--wide img { height: 24px; }   /* very wide wordmarks ≥5:1 (Soc. poisť., Kaufland) */

.marquee__dot {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
    flex-shrink: 0;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ── 3D TILT (applied via JS) ── */
.tilt {
    transform-style: preserve-3d;
    transition: transform 0.2s ease-out;
    will-change: transform;
}

/* ── CARD (generic, with cursor spotlight) ── */
.card,
.service-card,
.case,
.value-card,
.blog-card,
.ref-card {
    position: relative;
    /* Tmavá elevácia: gradient charcoal-light → charcoal, dole SPLYNIE s podkladom
       (nie „patch inej farby" — kalibrácia session 2026-07-16), hore jemný lift. */
    background: linear-gradient(180deg, var(--charcoal-light), var(--charcoal) 88%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--r-md);
    padding: 32px;
    text-decoration: none;
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 46px -28px rgba(0,0,0,.7);
    transition: border-color 0.3s, transform 0.2s ease-out, box-shadow 0.3s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Karty na SVETLEJ sekcii: svetlá elevácia (prebije tmavý default tieň shared skupiny)
   + svetlý podklad namiesto tmavého gradientu. */
.section--light .card,
.section--light .service-card,
.section--light .case,
.section--light .blog-card,
.section--light .ref-card {
    background: var(--bg-light-elev);
    box-shadow: var(--shadow-2);
}

.card::before,
.service-card::before,
.case::before,
.value-card::before,
.blog-card::before,
.ref-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mouse-x, -100%) var(--mouse-y, -100%),
        rgba(236, 36, 38, 0.15),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 0;
}
.card:hover::before,
.service-card:hover::before,
.case:hover::before,
.value-card:hover::before,
.blog-card:hover::before,
.ref-card:hover::before { opacity: 1; }

.card:hover,
.service-card:hover,
.case:hover,
.value-card:hover,
.blog-card:hover,
.ref-card:hover { border-color: var(--border-strong); }

.card > *,
.service-card > *,
.case > *,
.value-card > *,
.blog-card > *,
.ref-card > * { position: relative; z-index: 1; }

/* ── CARD content (generický nadpis + text pre tmavú kartu .card) ──
   Tmavý súrodenec .value-card__title/__text (tie sú pre section--light).
   Použitie: .card s jednoduchým obsahom (napr. sub-služba na hube). */
.card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h5);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.card__text {
    margin-top: 10px;
    color: var(--text-muted);
    font-size: var(--fs-small);
    line-height: 1.55;
}
/* Príklady v karte — konkrétne otázky/scenáre pre danú rolu (napr. SDI „pre koho"). */
.card__examples {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}
.card__examples li {
    position: relative;
    padding-left: 14px;
    margin-top: 8px;
    color: var(--text-faint);
    font-size: var(--fs-small);
    line-height: 1.5;
    font-style: italic;
    border-left: 2px solid var(--accent);
    padding-block: 2px;
}

/* ── BLOG CARD + GRID (výpis článkov — home.php / archive.php) ──
   Karta dedí .blog-card shell (bg-elev-2, padding 32, hover glow). */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card__media {
    margin: -32px -32px 24px;      /* obrázok po okraje karty */
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--charcoal);
}
/* Čiernobiele obrázky blogu: staré fotky sú farebne rôznorodé a vedľa seba
   pôsobia neusporiadane. Placeholder s piktogramom sa toho netýka. */
.blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: transform .5s ease; }
.blog-card:hover .blog-card__media img { transform: scale(1.05); }
/* fallback keď článok nemá titulný obrázok — brand placeholder */
.blog-card__media--ph { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--charcoal), var(--charcoal-light)); }
.blog-card__media--ph img { width: 44px; height: auto; opacity: .35; transform: none !important; }

.blog-card__meta { display: flex; align-items: center; gap: 12px;
    font-family: var(--font-mono); font-size: var(--fs-mono); margin-bottom: 14px; }
.blog-card__date { color: var(--text-faint); letter-spacing: .04em; }
.blog-card__cat { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }
.blog-card__title { font-family: var(--font-display); font-weight: 600;
    font-size: var(--fs-h4); letter-spacing: -0.015em; line-height: 1.25; }
.blog-card__excerpt { margin-top: 12px; color: var(--text-muted);
    font-size: var(--fs-small); line-height: 1.6; }
.blog-card__link { margin-top: auto; padding-top: 20px; color: var(--text);
    font-family: var(--font-mono); font-size: var(--fs-mono);
    display: inline-flex; align-items: center; gap: 8px; }
.blog-card:hover .blog-card__link { color: var(--accent); }

/* WP pagination (the_posts_pagination) */
.blog-pagination { margin-top: 56px; }
.blog-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.blog-pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid var(--border); color: var(--text-muted);
    font-family: var(--font-mono); font-size: var(--fs-mono); text-decoration: none;
    transition: border-color .2s, color .2s;
}
.blog-pagination .page-numbers:hover { border-color: var(--border-strong); color: var(--text); }
.blog-pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── BLOG — svetlá varianta (výpis beží na .section--light, ako refs Vercel/Datadog/Stripe/Linear) ── */
.section--light .blog-card { background: var(--bg-light-elev); border-color: var(--border-light); }
.section--light .blog-card:hover { border-color: var(--border-light-strong); }
.section--light .blog-card__title { color: var(--text-dark); }
.section--light .blog-card__excerpt { color: var(--text-dark-muted); }
.section--light .blog-card__date { color: var(--text-dark-muted); }
.section--light .blog-card__link { color: var(--text-dark); }
.section--light .blog-card:hover .blog-card__link { color: var(--accent); }
.section--light .blog-card__media,
.section--light .blog-card__media--ph { background: linear-gradient(135deg, var(--bg-light), var(--bg-light-elev)); }
.section--light .blog-card__media--ph img { opacity: .22; }

/* Blog lean hlavička + filter taby (tmavý intro pruh → svetlý grid) */
.blog-head__lead { color: var(--text-muted); max-width: 580px; margin-top: 12px; font-size: var(--fs-body); line-height: 1.6; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.blog-filter__tab { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em;
    padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--r-sm);
    color: var(--text-muted); text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.blog-filter__tab:hover { border-color: var(--border-strong); color: var(--text); }
.blog-filter__tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Featured (pripnutý / najnovší) článok — veľký blok hore */
.blog-featured { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
    background: var(--bg-light-elev); border: 1px solid var(--border-light);
    text-decoration: none; overflow: hidden; transition: border-color .3s; }
.blog-featured:hover { border-color: var(--border-light-strong); }
.blog-featured__media { overflow: hidden; background: var(--bg-light); min-height: 320px; }
.blog-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); transition: transform .5s ease; }
.blog-featured:hover .blog-featured__media img { transform: scale(1.04); }
.blog-featured__media--ph { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg-light), var(--bg-light-elev)); }
.blog-featured__media--ph img { width: 72px; height: auto; opacity: .22; }
.blog-featured__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.blog-featured__flag { align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-mono);
    text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 18px; }
.blog-featured__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
    letter-spacing: -0.02em; line-height: 1.15; color: var(--text-dark); }
.blog-featured__excerpt { margin-top: 16px; color: var(--text-dark-muted); line-height: 1.6; }
.blog-featured__meta { margin-top: 20px; font-family: var(--font-mono); font-size: var(--fs-mono);
    color: var(--text-dark-muted); display: flex; gap: 12px; align-items: center; }
.blog-featured__cat { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; }
@media (max-width: 820px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured__media { min-height: 200px; aspect-ratio: 16 / 9; }
    .blog-featured__body { padding: 32px; }
}

/* ═══════════════════════════════════════════════════════════════
   REFERENCIE — výpis (archive-referencia.php)
   Odlíšenie od blogu: logo klienta + VEĽKÁ METRIKA + tag riešenia.
   Vzor: Stripe / Vercel customer stories (dôkaz, nie článok).
   Karta dedí .ref-card shell (shared group vyššie). Beží na .section--light.
   ═══════════════════════════════════════════════════════════════ */
.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .ref-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ref-grid { grid-template-columns: 1fr; } }

/* ── PREHĽADOVÝ PÁS — počty (X projektov · Y sektorov · Z oblastí).
   Odlišuje archív referencií od blogu: „koľko dôkazov", nie zoznam článkov.
   Beží na tmavej hlavičke (.section, nie --light). ── */
.ref-stats { display: flex; flex-wrap: wrap; gap: 40px; margin: 32px 0 0; padding: 24px 0 0;
    border-top: 1px solid var(--border); }
.ref-stats__item { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.ref-stats__num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h3);
    line-height: 1; letter-spacing: -0.02em; color: var(--text); margin: 0; }
.ref-stats__label { margin: 0; font-family: var(--font-mono); font-size: var(--fs-mono);
    text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
@media (max-width: 600px) { .ref-stats { gap: 28px; } }

/* ── PRIPNUTÁ (FEATURED) REFERENCIA — veľký blok hore (vzor .blog-featured),
   ale s metrikou. Beží na .section--light. ── */
.ref-featured { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
    background: var(--bg-light-elev); border: 1px solid var(--border-light);
    text-decoration: none; overflow: hidden; transition: border-color .3s; }
.ref-featured:hover { border-color: var(--border-light-strong); }
.ref-featured__media { overflow: hidden; background: var(--bg-light); min-height: 340px; }
.ref-featured__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ref-featured:hover .ref-featured__media img { transform: scale(1.04); }
.ref-featured__media--ph { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--bg-light), var(--bg-light-elev)); }
.ref-featured__media--ph img { width: 72px; height: auto; opacity: .22; }
.ref-featured__body { padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.ref-featured__flag { align-self: flex-start; font-family: var(--font-mono); font-size: var(--fs-mono);
    text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin-bottom: 20px; }
.ref-featured__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2);
    letter-spacing: -0.02em; line-height: 1.15; color: var(--text-dark); margin-top: 8px; }
.ref-featured__result { margin-top: 24px; }
.ref-featured .ref-card__link { margin-top: 24px; padding-top: 0; }
.ref-featured:hover .ref-card__link { color: var(--accent); }
@media (max-width: 820px) {
    .ref-featured { grid-template-columns: 1fr; }
    .ref-featured__media { min-height: 200px; aspect-ratio: 16 / 9; }
    .ref-featured__body { padding: 32px; }
}

/* padding presunutý zo shellu na __body (obrázok po okraje karty) */
.ref-card { padding: 0; }
.ref-card__body { padding: 28px 32px 32px; display: flex; flex-direction: column; flex: 1; }

/* ⚠️ DARK-FIRST: karta beží na TMAVEJ sekcii (service detail = .section--elev) aj na SVETLEJ
   (archív /referencie/, súvisiace, featured = .section--light). Default = tmavý kontext,
   svetlý je override dole — rovnaký vzor ako shell skupiny .case/.value-card/.blog-card.
   Predtým bolo všetko natvrdo dark-on-light → na service stránkach čierny text na čiernom. */

/* obrázok karty (nie logo — klienti sú často anonymizovaní / bez povolenia, D-006) */
.ref-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--charcoal); }
.ref-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.ref-card:hover .ref-card__media img { transform: scale(1.05); }
.ref-card__media--ph { display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--charcoal-light), var(--charcoal)); }
.ref-card__media--ph img { width: 48px; height: auto; opacity: .22; transform: none !important; }

/* ── COVER referencie (J-056) ──────────────────────────────────────────────
   Cover ukazuje MIESTO, KDE NÁŠ SYSTÉM ŽIJE (palubná doska so systémom,
   dispečerská obrazovka, tablet pri stroji) — nie odvetvie klienta a nie logo.
   Recept na obrázky: work/new-web/brand/PROMPTY-cover-referencie.md
   Treatment = fotka + tmavý overlay, prevzaté z .section--photo (layout.css).
   ŽIADNY duotone — farby fotky ostávajú, len sa stlmí.                       */
.ref-card__media--photo { position: relative; }
.ref-card__media--photo::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(8, 10, 13, var(--cover-overlay, .18));
    pointer-events: none;
}
/* Sila overlayu podľa jasu scény. Default .18 sedí generovaným coverom, ktoré
   sú samy tmavé; svetlejšie scény (kancelária, dielňa, predajňa) potrebujú viac. */
.ref-card__media--dim   { --cover-overlay: .42; }
.ref-card__media--dim-2 { --cover-overlay: .62; }

/* tagy — typ riešenia (accent) + sektor — hore */
.ref-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ref-card__tag { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted);
    border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px 10px; }
.ref-card__tag--sol { color: var(--accent); border-color: var(--accent); }

/* klient (text — meno alebo anonym „Retailový podnik") */
.ref-card__client { display: block; font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }

/* nadpis prípadu — čo sa riešilo (prominentný, hore). Zhoda s blog kartou (--fs-h4). */
.ref-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4);
    letter-spacing: -0.015em; line-height: 1.3; color: var(--text); }

/* VÝSLEDOK — číslo + JEDNOTKA (pri čísle) + kontext (pod). Číslo samo bez jednotky je „od veci"
   (2 500 čoho?). Jednotka sedí pri čísle → celok sa číta ako jeden dôkaz, nie holé číslo.
   Accent ľavý okraj + tint = „toto je výsledok tohto prípadu". */
.ref-card__result { margin-top: 20px; padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--accent); }
.ref-card__result-figure { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.ref-card__result-value { font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.ref-card__result-unit { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .04em;
    text-transform: uppercase; color: var(--text-muted); }
.ref-card__result-label { display: block; margin-top: 6px;
    font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }

/* Perex na karte bez metriky (J-098). Číslo je silnejší dôkaz, ale keď ho referencia
   nemá, ostávala na karte diera — na archíve u 20 kariet z 38. Zámerne to NIE je
   `.ref-card__result`: nemá podložie ani červenú linku, aby si karty bez čísla
   nenárokovali rovnakú váhu ako karty s dôkazom. Sadzba je zhodná s blogovou kartou. */
.ref-card__excerpt { margin-top: 14px; color: var(--text-muted);
    font-size: var(--fs-small); line-height: 1.6; }

.ref-card__link { margin-top: auto; padding-top: 20px; color: var(--text);
    font-family: var(--font-mono); font-size: var(--fs-mono);
    display: inline-flex; align-items: center; gap: 8px; }
.ref-card:hover .ref-card__link { color: var(--accent); }

/* SVETLÁ VARIANTA — archív /referencie/, „súvisiace", featured karta (všetko .section--light).
   Vracia dark-on-light hodnoty, ktoré sú default vyššie prepnuté na tmavý kontext. */
.section--light .ref-card { background: var(--bg-light-elev); border-color: var(--border-light); }
.section--light .ref-card:hover { border-color: var(--border-light-strong); }
.section--light .ref-card__media,
.section--light .ref-card__media--ph { background: linear-gradient(135deg, var(--bg-light), var(--bg-light-elev)); }
.section--light .ref-card__tag { color: var(--text-dark-muted); border-color: var(--border-light); }
.section--light .ref-card__tag--sol { color: var(--accent); border-color: var(--accent); }
.section--light .ref-card__client,
.section--light .ref-card__result-unit,
.section--light .ref-card__excerpt,
.section--light .ref-card__result-label { color: var(--text-dark-muted); }
.section--light .ref-card__title,
.section--light .ref-card__result-value,
.section--light .ref-card__link { color: var(--text-dark); }
.section--light .ref-card__result { background: var(--bg-light); }

/* ═══════════════════════════════════════════════════════════════
   LINK-CARD — jednoduchá odkazová karta (rozcestník, 404, súvisiace).
   Bez obrázka/metriky — len titul + krátky popis + šípka. Univerzálny atóm.
   .link-cards = 2-stĺpcový grid. Beží na .section--light aj tmavej.
   ═══════════════════════════════════════════════════════════════ */
.link-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 640px) { .link-cards { grid-template-columns: 1fr; } }

.link-card { display: block; padding: 28px 32px; text-decoration: none;
    background: var(--bg-light-elev); border: 1px solid var(--border-light);
    transition: border-color .3s, transform .3s; }
.link-card:hover { border-color: var(--border-light-strong); transform: translateY(-2px); }
.link-card__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4);
    letter-spacing: -0.015em; line-height: 1.3; color: var(--text-dark);
    display: flex; align-items: baseline; gap: 10px; }
.link-card__arrow { color: var(--accent); transition: transform .3s; }
.link-card:hover .link-card__arrow { transform: translateX(4px); }
.link-card__desc { margin-top: 8px; color: var(--text-dark-muted); font-size: var(--fs-body);
    line-height: 1.55; }

/* ── REFERENCIA DETAIL (single-referencia.php) — hero metrika v tmavom pruhu ── */
.ref-hero__crumbs { margin-bottom: 24px; }
/* .ref-hero__kicker používa globálny --kicker-gap (žiadny override — konzistentné hero) */
.ref-hero__lead { margin-top: 20px; max-width: 760px; color: var(--text-muted);
    font-size: var(--fs-body-l); line-height: 1.6; }
.ref-hero__metric { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }
.ref-hero__metric-figure { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 0; }
.ref-hero__metric-value { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1);
    line-height: 1; letter-spacing: -0.03em; color: var(--text); }
.ref-hero__metric-unit { font-family: var(--font-mono); font-size: var(--fs-small);
    text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }
.ref-hero__metric-label { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: var(--fs-mono);
    text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); }

/* ── ZÁKLADNÉ ÚDAJE v hero — stĺpec vedľa zhrnutia (J-057) ────────────────
   Vzor EPAM detail case study: hero ide na plnú šírku containera, vľavo
   zhrnutie projektu (a metrika, ak je), vpravo fakty v riadkoch
   label → hodnota, oddelené vlasovou linkou. Číta sa to ako technický list
   a všetko podstatné drží nad zlomom.

   Predchodca `.ref-hero__facts` (dl vtlačený do 820px stĺpca hero) bol
   vizuálne slabý: labely v --text-faint a tri hairline bloky pod sebou.
   Medzikrok „pás pod hero" (vzor STX Next) bol postavený a zamietnutý.

   Ikona pri labeli je vedomá výnimka: inde v DS je ikona prvkom karty
   (`.value-card__icon`, monochróm v rámčeku). Tu je to malá čiarová ikona
   v akcente, aby sa riadok dal nájsť očami bez čítania labelu.            */
.ref-hero--split .post-hero__title { max-width: 16ch; }
.ref-hero__split {
    display: grid; grid-template-columns: 1.35fr 1fr; gap: 80px;
    margin-top: 40px; padding-top: 36px; border-top: 1px solid var(--border);
}
/* Keď je fakt jediný (typicky len sektor), dvojstĺpec vyzerá ako chyba:
   vpravo jeden riadok a pod ním veľká diera. Vtedy zhrnutie ide na plnú
   šírku a fakt sa zaradí pod neho ako riadok. */
.ref-hero__split--chudobny { grid-template-columns: 1fr; gap: 28px; }
.ref-hero__split--chudobny .ref-sidefacts__item { grid-template-columns: 160px 1fr; border-bottom: 0; padding-bottom: 0; }
.ref-hero__summary { margin: 0; color: var(--text-muted);
    font-size: var(--fs-body-l); line-height: 1.65; }

.ref-sidefacts { display: grid; gap: 22px; align-content: start; }
.ref-sidefacts__item {
    display: grid; grid-template-columns: 160px 1fr; gap: 20px;
    padding-bottom: 20px; border-bottom: 1px solid var(--border);
}
.ref-sidefacts__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ref-sidefacts__label {
    /* align-self: start — bez toho sa label pri viacriadkovej hodnote (technológie)
       zvisle vycentruje a vypadne z linky ostatných labelov. */
    display: flex; align-items: center; align-self: start; gap: 8px; padding-top: 3px;
    font-family: var(--font-mono); font-size: var(--fs-mono);
    text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.ref-sidefacts__label svg { width: 15px; height: 15px; flex: none; }
/* Hodnota má JEDNO písmo, jednu veľkosť a jednu farbu — jednotlivý fakt sa
   nesmie čítať inak než položka zoznamu (predtým 1,2rem biela vs. 1rem sivá). */
.ref-sidefacts__value,
.ref-sidefacts__list li { margin: 0; color: var(--text);
    font-size: var(--fs-body); line-height: 1.55; }
/* base.css resetuje `ul, ol { list-style: none }` globálne (navigácie). Zoznam
   má byť naozaj zoznam — značky vraciame späť, v akcente ako v `.prose`. */
.ref-sidefacts__list { list-style: disc; margin: 0 0 0 18px; padding: 0; }
.ref-sidefacts__list li { margin-bottom: 4px; }
.ref-sidefacts__list li::marker { color: var(--accent); }

@media (max-width: 1000px) { .ref-hero__split { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px)  { .ref-sidefacts__item { grid-template-columns: 1fr; gap: 8px; } }

/* ── BLOG DETAIL (single.php) — tmavý titulný pruh → svetlé telo (.prose) ── */
.post-hero__inner { max-width: 820px; margin: 0 auto; }
.post-hero__cat { display: inline-flex; text-decoration: none; }
.post-hero__title { margin-top: 22px; }
.post-meta { margin-top: 26px; font-family: var(--font-mono); font-size: var(--fs-mono);
    color: var(--text-muted); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.post-meta__cat { color: var(--accent); }
.post-cover { background: var(--bg-light); }
.post-cover .container { padding-block: 0; }
/* Cover referencie ide na plnú šírku bez okraja: v odsadenom rámčeku na svetlom
   podklade visel medzi hero a článkom ako cudzí prvok. Takto je z neho prechod
   z tmavého hero do svetlého tela. (J-057) */
.ref-cover { background: var(--charcoal); }
.ref-cover img { display: block; width: 100%; height: clamp(260px, 34vw, 460px);
    object-fit: cover; border: 0; }
.post-cover img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover;
    border: 1px solid var(--border-light); }
.post-body { max-width: 720px; margin: 0 auto; }
.post-body.prose > :first-child { margin-top: 0; }
.post-meta__author { color: var(--text); }

/* Inline obrázky / figúry v tele článku */
.post-body figure { margin: 36px 0; }
.post-body figure img,
.post-body > img,
.post-body p > img { display: block; width: 100%; height: auto; border: 1px solid var(--border-light); }
.post-body figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-mono);
    color: var(--text-dark-muted); letter-spacing: .02em; line-height: 1.5; }
/* placeholder figúra (kým nie je reálny obrázok) */
.post-body figure.is-ph .figure-ph { display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 8; background: linear-gradient(135deg, var(--bg-light), var(--bg-light-elev));
    border: 1px dashed var(--border-light-strong); color: var(--text-dark-muted);
    font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: .12em; text-transform: uppercase; }

/* Koniec článku → súvisiace: zruš zdvojený padding (wrapper <article> láme .section--light adjacency). */
article + .section--light { padding-top: 0; }



/* Zdieľanie na konci článku */
.post-share { max-width: 720px; margin: 48px auto 0; padding-top: 28px; border-top: 1px solid var(--border-light);
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.post-share__label { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase;
    letter-spacing: .14em; color: var(--text-dark-muted); margin-right: 4px; }
.post-share__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-light); border-radius: 50%; color: var(--text-dark-muted);
    background: transparent; cursor: pointer; transition: border-color .2s, color .2s; }
.post-share__btn:hover,
.post-share__btn.is-copied { border-color: var(--accent); color: var(--accent); }
.post-share__btn svg { width: 17px; height: 17px; }
.service-card {
    padding: 40px;
    justify-content: space-between;
    min-height: 280px;
}
.service-card__num {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--text-faint);
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
/* The category icon now plays the role the red ::before dot used to play.
   Same brand colour, same visual weight in the kicker. */
.service-card__num-icon {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}
.service-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    margin-top: 24px;
}
.service-card--lg .service-card__title { font-size: var(--fs-h2); line-height: 1; }
.service-card--sm .service-card__title { font-size: var(--fs-h3); line-height: 1.05; }
/* Akcentové (červené) nadpisy služieb na svetlej sekcii okruhu — zámerné zvýraznenie
   najdôležitejšej sekcie. Výnimka z pravidla „jedno slovo červené" (Erika, J-040).
   Scopnuté na .section--light → homepage service karty (dark) ostávajú biele. */
.section--light .service-card__title { color: var(--accent); }
.service-card__lead { margin-top: 20px; color: var(--text-muted); max-width: 42ch; line-height: 1.55; }
.service-card--sm .service-card__lead { font-size: var(--fs-small); }

.service-card__arrow,
.case__cta {
    margin-top: 32px;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-small);
    transition: color 0.15s;
}
.service-card__arrow span,
.case__cta span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s, transform 0.3s var(--ease-out);
}
.service-card:hover .service-card__arrow,
.case:hover .case__cta { color: var(--text); }
.service-card:hover .service-card__arrow span,
.case:hover .case__cta span {
    background: var(--accent);
    transform: rotate(-45deg);
}

/* Motív do pozadia service kariet — prenesené 1:1 z Abstraktných motívov (V1 uzly).
   Rovnaká pozícia ako .mc--corner .mc__net: pravá polovica karty, alfy sú v SVG. */
.service-card__motif {
    position: absolute;
    inset: 0;
    left: auto;
    right: 0;
    width: 60%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
/* Soft konzistencia labelov motívu (V1 uzly) — tenké písmo ako hero sieť (400, nie 500). */
.service-card__motif text,
.mc__net text { font-weight: 400; }

/* Motív V2/V3 — sieť (canvas) + scrim + logo. JEDINÝ zdroj: web (.case--wide, .pillar-card)
   aj DS náhľad (.mc demá) berú tieto triedy. JS controller je v hero-net.js / navigation.js. */
.mc__net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}
.mc__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(125% 120% at 100% 100%, rgba(33,37,45,0) 0%, rgba(33,37,45,.3) 24%, rgba(33,37,45,.88) 50%, rgba(33,37,45,.98) 100%);
}
.mc__logo {
    position: absolute;
    right: -30px;
    bottom: -44px;
    width: 56%;
    max-width: 280px;
    z-index: 1;
    pointer-events: none;
}
/* text + CTA nad motívom/scrim — platí pre KAŽDÚ .case s V2 vrstvením (bento --wide aj
   samostatné case karty mimo bento, napr. podsluzby na service detaile — J-047). */
.case > *:not(.mc__net):not(.mc__scrim) { position: relative; z-index: 3; }

/* ── VALUE CARD (Why Aspecta cards, on light bg) ── */
.value-card {
    background: var(--bg-light-elev);
    border-color: var(--border-light);
    color: var(--text-dark);
    /* Svetlá karta sa na skoro-bielej ploche dvíha TIEŇOM (nie kontrastom podkladu). */
    box-shadow: var(--shadow-2);
    padding: 36px;
    min-height: 240px;
    justify-content: space-between;
}
.value-card::before {
    background: radial-gradient(
        500px circle at var(--mouse-x, -100%) var(--mouse-y, -100%),
        rgba(236, 36, 38, 0.08),
        transparent 40%
    );
}
.value-card:hover { border-color: var(--border-light-strong); }

.value-card__icon {
    /* Premium recept (session 2026-07-16): ikona MONOCHROMATICKÁ v decentnom rámčeku,
       nie holá jasná červená klipart (= „detinské"). Grounded Stripe/Linear. */
    width: 46px;
    height: 46px;
    border-radius: var(--r-sm);
    background: var(--bg-light);
    border: 1px solid rgba(20, 25, 35, 0.07);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--charcoal-light);
    margin-bottom: 24px;
}
.value-card__icon svg { width: 22px; height: 22px; }
.value-card__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.02em;
    color: var(--text-dark);
}
.value-card__text {
    margin-top: 12px;
    color: var(--text-dark-muted);
    line-height: 1.55;
    font-size: var(--fs-small);
}

/* ── PILLAR-CARD (numbered manifesto — pre 4 piliere, princípy, manifesty) ── */
.pillar-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    position: relative;        /* pre V3 motív cez všetky karty */
    overflow: hidden;
}
/* V3 logo „spojené kruhy" motív cez CELÚ pillar sekciu — bledé, za všetkými kartami (jeden brand prvok, nie 4 kópie). */
.pillar-list > .mc__logo {
    position: absolute;
    top: 50%;
    right: 0;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    width: 46%;
    max-width: 560px;
    opacity: 0.5;
    z-index: 0;
}
.pillar-list > .pillar-card { position: relative; z-index: 1; }   /* karty nad motívom */
.pillar-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2.5rem;
    padding: 3rem 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
    position: relative;   /* pre V3 motív .mc__logo v rohu */
    overflow: hidden;
}
.pillar-card__num, .pillar-card__body { position: relative; z-index: 2; }   /* text nad .mc__logo */
.pillar-card__num {
    font-family: var(--font-display);
    font-size: var(--fs-display-2);
    font-weight: 300;
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.03em;
}
.pillar-card__body { max-width: 56ch; }
.pillar-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.75rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.pillar-card__text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--text-muted);
    line-height: 1.65;
}
.section--light .pillar-list { border-top-color: var(--border-light); }
.section--light .pillar-card { border-bottom-color: var(--border-light); }
.section--light .pillar-card__title { color: var(--text-dark); }
.section--light .pillar-card__text { color: var(--text-dark-muted); }
@media (max-width: 720px) {
    .pillar-card {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 2rem 0;
    }
    .pillar-card__num { font-size: var(--fs-h2); }
    .pillar-list > .mc__logo { display: none; }   /* text full-width → motív by prekrýval; čistý text má prednosť */
}

/* ── SPINOFF-CARD (Aspecta vlastné produkty — Solvedio, Talendly) ── */
.spinoff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
@media (max-width: 640px) { .spinoff-grid { grid-template-columns: 1fr; } }
.spinoff-card {
    display: block;
    background: var(--charcoal);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 2rem;
    text-decoration: none;
    transition: border-color 0.3s, transform 0.3s;
    position: relative;
}
.spinoff-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.spinoff-card__wordmark {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem;
}
.spinoff-card__title {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
}
.spinoff-card__text {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: var(--fs-small);
    margin-bottom: 1.5rem;
}
.spinoff-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
    transition: gap 0.3s;
}
.spinoff-card:hover .spinoff-card__link {
    gap: 0.7rem;
    color: var(--accent);
}

/* ── FAQ (native details/summary accordion — pre kariéru, kontakt, blog) ── */
.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h5);
    color: var(--text);
    cursor: pointer;
    list-style: none;
    transition: color 0.2s;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::marker { content: ''; }
.faq__question:hover { color: var(--accent); }
.faq__icon {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--fs-h3);
    color: var(--accent);
    transition: transform 0.3s;
    flex-shrink: 0;
    line-height: 1;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__answer {
    padding: 0 0 1.5rem;
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 72ch;
}
.faq__answer p { margin-bottom: 0.75rem; }
.faq__answer p:last-child { margin-bottom: 0; }
.section--light .faq { border-top-color: var(--border-light); }
.section--light .faq__item { border-bottom-color: var(--border-light); }
.section--light .faq__question { color: var(--text-dark); }
.section--light .faq__answer { color: var(--text-dark-muted); }

/* ── STATS (light interlude — Ramp-style massive numbers) ── */
.why-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 96px;
}
/* 3-stĺpcový variant (napr. O spoločnosti — 3 staty). Vyššia špecificita prebije
   base aj 900px pravidlo; stackuje sa na mobile (bolo inline → nestackovalo sa). */
.why-stats.why-stats--3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 640px) { .why-stats.why-stats--3col { grid-template-columns: 1fr; } }
.why-stat {
    background: var(--bg-light-elev);
    border: 1px solid var(--border-light);
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: border-color 0.3s;
    position: relative;
    overflow: hidden;
}
.why-stat:hover { border-color: var(--border-light-strong); }
.why-stat__sublabel {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dark-faint);
}
.why-stat__num {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--fs-display-2);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--text-dark);
}
.why-stat__label {
    color: var(--text-dark-muted);
    font-size: var(--fs-small);
    max-width: 22ch;
    margin-top: auto;
}

/* ── UKÁŽKA ROZHRANIA (.screenshot) ──────────────────────────────────────────
   Snímka reálneho produktu na stránke služby. Vizuálny jazyk prevzatý z figúr v tele
   článku (.post-body figure): okraj --border-light + mono popisok. Doplnené o radius
   a tieň z Foundations, aby snímka „ležala" na svetlej ploche ako karta.
   Určené pre svetlú sekciu — snímky nášho UI sú svetlé. J-059 (/equal-pay-.../). */
.screenshot { margin: 0; }
.screenshot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}
.screenshot figcaption {
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.02em;
    line-height: 1.5;
    color: var(--text-dark-muted);
}

/* ── PARTNER LOGO WALL (light section) ── */
.partners-wall {
    padding-top: 80px;
    border-top: 1px solid var(--border-light);
}
.partners-wall__label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dark-faint);
    margin-bottom: 40px;
}
.partners-wall__grid {
    display: grid;
    grid-auto-flow: column;              /* presne toľko rovnakých stĺpcov koľko log (5 na O spol, 7 inde), 1 riadok */
    grid-auto-columns: 1fr;
    gap: 0;
    border: 1px solid var(--border-light);
    background: var(--bg-light-elev);
}
.partners-wall__item {
    padding: 32px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-light);
    text-decoration: none;
    transition: background 0.2s;
    min-height: 110px;
}
.partners-wall__item:last-child { border-right: none; }
.partners-wall__item:hover { background: rgba(236, 36, 38, 0.04); }
/* Use max-height + max-width with auto values so the browser always preserves aspect ratio.
   A fixed `height` with `max-width` cap stretches the image — that's what we had before. */
.partners-wall__item img {
    max-height: 40px;
    max-width: 80%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: brightness(0);
    opacity: 0.6;
    transition: opacity 0.2s, filter 0.2s;
}
.partners-wall__item:hover img {
    filter: none;
    opacity: 1;
}

/* ── Variant CERTIFIKÁCIE (--certs) — oficiálne odznaky, NIE monochrómne logá.
   Partnerské logá sa zjednocujú na jeden tón (brightness(0) + opacity), lebo sú to
   rôznorodé wordmarky a bez toho by pás pôsobil ako reklamný banner. Certifikačné
   odznaky sú naopak oficiálne značky s definovanou farebnosťou (AWS) — musia ostať
   farebné a čitateľné, inak sú z nich sivé fľaky. Pridané J-059 (/aws-advanced-partner/). */
.partners-wall--certs .partners-wall__item img {
    max-height: 96px;
    max-width: 90%;
    filter: none;
    opacity: 1;
}
.partners-wall--certs .partners-wall__item { min-height: 156px; }

/* Per-logo size overrides for optical balance — same logic as the marquee.
   Square / compact marks get a taller cap; very wide wordmarks get a shorter cap. */
.partners-wall__item--tall img { max-height: 52px; max-width: 60%; }
.partners-wall__item--wide img { max-height: 28px; max-width: 90%; }

/* Oficiálne partner badge (AWS Advanced Tier + Red Hat) — vytiahnuté NAD pás log
   ako hlavné certifikácie. Rovnaké badge ako v heri. */
.partners-badges {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 56px;
}
.partners-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    background: var(--bg-light-elev);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.partners-badge:hover {
    transform: translateY(-3px);
    border-color: var(--border-light-strong);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.09);
}
.partners-badge img { min-height: 120px; height: auto; width: auto; display: block; } /* AWS Guide s.11 */
@media (max-width: 600px) {
    .partners-badges { gap: 16px; }
    .partners-badge { padding: 24px 28px; flex: 1 1 140px; }
}

/* ── PROCESS STEPS (sticky scroll) ── */
.process-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 96px;
    align-items: start;
}
.process-sticky { position: sticky; top: 140px; }
/* h3 = homepage, h2 = sekčný nadpis na service detaile (rovnaký vizuál cez .t-h2) */
.process-sticky h3, .process-sticky h2 { margin-top: 24px; }
.process-sticky p { margin-top: 24px; color: var(--text-muted); }   /* lead — bolo inline */
.process-sticky__num {
    margin-top: 32px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.14em;
    color: var(--text-faint);
}
.process-sticky__num strong { color: var(--accent); font-weight: 500; font-size: var(--fs-body); }

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 96px;
}
.process-step {
    padding-left: 56px;
    position: relative;
    border-left: 1px solid var(--border);
    padding-bottom: 8px;
    transition: border-color 0.3s;
}
.process-step.is-active { border-left-color: var(--accent); }
.process-step__num {
    position: absolute;
    left: -10px;
    top: -2px;
    background: var(--charcoal);
    width: 20px;
    height: 20px;
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--text-muted);
    transition: all 0.3s;
}
.process-step.is-active .process-step__num {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text);
    transform: scale(1.15);
}
.process-step__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.process-step__text { color: var(--text-muted); max-width: 50ch; }

/* ── CASE BENTO ── */
.cases-bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 240px;
    gap: 16px;
}
.case { padding: 32px; justify-content: space-between; }
.case--wide { grid-column: span 4; grid-row: span 2; padding: 48px; }
.case--tall { grid-column: span 2; grid-row: span 2; }
.case--half { grid-column: span 3; grid-row: span 1; }

.case__client {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.case__client::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--accent);
}
.case__title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.05;
    margin-top: 20px;
    color: var(--text);
}
.case__title a { color: inherit; }
.case--wide .case__title { font-size: var(--fs-h2); max-width: 14ch; }
.case--tall .case__title { font-size: var(--fs-h3); max-width: 12ch; }
.case--half .case__title { font-size: var(--fs-h3); }
.case__excerpt { color: var(--text-muted); margin-top: 16px; font-size: var(--fs-small); max-width: 48ch; }
.case__meta {
    display: flex;
    gap: 16px;
    font-size: var(--fs-caption);
    color: var(--text-muted);
    margin-top: 24px;
}

/* ── CTA GLASS PANEL ── */
.cta-panel {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);   /* červené diagonálne (echo hero foldu), bez glow */
    padding: 96px 64px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #fff;
}
/* tmavý brand motív „spojené kruhy" v rohu — dark strokes v SVG (markup) */
.cta-panel .mc__logo { position: absolute; top: -50px; right: -40px; left: auto; bottom: auto; width: 40%; max-width: 480px; z-index: 0; }
/* Mobile: logo CELÉ (nie odseknutý roh — pravidlo logo 1:1) — vycentrované za textom, jemné. */
@media (max-width: 600px) {
    .cta-panel .mc__logo {
        top: 50%; left: 50%; right: auto; bottom: auto;
        transform: translate(-50%, -50%);
        width: 88%; max-width: 300px;
        opacity: 0.45;
    }
}
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel__title { max-width: 18ch; margin: 24px auto 32px; }
.cta-panel .accent { color: rgba(0, 0, 0, 0.75); }   /* zvýraznené slovo tmavé = kontrast na červenej */
.cta-panel__lead { max-width: 50ch; margin: 0 auto 56px; color: rgba(255, 255, 255, 0.82); font-size: var(--fs-body-l); }
.cta-panel__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* tlačidlo na červenej = biele (kontrast), bez glow */
.cta-panel .btn--primary {
    background: #fff;
    color: var(--accent);
    border-color: transparent;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.4);
}
.cta-panel .btn--primary:hover { background: #f0f0f0; transform: translateY(-1px); }
.cta-panel .btn--primary .btn__pill { background: var(--accent); color: #fff; }

/* ── MOBILE ── */
@media (max-width: 900px) {
    .why-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 64px; }
    .partners-wall__grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); }
    .partners-wall__item { border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
    .partners-wall__item:nth-child(2n) { border-right: none; }

    .cases-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .case--wide, .case--tall, .case--half { grid-column: span 1; grid-row: span 1; min-height: 280px; padding: 32px; }

    .process-grid { grid-template-columns: 1fr; gap: 56px; }
    .process-sticky { position: static; }
    .process-steps { gap: 64px; }

    .cta-panel { padding: 56px 24px; }
    .cta-panel__lead { margin-bottom: 40px; }

    .marquee__item, .hero-client { font-size: var(--fs-h5); }

    .tilt { transform: none !important; }
}


/* ════════════════════════════════════════════════════════════════
   GENERIC COMPONENTS — building blocks that work on any page.
   Atomic enough to compose into subpage layouts.
   ════════════════════════════════════════════════════════════════ */

/* ── GENERIC CARD — light variant for content pages on light bg ── */
.card-light {
    background: var(--bg-light-elev);
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    padding: 32px;
    transition: border-color 0.3s;
}
.card-light:hover { border-color: var(--border-light-strong); }
.card-light__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h4);
    letter-spacing: -0.015em;
    color: var(--text-dark);
}
.card-light__text { color: var(--text-dark-muted); margin-top: 12px; line-height: 1.6; font-size: var(--fs-small); }


/* ── KONTAKT — 4 údajové icon-karty na office fotke (page-kontakt) ── */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
/* Svetlé karty, nech vyniknú na tmavej office fotke (.section--photo). */
/* Frosted svetlé karty — fotka zľahka presvitá, text ostáva čitateľný. */
.contact-cards .value-card {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.55);
    justify-content: flex-start;
}
.contact-cards .value-card:hover { border-color: rgba(255, 255, 255, 0.9); }
.value-card__label {
    font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--text-dark-muted); display: block; margin-bottom: 8px;
}
.value-card__value { font-size: var(--fs-body); line-height: 1.5; color: var(--text-dark); }
.value-card__value a { color: var(--text-dark); text-decoration: none; }
.value-card__value a:hover { color: var(--accent); }
@media (max-width: 640px) { .contact-cards { grid-template-columns: 1fr; } }


/* ── FORMS ── */
.field { display: block; margin-bottom: 24px; }
.field__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.field__label--required::after { content: ' *'; color: var(--accent); }
.field__input,
.field__textarea,
.field__select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    width: 100%;
    transition: border-color 0.15s, background 0.15s;
}
.field__textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.field__input:focus,
.field__textarea:focus,
.field__select:focus { border-color: var(--accent); outline: none; background: rgba(255, 255, 255, 0.06); }
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-faint); }
.field__hint { font-size: var(--fs-caption); color: var(--text-faint); margin-top: 6px; }
.field__error { font-size: var(--fs-caption); color: var(--accent); margin-top: 6px; }
.field--error .field__input,
.field--error .field__textarea { border-color: var(--accent); }
.field__check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.field__check input { width: 18px; height: 18px; accent-color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.field__check span { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }

/* Light form variant — for light interlude / light section forms */
.section--light .field__label,
.field--light .field__label { color: var(--text-dark-muted); }
.section--light .field__input,
.section--light .field__textarea,
.section--light .field__select,
.field--light .field__input,
.field--light .field__textarea,
.field--light .field__select {
    background: var(--bg-light-elev);
    border-color: var(--border-light);
    color: var(--text-dark);
}
.section--light .field__input::placeholder,
.field--light .field__input::placeholder { color: var(--text-dark-faint); }


/* ── BREADCRUMBS ── */
.breadcrumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.breadcrumbs a { color: inherit; text-decoration: none; transition: color 0.15s; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs__sep { color: var(--text-faint); }
.breadcrumbs__current { color: var(--text); }
.section--light .breadcrumbs { color: var(--text-dark-muted); }
.section--light .breadcrumbs__sep { color: var(--text-dark-faint); }
.section--light .breadcrumbs__current { color: var(--text-dark); }


/* ── PROSE — typography for article body, blog posts, content pages ── */
.prose { max-width: 70ch; }
/* Prvý prvok prose bez horného marginu — inak margin-top nadpisu „prekĺzne" von
   cez sekciu s padding-top:0 (dve svetlé sekcie za sebou) → tmavá medzera. */
.prose > :first-child { margin-top: 0; }
.section--light .prose h2 { color: var(--text-dark); }
.section--light .prose p { color: var(--text-dark-muted); }
/* Editorial split — nadpis vľavo, text vpravo (dva boxy vedľa seba). Vyplní šírku,
   žiadny prázdny stred. Na úzkom stackuje pod seba. */
.split-2 {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: start;
}
.split-2 > h2 { margin: 0; }
@media (max-width: 820px) {
    .split-2 { grid-template-columns: 1fr; gap: 20px; }
}
.prose h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h2);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 48px 0 16px;
}
.prose h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.015em;
    margin: 32px 0 12px;
}
.prose p { margin-bottom: 20px; color: var(--text-muted); line-height: 1.7; }
/* base.css resetuje `ul, ol { list-style: none }` globálne (kvôli navigáciám).
   V editoriálnom texte tým zo zoznamu vznikne len odsadený odsek — splynie
   s prózou a článok pôsobí nečlenene. Tu značky vraciame späť. (J-056) */
.prose ul, .prose ol { margin: 16px 0 24px 24px; color: var(--text-muted); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 10px; line-height: 1.7; padding-left: 4px; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose blockquote {
    padding: 16px 24px;
    border-left: 2px solid var(--accent);
    color: var(--text);
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-h5);
    margin: 24px 0;
}
.prose code {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    background: var(--charcoal);
    padding: 2px 6px;
    color: var(--text);
}
.prose strong { color: var(--text); }
/* Light variant */
.section--light .prose p,
.section--light .prose ul,
.section--light .prose ol { color: var(--text-dark-muted); }
.section--light .prose strong,
.section--light .prose blockquote { color: var(--text-dark); }
.section--light .prose code { background: var(--bg-light-elev); border: 1px solid var(--border-light); color: var(--text-dark); }

/* ── PROSE · CASE STUDY (.prose--case, J-057) ─────────────────────────────
   Detail referencie ostáva ČLÁNOK (J-056), nie mriežka komponentov — tu sa
   teda nepridáva nový komponent, len rytmus pre dlhý editoriálny text:
   väčší úvodný odstavec, väčšia medzera medzi odstavcami a vlasová linka
   nad každým h2, aby sa sekcie čítali ako kapitoly a nie ako stena.

   `strong` je podložený jemným akcentom (10 %) — zvýraznenie sa dá nájsť
   pri skenovaní stránky očami, no neťahá pozornosť ako marker.
   ⚠️ Platí redakčné pravidlo: bold max 2× na sekciu a len na konkrétnu vec
   (technológia, výsledok, číslo), nikdy na prídavné meno.                  */
.prose--case > p:first-of-type { font-size: var(--fs-body-l); line-height: 1.6; }
.prose--case p { margin-bottom: 26px; }
.prose--case h2 { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--border); }
.prose--case > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose--case strong { box-shadow: inset 0 -8px 0 rgba(236, 36, 38, .16); }
.section--light .prose--case h2 { border-top-color: var(--border-light); }
.section--light .prose--case strong { font-weight: 700; box-shadow: inset 0 -8px 0 rgba(236, 36, 38, .10); }


/* ── QUOTE / TESTIMONIAL ── */
.quote {
    padding: 48px;
    background: var(--charcoal);
    border: 1px solid var(--border);
    position: relative;
}
.quote__text {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 32px;
}
.quote__attr {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}
.quote__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--charcoal-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-muted);
    overflow: hidden;
    flex-shrink: 0;
}
.quote__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.quote__author { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small); }
.quote__role { color: var(--text-muted); font-size: var(--fs-caption); margin-top: 2px; }
.section--light .quote { background: var(--bg-light-elev); border-color: var(--border-light); }
.section--light .quote__text { color: var(--text-dark); }
.section--light .quote__attr { border-top-color: var(--border-light); }
.section--light .quote__role { color: var(--text-dark-muted); }


/* ── TABLE ── */
.tbl {
    width: 100%;
    border: 1px solid var(--border);
    border-collapse: separate;
    border-spacing: 0;
}
.tbl th, .tbl td { padding: 16px 24px; text-align: left; border-bottom: 1px solid var(--border); }
.tbl th {
    background: var(--charcoal);
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    font-weight: 500;
}
.tbl td { font-size: var(--fs-small); color: var(--text); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--charcoal); }
.section--light .tbl { border-color: var(--border-light); }
.section--light .tbl th { background: var(--bg-light); border-bottom-color: var(--border-light); color: var(--text-dark-muted); }
.section--light .tbl td { color: var(--text-dark); border-bottom-color: var(--border-light); }
.section--light .tbl tbody tr:hover { background: var(--bg-light); }


/* ── INLINE CTA — smaller alternative to the full glass cta-panel ── */
.cta-inline {
    padding: 40px;
    background: var(--charcoal-light);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-inline__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.02em;
    max-width: 32ch;
}
.cta-inline__text { color: var(--text-muted); font-size: var(--fs-small); margin-top: 6px; }
.cta-inline__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cta-inline--light { background: var(--bg-light-elev); border-color: var(--border-light); color: var(--text-dark); }
.cta-inline--light .cta-inline__title { color: var(--text-dark); }
.cta-inline--light .cta-inline__text { color: var(--text-dark-muted); }

/* ── COMPARE — dvojstĺpcový kontrast (dnes vs s nami), náhrada UX-nepeknej tabuľky (D-017) ── */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare__col { padding: 30px 32px; border: 1px solid var(--border); background: var(--charcoal); }
.compare__col--new { border-color: rgba(236, 36, 38, 0.35); }
.section--light .compare__col { background: var(--bg-light-elev); border-color: var(--border-light); }
.section--light .compare__col--new { border-color: rgba(236, 36, 38, 0.40); }
.compare__head { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 20px; }
.compare__col--new .compare__head { color: var(--accent); }
.section--light .compare__head { color: var(--text-dark-muted); }
.section--light .compare__col--new .compare__head { color: var(--accent); }
.compare__list { list-style: none; margin: 0; padding: 0; }
.compare__list li { position: relative; padding-left: 28px; margin-bottom: 15px; line-height: 1.5; color: var(--text-muted); }
.compare__list li:last-child { margin-bottom: 0; }
.section--light .compare__col--old .compare__list li { color: var(--text-dark-muted); }
.section--light .compare__col--new .compare__list li { color: var(--text-dark); }
.compare__col--old .compare__list li::before { content: '✕'; position: absolute; left: 0; top: 1px; color: var(--text-muted); font-size: 0.85em; }
.compare__col--new .compare__list li::before { content: '✓'; position: absolute; left: 0; top: 1px; color: var(--accent); font-weight: 700; }

/* ── VIEWS — dva pohľady (biznis / technické), čisté rovnaké stĺpce bez krivých boxov (D-017) ── */
.views { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .views { grid-template-columns: 1fr; gap: 34px; } }
.views__col { padding-top: 22px; border-top: 2px solid var(--accent); }
.views__eyebrow { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 16px; }
.views__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }
.views__text { color: var(--text-muted); line-height: 1.6; }
.views__points { list-style: none; margin: 20px 0 0; padding: 0; }
.views__points li { position: relative; padding-left: 26px; margin-bottom: 12px; color: var(--text-muted); line-height: 1.5; }
.views__points li:last-child { margin-bottom: 0; }
.views__points li::before { content: '→'; position: absolute; left: 0; color: var(--accent); }
/* Poznámka pod stĺpcami — prepojenie na súvisiacu službu (napr. SDI → Smart Asistenti). */
.views__note { margin: 32px 0 0; color: var(--text-muted); line-height: 1.6; }
.views__note a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.views__note a:hover { text-decoration: underline; }
.section--light .views__note { color: var(--text-dark-muted); }

/* ── TIMELINE — fázy dodania (Do 14 dní · PoC → MVP → Prod); echo brand „uzly na línii" (D-017) ── */
.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; gap: 16px; } }
.timeline__step {
    position: relative;
    padding: 28px 28px 30px;
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    background: var(--charcoal);
}
.section--light .timeline__step { background: var(--bg-light-elev); border-color: var(--border-light); border-top-color: var(--accent); }
.timeline__step::before {                                  /* uzol na línii (brand „spojené kruhy") */
    content: '';
    position: absolute;
    top: -7px; left: 28px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--charcoal);
}
.section--light .timeline__step::before { box-shadow: 0 0 0 4px var(--bg-light-elev); }
.timeline__marker { display: block; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 12px; }
.timeline__phase { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px 11px; margin-bottom: 16px; }
.section--light .timeline__phase { color: var(--text-dark-muted); border-color: var(--border-light-strong); }
.timeline__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); line-height: 1.2; letter-spacing: -0.01em; margin-bottom: 10px; }
.timeline__text { color: var(--text-muted); line-height: 1.6; font-size: var(--fs-small); }
.section--light .timeline__text { color: var(--text-dark-muted); }

/* .process (vertikálna os) ODSTRÁNENÝ (J-047) — nebol v DS; jediný proces na webe je
   DS „Process step (sticky scroll)": .process-grid + .process-sticky + .process-steps. */


/* ── SUBPAGE HERO — for non-homepage pages (services detail, blog, kontakt etc.) ── */
.subpage-hero {
    padding: 160px 0 80px;
    position: relative;
    background: var(--ink);
    overflow: hidden;
}
.subpage-hero::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(236, 36, 38, 0.08) 0%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}
.subpage-hero > .container { position: relative; z-index: 1; }
.subpage-hero__breadcrumbs { margin-bottom: 24px; }
.subpage-hero__title { margin: 16px 0 24px; max-width: 22ch; }
.subpage-hero__lead { color: var(--text-muted); font-size: var(--fs-body-l); max-width: 56ch; line-height: 1.55; }


/* ── SITE FOOTER ── */
.site-footer {
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    padding: 80px 0 32px;
}
.site-footer__cols {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 64px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__brand img { height: 28px; width: auto; }
.site-footer__brand p { color: var(--text-muted); font-size: var(--fs-small); line-height: 1.6; max-width: 36ch; }
.site-footer__col-title {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin-bottom: 20px;
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: 10px; }
.site-footer__col a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-small); transition: color 0.15s; }
.site-footer__col a:hover { color: var(--text); }
.site-footer__bottom {
    margin-top: 80px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-faint);
    font-size: var(--fs-caption);
    flex-wrap: wrap;
    gap: 16px;
}
.site-footer__social { display: flex; gap: 16px; }
.site-footer__social a { color: var(--text-muted); transition: color 0.15s; }
.site-footer__social a:hover { color: var(--accent); }
.site-footer__social svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .site-footer__cols { grid-template-columns: 1fr; gap: 40px; }
    .subpage-hero { padding: 120px 0 60px; }
    .cta-inline { padding: 28px; }
}


/* ════════════════════════════════════════════════════════════════
   PINNED SCROLL ANIMATIONS — Apple-style storytelling
   1) Pinned stats — sticky panel + scale-in + counter
   2) Pinned services — sequential card reveal during pin
   3) Section color bleed — gradient zone between dark and light
   JS controllers in assets/js/navigation.js set the CSS variables.
   ════════════════════════════════════════════════════════════════ */

/* ── 1 · PINNED STATS (replaces static .why-stats grid on homepage) ── */
.pin-stats {
    position: relative;
    background: var(--bg-light);
    color: var(--text-dark);
    padding: clamp(96px, 12vh, 160px) 0;
}
.pin-stats__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--gutter);
}
.pin-stats .kicker { margin: 0 auto var(--kicker-gap); display: flex; width: fit-content; }   /* na stred + jednotná medzera */
.pin-stats__heading {
    color: var(--text-dark);
    text-align: center;
    margin-bottom: clamp(56px, 7vh, 88px);
    max-width: 22ch;
}
.pin-stats__row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1100px;
}
.mega-stat {
    flex: 0 0 auto;
    text-align: center;
    padding: 0 clamp(20px, 3.5vw, 48px);
    border-right: 1px solid var(--border-light);
    transform: scale(var(--ms-scale, 0.55)) translateY(var(--ms-y, 60px));
    opacity: var(--ms-opacity, 0);
    will-change: transform, opacity;
}
.mega-stat:last-child { border-right: none; }
.mega-stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--fs-display);
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: var(--text-dark);
    display: block;
}
.mega-stat__num .accent { color: var(--accent); }
.mega-stat__label {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dark-muted);
    margin-top: 16px;
    display: block;
}


/* ── 2 · PINNED SERVICES — sequential card reveal during pin ── */
.pin-services {
    position: relative;
    min-height: 300vh;
    background: var(--charcoal);
}
.pin-services .kicker { display: flex; width: fit-content; margin: 0 auto var(--kicker-gap); }   /* na stred (nadpis je centrovaný) */
.pin-services__inner {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--gutter);
    overflow: hidden;
}
.pin-services__heading {
    text-align: center;
    margin-bottom: 64px;
    color: var(--text);
    max-width: 22ch;
    margin-left: auto;
    margin-right: auto;
    /* Heading je hneď viditeľné — animuje sa len obsah pod ním (cards). */
}
/* Service cards inside pinned section get scroll-tied transform.
   Layout (services-bento with 1 large + 2 small) zostáva rovnaký,
   len pridávame transform/opacity ovládané JS-om. */
.pin-services .service-card {
    transform: scale(var(--bc-scale, 0.6)) translateY(var(--bc-y, 80px));
    opacity: var(--bc-opacity, 0);
    will-change: transform, opacity;
}


/* ── 3 · SECTION COLOR BLEED — gradient zone between dark and light ── */
.section-bleed {
    height: 25vh;
    position: relative;
}
.section-bleed--dark-to-light {
    background: linear-gradient(to bottom, var(--ink) 0%, var(--bg-light) 100%);
}
.section-bleed--light-to-dark {
    background: linear-gradient(to bottom, var(--bg-light) 0%, var(--charcoal) 100%);
}
.section-bleed--light-to-deep {
    background: linear-gradient(to bottom, var(--bg-light) 0%, var(--ink) 100%);
}


/* ── Mobile: skip pinning (it's confusing on small screens) ── */
@media (max-width: 900px) {
    .pin-stats { padding: 80px 0; }
    .pin-stats__row { flex-wrap: wrap; }
    .mega-stat { padding: 0 16px; }
    .pin-stats__heading { margin-bottom: 48px; }

    .pin-services { min-height: auto; }
    .pin-services__inner { position: static; height: auto; padding: 80px 0; }
    .services-bento .service-card { transform: none; opacity: 1; }
    .pin-services__heading { opacity: 1; transform: none; }

    .section-bleed { height: 15vh; }
}


/* ── Reduce motion: disable animations entirely ── */
@media (prefers-reduced-motion: reduce) {
    .mega-stat {
        transform: none !important;
        opacity: 1 !important;
        transition: none !important;
    }
    .pin-services { min-height: auto; }
    .pin-services__inner { position: static; height: auto; padding: 80px 0; }
    .services-bento .service-card { transform: none !important; opacity: 1 !important; }
    .pin-services__heading { opacity: 1 !important; transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   RADIUS — SYSTEMATICKÉ ZJEDNOTENIE (session 2026-07-16, Erika: fakt
   veľmi jemné). Prvky ktoré radius nemali → tokeny. Kruhy 50% ostávajú.
   ════════════════════════════════════════════════════════════════ */
.btn,
.field__input, .field__select, .field__textarea,
.lang-switcher, .post-share__btn, .blog-pagination .page-numbers,
.process-step__num, .kicker__label { border-radius: var(--r-sm); }

.tbl, .quote, .cta-inline, .faq__item, .card-light, .mega-menu,
.compare__col, .why-stat { border-radius: var(--r-md); }

.cta-panel { border-radius: var(--r-xl); }

/* ════════════════════════════════════════════════════════════════
   VALUE-CARD — TMAVÁ VARIANTA (option A, session 2026-07-16): ten istý
   prémiový recept ako svetlá (ikona monochrom v rámčeku), ale na tmavom.
   Elevácia SVETLOM (horný gradient + hrana), monochrom-svetlá ikona.
   ════════════════════════════════════════════════════════════════ */
.value-card--dark {
    background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%), var(--charcoal-light);
    border-color: rgba(255,255,255,.08);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 22px 46px -28px rgba(0,0,0,.7);
}
.value-card--dark .value-card__icon {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.09);
    color: var(--text);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.value-card--dark .value-card__title { color: var(--text); }
.value-card--dark .value-card__text { color: var(--text-muted); }


/* ── PARTNER ROW (stránka /partnerstva/) ──────────────────────────────────
   Blok na partnera, vzor Version 1. Rozloženie je príbuzné .pillar-card,
   ale stĺpec značky je širší: AWS odznak má tvrdé minimum 120 px výšky
   [G s.11] a Squid Ink verzia je horizontálna (298×120), takže sa do 120px
   stĺpca nezmestí. Odznak stojí VO VLASTNOM bloku, nikdy v rade vedľa
   cudzieho loga [G s.57]. */
.partner-row {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 3rem;
    padding: 3rem 0;
    border-top: 1px solid var(--border-light);
    align-items: start;
}
.partner-row:first-of-type { border-top: none; padding-top: 0; }

.partner-row__mark { display: flex; align-items: center; padding: 1.625rem 0; }  /* clearspace ≈26px [G s.11] */
.partner-row__badge     { min-height: 120px; height: auto; width: auto; display: block; }
.partner-row__badge--sq { min-height: 0; height: 120px; width: 120px; }
.partner-row__logo      { max-width: 190px; max-height: 56px; width: auto; height: auto; display: block; }

.partner-row__tier {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.06em;
    padding: 0.4rem 0.75rem;
    margin: 0 0.5rem 0.875rem 0;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    background: var(--bg-light-elev);
    color: var(--text-dark);
}
.partner-row__tier--award { border-color: var(--accent); color: var(--accent); }

.partner-row__text { color: var(--text-dark-muted); line-height: 1.72; max-width: 66ch; margin: 0.375rem 0 0; }
.partner-row__meta { font-size: var(--fs-small); line-height: 1.6; color: var(--text-dark-muted); margin: 0.875rem 0 0; opacity: 0.82; }
.partner-row__more { display: inline-block; margin-top: 1rem; color: var(--accent); text-decoration: none; font-weight: 600; }
.partner-row__more:hover { text-decoration: underline; }
.partner-row__tail { margin: 2.5rem 0 0; padding-top: 2rem; border-top: 1px solid var(--border-light); color: var(--text-dark-muted); }

@media (max-width: 860px) {
    .partner-row { grid-template-columns: 1fr; gap: 1.5rem; padding: 2.5rem 0; }
    .partner-row__mark { padding: 0 0 1.625rem; }
    /* Odznak sa NEZMENŠUJE ani na mobile [G s.11]. */
}

/* Odkaz pod pásom partnerov → /partnerstva/ */
.partners-wall__more { text-align: center; margin: 2rem 0 0; }
.partners-wall__more a { color: var(--accent); text-decoration: none; font-weight: 600; }
.partners-wall__more a:hover { text-decoration: underline; }