/* Reality Radar · Deal Intelligence — one-pager (vykupy.realityradar.eu).

   LAYER TWO. The faces, the palette, the reset and the shared primitives (.sheet, .eyebrow, .serif, .btn,
   badges) now live in di-core.css, which the layout loads first — so this file is only what is unique to the
   one-pager. It still does not build on site.css / landing.css: the Reality Radar landing can change without
   dragging the Deal Radar sheet with it.

   Nothing was added here when the report pages arrived; the shared half was moved OUT. The landing's payload
   went down, not up — which is the point, since a premium product that loads slowly is a contradiction. */

/* ---------- HERO (dark) ---------- */
.hero {
    background:
        radial-gradient(120% 90% at 88% -10%, #1b332b 0%, rgba(27, 51, 43, 0) 55%),
        var(--ink);
    color: var(--text-light);
    padding: 46px 52px 50px;
    position: relative;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 38px;
}

/* ---------- lockup (mark + wordmark) ---------- */
.lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--brass); /* the mark inherits this via currentColor */
}

.lockup svg {
    width: 44px;
    height: 44px;
    flex: none;
}

.lockup-words { line-height: 1.05; }

.lockup-name {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: .01em;
    color: var(--paper);
}

.lockup-sub {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin-top: 5px;
    color: var(--brass);
}

.hero-tag {
    font-size: 10.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted-light);
    text-align: right;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 44px;
    align-items: center;
}

.hero h1 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(30px, 4.4vw, 46px);
    line-height: 1.02;
    letter-spacing: -.015em;
    color: var(--paper);
}

.hero h1 em { font-style: italic; color: var(--brass-soft); }

.hero-sub {
    margin-top: 20px;
    font-size: 15px;
    color: var(--muted-light);
    max-width: 42ch;
    line-height: 1.6;
}

.hero-sub b { color: var(--text-light); font-weight: 500; }

/* ---------- signature deal card ---------- */
.deal {
    background: linear-gradient(180deg, #16302a 0%, #112420 100%);
    border: 1px solid #2b463d;
    border-radius: 3px;
    padding: 22px 22px 20px;
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .75);
    position: relative;
}

.deal::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brass);
}

.deal-eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.deal-eyebrow span:first-child {
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.pill-motiv {
    font-size: 9px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #0C1714;
    background: var(--amber);
    padding: 3px 7px;
    border-radius: 2px;
    font-weight: 600;
}

.deal-addr {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    color: var(--paper);
    margin-bottom: 16px;
}

.deal-prices { display: flex; gap: 26px; margin-bottom: 14px; }

.deal-prices .lab {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 3px;
}

.deal-prices .val {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 17px;
    color: var(--text-light);
}

.deal-prices .val.market {
    color: var(--muted-light);
    text-decoration: line-through;
    text-decoration-color: #3c5a4f;
}

.deal-headline {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 14px;
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
    margin-bottom: 14px;
}

.deal-headline .big {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 38px;
    color: var(--mint);
    line-height: 1;
}

/* Named .deal-cap, not .cap: the capability cards below own .cap, and their paper background
   and 20px padding would otherwise leak onto this caption. */
.deal-headline .deal-cap {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted-light);
}

.deal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }

.chip {
    font-size: 10.5px;
    color: var(--text-light);
    border: 1px solid #315046;
    border-radius: 2px;
    padding: 4px 8px;
    letter-spacing: .02em;
}

.chip b { color: var(--mint); font-weight: 600; }

.exit-lab {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 6px;
}

.exit-lab b { color: var(--brass-soft); letter-spacing: .06em; }

.exit-bar { height: 5px; background: #20362e; border-radius: 3px; overflow: hidden; }

/* Sirku nastavuje markup inline z REALNYCH dat (podiel dopytov s financovanim).
   Default je 0, nie 82 %: ked data chybaju, bar ma byt prazdny, nie ukazovat "vysoky dopyt". */
.exit-bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--emerald), var(--mint));
}

.exit-note { font-size: 10px; color: var(--muted-light); margin-top: 8px; letter-spacing: .01em; }

/* ---------- ENGINE strip (paper) ---------- */
.engine { padding: 40px 52px 14px; background: var(--paper); }

.engine-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--paper-line);
    padding-bottom: 18px;
}

.engine-head h2 { max-width: 20ch; color: var(--text-dark); }

.engine-head p { font-size: 12.5px; color: var(--muted-dark); max-width: 26ch; text-align: right; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }

.step { padding: 0 22px; border-left: 1px solid var(--paper-line); }

.step:first-child { padding-left: 0; border-left: none; }

.step:last-child { padding-right: 0; }

.step .num {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 13px;
    color: var(--brass);
    font-weight: 600;
    letter-spacing: .1em;
    margin-bottom: 9px;
}

.step h3 { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 5px; }

.step p { font-size: 12px; color: var(--muted-dark); line-height: 1.5; }

/* ---------- CAPABILITIES (paper) ---------- */
.caps { padding: 34px 52px 8px; background: var(--paper); }

.caps-eyebrow { margin-bottom: 20px; }

.cap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--paper-line);
    border: 1px solid var(--paper-line);
}

.cap { background: var(--paper); padding: 20px 20px 22px; position: relative; }

.cap.star { background: var(--paper-2); }

.cap .k {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 15.5px;
    color: var(--text-dark);
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.15;
}

.cap.star .k::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--brass);
    border-radius: 50%;
    flex: none;
}

.cap p { font-size: 12px; color: var(--muted-dark); line-height: 1.52; }

.cap p b { color: var(--emerald); font-weight: 600; }

/* ---------- differentiator line ---------- */
.diff { padding: 30px 52px; background: var(--paper); }

.diff-inner {
    border-top: 1px solid var(--paper-line);
    border-bottom: 1px solid var(--paper-line);
    padding: 24px 0;
    text-align: center;
}

.diff-inner p {
    font-family: 'Fraunces', Georgia, serif;
    font-size: clamp(18px, 2.5vw, 25px);
    color: var(--text-dark);
    line-height: 1.28;
    letter-spacing: -.01em;
}

.diff-inner p em { font-style: italic; color: var(--brass); }

.diff-inner .credit {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11.5px;
    letter-spacing: .04em;
    color: var(--muted-dark);
    margin-top: 12px;
}

/* ---------- ACCESS (dark) ---------- */
.access { background: var(--ink); color: var(--text-light); padding: 44px 52px 40px; }

.access-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 46px; align-items: center; }

.access .eyebrow { margin-bottom: 14px; }

.access h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 500;
    font-size: clamp(24px, 3.2vw, 32px);
    color: var(--paper);
    line-height: 1.06;
    margin-bottom: 16px;
}

.access p.lead {
    font-size: 13.5px;
    color: var(--muted-light);
    line-height: 1.6;
    margin-bottom: 14px;
    max-width: 44ch;
}

.access p.lead b { color: var(--text-light); font-weight: 500; }

.access .value {
    font-family: 'Fraunces', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--brass-soft);
    line-height: 1.4;
}

.cta-card {
    background: var(--ink-panel);
    border: 1px solid #2b463d;
    border-radius: 3px;
    padding: 26px 26px 24px;
}

.cta-card .label {
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--muted-light);
    margin-bottom: 14px;
}

/* inline-flex + min-height keeps the primary action above the 44px touch target floor. */
.cta-btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    background: var(--brass);
    color: #0C1714;
    font-weight: 600;
    font-size: 13.5px;
    letter-spacing: .02em;
    padding: 0 24px;
    border-radius: 2px;
    text-decoration: none;
    margin-bottom: 20px;
}

.contact { border-top: 1px solid var(--hairline); padding-top: 16px; }

.contact .name {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 16px;
    color: var(--paper);
    margin-bottom: 4px;
}

.contact .line { font-size: 12.5px; color: var(--muted-light); letter-spacing: .01em; }

.contact .line a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    color: var(--brass-soft);
    text-decoration: none;
}

/* The domain is a signature, not a destination -- the visitor is already on it. */
.contact .line.site { color: var(--brass-soft); }

.footnote {
    background: var(--ink);
    color: #5f7168;
    font-size: 10.5px;
    letter-spacing: .02em;
    padding: 0 52px 30px;
    line-height: 1.5;
}

.footnote span { color: var(--brass); }

.footnote a { color: #7d9186; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- mobile action bar ----------
   Deliberately a sibling of .sheet, not a child: .sheet sets overflow:hidden, which would
   neutralise a sticky descendant. position:fixed on an outside element sidesteps that. */
.m-cta { display: none; }

/* Load motion (.fade / .d1-.d3 / @keyframes rise / reduced-motion) lives in di-core.css — the report pages use
   the identical entrance, so it is one definition, not two that drift. */

/* ---------- responsive ---------- */
@media (max-width: 720px) {
    body {
        padding: 0;
        /* room for the fixed bar, plus the iOS home indicator */
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }

    .hero, .engine, .caps, .diff, .access, .footnote { padding-left: 24px; padding-right: 24px; }

    .hero { padding-top: 38px; padding-bottom: 42px; }

    /* The desktop clamp bottoms out at 30px, which loses the headline against a full-width
       15.5px subhead. Restore the size gap that carries the hierarchy. */
    .hero h1 { font-size: 35px; line-height: 1.04; }

    .hero-grid, .access-grid { grid-template-columns: 1fr; gap: 30px; }

    .steps { grid-template-columns: 1fr 1fr; gap: 22px 0; }

    .step { padding: 0 16px; }

    .step:nth-child(3) { border-left: none; padding-left: 0; }

    .cap-grid { grid-template-columns: 1fr 1fr; }

    .hero-tag { display: none; }

    /* Frosted rather than a solid slab: a solid panel with two buttons reads as a cookie bar. */
    .m-cta {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        display: flex;
        gap: 12px;
        align-items: stretch;
        background: rgba(12, 23, 20, .82);
        backdrop-filter: blur(14px) saturate(140%);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        border-top: 1px solid rgba(190, 155, 91, .26);
        padding: 13px 20px;
        padding-bottom: calc(13px + env(safe-area-inset-bottom));
    }

    /* No backdrop-filter (older Firefox, Android WebView): fall back to the opaque panel. */
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .m-cta { background: var(--ink-panel); }
    }

    .m-cta a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        border-radius: 2px;
        font-size: 13.5px;
        font-weight: 600;
        letter-spacing: .04em;
        text-decoration: none;
    }

    .m-cta .m-book {
        flex: 1;
        background: var(--brass);
        color: #0C1714;
    }

    .m-cta .m-call {
        flex: none;
        padding: 0 20px;
        border: 1px solid rgba(201, 174, 120, .34);
        color: var(--brass-soft);
    }
}

@media (max-width: 460px) {
    .engine { padding: 42px 24px 16px; }

    .caps { padding: 38px 24px 10px; }

    .diff { padding: 34px 24px; }

    /* Stacked steps keep their rules, turned from vertical to horizontal. Without them the
       four-column editorial grid collapses into an undifferentiated list. */
    .steps { grid-template-columns: 1fr; gap: 0; }

    .step {
        border-left: none;
        border-top: 1px solid var(--paper-line);
        padding: 20px 0 22px;
        display: grid;
        grid-template-columns: 34px 1fr;
        column-gap: 12px;
    }

    .step:first-child { border-top: none; padding-top: 0; }

    .step .num { grid-row: span 2; margin-bottom: 0; padding-top: 2px; }

    .step h3 { font-size: 15px; }

    /* One column, so each card gets room to breathe. The starred marker moves from an inline dot
       to a left rule: stacked, the dot indented two headings and broke the shared left edge. */
    .cap-grid { grid-template-columns: 1fr; }

    .cap { padding: 22px 20px 24px; }

    .cap .k { font-size: 16.5px; }

    .cap.star { box-shadow: inset 3px 0 0 var(--brass); }

    .cap.star .k::before { display: none; }

    .deal-prices { gap: 18px; }

    /* Editorial 10-12px reads fine on paper; on a phone it is under the readability floor. */
    .step p, .cap p { font-size: 13px; }

    .hero-sub { font-size: 15.5px; }

    .diff-inner p { font-size: 21px; }

    .chip, .exit-note, .footnote { font-size: 11.5px; }

    .engine-head { flex-direction: column; align-items: flex-start; gap: 12px; }

    .engine-head p { text-align: left; max-width: none; }
}

/* di-core.css already unwraps the sheet and stills the motion for print; only the mobile bar is ours to hide. */
@media print {
    .m-cta { display: none; }
}