* { box-sizing: border-box; margin: 0; padding: 0; }
        /* Any display value beats the hidden attribute, so state it explicitly —
           otherwise a hidden button with display:inline-flex stays on screen. */
        [hidden] { display: none !important; }
        /* The rotating chart wheel sweeps past its own box at some angles.
           body alone is not enough — the root element grows too. */
        html { overflow-x: hidden; }
        :root {
            /* Fraunces has an optical size axis and a 'wonk' that reads like an
               engraved star atlas; Outfit keeps the running text quiet beside it.
               Mono is for anything that is literally data: degrees, dates, prices. */
            --font-body: 'Outfit', -apple-system, system-ui, sans-serif;
            --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
            --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
            /* Spacing scale. Sections breathe more than the blocks inside them,
               and the rhythm tightens on small screens rather than scaling down
               everything uniformly. */
            --space-section: clamp(48px, 5vw, 72px);
            --space-block: clamp(28px, 4.5vw, 52px);
            --space-tight: clamp(14px, 2vw, 22px);
            --shadow-card: 0 0 0 1px rgba(124,58,237,0.06), 0 8px 28px rgba(0,0,0,0.45);
            --shadow-raised: 0 6px 20px rgba(124,58,237,0.32);
            --focus-ring: 0 0 0 3px rgba(124,58,237,0.28);
            /* Ground: ink indigo, the colour of a clear sky an hour after dusk.
               Neutrals carry a violet bias so nothing reads as unconsidered grey. */
            --bg: #08071a;
            --bg-raised: #0f0e26;
            --bg-card: #14122e;
            --bg-input: #100f26;
            --border: #2b2752;
            --border-soft: #1d1a3c;
            --text: #e6e2f4;
            --text-heading: #d6c6ff;
            --text-muted: #9a93b8;
            --text-dim: #9090a4;
            --text-soft: #b4adcc;
            /* Gilt: the ink of engraved star atlases. Reserved for real data —
               degrees, dates, prices — never for decoration. */
            --gilt: #e8c56b;
            --gilt-soft: rgba(232,197,107,0.12);
            --accent: #7c3aed;
            --accent-hover: #6d28d9;
            --accent-light: #a78bfa;
            --accent-lighter: #c9b1ff;
            --thistle: #cdb4db;
            --pastel-petal: #ffc8dd;
            --baby-pink: #ffafcc;
            --icy-blue: #bde0fe;
            --sky-blue: #a2d2ff;
            --surface-thistle: rgba(205,180,219,0.10);
            --surface-petal: rgba(255,200,221,0.10);
            --surface-pink: rgba(255,175,204,0.10);
            --surface-icy: rgba(189,224,254,0.10);
            --surface-sky: rgba(162,210,255,0.10);
            --on-thistle: #c9b1ff;
            --on-icy: #9ecbff;
            --on-pink: #ffafcc;
            --on-sky: #9fb3c8;
            --hero-glow: radial-gradient(1100px 520px at 50% -10%, rgba(124,58,237,0.30), transparent 70%);
        }
        :root[data-theme="light"] {
            --shadow-card: 0 1px 2px rgba(45,36,56,0.04), 0 8px 24px rgba(134,89,163,0.10);
            --shadow-raised: 0 6px 18px rgba(134,89,163,0.28);
            --focus-ring: 0 0 0 3px rgba(134,89,163,0.18);
            /* Ground: warm paper with a violet cast, like an old ephemeris page. */
            --bg: #f7f4fa;
            --bg-raised: #ffffff;
            --bg-card: #ffffff;
            --bg-input: #f4eff8;
            --border: #e2d5ec;
            --border-soft: #ece3f2;
            --text: #241d33;
            --text-heading: #513173;
            --text-muted: #5f5475;
            --text-dim: #6b5876;
            --text-soft: #5f5475;
            --gilt: #7a5709;
            --gilt-soft: rgba(138,100,16,0.10);
            --accent: #8659a3;
            --accent-hover: #744a90;
            --accent-light: #764a93;
            --accent-lighter: #6d4a89;
            --surface-thistle: rgba(205,180,219,0.28);
            --surface-petal: rgba(255,200,221,0.30);
            --surface-pink: rgba(255,175,204,0.28);
            --surface-icy: rgba(189,224,254,0.32);
            --surface-sky: rgba(162,210,255,0.28);
            --on-thistle: #5b3a73;
            --on-icy: #17496f;
            --on-pink: #a81b4d;
            --on-sky: #5c5468;
            --hero-glow: radial-gradient(1100px 520px at 50% -10%, rgba(205,180,219,0.55), transparent 70%);
        }

        body {
            font-family: var(--font-body);
            font-size: 0.98rem;
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background: var(--bg);
            color: var(--text);
            min-height: 100dvh;
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            transition: background-color 0.2s, color 0.2s;
            overflow-x: hidden;
        }

        .theme-toggle {
            position: fixed;
            top: max(16px, env(safe-area-inset-top));
            right: max(16px, env(safe-area-inset-right));
            width: 44px; height: 44px; border-radius: 50%;
            border: 1px solid var(--border); background: var(--bg-card); color: var(--text);
            font-size: 1.1rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
            z-index: 200;
            /* It floats over the content as the page scrolls, so it needs a
               solid ground and a halo — otherwise headings read through it. */
            box-shadow: 0 0 0 6px var(--bg), var(--shadow-card);
        }
        .theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }
        .theme-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

        .wrap {
            max-width: 1080px; margin: 0 auto;
            padding-inline: clamp(20px, 4vw, 40px);
        }
        /* The ephemeris is a single line of data and needs room to stay on one. */
        .ephemeris .wrap { max-width: 1240px; }

        /* --- hero --- */
        .hero {
            position: relative;
            /* the wheel is wider than the text column and must not widen the page */
            overflow: hidden;
            padding: clamp(40px, 6vw, 68px) 0 clamp(38px, 5vw, 62px);
            text-align: center;
        }
        .hero::before {
            content: ""; position: absolute; inset: -180px 0 auto 0; height: 620px;
            background: var(--hero-glow); pointer-events: none; z-index: 0;
        }
        .hero > * { position: relative; z-index: 1; }

        /* A real zodiac wheel turning slowly behind the logo — it shows what the
           product actually produces, rather than decorating with a stock glow. */
        .sky {
            position: absolute; z-index: 0; pointer-events: none;
            top: clamp(-40px, -4vw, -10px); left: 50%; transform: translateX(-50%);
            width: min(760px, 100vw); aspect-ratio: 1;
            opacity: 0.5;
            -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 72%);
            mask-image: radial-gradient(circle at 50% 42%, #000 38%, transparent 72%);
        }
        :root[data-theme="light"] .sky { opacity: 0.42; }
        .sky svg { width: 100%; height: 100%; display: block; }
        .sky .ring-outer { animation: sky-spin 190s linear infinite; transform-origin: 50% 50%; }
        .sky .ring-inner { animation: sky-spin 130s linear infinite reverse; transform-origin: 50% 50%; }
        .sky .twinkle { animation: sky-twinkle 4s ease-in-out infinite; }
        .sky .twinkle:nth-of-type(2n) { animation-delay: 1.3s; }
        .sky .twinkle:nth-of-type(3n) { animation-delay: 2.6s; }
        @keyframes sky-spin { to { transform: rotate(360deg); } }
        @keyframes sky-twinkle {
            0%, 100% { opacity: 0.25; }
            50% { opacity: 0.9; }
        }
        /* Motion is decorative; respect anyone who has asked for less of it. */
        @media (prefers-reduced-motion: reduce) {
            .sky .ring-outer, .sky .ring-inner, .sky .twinkle { animation: none; }
        }

        /* The logo art is portrait with the wordmark at the bottom; the circle is
           centred on the illustration itself so nothing important gets clipped. */
        .hero-logo {
            /* Smaller than before: at 330px it pushed the buttons past the fold
               on a 900px-tall screen, which is where most desktops sit. */
            width: auto; height: clamp(180px, 22vw, 250px);
            max-width: 100%; object-fit: contain;
            display: block; margin: 0 auto 14px;
            filter: drop-shadow(0 16px 36px rgba(124,58,237,0.30));
        }
        :root[data-theme="light"] .hero-logo {
            filter: drop-shadow(0 16px 32px rgba(134,89,163,0.24));
        }
        .hero h1 {
            font-family: var(--font-display); font-weight: 700;
            /* Fraunces at display size: high optical size, a touch of wonk and
               soft terminals, so the wordmark reads engraved rather than typed. */
            font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1;
            font-size: clamp(2.7rem, 7.6vw, 4.6rem); line-height: 0.98;
            letter-spacing: -0.025em; color: var(--text-heading);
            margin-bottom: 10px; text-wrap: balance;
        }
        .hero .kicker {
            font-family: var(--font-mono);
            font-size: 0.72rem; letter-spacing: .2em; text-transform: uppercase;
            color: var(--gilt); font-weight: 500; margin-bottom: 20px;
            display: inline-flex; align-items: center; gap: 10px;
        }
        /* Hairlines either side of the kicker, like a rule on an atlas plate. */
        .hero .kicker::before, .hero .kicker::after {
            content: ""; width: clamp(18px, 6vw, 42px); height: 1px;
            background: linear-gradient(90deg, transparent, var(--gilt), transparent);
            opacity: .55;
        }
        .hero .lede {
            font-family: var(--font-display); font-weight: 400;
            font-variation-settings: 'opsz' 40, 'SOFT' 20;
            font-size: clamp(1.18rem, 2.7vw, 1.6rem); color: var(--text);
            max-width: 34ch; margin: 0 auto 16px; line-height: 1.42;
            text-wrap: balance;
        }
        .hero .sub {
            font-size: 0.97rem; color: var(--text-muted); max-width: 52ch;
            margin: 0 auto 32px; line-height: 1.7;
        }

        .cta-row {
            display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
            margin-bottom: 16px;
        }
        @media (max-width: 600px) {
            /* Stack them and match widths — unequal pills on two lines read as
               an accident rather than a choice. */
            .cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
            .cta-row .btn { width: 100%; }
        }
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 30px; border-radius: 12px; text-decoration: none; border: none;
            font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: .01em;
            cursor: pointer; min-height: 50px;
            transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                        transform .15s ease, box-shadow .15s ease;
        }
        .btn:hover { transform: translateY(-1px); }
        .btn:active { transform: translateY(0); }
        .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
        .btn-primary {
            background: linear-gradient(135deg, var(--accent-light), var(--accent));
            color: #fff; box-shadow: var(--shadow-raised);
        }
        .btn-primary:hover { filter: brightness(1.06); }
        .btn-ghost {
            background: var(--bg-card); color: var(--text-heading); border: 1px solid var(--border);
        }
        .btn-ghost:hover { border-color: var(--accent); }
        .cta-note { font-size: 0.82rem; color: var(--text-dim); }

        /* --- sections --- */
        section { padding: var(--space-section) 0; position: relative; }
        /* Alternate the ground instead of separating with dead space. */
        section:nth-of-type(even) { background: var(--bg-raised); }
        section:nth-of-type(even)::before,
        section:nth-of-type(even)::after {
            content: ""; position: absolute; left: 0; right: 0; height: 1px;
            background: var(--border-soft);
        }
        section:nth-of-type(even)::before { top: 0; }
        section:nth-of-type(even)::after { bottom: 0; }
        /* The closing box is a card of its own and must not touch the section
           above it; removing its top padding pulled it up into that band. */
        section:last-of-type { padding-top: var(--space-block); }
        /* --- ephemeris strip: today's real positions, set like a data table --- */
        .ephemeris {
            border-top: 1px solid var(--border-soft);
            border-bottom: 1px solid var(--border-soft);
            background: var(--bg-raised);
            padding: 14px 0;
        }
        .eph-inner {
            display: flex; align-items: center; gap: 10px 22px;
            flex-wrap: wrap; justify-content: center;
        }
        @media (min-width: 1000px) {
            /* One clean line: label anchored left, figures spread evenly. */
            .eph-inner { flex-wrap: nowrap; justify-content: flex-start; gap: 24px; }
            .eph-inner .eph-label { flex: 0 0 auto; }
            .eph-inner .eph-list {
                flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
                justify-content: space-between; gap: 0 16px;
                /* A long row of figures scrolls inside its own strip rather
                   than widening the page. */
                overflow-x: auto; scrollbar-width: none;
            }
            .eph-inner .eph-list::-webkit-scrollbar { display: none; }
            .eph-inner .eph-list li { white-space: nowrap; flex: 0 0 auto; }
        }
        .eph-label {
            font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .18em;
            text-transform: uppercase; color: var(--gilt); white-space: nowrap;
        }
        .eph-list {
            list-style: none; margin: 0; padding: 0;
            display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center;
        }
        .eph-list li {
            display: inline-flex; align-items: baseline; gap: 7px;
            font-size: 0.82rem; color: var(--text-muted);
        }
        .eph-glyph { color: var(--text-heading); font-size: 0.98rem; line-height: 1; }
        .eph-name { color: var(--text-soft); }
        .eph-pos {
            font-family: var(--font-mono); font-variant-numeric: tabular-nums;
            color: var(--text); font-size: 0.78rem;
        }
        @media (max-width: 600px) {
            /* Too many figures for a phone; keep the first four and the label. */
            .eph-list li:nth-child(n+5) { display: none; }
        }

        .sec-head { text-align: center; margin-bottom: clamp(30px, 5vw, 50px); }
        @media (max-width: 1000px) {
            /* Below the widest layout there is no free margin at the top right,
               so the button docks bottom-right where it floats over gutter
               rather than over headings and buttons. */
            .theme-toggle {
                top: auto;
                bottom: max(16px, env(safe-area-inset-bottom));
            }
        }
        .sec-head h2 {
            font-family: var(--font-display); font-weight: 600;
            font-variation-settings: 'opsz' 90, 'SOFT' 24, 'WONK' 1;
            font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.022em;
            color: var(--text-heading); margin-bottom: 12px; text-wrap: balance;
        }
        .sec-head p {
            color: var(--text-muted); max-width: 54ch; margin: 0 auto;
            font-size: 1.02rem; line-height: 1.7;
        }
        /* A small gilt marker above each section heading: the glyph astrologers
           use for a conjunction, repeated as a quiet structural device. */
        .sec-head .mark {
            display: block; font-family: var(--font-mono); font-size: 0.9rem;
            color: var(--gilt); opacity: .8; margin-bottom: 14px; letter-spacing: .3em;
        }

        /* Six panels on a twelve-column field. The first two run wider because
           they carry the two things people actually come for; the rest sit in
           thirds. Even boxes would read as a template. */
        .cards {
            display: grid; grid-template-columns: repeat(12, 1fr);
            gap: 14px; align-items: stretch;
        }
        /* Two per row: every module now carries the same five-point list, so
           none of them deserves a wider panel than the others. */
        .card { grid-column: span 6; }
        @media (max-width: 600px) {
            .card { grid-column: span 12; }
        }
        @media (max-width: 600px) {
            .cards { grid-template-columns: 1fr; }
        }
        .card {
            position: relative; overflow: hidden; isolation: isolate;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 16px;
            /* Extra top padding leaves the scene a clear band of its own. */
            padding: 74px 24px 26px;
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-card);
            transition: transform .3s cubic-bezier(.2,.7,.3,1),
                        border-color .3s ease, box-shadow .3s ease;
        }
        /* Each card carries its own scene, drawn in CSS behind the text and
           tinted to the card's own hue. They idle slowly and wake on hover —
           a background that says what the card is about. */
        .card-scene {
            position: absolute; inset: 0; z-index: -1;
            overflow: hidden; border-radius: inherit;
            pointer-events: none;
            /* Each scene inherits its card's own hue via currentColor. */
            color: var(--on-thistle);
            /* The scene fills the card and fades toward the copy, so it reads as
               the card's own ground rather than a corner ornament. */
            -webkit-mask-image: linear-gradient(#000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.25) 62%, transparent 88%);
            mask-image: linear-gradient(#000 0%, rgba(0,0,0,.85) 32%, rgba(0,0,0,.25) 62%, transparent 88%);
        }
        /* A tinted wash under each scene — this is what makes the card feel
           themed rather than decorated. */
        .card-scene::before {
            content: ""; position: absolute; inset: 0;
            background: radial-gradient(130% 75% at 72% 0%,
                        currentColor 0%, transparent 70%);
            opacity: .13;
        }
        :root[data-theme="light"] .card-scene::before { opacity: .14; }
        .s-day { color: var(--on-icy); }
        .s-chart { color: var(--on-pink); }
        .s-period { color: var(--on-sky); }
        .s-match { color: var(--on-pink); }
        .s-karma { color: var(--gilt); }
        .card-scene i {
            position: absolute; display: block;
            border-radius: 50%;
        }

        /* 1 — Astro portrait: three concentric rings, the natal wheel's own structure. */
        .s-self i {
            border: 1px solid currentColor; opacity: .26;
            right: -46px; top: -46px;
            animation: drift-spin 42s linear infinite;
        }
        .s-self i:nth-child(1) { width: 250px; height: 250px; }
        .s-self i:nth-child(2) { width: 186px; height: 186px; right: 2px; top: 2px;
                                 animation-duration: 34s; animation-direction: reverse; }
        .s-self i:nth-child(3) { width: 124px; height: 124px; right: 33px; top: 33px;
                                 border-style: dashed; animation-duration: 26s; }

        /* 2 — Денят ти: a moon crossing, with its phase carved by a second disc. */
        .s-day i:nth-child(1) {
            width: 150px; height: 150px; right: 16px; top: -30px;
            background: currentColor; opacity: .2;
            animation: moon-cross 26s ease-in-out infinite;
        }
        .s-day i:nth-child(2) {
            width: 150px; height: 150px; right: 50px; top: -30px;
            background: var(--bg-card); opacity: 1;
            animation: moon-cross 26s ease-in-out infinite;
        }

        /* 3 — Натална карта: a wheel with house spokes, slowly turning. */
        .s-chart i:nth-child(1) {
            width: 226px; height: 226px; right: -48px; top: -48px;
            border: 1px solid currentColor; opacity: .26;
            animation: drift-spin 60s linear infinite;
        }
        .s-chart i:nth-child(2) {
            width: 226px; height: 226px; right: -48px; top: -48px;
            opacity: .2;
            background:
                conic-gradient(from 0deg, currentColor 0 1deg, transparent 1deg 30deg,
                    currentColor 30deg 31deg, transparent 31deg 60deg,
                    currentColor 60deg 61deg, transparent 61deg 90deg,
                    currentColor 90deg 91deg, transparent 91deg 120deg,
                    currentColor 120deg 121deg, transparent 121deg 150deg,
                    currentColor 150deg 151deg, transparent 151deg 180deg,
                    currentColor 180deg 181deg, transparent 181deg 210deg,
                    currentColor 210deg 211deg, transparent 211deg 240deg,
                    currentColor 240deg 241deg, transparent 241deg 270deg,
                    currentColor 270deg 271deg, transparent 271deg 300deg,
                    currentColor 300deg 301deg, transparent 301deg 330deg,
                    currentColor 330deg 331deg, transparent 331deg 360deg);
            -webkit-mask: radial-gradient(circle, transparent 40%, #000 41%);
            mask: radial-gradient(circle, transparent 40%, #000 41%);
            animation: drift-spin 60s linear infinite;
        }

        /* 4 — Периоди: a timeline of transit bars sliding past. */
        .s-period i {
            border-radius: 2px; height: 4px; background: currentColor;
            right: 0; opacity: .24;
            animation: bar-slide 18s ease-in-out infinite;
        }
        .s-period i:nth-child(1) { width: 132px; top: 20px; }
        .s-period i:nth-child(2) { width: 86px;  top: 42px; animation-delay: -6s;  opacity: .18; }
        .s-period i:nth-child(3) { width: 154px; top: 64px; animation-delay: -12s; opacity: .21; }
        .s-period i:nth-child(4) { width: 66px;  top: 86px; animation-delay: -3s;  opacity: .15; }

        /* 5 — Съвместимост: two charts overlapping, breathing toward each other. */
        .s-match i {
            width: 158px; height: 158px; border: 1px solid currentColor; opacity: .26;
            top: -34px;
            animation: pair-breathe 11s ease-in-out infinite;
        }
        .s-match i:nth-child(1) { right: 58px; }
        .s-match i:nth-child(2) { right: -28px; animation-direction: reverse; }

        /* 6 — Акашови записи: a slow starfield, the oldest record there is. */
        .s-karma i {
            width: 4px; height: 4px; background: currentColor;
            animation: star-pulse 5s ease-in-out infinite;
        }
        .s-karma i:nth-child(1) { right: 30px; top: 24px; opacity: .5; }
        .s-karma i:nth-child(2) { right: 68px; top: 46px; animation-delay: -1.2s; opacity: .35; }
        .s-karma i:nth-child(3) { right: 46px; top: 78px; animation-delay: -2.4s; opacity: .45; }
        .s-karma i:nth-child(4) { right: 96px; top: 30px; animation-delay: -3.1s; opacity: .3; }
        .s-karma i:nth-child(5) { right: 22px; top: 104px; animation-delay: -4s; opacity: .4; }
        .s-karma i:nth-child(6) {
            width: 178px; height: 178px; right: -10px; top: -10px;
            background: none; border: 1px dashed currentColor; opacity: .2;
            animation: drift-spin 70s linear infinite;
        }

        @keyframes drift-spin { to { transform: rotate(360deg); } }
        @keyframes moon-cross {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-26px); }
        }
        @keyframes bar-slide {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-22px); }
        }
        @keyframes pair-breathe {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(14px); }
        }
        @keyframes star-pulse {
            0%, 100% { opacity: .2; transform: scale(.85); }
            50% { opacity: .75; transform: scale(1.25); }
        }

        /* Hover wakes the scene rather than adding a separate effect. */
        .card:hover .card-scene { opacity: 1; }
        .card .card-scene { opacity: .9; transition: opacity .3s ease; }

        /* The scene alone carries the theme now; a glyph badge on top of it was
           one signal too many. The tints stay — the scenes borrow them. */
        .i-thistle { color: var(--on-thistle); }
        .i-icy { color: var(--on-icy); }
        .i-petal { color: var(--on-pink); }
        .i-sky { color: var(--on-sky); }
        .i-pink { color: var(--on-pink); }
        .i-gilt { color: var(--gilt); }

        /* Numbered list inside a feature card: the modules answer questions
           in order, and the numbers carry that. */
        .card-list {
            list-style: none; counter-reset: cl; padding: 0; margin: 0;
        }
        .card-list li {
            counter-increment: cl; position: relative;
            padding: 6px 0 6px 28px;
            font-family: var(--font-display);
            font-variation-settings: 'opsz' 20, 'SOFT' 22;
            font-size: 1.02rem; line-height: 1.5; color: var(--text);
        }
        .card-list li::before {
            content: counter(cl) ".";
            position: absolute; left: 3px; top: 6px;
            font-family: var(--font-display); font-weight: 700;
            font-size: .92rem; color: var(--gilt);
            font-variant-numeric: tabular-nums;
        }

        .card h3 {
            font-family: var(--font-display); font-weight: 600;
            font-variation-settings: 'opsz' 30, 'SOFT' 20;
            font-size: 1.22rem; letter-spacing: -0.012em;
            color: var(--text-heading); margin-bottom: 8px; line-height: 1.25;
        }
        /* Card titles that double as links keep the heading colour and only
           hint at being clickable on hover — no default link blue. */
        .card h3 a {
            color: inherit; text-decoration: none;
            transition: color .15s ease;
        }
        .card h3 a:hover { color: var(--accent-light); }
        /* The mono line under each title names the source of the reading —
           it is the strongest honesty signal the page has. */
        .card-src {
            font-family: var(--font-display);
            font-variation-settings: 'opsz' 24, 'SOFT' 20;
            font-size: 1rem; font-style: italic; letter-spacing: .01em;
            color: var(--gilt); opacity: .9;
            margin-bottom: 12px;
        }
        .card p {
            font-size: 0.9rem; color: var(--text-soft); line-height: 1.65;
            margin-bottom: 0;
        }
        .card h3 + p { margin-top: 0; }
        @media (prefers-reduced-motion: reduce) {
            .card, .card-ico, .card-ico::after, .card-glyph { transition: none; }
            .card:hover { transform: none; }
            .card:hover .card-glyph { transform: none; }
            /* The scenes stay — they just stop moving. */
            .card-scene i { animation: none !important; }
        }

        /* --- mid-page calls to action, so the only way to act is not the bottom --- */
        .mid-cta {
            display: flex; flex-direction: column; align-items: center; gap: 10px;
            margin-top: var(--space-block);
        }
        .mid-cta-note {
            font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .08em;
            color: var(--text-dim);
        }

        /* --- sample reading: facts on the left, the prose they produce on the right --- */
        .sample {
            display: grid; grid-template-columns: 280px 1fr; gap: 20px;
            align-items: start;
        }
        @media (max-width: 900px) { .sample { grid-template-columns: 1fr; } }
        .sample-side {
            display: flex; flex-direction: column; gap: 10px;
            padding: 20px; border-radius: 16px;
            background: var(--bg-card); border: 1px solid var(--border-soft);
        }
        @media (max-width: 900px) {
            /* Two columns of facts read better than one tall stack on a tablet. */
            .sample-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
        }
        .sample-fact {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 0; border-bottom: 1px solid var(--border-soft);
        }
        .sample-fact:last-child { border-bottom: none; }
        .sample-glyph {
            width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--surface-thistle); color: var(--on-thistle);
            font-size: 1.05rem; line-height: 1;
        }
        .sample-label {
            display: block; font-size: 0.86rem; font-weight: 500; color: var(--text);
        }
        .sample-val {
            display: block; font-family: var(--font-mono); font-size: 0.72rem;
            color: var(--gilt); font-variant-numeric: tabular-nums; margin-top: 2px;
        }
        .sample-main {
            padding: 26px 28px; border-radius: 16px;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            box-shadow: var(--shadow-card);
        }
        .sample-eyebrow {
            font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .14em;
            text-transform: uppercase; color: var(--gilt); margin-bottom: 14px;
        }
        .sample-main p { color: var(--text-soft); line-height: 1.75; margin-bottom: 14px; }
        .sample-main p strong { color: var(--text-heading); font-weight: 600; }
        .sample-foot {
            font-size: 0.82rem !important; color: var(--text-dim) !important;
            border-top: 1px solid var(--border-soft); padding-top: 14px;
            margin-bottom: 0 !important;
        }

        /* --- steps: a genuine sequence, so the numbers earn their place --- */
        .steps {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 26px 20px; position: relative;
        }
        .step { text-align: center; padding: 0 6px; position: relative; }
        /* Hairline joining the steps, cut short of the discs on either side. */
        @media (min-width: 700px) {
            .step:not(:last-child)::before {
                content: ""; position: absolute; top: 25px; left: calc(50% + 34px);
                right: calc(-50% + 34px); height: 1px;
                background: linear-gradient(90deg, var(--border), var(--border-soft));
            }
        }
        .step-num {
            position: relative; z-index: 1;
            width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 16px;
            display: flex; align-items: center; justify-content: center;
            font-family: var(--font-mono); font-size: 0.92rem; font-weight: 500;
            font-variant-numeric: tabular-nums;
            background: var(--bg); color: var(--gilt);
            border: 1px solid var(--border);
            box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1px var(--gilt-soft);
        }
        .step h3 {
            font-family: var(--font-display); font-weight: 600;
            font-variation-settings: 'opsz' 30, 'SOFT' 20;
            font-size: 1.14rem; color: var(--text-heading); margin-bottom: 7px;
        }
        .step p { font-size: 0.91rem; color: var(--text-soft); line-height: 1.65; }

        /* --- trust strip --- */
        .trust {
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 18px; padding: clamp(24px, 4vw, 34px);
            display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px;
            box-shadow: var(--shadow-card);
        }
        .trust-item { display: flex; gap: 12px; align-items: flex-start; }
        .trust-ico {
            font-size: 1.15rem; flex-shrink: 0; line-height: 1.4;
            color: var(--gilt); width: 24px; text-align: center;
        }
        .trust-item h4 { font-size: 0.95rem; font-weight: 600; color: var(--text-heading); margin-bottom: 3px; }
        .trust-item p { font-size: 0.86rem; color: var(--text-soft); line-height: 1.6; }

        /* --- pricing --- */
        .plans {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 18px; align-items: stretch; max-width: 780px; margin: 0 auto;
        }
        .plan {
            position: relative;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 20px; padding: 30px 26px 26px;
            display: flex; flex-direction: column;
            box-shadow: var(--shadow-card);
            transition: transform .18s ease, border-color .18s ease;
        }
        .plan:hover { transform: translateY(-3px); }
        .plan-featured {
            border-color: var(--accent);
            box-shadow: 0 0 0 1px var(--accent), var(--shadow-raised);
        }
        .plan-badge {
            position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
            background: linear-gradient(135deg, var(--accent-light), var(--accent));
            color: #fff; font-size: 0.72rem; font-weight: 700;
            letter-spacing: .08em; text-transform: uppercase;
            padding: 6px 16px; border-radius: 99px; white-space: nowrap;
        }
        .plan-head { text-align: center; margin-bottom: 20px; }
        .plan-head h3 {
            font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
            color: var(--text-heading); letter-spacing: -0.01em; margin-bottom: 6px;
        }
        .plan-price { display: flex; align-items: baseline; justify-content: center; gap: 7px; }
        .plan-price .amount {
            font-family: var(--font-display); font-size: 3.2rem; font-weight: 700;
            font-variation-settings: 'opsz' 144, 'SOFT' 26, 'WONK' 1;
            font-variant-numeric: tabular-nums;
            color: var(--text-heading); line-height: 1; letter-spacing: -0.03em;
        }
        .plan-featured .plan-price .amount { color: var(--gilt); }
        .plan-price .per {
            font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
        }
        .plan-note { font-size: 0.82rem; color: var(--text-dim); margin-top: 6px; }

        .plan-list { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
        .plan-list li {
            position: relative; padding: 8px 0 8px 30px;
            font-size: 0.9rem; line-height: 1.55; color: var(--text-soft);
            border-bottom: 1px solid var(--border-soft);
        }
        .plan-list li:last-child { border-bottom: none; }
        .plan-list li strong { color: var(--text-heading); font-weight: 600; }
        /* Aspect glyphs instead of tick and dash: the trine is the astrologer's
           mark for what flows, the square for what is blocked. The vocabulary
           is the subject's own. */
        .plan-list li::before {
            position: absolute; left: 0; top: 7px;
            width: 22px; height: 22px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.72rem; line-height: 1;
            transition: transform .2s ease;
        }
        .plan-list li.yes::before {
            content: "△"; background: var(--surface-icy); color: var(--on-icy);
        }
        .plan-list li.no::before {
            content: "□"; background: transparent; color: var(--text-dim);
            border: 1px solid var(--border-soft);
        }
        .plan-list li.yes:hover::before { transform: scale(1.12); }
        .plan-list li.no { color: var(--text-dim); }
        .plan-btn { width: 100%; }
        .plans-foot {
            text-align: center; font-size: 0.83rem; color: var(--text-dim); margin-top: 20px;
        }

        /* --- entry purchase: the chart is the product, so it gets a panel of
               its own rather than sitting in a row of equal plan cards --- */
        .entry {
            display: grid; grid-template-columns: 1fr 280px; gap: 0;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 20px; overflow: hidden;
            box-shadow: var(--shadow-card);
        }
        @media (max-width: 820px) { .entry { grid-template-columns: 1fr; } }

        .entry-main { padding: clamp(26px, 4vw, 38px); }
        .entry-eyebrow {
            display: inline-block; font-family: var(--font-mono);
            font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
            color: var(--gilt); margin-bottom: 12px;
        }
        .entry-main h3 {
            font-family: var(--font-display); font-weight: 700;
            font-variation-settings: 'opsz' 90, 'SOFT' 24, 'WONK' 1;
            font-size: clamp(1.6rem, 3.6vw, 2.1rem); line-height: 1.15;
            color: var(--text-heading); margin-bottom: 10px;
        }
        .entry-lede {
            font-family: var(--font-display);
            font-variation-settings: 'opsz' 40, 'SOFT' 22;
            font-size: 1.16rem; line-height: 1.5; font-style: italic;
            color: var(--text-heading); opacity: .92;
            margin-bottom: 22px; max-width: 40ch;
        }
        .entry-list { list-style: none; padding: 0; margin: 0; }
        .entry-list li {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 9px 0;
            font-family: var(--font-display);
            font-variation-settings: 'opsz' 20, 'SOFT' 22;
            font-size: 1.02rem; line-height: 1.5; color: var(--text);
        }
        .entry-list li + li { border-top: 1px solid var(--border-soft); }
        .entry-list strong { color: var(--text-heading); font-weight: 700; }
        /* A medallion per line: the glyph names what the line is about, and the
           row of them reads as a small ephemeris down the panel. */
        .el-glyph {
            flex-shrink: 0;
            width: 30px; height: 30px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: var(--gilt-soft); color: var(--gilt);
            font-size: .92rem; line-height: 1;
            margin-top: 1px;
        }

        .entry-side {
            display: flex; flex-direction: column; justify-content: center;
            padding: clamp(26px, 4vw, 38px);
            background: var(--bg-raised);
            border-left: 1px solid var(--border-soft);
            text-align: center;
        }
        @media (max-width: 820px) {
            .entry-side { border-left: none; border-top: 1px solid var(--border-soft); }
        }
        .entry-price {
            font-family: var(--font-display); font-weight: 700;
            font-variation-settings: 'opsz' 144, 'SOFT' 26, 'WONK' 1;
            font-variant-numeric: tabular-nums;
            font-size: 3.4rem; line-height: 1; letter-spacing: -.03em;
            color: var(--gilt);
        }
        .entry-once {
            font-family: var(--font-mono); font-size: .72rem;
            letter-spacing: .1em; color: var(--text-dim);
            margin-top: 8px; margin-bottom: 20px;
        }
        .entry-btn { width: 100%; }
        .entry-note {
            font-size: .76rem; color: var(--text-dim);
            margin-top: 12px; line-height: 1.5;
        }

        /* --- one-off unlocks: priced chips, for people who want one thing only --- */
        /* --- price table: one place to see every module and what it costs --- */
        .visually-hidden {
            position: absolute; width: 1px; height: 1px; overflow: hidden;
            clip: rect(0 0 0 0); white-space: nowrap;
        }
        .price-table-wrap {
            /* A table never widens the page; it scrolls inside its own box. */
            overflow-x: auto;
            border: 1px solid var(--border-soft); border-radius: 16px;
            background: var(--bg-card);
            /* On a narrow screen the price column is the part that scrolls out
               of sight. The shadow on the right edge says there is more, and
               disappears once the table is scrolled to the end. */
            background-image: linear-gradient(to left, var(--bg-card), transparent 34px),
                              linear-gradient(to left, rgba(0,0,0,.22), transparent 22px);
            background-position: right center, right center;
            background-repeat: no-repeat;
            background-size: 100% 100%, 22px 100%;
            background-attachment: local, scroll;
        }
        .price-table {
            width: 100%; border-collapse: collapse; min-width: 520px;
            font-size: .92rem;
        }
        .price-table thead th {
            text-align: left; padding: 14px 18px;
            font-family: var(--font-mono); font-size: .66rem;
            letter-spacing: .14em; text-transform: uppercase;
            color: var(--gilt); font-weight: 500;
            border-bottom: 1px solid var(--border-soft);
            background: var(--bg-raised);
        }
        .price-table tbody th {
            text-align: left; font-weight: 600; color: var(--text-heading);
            padding: 14px 18px; white-space: nowrap;
            font-family: var(--font-display); font-size: 1rem;
        }
        .price-table tbody td {
            padding: 14px 18px; color: var(--text-soft); line-height: 1.55;
        }
        .price-table tbody tr { border-bottom: 1px solid var(--border-soft); }
        .price-table tbody tr:last-child { border-bottom: none; }
        .price-table tbody tr:hover { background: var(--surface-thistle); }
        /* The bundle closes the table: it is the sum of everything above it,
           so it gets a rule above and a little more weight, not a colour that
           would make it read as a seventh module. */
        .price-table tbody tr.pt-bundle {
            border-top: 2px solid var(--gilt);
            background: var(--surface-thistle);
        }
        .price-table tbody tr.pt-bundle th,
        .price-table tbody tr.pt-bundle .col-price {
            color: var(--text-heading); font-weight: 700;
        }
        .pt-glyph {
            display: inline-flex; align-items: center; justify-content: center;
            width: 26px; height: 26px; border-radius: 50%; margin-right: 9px;
            background: var(--surface-thistle); color: var(--on-thistle);
            font-size: .88rem; vertical-align: middle;
        }
        .pt-extra {
            display: block; margin-top: 4px;
            font-size: .82rem; color: var(--gilt);
        }
        .price-table .col-price {
            text-align: right; white-space: nowrap;
            font-family: var(--font-display); font-weight: 700;
            font-size: 1.15rem; color: var(--gilt);
            font-variant-numeric: tabular-nums;
        }
        .price-table thead .col-price {
            font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
        }
        .price-table-note {
            text-align: center; margin-top: 16px;
            font-size: .88rem; color: var(--text-muted);
        }
        .price-table-note strong { color: var(--text-heading); }

        /* --- privacy strip --- */
        .privacy-strip {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
            gap: 14px; margin-top: var(--space-block);
        }
        .privacy-item {
            display: flex; gap: 11px; align-items: flex-start;
            padding: 16px 18px; border-radius: 14px;
            background: var(--bg-card); border: 1px solid var(--border-soft);
        }
        .privacy-glyph {
            width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--gilt-soft); color: var(--gilt); font-size: .9rem;
        }
        .privacy-item h4 {
            font-family: var(--font-display); font-weight: 600;
            font-size: 1rem; color: var(--text-heading); margin-bottom: 4px;
        }
        .privacy-item p {
            font-size: .85rem; line-height: 1.6; color: var(--text-soft);
        }

        .unlocks {
            margin-top: 34px; padding-top: 30px;
            border-top: 1px solid var(--border-soft);
        }
        .unlocks-head { text-align: center; margin-bottom: 20px; }
        .unlocks-head h3 {
            font-family: var(--font-display); font-weight: 700;
            font-size: clamp(1.4rem, 3.4vw, 1.9rem); line-height: 1.2;
            color: var(--text-heading); margin-bottom: 8px;
        }
        .unlocks-head p {
            color: var(--text-muted); font-size: 0.92rem;
            max-width: 58ch; margin: 0 auto;
        }
        .chip-row {
            display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
        }
        @media (max-width: 600px) {
            /* Ragged centred pills across six lines look like spilled change.
               A two-column list with the price flush right reads as a price list. */
            .chip-row {
                display: grid; grid-template-columns: 1fr; gap: 0;
                max-width: 340px; margin: 0 auto;
                border: 1px solid var(--border-soft); border-radius: 14px;
                overflow: hidden; background: var(--bg-card);
            }
            .chip {
                border: none; border-radius: 0; background: transparent;
                justify-content: space-between; padding: 12px 16px;
                border-bottom: 1px solid var(--border-soft);
            }
            .chip:last-child { border-bottom: none; }
            .chip:hover { transform: none; border-color: transparent; }
        }
        .chip {
            display: inline-flex; align-items: baseline; gap: 8px;
            padding: 9px 16px; border-radius: 999px;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            font-size: 0.88rem; color: var(--text); text-decoration: none;
            transition: border-color .15s ease, transform .15s ease;
        }
        .chip:hover { border-color: var(--accent); transform: translateY(-1px); color: var(--text-heading); }
        .chip .price {
            font-family: var(--font-mono); font-weight: 500; color: var(--gilt);
            font-size: 0.86rem; white-space: nowrap; font-variant-numeric: tabular-nums;
        }

        /* --- closing cta --- */
        .final {
            text-align: center;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 22px; padding: clamp(36px, 6vw, 60px) clamp(22px, 5vw, 48px);
            box-shadow: var(--shadow-card);
        }
        .final h2 {
            font-family: var(--font-display); font-weight: 700;
            font-size: clamp(1.7rem, 4vw, 2.35rem); line-height: 1.2; letter-spacing: -0.02em;
            color: var(--text-heading); margin-bottom: 10px;
        }
        .final p { color: var(--text-soft); max-width: 46ch; margin: 0 auto 26px; }

        footer {
            padding: 40px 0 48px; text-align: center;
            color: var(--text-dim); font-size: 0.84rem;
            border-top: 1px solid var(--border-soft); margin-top: 20px;
        }
        footer a { color: var(--accent-light); text-decoration: none; }
        footer a:hover { text-decoration: underline; }

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

        /* --- feature landing pages (shared with the module pages) --- */
        .hero--feature { padding-top: clamp(28px, 4vw, 44px); }
        .hero--feature h1 {
            font-size: clamp(2.05rem, 5.4vw, 3.2rem);
        }

        /* Top nav: the logo mark takes you home, a styled back link beside it. */
        .page-nav {
            display: flex; align-items: center; gap: 12px;
            margin-bottom: 30px;
        }
        .logo-home {
            display: inline-flex; flex-shrink: 0; line-height: 0;
            border-radius: 50%; text-decoration: none;
            transition: transform .15s ease, opacity .15s ease;
        }
        .logo-home:hover { transform: scale(1.05); opacity: .9; }
        .logo-home:focus-visible { outline: none; box-shadow: var(--focus-ring); }
        .page-logo {
            width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
            flex-shrink: 0; border: 1px solid var(--border);
            box-shadow: 0 0 0 3px var(--surface-thistle);
        }
        .back-link {
            color: var(--text-muted); text-decoration: none;
            font-size: 0.9rem; display: inline-flex; align-items: center; gap: 6px;
            min-height: 44px; transition: color .15s ease;
        }
        .back-link:hover { color: var(--accent-light); }

        .hero-glyph {
            width: 104px; height: 104px; border-radius: 50%;
            margin: 0 auto 24px; display: flex; align-items: center; justify-content: center;
            font-size: 2.6rem; line-height: 1; color: var(--gilt);
            background: var(--bg-card); border: 1px solid var(--border);
            box-shadow: var(--shadow-card), inset 0 0 0 1px var(--gilt-soft);
        }

        /* "Какво ще узнаеш" cards reuse the home page's .card + .card-scene —
           animated scenes, not icon badges. Three across on wide screens. */
        .learn {
            display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px;
        }
        .learn .card { grid-column: span 4; }
        @media (max-width: 900px) { .learn .card { grid-column: span 6; } }
        @media (max-width: 600px) { .learn .card { grid-column: span 12; } }

        .faq {
            max-width: 760px; margin: 0 auto;
            display: flex; flex-direction: column; gap: 12px;
        }
        .faq-item {
            background: var(--bg-card); border: 1px solid var(--border-soft);
            border-radius: 14px; padding: 20px 24px;
        }
        .faq-item h3 {
            font-family: var(--font-display); font-weight: 600;
            font-size: 1.05rem; color: var(--text-heading); margin-bottom: 8px;
        }
        .faq-item p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.65; }

        .related {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px;
        }
        .related a {
            display: flex; align-items: center; gap: 12px;
            padding: 16px 18px; border-radius: 14px;
            background: var(--bg-card); border: 1px solid var(--border-soft);
            color: var(--text); text-decoration: none;
            transition: border-color .15s ease, transform .15s ease;
        }
        .related a:hover { border-color: var(--accent); transform: translateY(-1px); }
        .r-glyph {
            width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            background: var(--gilt-soft); color: var(--gilt); font-size: 1.05rem;
        }
        .r-name {
            font-family: var(--font-display); font-weight: 600;
            font-size: 0.98rem; color: var(--text-heading); line-height: 1.25;
        }
        .r-tag {
            font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--text-dim); margin-left: auto; white-space: nowrap;
        }