/* ============================================================
   PAGE-CASINO-PROMO.CSS — dedikované prezentační stránky casin
   (/tokyo, /dedek). Konverzní landing s motion. Brand-aware:
   .cp-tokyo (neon cyan/magenta) · .cp-dedek (teplé zlato/amber).
   Ladí s design systémem webu (fonty, rsp-container, glow).
   ============================================================ */

.cp-page {
    --cp-accent: var(--neon-cyan);
    --cp-accent-rgb: var(--neon-cyan-rgb);
    --cp-accent-2: var(--neon-magenta);
    --cp-accent-2-rgb: var(--neon-magenta-rgb);
    --cp-glow: 0 0 40px rgba(var(--cp-accent-rgb), .35);
    width: 100%;
    overflow-x: clip;
    /* POZN: žádný padding-top:nav-height — rodič .main-content (base.css) ho už
       dává. Duplicita tvořila ~160px prázdnou mezeru pod menu. */
}

/* Brand: Tokyo — neon cyan + magenta, japonská noc */
.cp-page.cp-tokyo {
    --cp-accent: #00f5ff;
    --cp-accent-rgb: 0, 245, 255;
    --cp-accent-2: #ff2d95;
    --cp-accent-2-rgb: 255, 45, 149;
}
/* Brand: Herna u dědka — teplé zlato/amber, retro hospoda */
.cp-page.cp-dedek {
    --cp-accent: #ffb43d;
    --cp-accent-rgb: 255, 180, 61;
    --cp-accent-2: #ff6a3d;
    --cp-accent-2-rgb: 255, 106, 61;
}

/* Reset globálního section { display:flex; padding; margin } z base.css.
   KLÍČOVÉ: base.css má `section:not(.hero-section) + section:not(.hero-section)
   { margin-top: var(--space-8) }` (specificita 0,0,2,2), které přidávalo ~29px
   mezeru mezi každými dvěma sekcemi navíc k paddingu. Přebíjíme přes !important. */
.cp-page section { display: block; width: 100%; margin: 0; padding: 0; }
.cp-page section + section { margin-top: 0 !important; }

/* ── HERO ──────────────────────────────────────────────────────
   .cp-page prefix → vyšší specificita než reset `.cp-page section`
   výše (jinak by padding/margin hero spadl na 0). --- */
.cp-page .cp-hero {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* Mezera pod menu: .main-content (rodič) už dává padding-top:nav-height (80px)
       JAKO PRÁZDNÝ pruh nad hero. Aby ten pruh měl barevné pozadí a hero zároveň
       dýchal, posuneme hero nahoru pod menu (margin-top) a vrátíme to jako padding
       NAVÍC k pořádné mezeře. Výsledek: background sahá k menu + obsah má odstup. */
    margin-top: calc(-1 * var(--nav-height));
    padding-top: calc(var(--nav-height) + clamp(80px, 8vw, 130px));
    padding-bottom: clamp(56px, 6vw, 84px);
    isolation: isolate;
}
/* Pozadí hero — JEDNA klidná vrstva: decentní brand glow rozprostřený od horního
   okraje, plynule mizí do tmy webu. Žádná mřížka, žádné poletující orby (ten mix
   byl vizuální šum). Drží neon náladu přes okraj barvy, ne přes přeplácanost. */
.cp-hero-bg {
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(var(--cp-accent-rgb), .12), transparent 62%),
        radial-gradient(90% 60% at 85% -10%, rgba(var(--cp-accent-2-rgb), .07), transparent 60%);
}

.cp-hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 48px; align-items: center;
}

/* Hero text */
.cp-hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cp-badge {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 999px;
    font-family: var(--font-accent, 'Exo 2'), sans-serif;
    font-size: .76rem; font-weight: 800; letter-spacing: .04em;
    color: var(--cp-accent);
    background: rgba(var(--cp-accent-rgb), .08);
    border: 1px solid rgba(var(--cp-accent-rgb), .3);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.cp-badge svg { width: 14px; height: 14px; }
.cp-badge.cp-badge-live { color: #fff; background: rgba(var(--cp-accent-2-rgb), .15); border-color: rgba(var(--cp-accent-2-rgb), .4); }
.cp-badge.cp-badge-live .cp-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--cp-accent-2);
    box-shadow: 0 0 0 0 rgba(var(--cp-accent-2-rgb), .7); animation: cpPulse 1.8s infinite;
}

.cp-hero h1 {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(2.2rem, 5.2vw, 4rem);
    font-weight: 900; line-height: 1.04; letter-spacing: -.02em;
    margin: 0 0 18px; color: var(--text-primary);
    text-wrap: balance;
}
.cp-hero h1 .cp-grad {
    background: linear-gradient(110deg, var(--cp-accent), var(--cp-accent-2));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cp-hero-sub {
    font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.6;
    color: var(--text-secondary); max-width: 46ch; margin: 0 0 28px;
}

/* Hero bonus karta (pravý sloupec) */
.cp-hero-card {
    position: relative;
    padding: 32px 30px; border-radius: 22px;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--cp-accent-rgb), .14), transparent 60%),
        linear-gradient(165deg, rgba(22,18,32,.96), rgba(10,9,16,.99));
    border: 1px solid rgba(var(--cp-accent-rgb), .28);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), var(--cp-glow), inset 0 1px 0 rgba(255,255,255,.08);
    overflow: hidden;
}
.cp-hero-card > * { position: relative; }
.cp-hc-logo { display: block; max-width: 180px; height: auto; margin: 0 auto 18px; filter: drop-shadow(0 4px 16px rgba(var(--cp-accent-rgb),.4)); }
.cp-hc-eyebrow {
    text-align: center; font-family: var(--font-accent, 'Exo 2'), sans-serif;
    font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cp-accent); margin-bottom: 6px;
}
.cp-hc-amount {
    text-align: center; font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 900; line-height: 1.05;
    color: var(--text-primary); letter-spacing: -.02em; margin-bottom: 4px;
    text-shadow: 0 0 30px rgba(var(--cp-accent-rgb), .5);
}
.cp-hc-amount em { font-style: normal; color: var(--cp-accent); }
.cp-hc-note { text-align: center; font-size: .86rem; color: var(--text-secondary); margin-bottom: 20px; }
.cp-hc-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 11px; }
.cp-hc-list li { display: flex; align-items: flex-start; gap: 11px; font-size: .92rem; color: var(--text-secondary); line-height: 1.4; }
.cp-hc-list li strong { color: var(--text-primary); }
.cp-hc-tick {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--cp-accent-rgb), .16); color: var(--cp-accent);
    font-size: .72rem; font-weight: 900; margin-top: 1px;
}

/* ── CTA tlačítko (sdílené) ─────────────────────────────────── */
.cp-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 18px 28px; border-radius: 14px;
    font-family: var(--font-accent, 'Exo 2'), sans-serif;
    font-size: 1.05rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
    color: #0a0810; text-decoration: none; cursor: pointer; border: none;
    background: linear-gradient(120deg, var(--cp-accent), var(--cp-accent-2));
    box-shadow: 0 12px 34px rgba(var(--cp-accent-rgb), .4), inset 0 1px 0 rgba(255,255,255,.4);
    position: relative; overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.cp-cta::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
    background-size: 220% 100%; transform: translateX(-100%);
    animation: cpBtnShine 3.2s ease-in-out infinite;
}
.cp-cta:hover { transform: translateY(-3px); box-shadow: 0 18px 46px rgba(var(--cp-accent-rgb), .55), inset 0 1px 0 rgba(255,255,255,.4); }
.cp-cta .cp-cta-arrow { transition: transform .2s; }
.cp-cta:hover .cp-cta-arrow { transform: translateX(5px); }
.cp-cta-reassure { text-align: center; font-size: .78rem; color: var(--text-muted); margin: 12px 0 0; }

/* ── Trust strip — 4 metriky s ikonami, oddělovači a hoverem ─────
   Vrstvený panel: jemný horní světelný lem (hairline glow) místo
   ploché linky, vertikální oddělovače mezi staty s fade do ztracena,
   ikona vlevo od čísla → vodorovná kompozice (ne sloupec), aby to
   nebyl klasický big-number-stack. Hover rozsvítí číslo + ikonu. --- */
.cp-page .cp-trust {
    position: relative;
    padding: clamp(24px, 2.6vw, 34px) 0;
    /* bez výplně pozadí — jen jemné lemy nahoře/dole */
    border-block: 1px solid rgba(var(--cp-accent-rgb), .14);
}
/* horní svítící hairline — drobný detail, ne plochá čára */
.cp-page .cp-trust::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--cp-accent-rgb), .5) 25%, rgba(var(--cp-accent-2-rgb), .5) 75%, transparent);
    opacity: .6;
}
.cp-trust-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.cp-trust-item {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 6px clamp(12px, 2vw, 28px);
    position: relative;
}
/* oddělovač mezi staty — vertikální linka s fade, ne na poslední */
.cp-trust-item + .cp-trust-item::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 56%;
    background: linear-gradient(rgba(var(--cp-accent-rgb), 0), rgba(var(--cp-accent-rgb), .28), rgba(var(--cp-accent-rgb), 0));
}
.cp-trust-ico {
    flex: none;
    width: 42px; height: 42px; border-radius: 12px;
    display: grid; grid-template: "i"; place-content: center; place-items: center;
    color: var(--cp-accent);
    background: radial-gradient(120% 120% at 30% 20%, rgba(var(--cp-accent-rgb), .2), rgba(var(--cp-accent-rgb), .06));
    border: 1px solid rgba(var(--cp-accent-rgb), .25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
.cp-trust-ico svg { grid-area: i; display: block; width: 20px; height: 20px; }
/* align-self:center na celé item — ikona i text na společné svislé ose */
.cp-trust-item { align-items: center; }
.cp-trust-body { text-align: left; min-width: 0; }
.cp-trust-item strong {
    display: block; font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem); font-weight: 900;
    color: var(--text-primary); line-height: 1.05; letter-spacing: -.01em;
    transition: color .3s, text-shadow .3s;
}
.cp-trust-item span {
    display: block; font-size: .78rem; color: var(--text-secondary);
    margin-top: 2px; line-height: 1.25;
}
/* hover — rozsvítí číslo na brand barvu + ikona se zvedne a zazáří */
.cp-trust-item:hover strong { color: var(--cp-accent); text-shadow: 0 0 18px rgba(var(--cp-accent-rgb), .45); }
.cp-trust-item:hover .cp-trust-ico {
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 8px 22px rgba(var(--cp-accent-rgb), .25);
}

/* ── Sekce (obecné) — jednotný vertikální rytmus ───────────────
   Sekce mají mezeru jen DOLE → mezi dvěma sekcemi je jen jedna
   mezera (ne dvojitá). První sekce po trust stripu dostane horní
   mezeru. Inline padding-top:0 v HTML už není potřeba (a je
   přepsáno tímto). --- */
/* .cp-page prefix → vyšší specificita než reset .cp-page section výše */
.cp-page .cp-section { padding: 0 0 clamp(44px, 5.5vw, 72px); }
.cp-page .cp-trust + .cp-section { padding-top: clamp(36px, 4vw, 52px); }
.cp-section-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(26px, 3.5vw, 40px); }
.cp-section-head .cp-kicker {
    font-family: var(--font-accent, 'Exo 2'), sans-serif;
    font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    color: var(--cp-accent); margin-bottom: 10px; display: block;
}
.cp-section-head h2 {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 900; letter-spacing: -.015em;
    color: var(--text-primary); margin: 0 0 12px; line-height: 1.15;
}
.cp-section-head p { font-size: 1.02rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* Feature karty */
.cp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cp-feature {
    padding: 28px 26px; border-radius: 18px;
    background: linear-gradient(165deg, rgba(20,17,28,.85), rgba(11,10,16,.95));
    border: 1px solid rgba(var(--cp-accent-rgb), .14);
    transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, box-shadow .35s;
}
.cp-feature:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--cp-accent-rgb), .4);
    box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(var(--cp-accent-rgb), .12);
}
.cp-feature-ico {
    width: 50px; height: 50px; border-radius: 14px; margin-bottom: 16px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, rgba(var(--cp-accent-rgb), .18), rgba(var(--cp-accent-2-rgb), .12));
    border: 1px solid rgba(var(--cp-accent-rgb), .3); color: var(--cp-accent);
}
.cp-feature-ico svg { width: 24px; height: 24px; }
.cp-feature h3 { font-size: 1.12rem; font-weight: 800; color: var(--text-primary); margin: 0 0 8px; }
.cp-feature p { font-size: .92rem; line-height: 1.6; color: var(--text-secondary); margin: 0; }

/* Kroky "jak začít" */
.cp-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: cpstep; }
.cp-step {
    position: relative; padding: 26px 22px 22px; border-radius: 16px; counter-increment: cpstep;
    background: linear-gradient(165deg, rgba(20,17,28,.8), rgba(11,10,16,.95));
    border: 1px solid rgba(var(--cp-accent-rgb), .14);
}
.cp-step::before {
    content: counter(cpstep);
    position: absolute; top: -16px; left: 22px;
    width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display, 'Montserrat'), sans-serif; font-weight: 900; font-size: 1.1rem;
    color: #0a0810; background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-2));
    box-shadow: 0 8px 22px rgba(var(--cp-accent-rgb), .4);
}
.cp-step h4 { font-size: 1rem; font-weight: 800; color: var(--text-primary); margin: 14px 0 6px; }
.cp-step p { font-size: .88rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* Quick-facts tabulka (2 sloupce) */
.cp-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
.cp-fact {
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,.06);
}
.cp-fact .cp-fact-label { font-size: .9rem; color: var(--text-secondary); }
.cp-fact .cp-fact-val { font-size: .95rem; font-weight: 700; color: var(--text-primary); text-align: right; }

/* Velký mid-page CTA banner */
.cp-cta-band {
    position: relative; text-align: center; padding: 56px 32px; border-radius: 24px; overflow: hidden;
    background:
        radial-gradient(80% 120% at 50% 0%, rgba(var(--cp-accent-rgb), .2), transparent 60%),
        linear-gradient(165deg, rgba(22,18,32,.96), rgba(10,9,16,.99));
    border: 1px solid rgba(var(--cp-accent-rgb), .3);
    box-shadow: var(--cp-glow);
}
.cp-cta-band h2 {
    font-family: var(--font-display, 'Montserrat'), sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.4rem); font-weight: 900; color: var(--text-primary);
    margin: 0 0 10px; letter-spacing: -.015em;
}
.cp-cta-band p { font-size: 1.05rem; color: var(--text-secondary); margin: 0 auto 26px; max-width: 50ch; }
.cp-cta-band .cp-cta { max-width: 420px; margin: 0 auto; }

/* Sticky mobilní CTA lišta */
.cp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: none; align-items: center; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(10,9,16,.92); backdrop-filter: blur(14px);
    border-top: 1px solid rgba(var(--cp-accent-rgb), .25);
}
.cp-sticky-info { flex: 1; min-width: 0; }
.cp-sticky-info strong { display: block; font-size: .9rem; color: var(--text-primary); line-height: 1.1; }
.cp-sticky-info span { font-size: .74rem; color: var(--cp-accent); }
.cp-sticky .cp-cta { width: auto; padding: 13px 20px; font-size: .9rem; flex: none; }

/* FAQ */
.cp-faq { max-width: 760px; margin: 0 auto; }
.cp-faq details {
    border: 1px solid rgba(var(--cp-accent-rgb), .14); border-radius: 12px;
    margin-bottom: 12px; background: rgba(20,17,28,.5); overflow: hidden;
}
.cp-faq details[open] { border-color: rgba(var(--cp-accent-rgb), .35); }
.cp-faq summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    font-weight: 700; color: var(--text-primary); font-size: .98rem;
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.cp-faq summary::-webkit-details-marker { display: none; }
.cp-faq summary::after { content: "+"; color: var(--cp-accent); font-size: 1.3rem; font-weight: 400; transition: transform .2s; }
.cp-faq details[open] summary::after { transform: rotate(45deg); }
.cp-faq details p { padding: 0 20px 18px; margin: 0; font-size: .92rem; line-height: 1.65; color: var(--text-secondary); }

/* ── Scroll-reveal (čistě CSS, IntersectionObserver přidá .cp-in) ── */
.cp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.cp-reveal.cp-in { opacity: 1; transform: none; }
.cp-reveal.d1 { transition-delay: .08s; }
.cp-reveal.d2 { transition-delay: .16s; }
.cp-reveal.d3 { transition-delay: .24s; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes cpBtnShine { 0% { transform: translateX(-100%); } 55%,100% { transform: translateX(120%); } }
@keyframes cpPulse { 0% { box-shadow: 0 0 0 0 rgba(var(--cp-accent-2-rgb), .6); } 70% { box-shadow: 0 0 0 10px rgba(var(--cp-accent-2-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--cp-accent-2-rgb), 0); } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 920px) {
    .cp-hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .cp-hero-card { max-width: 460px; margin: 0 auto; width: 100%; }
    .cp-features { grid-template-columns: 1fr 1fr; }
    .cp-steps { grid-template-columns: 1fr 1fr; }
    /* 2 sloupce: vertikální oddělovače dělají problém na druhém řádku → vypnout,
       místo nich přidat řádkovou mezeru a horizontální oddělovač u spodního řádku. */
    .cp-trust-grid { grid-template-columns: 1fr 1fr; row-gap: 4px; }
    .cp-trust-item + .cp-trust-item::before { display: none; }
    .cp-trust-item { padding: 16px 12px; }
    /* oddělovač jen mezi 2. a 3. (horní/dolní řádek) */
    .cp-trust-item:nth-child(3)::after, .cp-trust-item:nth-child(4)::after {
        content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(var(--cp-accent-rgb), .2), transparent);
    }
    .cp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .cp-hero { min-height: auto; padding: calc(var(--nav-height) + 48px) 0 40px; }
    .cp-features, .cp-steps { grid-template-columns: 1fr; }
    .cp-sticky { display: flex; }
    .cp-page .cp-section { padding: 0 0 40px; }
    .cp-page .cp-trust + .cp-section { padding-top: 40px; }
    /* trust: ikona menší, kompaktnější na úzkém */
    .cp-trust-item { gap: 11px; padding: 14px 8px; }
    .cp-trust-ico { width: 38px; height: 38px; }
    .cp-trust-item strong { font-size: 1.3rem; }
}

/* ════════════════════════════════════════════════════════════════
   BRAND DIFERENCIACE — aby /tokyo a /dedek nebyly jen překreslené
   kopie jedna druhé. Sdílená kostra zůstává, mění se „osobnost":
   • Tokyo  → hi-tech neonová noc: ostré hrany, scanline glow,
             feature karty s neonovým horním pruhem, hranaté kroky.
   • Dědek  → teplá retro hospoda: zaoblené „kupónové" karty s dashed
             zlatým lemem, hřejivá textura, razítkové kroky.
   ════════════════════════════════════════════════════════════════ */

/* ──────────────────────  TOKYO: hi-tech neon  ───────────────────── */

/* Hero pozadí — přidá jemnou neonovou mřížku (scanline náladu) */
.cp-tokyo .cp-hero-bg::after {
    content: ""; position: absolute; inset: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(0,245,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,245,255,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 70% at 50% -10%, #000 0%, transparent 65%);
            mask-image: radial-gradient(120% 70% at 50% -10%, #000 0%, transparent 65%);
}
/* Hero karta — ostřejší roh + neonový horní lem */
.cp-tokyo .cp-hero-card { border-radius: 16px; }
.cp-tokyo .cp-hero-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--cp-accent), var(--cp-accent-2), transparent);
    box-shadow: 0 0 14px rgba(var(--cp-accent-rgb), .7);
}
/* Feature karty — neonový top-bar, ostřejší rohy, „panel" vzhled */
.cp-tokyo .cp-feature {
    border-radius: 12px;
    background: linear-gradient(165deg, rgba(10,20,28,.9), rgba(8,11,18,.96));
}
.cp-tokyo .cp-feature::before {
    content: ""; display: block; height: 2px; width: 34px; margin-bottom: 18px;
    background: linear-gradient(90deg, var(--cp-accent), var(--cp-accent-2));
    box-shadow: 0 0 10px rgba(var(--cp-accent-rgb), .6);
    transition: width .35s cubic-bezier(.2,.7,.3,1);
}
.cp-tokyo .cp-feature:hover::before { width: 64px; }
.cp-tokyo .cp-feature-ico { border-radius: 10px; }
/* Kroky — hranaté „terminálové" odznaky */
.cp-tokyo .cp-step { border-radius: 10px; }
.cp-tokyo .cp-step::before { border-radius: 8px; }
/* Trust číslice v duchu „displeje" */
.cp-tokyo .cp-trust-item strong { font-family: var(--font-accent, 'Exo 2'), sans-serif; }
.cp-tokyo .cp-trust-ico { border-radius: 9px; }

/* ──────────────────────  DĚDEK: retro kupón  ───────────────────── */

/* Hero pozadí — hřejivá zlatá záře, žádná mřížka (opak Tokya) */
.cp-dedek .cp-hero-bg {
    background:
        radial-gradient(130% 90% at 50% -15%, rgba(255,180,61,.16), transparent 60%),
        radial-gradient(80% 60% at 12% 0%, rgba(255,106,61,.1), transparent 60%);
}
/* Hero karta — výrazně zaoblená, dashed zlatý lem = „kupón" */
.cp-dedek .cp-hero-card {
    border-radius: 26px;
    border: 1.5px dashed rgba(var(--cp-accent-rgb), .5);
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(var(--cp-accent-rgb), .16), transparent 60%),
        linear-gradient(165deg, rgba(34,26,14,.97), rgba(18,13,7,.99));
    /* overflow visible → perforace kupónu (níže) přesahují okraj karty */
    overflow: visible;
}
/* perforace kupónu po stranách karty */
.cp-dedek .cp-hero-card::before,
.cp-dedek .cp-hero-card::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg-dark, #0a0a0f); z-index: 2;
}
.cp-dedek .cp-hero-card::before { left: -11px; }
.cp-dedek .cp-hero-card::after { right: -11px; }
/* Feature karty — teplé, kulaté, jemný papírový nádech */
.cp-dedek .cp-feature {
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(32,24,12,.85), rgba(18,13,7,.95));
}
.cp-dedek .cp-feature:hover { box-shadow: 0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(var(--cp-accent-rgb), .18); }
.cp-dedek .cp-feature-ico { border-radius: 50%; }
/* Kroky — razítkové kulaté odznaky s dashed lemem */
.cp-dedek .cp-step { border-radius: 18px; }
.cp-dedek .cp-step::before {
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,.35);
    box-shadow: 0 6px 18px rgba(var(--cp-accent-rgb), .35);
}
/* Trust ikony kulaté + CTA tlačítka kulatější */
.cp-dedek .cp-trust-ico { border-radius: 50%; }
.cp-dedek .cp-cta { border-radius: 999px; }
.cp-dedek .cp-cta-band { border-radius: 28px; border-style: dashed; }
.cp-dedek .cp-faq details { border-radius: 16px; }

@media (max-width: 600px) {
    /* na úzkém vypneme perforaci kupónu (přesahuje) */
    .cp-dedek .cp-hero-card::before, .cp-dedek .cp-hero-card::after { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cp-cta::after, .cp-badge-live .cp-live-dot { animation: none; }
    .cp-reveal { opacity: 1; transform: none; transition: none; }
    .cp-feature, .cp-cta, .cp-trust-ico, .cp-trust-item strong { transition: none; }
    .cp-trust-item:hover .cp-trust-ico { transform: none; }
    .cp-tokyo .cp-feature::before { transition: none; }
}