@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

/* ------------------------------------------------------------------ základ */
:root {
    --revize: #D86504;
    --royal: #00365E;
    --ap-bg: #F6F7F5;
    --ap-ink: #14181C;
    --ap-muted: #5A646C;
    --ap-em: #0E7A5F;
    --ap-sig: #2BD18C;
    --ap-line: #DCE2DF;
    --serif: "Cardo", Georgia, serif;
    --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hold-w: 400px;                                   /* šířka středového panelu */
    --hold-gap: calc(var(--hold-w) / 2 + 36px);        /* místo, které panel zabírá v každém sloupci */
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; cursor: inherit; }
html { cursor: default; }
a[href] { cursor: pointer; }

body {
    height: 100vh; height: 100dvh; width: 100%;
    overflow: hidden;
    font-family: var(--serif);
    color: #fff;
    background: #000;
    -webkit-font-smoothing: antialiased;
}

.seo-heading { position: absolute; left: -9999px; }

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ mřížka: vlevo dvě značky, vpravo AP Development přes celou výšku */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-template-areas: "revize apdev" "royal apdev";
    height: 100vh; height: 100dvh;
    gap: 1px;
    background: #000;
}
.revize { grid-area: revize; }
.royalbuild { grid-area: royal; }
.apdev { grid-area: apdev; }

/* obsah dlaždic uhýbá středovému panelu: vlevo zprava, vpravo zleva */
.grid > .revize, .grid > .royalbuild { padding-right: var(--hold-gap); }
.grid > .apdev { padding-left: var(--hold-gap); }

/* ------------------------------------------------------------------ dlaždice */
.tile {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 48px 56px;
}

/* jemné světlo a stín */
.tile::before {
    content: ""; position: absolute; inset: -50%; z-index: -1;
    background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .14), transparent 45%);
    opacity: 0; transition: opacity .5s ease, transform .8s ease;
    transform: scale(.9);
}
.tile::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .22));
}
.tile:hover::before, .tile:focus-visible::before { opacity: 1; transform: scale(1); }

.content {
    max-width: 440px;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.tile:hover .content, .tile:focus-visible .content { transform: translateY(-6px); }
.tile:active .content { transform: scale(.98); }
.tile:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }

.content img { height: 72px; width: auto; max-width: 100%; object-fit: contain; margin-bottom: 26px; }
.content h2 { font-size: 36px; line-height: 1.1; letter-spacing: .5px; margin-bottom: 14px; }
.content p { font-size: 19px; line-height: 1.5; opacity: .92; }

/* odkaz „web →“ */
.go {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 24px; padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px;
    font-size: 16px; letter-spacing: .3px;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.go i { font-style: normal; transition: transform .3s ease; }
.tile:hover .go { background: #fff; color: #000; border-color: #fff; }
.tile:hover .go i { transform: translateX(4px); }

/* barvy značek */
.revize { background: var(--revize); }
.revize:hover .go { color: var(--revize); }
.royalbuild { background: var(--royal); }
.royalbuild:hover .go { color: var(--royal); }

/* ------------------------------------------------------------------ AP Development: vlastní vizuál značky */
.apdev {
    background:
        radial-gradient(900px 600px at 85% 10%, rgba(43, 209, 140, .16), transparent 60%),
        radial-gradient(700px 500px at 10% 100%, rgba(14, 122, 95, .10), transparent 60%),
        var(--ap-bg);
    color: var(--ap-ink);
    font-family: var(--sans);
}
.apdev::after { background: none; }
.apdev::before { background: radial-gradient(circle at 50% 45%, rgba(43, 209, 140, .14), transparent 45%); }
/* jemná technická mřížka v pozadí */
.apdev .content::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: linear-gradient(var(--ap-line) 1px, transparent 1px), linear-gradient(90deg, var(--ap-line) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%);
    opacity: .55;
}
.apdev .content { max-width: 480px; }
.apdev .content img { height: 84px; }
.apdev .eyebrow {
    font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ap-em); opacity: 1; margin-bottom: 12px;
}
.apdev .eyebrow::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ap-sig); margin-right: 10px; vertical-align: 1px; box-shadow: 0 0 0 4px rgba(43, 209, 140, .18); }
.apdev h2 { font-size: 46px; font-weight: 600; letter-spacing: -.5px; }
.apdev p { font-size: 18px; color: var(--ap-muted); opacity: 1; }
.chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
.chips li {
    font-size: 14px; font-weight: 500; color: var(--ap-ink);
    padding: 7px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .8); border: 1px solid var(--ap-line);
}
.go--solid { background: var(--ap-em); border-color: var(--ap-em); color: #fff; font-weight: 600; font-family: var(--sans); padding: 12px 24px; }
.apdev:hover .go--solid { background: var(--ap-ink); border-color: var(--ap-ink); color: #fff; }
.apdev:focus-visible { outline-color: var(--ap-em); }

/* ------------------------------------------------------------------ středový panel PETER HOLDING (glass) */
.holding {
    position: absolute; top: 50%; left: 50%; z-index: 10;
    transform: translate(-50%, -50%);
    pointer-events: none;
    text-align: center;
    width: var(--hold-w);
    padding: 28px 30px;
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .5);
    box-shadow: 0 24px 48px rgba(0, 0, 0, .18), 0 6px 12px rgba(0, 0, 0, .08);
    color: #000;
}
.center img { height: 72px; width: auto; margin-bottom: 12px; }
.center h2 { font-size: 30px; letter-spacing: 3px; margin-bottom: 8px; }
.center p { font-size: 15.5px; line-height: 1.45; margin-bottom: 14px; opacity: .85; }
.center span { display: block; font-size: 12px; line-height: 1.6; opacity: .7; }

/* ------------------------------------------------------------------ menší displeje */
@media (max-width: 1366px) {
    :root { --hold-w: 340px; }
    .tile { padding-left: 28px; padding-right: 28px; }
    .grid > .revize, .grid > .royalbuild { padding-right: var(--hold-gap); }
    .grid > .apdev { padding-left: var(--hold-gap); }
    .content h2 { font-size: 30px; }
    .apdev h2 { font-size: 38px; }
    .content p { font-size: 17px; }
}

/* na výšku: panel by překrýval obsah – výš a menší */
@media (max-height: 760px) and (min-width: 769px) {
    .content img { height: 56px; margin-bottom: 16px; }
    .go { margin-top: 16px; }
    .chips { margin-top: 16px; }
    .holding { padding: 22px 30px; }
    .center img { height: 60px; }
    .center h2 { font-size: 28px; }
}

/* ------------------------------------------------------------------ mobil */
@media (max-width: 768px) {
    body { height: auto; overflow: auto; display: flex; flex-direction: column; background: var(--ap-bg); }

    .holding {
        position: relative; top: auto; left: auto; transform: none; order: -1;
        width: calc(100% - 32px); padding: 28px 24px; max-width: 420px; margin: 28px auto;
        pointer-events: auto;
        background: #fff; border-color: var(--ap-line); box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    }
    .center img { height: 64px; }
    .center h2 { font-size: 28px; }
    .center p { font-size: 15px; }
    .center span { font-size: 11px; }

    .grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "apdev" "revize" "royal"; height: auto; }
    .tile, .grid > .revize, .grid > .royalbuild, .grid > .apdev { min-height: 0; padding: 48px 24px; }
    .content img { height: 56px; margin-bottom: 18px; }
    .content h2, .apdev h2 { font-size: 28px; }
    .content p, .apdev p { font-size: 16px; }
    .chips li { font-size: 13px; }
    .tile:hover .content { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}