/* ==========================================================================
   /tarot-za-darmo — SEO sections (rozszerzenie)
   Aesthetic: Illuminated Grimoire (warm parchment + navy-violet + copper ink).
   Spójna z homepage (zn-arcana + totolotek + reviews + palette-test).
   Namespace: .tdn-* — nie nadpisuje .tarot-dnia (interactive deck).
   ========================================================================== */

:root {
    /* Dark — navy-violet, matches .totolotek + .reviews (palette-test.css) */
    --tdn-night:       #14142a;
    --tdn-night-deep:  #0c0c1a;
    --tdn-velvet:      #1a1a32;

    /* Paper — warm parchment, matches .zn-arcana */
    --tdn-paper:       #f5ede0;
    --tdn-paper-deep:  #ebdfc8;
    --tdn-paper-card:  #fbf6ec;
    --tdn-paper-edge:  #e2d3b3;

    /* Ink — warm browns for text on paper */
    --tdn-ink-deep:    #2a1f14;
    --tdn-ink-mid:     #4f3f29;
    --tdn-ink-soft:    #826845;
    --tdn-ink-faint:   #a89072;

    /* Copper — main accent (zn-copper) */
    --tdn-copper:      #a85e2c;
    --tdn-copper-hi:   #c4753a;
    --tdn-copper-deep: #6e3a18;

    /* Terracotta — primary CTA (palette-test) */
    --tdn-terracotta:    #d97742;
    --tdn-terracotta-hi: #bf6432;

    /* Gold — secondary accent (zn-gold) */
    --tdn-gold:        #c9a84c;
    --tdn-gold-hi:     #e0c068;
    --tdn-gold-deep:   #8c7a3a;

    /* Hairlines */
    --tdn-line:        rgba(168, 94, 44, 0.22);
    --tdn-line-hi:     rgba(196, 117, 58, 0.55);
    --tdn-line-light:  rgba(232, 220, 196, 0.18);

    /* Text on paper */
    --tdn-text-dark:        #2a1f14;
    --tdn-text-soft-dark:   #4f3f29;
    --tdn-text-mute-dark:   #826845;

    /* Text on dark */
    --tdn-text-light:       #ebdfc8;
    --tdn-text-soft-light:  #c4a878;
    --tdn-text-mute-light:  #82704c;

    /* Layout */
    --tdn-container:        1200px;
    --tdn-container-narrow: 980px;
    --tdn-container-text:   720px;
    --tdn-gutter:           clamp(1.25rem, 4vw, 3rem);
    --tdn-section-pad:      clamp(72px, 10vw, 140px);

    /* Sharp editorial — no rounded buttons/cards (matches arcana, cover) */
    --tdn-radius:           0;
    --tdn-radius-soft:      4px;

    /* Type scale — matches arcana title/lede */
    --tdn-fs-h1:      clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
    --tdn-fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --tdn-fs-h3:      clamp(1.125rem, 0.9rem + 1vw, 1.4rem);
    --tdn-fs-lede:    clamp(0.96rem, 0.86rem + 0.4vw, 1.08rem);
    --tdn-fs-body:    1rem;
    --tdn-fs-small:   0.92rem;
    --tdn-fs-micro:   11px;

    --tdn-t-soft: cubic-bezier(.2,.7,.2,1);
}

/* ----------------------------------------------------------
   1. PAGE WRAPPER + RESET (minimalny, używamy :where żeby
      nie wygrać specyficzności nad utility classes)
   ---------------------------------------------------------- */
.tdn-page {
    color: var(--tdn-text-dark);
    font-family: 'Poppins', system-ui, sans-serif;
    line-height: 1.7;
}
.tdn-page :where(img, svg) { display: block; max-width: 100%; }
.tdn-page :where(ul, ol) { list-style: none; }
.tdn-page :where(p) { margin: 0; }
.tdn-page :where(a) { color: var(--tdn-copper); text-decoration: none; transition: color .3s; }
.tdn-page :where(a:hover) { color: var(--tdn-terracotta-hi); }

.tdn-container {
    width: 100%;
    max-width: var(--tdn-container);
    margin-inline: auto;
    padding-inline: var(--tdn-gutter);
    position: relative;
    z-index: 2;
}
.tdn-container--narrow { max-width: var(--tdn-container-narrow); }
.tdn-container--text   { max-width: var(--tdn-container-text); }

/* ----------------------------------------------------------
   2. SECTIONS — atmosphere matched to homepage
   ---------------------------------------------------------- */
.tdn-section {
    position: relative;
    padding-block: var(--tdn-section-pad);
    isolation: isolate;
    overflow: hidden;
}

/* Dark (navy-violet, like .totolotek/.reviews) */
.tdn-section--dark {
    background-color: var(--tdn-night);
    background-image: linear-gradient(180deg, #12122a 0%, #14142a 50%, #1a1a32 100%);
    color: var(--tdn-text-light);
}
.tdn-section--dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(ellipse 60% 50% at 80% 30%, rgba(196, 117, 58, 0.10), transparent 60%),
        radial-gradient(ellipse 50% 40% at 15% 80%, rgba(201, 168, 76, 0.06), transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.tdn-section--dark::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.78 0 0 0 0 0.55 0 0 0 0 0.30 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}

/* Paper light (parchment, like .zn-arcana) */
.tdn-section--light {
    background:
        radial-gradient(ellipse 90% 60% at 75% 100%, rgba(168, 94, 44, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 18% 22%, rgba(201, 168, 76, 0.10) 0%, transparent 60%),
        linear-gradient(165deg, var(--tdn-paper) 0%, var(--tdn-paper-deep) 100%);
    color: var(--tdn-ink-deep);
}
.tdn-section--light::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(110, 58, 24, 0.04) 0%, transparent 1.5%),
        radial-gradient(circle at 70% 60%, rgba(110, 58, 24, 0.03) 0%, transparent 1.2%),
        radial-gradient(circle at 50% 80%, rgba(110, 58, 24, 0.04) 0%, transparent 1.5%),
        radial-gradient(circle at 85% 15%, rgba(110, 58, 24, 0.03) 0%, transparent 1.2%),
        radial-gradient(circle at 10% 75%, rgba(110, 58, 24, 0.03) 0%, transparent 1.5%);
    background-size: 240px 240px, 180px 180px, 320px 320px, 200px 200px, 260px 260px;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 0;
}
.tdn-section--light::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 140% 100% at 50% 50%, transparent 60%, rgba(110, 58, 24, 0.07) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Cream-deep variant — slightly darker paper for visual rhythm */
.tdn-section--cream-deep {
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168, 94, 44, 0.09) 0%, transparent 60%),
        linear-gradient(165deg, var(--tdn-paper-deep) 0%, #e3d4b8 100%);
    color: var(--tdn-ink-deep);
}
.tdn-section--cream-deep::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(110, 58, 24, 0.05) 0%, transparent 1.5%),
        radial-gradient(circle at 70% 60%, rgba(110, 58, 24, 0.04) 0%, transparent 1.2%),
        radial-gradient(circle at 50% 80%, rgba(110, 58, 24, 0.05) 0%, transparent 1.5%);
    background-size: 240px 240px, 180px 180px, 320px 320px;
    opacity: 0.7;
    mix-blend-mode: multiply;
    z-index: 0;
}

/* ----------------------------------------------------------
   3. SHARED — Eyebrow, H2, Lede, Reveal
   ---------------------------------------------------------- */

/* Eyebrow z miedzianą hairline (matches zn-arcana__eyebrow) */
.tdn-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--tdn-fs-micro);
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--tdn-copper);
    margin-bottom: 1.5rem;
    width: max-content;
    max-width: 100%;
}
.tdn-eyebrow::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tdn-line-hi));
}
/* Centered eyebrow gets second line+mark on right (only when in centered head) */
.tdn-jak__head .tdn-eyebrow,
.tdn-pytanie__head .tdn-eyebrow,
.tdn-porownanie__head .tdn-eyebrow,
.tdn-inne__head .tdn-eyebrow,
.tdn-faq__head .tdn-eyebrow,
.tdn-final__inner .tdn-eyebrow {
    /* Make symmetric: line-text-line via ::after */
}
.tdn-jak__head .tdn-eyebrow::after,
.tdn-pytanie__head .tdn-eyebrow::after,
.tdn-porownanie__head .tdn-eyebrow::after,
.tdn-inne__head .tdn-eyebrow::after,
.tdn-faq__head .tdn-eyebrow::after,
.tdn-final__inner .tdn-eyebrow::after {
    content: '';
    display: inline-block;
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, var(--tdn-line-hi), transparent);
}
.tdn-section--dark .tdn-eyebrow { color: var(--tdn-copper-hi); }
.tdn-section--dark .tdn-eyebrow::before { background: linear-gradient(90deg, transparent, rgba(196, 117, 58, 0.7)); }
.tdn-section--dark .tdn-eyebrow::after  { background: linear-gradient(90deg, rgba(196, 117, 58, 0.7), transparent); }

/* H2 — editorial title (matches zn-arcana__title) */
.tdn-h2 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--tdn-fs-h2);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 0 0 1.5rem;
    color: var(--tdn-ink-deep);
}
.tdn-h2 em {
    font-style: italic;
    font-weight: 400;
    color: var(--tdn-copper);
    letter-spacing: 0.005em;
}
.tdn-section--dark .tdn-h2 { color: var(--tdn-paper); }
.tdn-section--dark .tdn-h2 em { color: var(--tdn-copper-hi); }

.tdn-lede {
    font-size: var(--tdn-fs-lede);
    line-height: 1.78;
    color: var(--tdn-ink-mid);
    font-weight: 400;
    margin: 0 0 1.5rem;
    max-width: 56ch;
}
.tdn-section--dark .tdn-lede { color: var(--tdn-text-soft-light); }

/* Reveal-on-scroll — failsafe via CSS animation timeout */
.tdn-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--tdn-t-soft), transform 0.9s var(--tdn-t-soft);
    animation: tdn-reveal-failsafe 0.01s 2.2s forwards;
    will-change: opacity, transform;
}
@keyframes tdn-reveal-failsafe {
    to { opacity: 1; transform: translateY(0); }
}
.tdn-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .tdn-reveal { opacity: 1; transform: none; transition: none; animation: none; }
}

/* Centered head pattern — flex column, niezawodne centrowanie */
.tdn-jak__head,
.tdn-pytanie__head,
.tdn-porownanie__head,
.tdn-inne__head,
.tdn-faq__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.tdn-jak__head .tdn-h2,
.tdn-pytanie__head .tdn-h2,
.tdn-porownanie__head .tdn-h2,
.tdn-inne__head .tdn-h2,
.tdn-faq__head .tdn-h2 {
    text-align: center;
    max-width: 22ch;
    margin-inline: auto;
}
.tdn-faq__head .tdn-h2 { max-width: 18ch; }
.tdn-jak__head .tdn-lede,
.tdn-pytanie__head .tdn-lede,
.tdn-porownanie__head .tdn-lede,
.tdn-inne__head .tdn-lede {
    text-align: center;
    max-width: 52ch;
    margin-inline: auto;
    font-style: italic;
    color: var(--tdn-ink-soft);
}
.tdn-section--dark .tdn-inne__head .tdn-lede { color: var(--tdn-text-soft-light); }

/* ----------------------------------------------------------
   4. CTA BUTTONS — terracotta primary + editorial copper outline
   ---------------------------------------------------------- */
.tdn-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 32px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--tdn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        background .35s var(--tdn-t-soft),
        color .35s,
        gap .35s var(--tdn-t-soft),
        box-shadow .35s,
        transform .35s var(--tdn-t-soft);
    line-height: 1.2;
}
.tdn-btn:hover { gap: 18px; }

/* Primary — terracotta solid (matches .cta in palette-test) */
.tdn-btn--primary,
.tdn-btn--gold-on-dark {
    background: var(--tdn-terracotta);
    color: #fff;
    box-shadow: 0 10px 20px rgba(217, 119, 66, 0.3);
}
.tdn-btn--primary:hover,
.tdn-btn--gold-on-dark:hover {
    background: var(--tdn-terracotta-hi);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(217, 119, 66, 0.4);
}

/* Secondary — editorial paper-card with copper border (matches zn-arcana__cta) */
.tdn-btn--secondary {
    background: var(--tdn-paper-card);
    color: var(--tdn-copper-deep);
    border-color: var(--tdn-copper);
    box-shadow:
        0 2px 0 0 var(--tdn-copper),
        0 6px 22px -8px rgba(110, 58, 24, 0.35);
}
.tdn-btn--secondary:hover {
    background: var(--tdn-copper);
    color: var(--tdn-paper-card);
    box-shadow:
        0 2px 0 0 var(--tdn-copper-deep),
        0 12px 30px -8px rgba(110, 58, 24, 0.55);
    transform: translateY(-2px);
}

/* Ghost on dark — paper-bordered translucent (high contrast on navy) */
.tdn-btn--ghost-on-dark {
    background: rgba(245, 237, 224, 0.06);
    color: var(--tdn-paper);
    border-color: rgba(245, 237, 224, 0.4);
    backdrop-filter: blur(2px);
}
.tdn-btn--ghost-on-dark:hover {
    background: var(--tdn-copper);
    color: var(--tdn-paper-card);
    border-color: var(--tdn-copper);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(168, 94, 44, 0.4);
}

.tdn-btn__line {
    display: inline-block;
    width: 18px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
    transition: width .35s var(--tdn-t-soft);
}
.tdn-btn:hover .tdn-btn__line { width: 28px; }

/* ----------------------------------------------------------
   5. INTRO (sekcja A — paper, large editorial)
   ---------------------------------------------------------- */
.tdn-intro {
    position: relative;
    padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 60px);
    background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(168, 94, 44, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(201, 168, 76, 0.08), transparent 50%),
        linear-gradient(165deg, var(--tdn-paper) 0%, var(--tdn-paper-deep) 100%);
    color: var(--tdn-ink-deep);
    text-align: center;
    isolation: isolate;
    overflow: hidden;
}
.tdn-intro::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(110, 58, 24, 0.04) 0%, transparent 1.5%),
        radial-gradient(circle at 70% 60%, rgba(110, 58, 24, 0.03) 0%, transparent 1.2%),
        radial-gradient(circle at 50% 80%, rgba(110, 58, 24, 0.04) 0%, transparent 1.5%);
    background-size: 240px 240px, 180px 180px, 320px 320px;
    opacity: 0.6;
    mix-blend-mode: multiply;
    z-index: 0;
}
.tdn-intro__inner {
    max-width: 760px;
    margin-inline: auto;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tdn-intro__h1 {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--tdn-ink-deep);
    margin: 0 0 1.25rem;
}
.tdn-intro__h1 em {
    font-style: italic;
    font-weight: 400;
    color: var(--tdn-copper);
    letter-spacing: 0.005em;
}
.tdn-intro__lede {
    font-size: clamp(1rem, 0.92rem + 0.4vw, 1.15rem);
    line-height: 1.78;
    color: var(--tdn-ink-mid);
    margin: 0 auto 2rem;
    max-width: 56ch;
    font-weight: 400;
}
.tdn-intro__cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 36px;
    background: var(--tdn-terracotta);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--tdn-radius);
    box-shadow: 0 10px 20px rgba(217, 119, 66, 0.3);
    transition: all .4s var(--tdn-t-soft);
}
.tdn-intro__cta:hover {
    background: var(--tdn-terracotta-hi);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(217, 119, 66, 0.4);
    gap: 18px;
}
.tdn-intro__cta-arrow { transition: transform .35s var(--tdn-t-soft); }
.tdn-intro__cta:hover .tdn-intro__cta-arrow { transform: translateY(3px); }

.tdn-intro__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin: 1.75rem 0 0;
    padding: 0;
    font-size: var(--tdn-fs-small);
    color: var(--tdn-ink-soft);
}
.tdn-intro__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.tdn-intro__trust-item::before {
    content: "✦";
    color: var(--tdn-copper-hi);
    font-size: 0.7rem;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------
   6. AFTER-TOOL MICROLINE
   ---------------------------------------------------------- */
.tdn-after-tool {
    background: var(--tdn-night-deep);
    color: var(--tdn-text-soft-light);
    text-align: center;
    padding: 1.5rem var(--tdn-gutter);
    font-style: italic;
    font-weight: 300;
    font-size: var(--tdn-fs-body);
    border-top: 1px solid rgba(168, 94, 44, 0.18);
    border-bottom: 1px solid rgba(168, 94, 44, 0.18);
}
.tdn-after-tool__inner { max-width: 640px; margin-inline: auto; }

/* ----------------------------------------------------------
   7. CZYM JEST (sekcja C — DARK, image L + text R)
   ---------------------------------------------------------- */
.tdn-czym__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.tdn-czym__image-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid rgba(196, 117, 58, 0.35);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(196, 117, 58, 0.15);
}
.tdn-czym__image-wrap::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(196, 117, 58, 0.3);
    pointer-events: none;
}
.tdn-czym__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--tdn-t-soft);
}
.tdn-czym__image-wrap:hover .tdn-czym__image { transform: scale(1.04); }

.tdn-czym__copy { max-width: 52ch; }
.tdn-czym__intro {
    font-size: var(--tdn-fs-lede);
    color: var(--tdn-text-light);
    margin-bottom: 1.5rem;
    line-height: 1.78;
    font-weight: 400;
}
.tdn-czym__intro strong {
    color: var(--tdn-paper);
    font-weight: 600;
}
.tdn-czym__body {
    color: var(--tdn-text-soft-light);
    margin-bottom: 1.5rem;
    line-height: 1.78;
    font-weight: 400;
}
.tdn-czym__pull {
    border-left: 2px solid var(--tdn-copper);
    padding: 0.5rem 0 0.5rem 1.5rem;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--tdn-copper-hi);
    margin: 2rem 0;
    font-weight: 400;
    line-height: 1.5;
    font-family: 'Poppins', system-ui, sans-serif;
}

/* ----------------------------------------------------------
   8. JAK DZIAŁA (sekcja D — LIGHT paper, 4 kroki, roman numerals)
   ---------------------------------------------------------- */
.tdn-jak__steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    counter-reset: tdn-step;
    max-width: 980px;
    margin-inline: auto;
    padding: 0;
}
.tdn-jak__step {
    position: relative;
    padding: 2rem 1.5rem 2rem 4.5rem;
    border-top: 1px solid var(--tdn-line);
}
.tdn-jak__step::before {
    content: counter(tdn-step, upper-roman);
    counter-increment: tdn-step;
    position: absolute;
    top: 1.65rem;
    left: 0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--tdn-copper);
    line-height: 1;
    letter-spacing: 0.18em;
    width: 3.5rem;
}
.tdn-jak__step-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--tdn-fs-h3);
    line-height: 1.3;
    color: var(--tdn-ink-deep);
    margin: 0 0 0.65rem;
    letter-spacing: -0.005em;
}
.tdn-jak__step-body {
    color: var(--tdn-ink-mid);
    line-height: 1.78;
    margin: 0;
    font-weight: 400;
}

/* ----------------------------------------------------------
   9. CZYM JEST TAROT (sekcja E — DARK, text L + image R)
   ---------------------------------------------------------- */
.tdn-tarot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
}
.tdn-tarot__copy { max-width: 52ch; }
.tdn-tarot__body {
    color: var(--tdn-text-soft-light);
    margin-bottom: 1.5rem;
    line-height: 1.78;
    font-weight: 400;
}
.tdn-tarot__body strong { color: var(--tdn-paper); font-weight: 600; }
.tdn-tarot__quote {
    margin: 2.5rem 0 0;
    padding: 2rem 0 0;
    border-top: 1px solid rgba(196, 117, 58, 0.3);
    font-family: 'Poppins', system-ui, sans-serif;
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--tdn-paper);
    font-weight: 400;
}
.tdn-tarot__quote-by {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: var(--tdn-fs-small);
    color: var(--tdn-copper-hi);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
}
.tdn-tarot__quote-by::before {
    content: "—";
    margin-right: 0.5rem;
    color: var(--tdn-copper);
}

.tdn-tarot__image-wrap {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid rgba(196, 117, 58, 0.35);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        inset 0 0 0 1px rgba(196, 117, 58, 0.15);
}
.tdn-tarot__image-wrap::after {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(196, 117, 58, 0.3);
    pointer-events: none;
}
.tdn-tarot__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----------------------------------------------------------
   10. JAK ZADAĆ PYTANIE (sekcja F — LIGHT cream-deep, accordion)
   ---------------------------------------------------------- */
.tdn-pytanie__list {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid var(--tdn-line);
}
.tdn-pytanie__item { border-bottom: 1px solid var(--tdn-line); }

.tdn-pytanie__q {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 1.6rem 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.4;
    color: var(--tdn-ink-deep);
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: color 0.3s;
}
.tdn-pytanie__q:hover { color: var(--tdn-copper); }
.tdn-pytanie__q:focus-visible {
    outline: 2px solid var(--tdn-copper);
    outline-offset: 4px;
}

.tdn-pytanie__num {
    flex-shrink: 0;
    font-family: 'Poppins', system-ui, sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--tdn-copper);
    min-width: 3rem;
    letter-spacing: 0.1em;
}
.tdn-pytanie__qtext { flex: 1; }
.tdn-pytanie__mark {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    position: relative;
    border: 1px solid var(--tdn-copper);
    border-radius: 50%;
    transition: transform 0.5s var(--tdn-t-soft), background 0.5s;
}
.tdn-pytanie__mark::before,
.tdn-pytanie__mark::after {
    content: "";
    position: absolute;
    background: var(--tdn-copper);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.tdn-pytanie__mark::before { width: 11px; height: 1px; }
.tdn-pytanie__mark::after  { width: 1px; height: 11px; transition: transform 0.4s var(--tdn-t-soft); }
.tdn-pytanie__item.is-open .tdn-pytanie__mark { background: var(--tdn-copper); transform: rotate(180deg); }
.tdn-pytanie__item.is-open .tdn-pytanie__mark::before,
.tdn-pytanie__item.is-open .tdn-pytanie__mark::after { background: var(--tdn-paper-card); }
.tdn-pytanie__item.is-open .tdn-pytanie__mark::after { transform: translate(-50%, -50%) scaleY(0); }

.tdn-pytanie__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s var(--tdn-t-soft);
}
.tdn-pytanie__a-inner {
    padding: 0 0 1.85rem 4.5rem;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--tdn-ink-mid);
    max-width: 680px;
    margin: 0;
}
.tdn-pytanie__item.is-open .tdn-pytanie__a { max-height: 600px; }

/* Bridge — dark inset card with 2 CTAs (matches arcana CTA aesthetic) */
.tdn-pytanie__bridge {
    position: relative;
    margin: clamp(2.5rem, 5vw, 4rem) auto 0;
    max-width: 820px;
    background: linear-gradient(165deg, var(--tdn-night) 0%, var(--tdn-velvet) 100%);
    color: var(--tdn-text-light);
    padding: clamp(2rem, 4vw, 3rem);
    text-align: center;
    overflow: hidden;
    border: 1px solid var(--tdn-copper-deep);
    border-radius: var(--tdn-radius);
    box-shadow: 0 16px 40px rgba(110, 58, 24, 0.18);
}
.tdn-pytanie__bridge::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(196, 117, 58, 0.18), transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(201, 168, 76, 0.10), transparent 50%);
    pointer-events: none;
}
.tdn-pytanie__bridge > * { position: relative; z-index: 1; }
.tdn-pytanie__bridge-label {
    display: block;
    font-size: var(--tdn-fs-micro);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--tdn-copper-hi);
    margin-bottom: 0.85rem;
    font-weight: 600;
}
.tdn-pytanie__bridge-text {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: clamp(1.15rem, 1.4vw, 1.5rem);
    line-height: 1.4;
    margin: 0 auto 1.75rem;
    font-weight: 500;
    color: var(--tdn-paper);
    max-width: 36ch;
}
.tdn-pytanie__bridge-ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.tdn-pytanie__bridge-ctas .tdn-btn { padding: 14px 26px; font-size: 12px; }

/* ----------------------------------------------------------
   11. PORÓWNANIE (sekcja G — LIGHT paper table, HARD CTA #1)
   ---------------------------------------------------------- */
.tdn-porownanie__table {
    max-width: 1080px;
    margin-inline: auto;
    border-collapse: collapse;
    width: 100%;
    background: var(--tdn-paper-card);
    border: 1px solid var(--tdn-line);
    box-shadow:
        0 14px 40px rgba(110, 58, 24, 0.12),
        inset 0 0 0 1px rgba(196, 117, 58, 0.08);
}
.tdn-porownanie__table th,
.tdn-porownanie__table td {
    padding: 1.5rem 1.5rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--tdn-line);
}
.tdn-porownanie__table th {
    background: var(--tdn-night);
    color: var(--tdn-copper-hi);
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: var(--tdn-fs-micro);
    letter-spacing: 4px;
    text-transform: uppercase;
    border-bottom: 0;
}
.tdn-porownanie__row:last-child td { border-bottom: 0; }
.tdn-porownanie__row--pelny { background: rgba(168, 94, 44, 0.06); }
.tdn-porownanie__row--free td:first-child { color: var(--tdn-ink-soft); }

.tdn-porownanie__pick {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    color: var(--tdn-ink-deep);
    font-size: 1.05rem;
    letter-spacing: -0.005em;
}
.tdn-porownanie__pick-note {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--tdn-ink-soft);
    line-height: 1.5;
}
.tdn-porownanie__pick a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
    border-bottom: 1px solid transparent;
}
.tdn-porownanie__pick a:hover {
    color: var(--tdn-copper);
    border-bottom-color: var(--tdn-copper);
}

.tdn-porownanie__price {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--tdn-ink-deep);
    white-space: nowrap;
    line-height: 1.2;
}
.tdn-porownanie__price-old {
    display: block;
    margin-bottom: 0.15rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--tdn-ink-soft);
    text-decoration: line-through;
}
.tdn-porownanie__time {
    color: var(--tdn-ink-mid);
    font-weight: 500;
    white-space: nowrap;
    font-size: 0.95rem;
}

.tdn-porownanie__badge {
    display: inline-block;
    padding: 0.22rem 0.6rem;
    border-radius: 0;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border: 1px solid currentColor;
}
.tdn-porownanie__badge--free       { color: var(--tdn-ink-soft); background: rgba(168, 94, 44, 0.06); }
.tdn-porownanie__badge--partnerski { color: var(--tdn-copper); background: rgba(168, 94, 44, 0.10); }
.tdn-porownanie__badge--pelny      { color: var(--tdn-paper-card); background: var(--tdn-copper); border-color: var(--tdn-copper-deep); }

.tdn-porownanie__body {
    margin: 2.5rem auto 2rem;
    max-width: 56ch;
    text-align: center;
    color: var(--tdn-ink-mid);
    font-style: italic;
    font-weight: 400;
}

.tdn-porownanie__ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

/* ----------------------------------------------------------
   12. INNE NARZĘDZIA (sekcja H — DARK, cross-sell free → free)
   ---------------------------------------------------------- */
.tdn-inne__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 3vw, 2rem);
    max-width: 920px;
    margin-inline: auto;
    padding: 0;
}
.tdn-inne__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(1.75rem, 3vw, 2.5rem);
    background: linear-gradient(160deg, rgba(196, 117, 58, 0.07), rgba(201, 168, 76, 0.04) 60%, rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(196, 117, 58, 0.3);
    text-decoration: none;
    color: var(--tdn-text-light);
    transition: transform 0.5s var(--tdn-t-soft), border-color 0.4s, background 0.4s;
    overflow: hidden;
    border-radius: var(--tdn-radius);
}
.tdn-inne__card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tdn-copper-hi), transparent);
    opacity: 0.7;
}
.tdn-inne__card::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(196, 117, 58, 0.18);
    pointer-events: none;
    transition: inset 0.5s var(--tdn-t-soft);
}
.tdn-inne__card:hover {
    transform: translateY(-4px);
    border-color: var(--tdn-copper-hi);
}
.tdn-inne__card:hover::after { inset: 10px; border-color: rgba(196, 117, 58, 0.35); }
.tdn-inne__glyph {
    font-size: 2.5rem;
    color: var(--tdn-copper-hi);
    line-height: 1;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}
.tdn-inne__card-title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.15rem, 1.4vw, 1.35rem);
    line-height: 1.3;
    color: var(--tdn-paper);
    margin: 0 0 0.85rem;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 1;
}
.tdn-inne__card-desc {
    color: var(--tdn-text-soft-light);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    flex: 1;
    font-weight: 400;
    position: relative;
    z-index: 1;
}
.tdn-inne__card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--tdn-copper-hi);
    font-weight: 600;
    font-size: var(--tdn-fs-micro);
    letter-spacing: 2.4px;
    text-transform: uppercase;
    transition: gap 0.3s var(--tdn-t-soft), color 0.3s;
    position: relative;
    z-index: 1;
}
.tdn-inne__card:hover .tdn-inne__card-cta {
    gap: 0.85rem;
    color: var(--tdn-paper);
}

/* ----------------------------------------------------------
   13. FAQ (sekcja J — LIGHT cream-deep, accordion)
   ---------------------------------------------------------- */
.tdn-faq__list {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;
    border-top: 1px solid var(--tdn-line);
}
.tdn-faq__item { border-bottom: 1px solid var(--tdn-line); }

.tdn-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
    padding: 1.6rem 0;
    background: none;
    border: 0;
    text-align: left;
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
    line-height: 1.4;
    color: var(--tdn-ink-deep);
    cursor: pointer;
    letter-spacing: -0.005em;
    transition: color 0.3s;
}
.tdn-faq__q:hover { color: var(--tdn-copper); }
.tdn-faq__q:focus-visible { outline: 2px solid var(--tdn-copper); outline-offset: 4px; }
.tdn-faq__qtext { flex: 1; }
.tdn-faq__mark {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    position: relative;
    border: 1px solid var(--tdn-copper);
    border-radius: 50%;
    transition: transform 0.5s var(--tdn-t-soft), background 0.5s;
}
.tdn-faq__mark::before,
.tdn-faq__mark::after {
    content: "";
    position: absolute;
    background: var(--tdn-copper);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.tdn-faq__mark::before { width: 10px; height: 1px; }
.tdn-faq__mark::after  { width: 1px; height: 10px; transition: transform 0.4s var(--tdn-t-soft); }
.tdn-faq__item.is-open .tdn-faq__mark { background: var(--tdn-copper); transform: rotate(180deg); }
.tdn-faq__item.is-open .tdn-faq__mark::before,
.tdn-faq__item.is-open .tdn-faq__mark::after { background: var(--tdn-paper-card); }
.tdn-faq__item.is-open .tdn-faq__mark::after { transform: translate(-50%, -50%) scaleY(0); }

.tdn-faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.55s var(--tdn-t-soft);
}
.tdn-faq__a-inner {
    padding: 0 0 1.85rem 0;
    font-size: 0.97rem;
    line-height: 1.8;
    color: var(--tdn-ink-mid);
    max-width: 680px;
    margin: 0;
}
.tdn-faq__item.is-open .tdn-faq__a { max-height: 720px; }

/* ----------------------------------------------------------
   14. FINAL CTA (sekcja K — DARK, corner ornaments + sparkles + HARD CTA #2)
   ---------------------------------------------------------- */
.tdn-final {
    text-align: center;
}
.tdn-final__inner {
    max-width: 760px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tdn-final__title {
    font-family: 'Poppins', system-ui, sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);
    line-height: 1.3;
    letter-spacing: -0.005em;
    color: var(--tdn-paper);
    margin: 0 auto 1.5rem;
    max-width: 24ch;
}
.tdn-final__body {
    color: var(--tdn-text-soft-light);
    line-height: 1.78;
    margin: 0 auto 2.5rem;
    max-width: 56ch;
    font-size: var(--tdn-fs-lede);
    font-weight: 400;
}
.tdn-final__ctas {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.tdn-final__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: var(--tdn-fs-small);
    color: var(--tdn-text-mute-light);
    letter-spacing: 0.02em;
    margin: 1rem auto 0;
    max-width: 60ch;
}

/* Corner ornaments — copper hairline brackets (matches zn-arcana__corner) */
.tdn-final__corner {
    position: absolute;
    width: 56px;
    height: 56px;
    z-index: 1;
    pointer-events: none;
}
.tdn-final__corner::before,
.tdn-final__corner::after {
    content: '';
    position: absolute;
    background: var(--tdn-copper-hi);
    opacity: 0.7;
}
.tdn-final__corner::before { width: 100%; height: 1px; }
.tdn-final__corner::after  { width: 1px; height: 100%; }
.tdn-final__corner--tl { top: 36px; left: 36px; }
.tdn-final__corner--tl::before, .tdn-final__corner--tl::after { top: 0; left: 0; }
.tdn-final__corner--tr { top: 36px; right: 36px; }
.tdn-final__corner--tr::before, .tdn-final__corner--tr::after { top: 0; right: 0; }
.tdn-final__corner--bl { bottom: 36px; left: 36px; }
.tdn-final__corner--bl::before, .tdn-final__corner--bl::after { bottom: 0; left: 0; }
.tdn-final__corner--br { bottom: 36px; right: 36px; }
.tdn-final__corner--br::before, .tdn-final__corner--br::after { bottom: 0; right: 0; }

/* Sparkles — copper twinkle, matches zn-arcana__sparkle */
.tdn-final__star {
    position: absolute;
    color: var(--tdn-copper-hi);
    font-size: 12px;
    opacity: 0.55;
    z-index: 1;
    pointer-events: none;
    animation: tdn-final-twinkle 5s ease-in-out infinite;
}
.tdn-final__star--1 { top: 18%; left: 8%;  animation-delay: 0s;   }
.tdn-final__star--2 { top: 28%; right: 12%; animation-delay: 1.7s; font-size: 10px; }
.tdn-final__star--3 { bottom: 22%; left: 14%; animation-delay: 3.2s; font-size: 14px; }
.tdn-final__star--4 { bottom: 30%; right: 9%; animation-delay: 0.7s; }

@keyframes tdn-final-twinkle {
    0%, 100% { opacity: 0.25; transform: scale(1) rotate(0deg); }
    50%      { opacity: 0.85; transform: scale(1.25) rotate(15deg); }
}

/* ----------------------------------------------------------
   15. RESPONSIVE
   ---------------------------------------------------------- */
@media (max-width: 900px) {
    .tdn-czym__grid,
    .tdn-tarot__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .tdn-tarot__image-wrap { order: -1; aspect-ratio: 4/3; }
    .tdn-czym__image-wrap { aspect-ratio: 4/3; }
    .tdn-jak__steps { grid-template-columns: 1fr; }
    .tdn-inne__grid { grid-template-columns: 1fr; }

    /* Tabela porównawcza → kartowa */
    .tdn-porownanie__table {
        box-shadow: none;
        background: transparent;
        border: 0;
    }
    .tdn-porownanie__table thead { display: none; }
    .tdn-porownanie__table,
    .tdn-porownanie__table tbody,
    .tdn-porownanie__table tr,
    .tdn-porownanie__table td { display: block; width: 100%; }
    .tdn-porownanie__row {
        background: var(--tdn-paper-card);
        margin-bottom: 1rem;
        padding: 1.5rem;
        border: 1px solid var(--tdn-line);
        box-shadow: 0 8px 24px rgba(110, 58, 24, 0.08);
    }
    .tdn-porownanie__row--pelny {
        background: var(--tdn-night);
        color: var(--tdn-text-light);
        border-color: var(--tdn-copper);
    }
    .tdn-porownanie__row--pelny .tdn-porownanie__pick,
    .tdn-porownanie__row--pelny .tdn-porownanie__price,
    .tdn-porownanie__row--pelny .tdn-porownanie__time { color: var(--tdn-paper); }
    .tdn-porownanie__row--pelny .tdn-porownanie__pick-note,
    .tdn-porownanie__row--pelny td:first-child { color: var(--tdn-text-soft-light); }
    .tdn-porownanie__table td {
        padding: 0.5rem 0;
        border: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .tdn-porownanie__table td::before {
        content: attr(data-label);
        font-size: var(--tdn-fs-micro);
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--tdn-copper);
        font-weight: 600;
    }
    .tdn-porownanie__row--pelny td::before { color: var(--tdn-copper-hi); }

    /* Final corner ornaments — smaller on mobile */
    .tdn-final__corner { width: 32px; height: 32px; }
    .tdn-final__corner--tl { top: 20px; left: 20px; }
    .tdn-final__corner--tr { top: 20px; right: 20px; }
    .tdn-final__corner--bl { bottom: 20px; left: 20px; }
    .tdn-final__corner--br { bottom: 20px; right: 20px; }
}

@media (max-width: 540px) {
    :root { --tdn-section-pad: clamp(56px, 12vw, 80px); }
    .tdn-jak__step {
        padding-left: 3.25rem;
    }
    .tdn-jak__step::before { font-size: 1.25rem; width: 2.5rem; }
    .tdn-pytanie__a-inner { padding-left: 0; }
    .tdn-pytanie__num { display: none; }
    .tdn-intro__trust { gap: 0.4rem 1.25rem; }
    .tdn-final__ctas,
    .tdn-porownanie__ctas,
    .tdn-pytanie__bridge-ctas { flex-direction: column; align-items: stretch; }
    .tdn-final__ctas .tdn-btn,
    .tdn-porownanie__ctas .tdn-btn,
    .tdn-pytanie__bridge-ctas .tdn-btn { justify-content: center; }
    .tdn-eyebrow { letter-spacing: 3px; }
}

/* Print */
@media print {
    .tdn-section--dark { background: #fff !important; color: #000 !important; }
    .tdn-btn { display: none; }
    .tdn-final__corner, .tdn-final__star { display: none; }
}