*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        :root {
            --bg: #EEE8DC;
            --bg-alt: #E4DCCB;
            --bg-card: #FBF6ED;
            --bg-white: #FFFBF4;
            --ink: #26180D;
            --text: #332112;
            --text-body: #503723;
            --muted: #8A735F;
            --accent: #5B2E12;
            --accent-hover: #43200B;
            --accent-mid: #7A4A25;
            --gold: #A87328;
            --gold-soft: rgba(168, 115, 40, .12);
            --gold-border: rgba(168, 115, 40, .28);
            --forest: #2F5B49;
            --wine: #7B2E2B;
            --sapphire: #365984;
            --border: #D8CCB8;
            --border-light: #EADFCE;
            --shadow: 0 18px 70px rgba(38, 24, 13, .15);
            --shadow-soft: 0 8px 30px rgba(38, 24, 13, .09);
            --radius: 16px;
        }

        html { scroll-behavior: smooth; overflow-x: hidden; }

        body {
            min-width: 320px;
            overflow-x: hidden;
            background:
                radial-gradient(circle at 18% 10%, rgba(168, 115, 40, .10), transparent 30rem),
                linear-gradient(180deg, #F4EFE5 0%, var(--bg) 42%, #E9E2D5 100%);
            color: var(--text);
            font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        body::after {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 9000;
            pointer-events: none;
            opacity: .28;
            mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
        }

        a { color: inherit; text-decoration: none; }
        img, svg { display: block; max-width: 100%; }
        button, input { font: inherit; }
        button { cursor: pointer; }

        @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
        @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.9); } }
        @keyframes floatPhone { 0%, 100% { transform: translateY(0) rotate(var(--rot)); } 50% { transform: translateY(-8px) rotate(var(--rot)); } }
        @keyframes moteDrift {
            0% { opacity: 0; transform: translate3d(0, 28px, 0) scale(.7); }
            12% { opacity: var(--o); }
            82% { opacity: var(--o); }
            100% { opacity: 0; transform: translate3d(var(--dx), -84px, 0) scale(1.08); }
        }
        @keyframes softOrbit {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .28; }
            50% { transform: translate3d(18px, -14px, 0) scale(1.08); opacity: .44; }
        }
        @keyframes lineGleam {
            0% { transform: translateX(-120%); opacity: 0; }
            35% { opacity: .7; }
            100% { transform: translateX(120%); opacity: 0; }
        }
        @keyframes shineSweep {
            0% { transform: translateX(-145%) rotate(18deg); opacity: 0; }
            28% { opacity: .28; }
            100% { transform: translateX(145%) rotate(18deg); opacity: 0; }
        }

        .reveal { opacity: 1; transform: none; transition: opacity .75s ease, transform .75s ease; }
        .reveal.in { opacity: 1; transform: none; }
        .d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; } .d3 { transition-delay: .36s; }

        .ambient {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            contain: layout paint;
        }
        .ambient::before, .ambient::after {
            content: '';
            position: absolute;
            width: min(42vw, 440px);
            height: min(42vw, 440px);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(168, 115, 40, .18), transparent 68%);
            filter: blur(10px);
            animation: softOrbit 12s ease-in-out infinite;
        }
        .ambient::before { left: -12%; top: 15%; }
        .ambient::after { right: -14%; bottom: 8%; animation-delay: -5s; }
        .mote {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--s);
            height: var(--s);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 244, 200, .96) 0%, rgba(168, 115, 40, .65) 44%, transparent 72%);
            box-shadow: 0 0 12px rgba(168, 115, 40, .34);
            opacity: 0;
            animation: moteDrift var(--dur) linear infinite;
            animation-delay: var(--delay);
        }
        .mote:nth-child(3n) {
            border-radius: 2px;
            transform: rotate(45deg);
        }
        .mote:nth-child(4n) {
            background: radial-gradient(circle, rgba(255,255,255,.95), rgba(168, 115, 40, .42) 46%, transparent 70%);
        }

        .wrap { width: min(100%, 1160px); margin: 0 auto; padding: 0 2rem; max-width: 100%; box-sizing: border-box; }
        .narrow { width: min(100%, 720px); margin: 0 auto; padding: 0 2rem; }

        .sec-label {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: 1rem;
            color: var(--accent-mid);
            font-family: 'Cinzel', serif;
            font-size: .7rem;
            font-weight: 700;
            letter-spacing: .2em;
            text-transform: uppercase;
        }
        .sec-label::before, .sec-label::after {
            content: '';
            width: 22px;
            height: 1px;
            background: currentColor;
            opacity: .45;
        }
        .sec-label.center { justify-content: center; width: 100%; }

        .sep {
            display: flex;
            align-items: center;
            gap: 1rem;
            width: min(320px, calc(100% - 4rem));
            margin: 0 auto;
            opacity: .35;
        }
        .sep-line { flex: 1; height: 1px; background: var(--accent-mid); }
        .sep-gem {
            position: relative;
            color: var(--gold);
            font-size: .48rem;
            letter-spacing: .45em;
            white-space: nowrap;
            text-shadow: 0 0 12px rgba(168, 115, 40, .18);
        }

        #nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 500;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 1rem 2rem;
            transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
        }
        #nav.on {
            background: rgba(238, 232, 220, .9);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            box-shadow: 0 1px 0 rgba(91, 46, 18, .13);
        }
        .logo {
            position: absolute;
            left: 2rem;
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-5px);
            transition: opacity .2s ease, transform .2s ease;
        }
        #nav.has-logo .logo { opacity: 1; pointer-events: auto; transform: none; }
        .logo img {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            object-fit: cover;
            border: 1px solid var(--gold-border);
            box-shadow: 0 2px 12px rgba(91, 46, 18, .18);
        }
        .logo-name {
            color: var(--accent);
            font-family: 'Cinzel', serif;
            font-size: 1rem;
            font-weight: 700;
            letter-spacing: .08em;
        }
        .nav-cta, .btn-primary, .json-export {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 0;
            border-radius: 10px;
            background: linear-gradient(180deg, #6B3816, var(--accent));
            color: var(--bg-white);
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .01em;
            box-shadow: 0 10px 22px rgba(91, 46, 18, .18);
            transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
        }
        .nav-cta { min-height: 42px; padding: .55rem 1.2rem; }
        .nav-cta:hover, .btn-primary:hover, .json-export:hover {
            background: linear-gradient(180deg, #794018, var(--accent-hover));
            box-shadow: 0 12px 26px rgba(91, 46, 18, .24);
            transform: translateY(-1px);
        }
        .btn-primary, .json-export { position: relative; overflow: hidden; }
        .btn-primary::after, .json-export::after {
            content: '';
            position: absolute;
            inset: -35% auto -35% 0;
            width: 36%;
            background: linear-gradient(90deg, transparent, rgba(255, 251, 244, .32), transparent);
            transform: translateX(-145%) rotate(18deg);
            animation: shineSweep 6.5s ease-in-out infinite;
        }

        #hero {
            position: relative;
            min-height: 100vh;
            overflow: hidden;
            isolation: isolate;
            padding: 7.5rem 0 5rem;
            max-width: 100vw;
            background-image:
                linear-gradient(90deg, rgba(244, 239, 229, .95) 0%, rgba(244, 239, 229, .86) 46%, rgba(244, 239, 229, .70) 100%),
                url('../backgrounds/reliquest-hero-bg.webp');
            background-size: cover;
            background-position: center;
        }
        #hero::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at 65% 45%, rgba(168, 115, 40, .16), transparent 26rem),
                linear-gradient(180deg, transparent 72%, var(--bg) 100%);
        }
        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
            align-items: center;
            gap: 3.25rem;
        }
        .hero-copy { max-width: 620px; animation: fadeUp .8s ease .08s both; position: relative; z-index: 10; }
        .hero-brand {
            display: inline-flex;
            align-items: center;
            gap: .85rem;
            margin-bottom: 1.4rem;
        }
        .hero-brand img {
            width: 64px;
            height: 64px;
            border-radius: 18px;
            border: 1px solid var(--gold-border);
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(91, 46, 18, .20), 0 0 0 5px rgba(168, 115, 40, .08);
        }
        .hero-brand strong {
            color: var(--accent);
            font-family: 'Cinzel', serif;
            font-size: 1.45rem;
            letter-spacing: .08em;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            margin-bottom: 1.1rem;
            padding: .43rem .95rem;
            border: 1px solid var(--gold-border);
            border-radius: 999px;
            background: rgba(255, 251, 244, .72);
            color: var(--accent-mid);
            font-size: .78rem;
            font-weight: 700;
        }
        .badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--forest);
            animation: pulse 2s infinite;
        }
        .hero-title {
            margin-bottom: 1.25rem;
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-size: 4.2rem;
            line-height: 1.04;
            font-weight: 700;
            letter-spacing: 0;
        }
        .hero-title em {
            display: block;
            color: var(--accent);
            font-family: 'Lora', serif;
            font-weight: 500;
        }
        .hero-sub {
            max-width: 590px;
            margin-bottom: 1.55rem;
            color: var(--text-body);
            font-family: 'Lora', serif;
            font-size: 1.15rem;
            line-height: 1.82;
        }
        .hero-proof {
            display: flex;
            flex-wrap: wrap;
            gap: .7rem;
            margin-bottom: 1.6rem;
        }
        .proof-chip {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            min-height: 36px;
            padding: .45rem .78rem;
            border: 1px solid rgba(91, 46, 18, .13);
            border-radius: 999px;
            background: rgba(255, 251, 244, .68);
            color: var(--text-body);
            font-size: .82rem;
            font-weight: 700;
            box-shadow: 0 6px 18px rgba(38, 24, 13, .05);
            transition: transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .proof-chip:hover { transform: translateY(-2px); border-color: rgba(168, 115, 40, .35); background: rgba(255, 251, 244, .86); }
        .proof-chip svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
        .proof-chip img {
            width: 18px;
            height: 18px;
            object-fit: contain;
            filter: drop-shadow(0 1px 2px rgba(91, 46, 18, .22));
        }
        .hero-form-wrap { width: min(100%, 510px); }
        .lead-form {
            display: grid;
            gap: 1.35rem;
        }
        .email-row {
            display: flex;
            gap: .55rem;
            min-height: 62px;
            padding: .42rem;
            border: 1px solid rgba(91, 46, 18, .18);
            border-radius: 14px;
            background: rgba(255, 251, 244, .86);
            box-shadow: 0 14px 45px rgba(38, 24, 13, .08);
            transition: border-color .2s ease, box-shadow .2s ease;
        }
        .email-row:focus-within {
            border-color: rgba(91, 46, 18, .45);
            box-shadow: 0 0 0 4px rgba(91, 46, 18, .08), 0 14px 45px rgba(38, 24, 13, .08);
        }
        .email-hint {
            margin: .45rem 0 0 .25rem;
            color: var(--muted);
            font-size: .78rem;
            opacity: .85;
        }
        .lead-checks {
            display: flex;
            flex-direction: column;
            gap: .65rem;
        }
        .email-in {
            min-width: 0;
            flex: 1;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--text);
            padding: .5rem .75rem;
            font-size: .96rem;
        }
        .email-in::placeholder { color: var(--muted); opacity: .7; }
        .btn-primary { min-height: 48px; padding: .7rem 1.2rem; white-space: nowrap; }
        .form-note, .cta-note {
            margin-top: .75rem;
            color: var(--muted);
            font-size: .78rem;
        }
        .form-ok {
            display: none;
            flex-direction: column;
            align-items: flex-start;
            gap: .55rem;
            padding: 1.15rem;
            border: 1px solid rgba(91, 46, 18, .14);
            border-radius: 14px;
            background: rgba(255, 251, 244, .84);
            box-shadow: var(--shadow-soft);
        }
        .form-ok strong {
            color: var(--accent);
            font-family: 'Cinzel', serif;
            font-size: .98rem;
        }
        .form-ok span { color: var(--muted); font-size: .9rem; }
        .json-export {
            display: none;
            min-height: 38px;
            padding: .55rem .8rem;
            font-size: .8rem;
            box-shadow: none;
        }
        .beta-check {
            display: flex;
            align-items: center;
            gap: .75rem;
            margin: 0;
            padding: .86rem .95rem;
            border: 1px solid rgba(91, 46, 18, .16);
            border-radius: 14px;
            background: rgba(255, 251, 244, .78);
            color: var(--text-body);
            cursor: pointer;
            user-select: none;
        }
        .beta-check input { position: absolute; opacity: 0; pointer-events: none; }
        .beta-box {
            display: grid;
            place-items: center;
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            background: var(--bg-white);
            transition: background .15s ease, border-color .15s ease;
        }
        .beta-box svg {
            width: 11px;
            height: 11px;
            opacity: 0;
            stroke: var(--bg-white);
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }
        .beta-check:has(input:checked) .beta-box { background: var(--forest); border-color: var(--forest); }
        .beta-check:has(input:checked) .beta-box svg { opacity: 1; }
        .beta-lbl { flex: 1; text-align: left; }
        .beta-lbl strong { display: block; color: var(--text); font-size: .88rem; line-height: 1.35; }
        .beta-lbl span { color: var(--muted); font-size: .8rem; line-height: 1.4; }

        .hero-platforms {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: .6rem;
            margin-top: 1.2rem;
        }
        .plat-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            min-height: 34px;
            padding: .42rem .72rem;
            border: 1px solid rgba(91, 46, 18, .13);
            border-radius: 9px;
            background: rgba(255, 251, 244, .70);
            color: var(--text-body);
            font-size: .8rem;
            font-weight: 700;
        }
        .plat-chip svg { width: 14px; height: 14px; }
        .chip-badge {
            padding: .1rem .36rem;
            border-radius: 5px;
            background: rgba(168, 115, 40, .13);
            color: var(--accent-mid);
            font-size: .62rem;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }
        .chip-later { color: var(--muted); background: rgba(80, 55, 35, .09); }

        .hero-visual {
            position: relative;
            min-height: 680px;
            animation: fadeUp .9s ease .2s both;
            z-index: 5;
        }
        .phone-stage {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            max-width: 100%;
            min-height: 680px;
        }
        .phone-stage::before {
            content: '';
            position: absolute;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(168, 115, 40, .18), transparent 68%);
            filter: blur(2px);
        }
        .phone {
            --rot: 0deg;
            position: relative;
            overflow: hidden;
            border: 7px solid #24170D;
            border-radius: 36px;
            background: #21150B;
            box-shadow: 0 26px 80px rgba(38, 24, 13, .28), 0 0 0 1px rgba(255, 255, 255, .12) inset;
            animation: floatPhone 6s ease-in-out infinite;
        }
        .phone::after {
            content: '';
            position: absolute;
            inset: -18% auto -18% -50%;
            width: 38%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
            transform: translateX(-145%) rotate(18deg);
            animation: shineSweep 8.5s ease-in-out infinite;
            animation-delay: 1.4s;
        }
        .phone img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            image-rendering: auto;
            transform: translateZ(0);
            backface-visibility: hidden;
        }
        .phone-main { z-index: 3; width: 286px; height: 622px; --rot: 1deg; }
        .phone-left { z-index: 2; width: 220px; height: 478px; position: absolute; left: 0; top: 138px; opacity: .96; --rot: -7deg; animation-delay: .7s; }
        .phone-right { z-index: 1; width: 214px; height: 465px; position: absolute; right: 0; top: 110px; opacity: .92; --rot: 6deg; animation-delay: 1.1s; }
        .vault-card {
            position: absolute;
            right: -4px;
            bottom: 34px;
            z-index: 4;
            width: 230px;
            padding: 1rem;
            border: 1px solid rgba(168, 115, 40, .34);
            border-radius: 14px;
            background: rgba(255, 251, 244, .86);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(6px);
        }
        .vault-card b {
            display: block;
            color: var(--accent);
            font-family: 'Cinzel', serif;
            font-size: .78rem;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .vault-card span { display: block; margin-top: .3rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }

        .problem-band, .seo-band, .compare-band, .usecases, .faq { position: relative; padding: 7rem 0; }
        .problem-grid, .seo-grid, .compare-grid, .usecase-grid {
            display: grid;
            gap: 1px;
            overflow: hidden;
            border: 1px solid rgba(91, 46, 18, .15);
            border-radius: 18px;
            background: rgba(91, 46, 18, .14);
            box-shadow: var(--shadow-soft);
        }
        .problem-grid { grid-template-columns: repeat(3, 1fr); }
        .seo-grid { grid-template-columns: repeat(3, 1fr); }
        .usecase-grid { grid-template-columns: repeat(5, 1fr); }
        .problem-card, .seo-card, .compare-card, .usecase-card, .faq-item {
            background: rgba(255, 251, 244, .78);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 251, 244, .18);
        }
        .problem-card, .seo-card, .usecase-card { padding: 1.6rem; }
        .problem-card strong, .seo-card strong, .usecase-card strong {
            display: block;
            margin-bottom: .5rem;
            color: var(--ink);
            font-family: 'Cinzel', serif;
            line-height: 1.25;
        }
        .problem-card p, .seo-card p, .usecase-card p { color: var(--muted); font-size: .92rem; line-height: 1.68; }
        .problem-icon {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            margin-bottom: 1rem;
            border-radius: 10px;
            background: var(--gold-soft);
            color: var(--gold);
            border: 1px solid var(--gold-border);
        }
        .problem-icon svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
        .section-head {
            max-width: 780px;
            margin: 0 auto 2.6rem;
            text-align: center;
        }
        .section-head h2 {
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-size: 2.35rem;
            line-height: 1.18;
        }
        .section-head h2 em { color: var(--accent); font-family: 'Lora', serif; font-weight: 500; }
        .section-head p { margin-top: 1rem; color: var(--text-body); font-family: 'Lora', serif; font-size: 1.02rem; line-height: 1.75; }

        .promise-band { padding: 4.8rem 0 3.5rem; }
        .promise-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1px;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: var(--border);
            box-shadow: var(--shadow-soft);
        }
        .promise {
            min-height: 160px;
            padding: 1.8rem;
            background: rgba(251, 246, 237, .82);
            transition: transform .2s ease, background .2s ease;
        }
        .promise:hover { transform: translateY(-3px); background: rgba(255, 251, 244, .92); }
        .promise strong {
            display: block;
            margin-bottom: .5rem;
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-size: 1.02rem;
        }
        .promise p { color: var(--muted); font-size: .94rem; line-height: 1.68; }
        .promise-mark {
            display: grid;
            place-items: center;
            width: 36px;
            height: 36px;
            margin-bottom: 1rem;
            border-radius: 10px;
            border: 1px solid var(--gold-border);
            color: var(--accent);
            background: rgba(255, 251, 244, .75);
            box-shadow: 0 8px 18px rgba(38, 24, 13, .08);
        }
        .promise:nth-child(2) .promise-mark { color: var(--forest); }
        .promise:nth-child(3) .promise-mark { color: var(--sapphire); }
        .promise-mark svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
        .promise-mark img {
            width: 28px;
            height: 28px;
            object-fit: contain;
            filter: drop-shadow(0 2px 3px rgba(91, 46, 18, .24));
        }

        #concept, #screens, #free, #devnote { position: relative; padding: 7.5rem 0; }
        .concept-grid, .screens-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
            gap: 4.5rem;
            align-items: center;
        }
        .section-copy h2, .features-head h2, .free-title, .cta-title {
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-weight: 700;
            line-height: 1.16;
            letter-spacing: 0;
        }
        .section-copy h2 { margin-bottom: 1.35rem; font-size: 2.35rem; }
        .section-copy h2 em, .features-head h2 em, .free-title em, .cta-title em {
            color: var(--accent);
            font-family: 'Lora', serif;
            font-weight: 500;
        }
        .section-copy p { color: var(--text-body); font-size: 1rem; line-height: 1.85; margin-bottom: 1rem; }
        .section-copy p:last-child { margin-bottom: 0; }
        .section-copy strong { color: var(--ink); }

        .relic-card, .stat-card, .devnote-card {
            border: 1px solid rgba(91, 46, 18, .15);
            border-radius: 18px;
            background: rgba(255, 251, 244, .78);
            box-shadow: var(--shadow);
            backdrop-filter: blur(10px);
        }
        .relic-card { overflow: hidden; }
        .relic-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.05rem 1.25rem;
            border-bottom: 1px solid var(--border-light);
            background: rgba(255, 251, 244, .72);
        }
        .relic-card-head span {
            color: var(--accent);
            font-family: 'Cinzel', serif;
            font-size: .82rem;
            font-weight: 700;
            letter-spacing: .08em;
            text-transform: uppercase;
        }
        .relic-card-head small { color: var(--muted); font-size: .76rem; }
        .relic-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: .9rem 1.25rem;
            border-bottom: 1px solid var(--border-light);
        }
        .relic-row:last-child { border-bottom: 0; }
        .relic-row-label { color: var(--text-body); font-size: .88rem; font-weight: 700; }
        .relic-row-val { color: var(--muted); font-size: .86rem; text-align: right; }
        .rtag {
            display: inline-flex;
            align-items: center;
            min-height: 24px;
            padding: .18rem .62rem;
            border-radius: 999px;
            font-size: .7rem;
            font-weight: 800;
            white-space: nowrap;
        }
        .rtag-green { background: rgba(47, 91, 73, .11); color: var(--forest); }
        .rtag-brown { background: rgba(91, 46, 18, .10); color: var(--accent-mid); }
        .rtag-blue { background: rgba(54, 89, 132, .12); color: var(--sapphire); }
        .rtag-wine { background: rgba(123, 46, 43, .10); color: var(--wine); }

        #features {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            padding: 7.5rem 0;
            background:
                linear-gradient(90deg, rgba(228, 220, 203, .95), rgba(228, 220, 203, .78)),
                url('../backgrounds/reliquest-archive-bg.webp');
            background-size: cover;
            background-position: center;
        }
        #features .wrap, #free .free-inner, #cta .cta-inner { position: relative; z-index: 1; }
        .features-head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
        .features-head h2 { font-size: 2.25rem; }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 1px;
            overflow: hidden;
            border: 1px solid rgba(91, 46, 18, .15);
            border-radius: 18px;
            background: rgba(91, 46, 18, .14);
            box-shadow: var(--shadow);
        }
        .fcard {
            min-height: 270px;
            padding: 2rem 1.55rem;
            background: rgba(255, 251, 244, .82);
            backdrop-filter: blur(8px);
            transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
        }
        .fcard:hover {
            transform: translateY(-4px);
            background: rgba(255, 251, 244, .94);
            box-shadow: 0 18px 38px rgba(38, 24, 13, .10);
        }
        .fcard-ico {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            margin-bottom: 1.1rem;
            border: 1px solid var(--gold-border);
            border-radius: 12px;
            background: var(--gold-soft);
            color: var(--gold);
        }
        .fcard-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
        .fcard-ico img {
            width: 31px;
            height: 31px;
            object-fit: contain;
            filter: drop-shadow(0 2px 3px rgba(91, 46, 18, .22));
        }
        .fcard h3 { margin-bottom: .55rem; color: var(--ink); font-family: 'Cinzel', serif; font-size: .98rem; }
        .fcard h3 em { color: var(--accent); font-family: 'Lora', serif; font-weight: 500; }
        .fcard p { color: var(--muted); font-size: .92rem; line-height: 1.7; }

        #screens { overflow: visible; max-width: 100vw; }
        .screens-copy { order: 2; }
        .screens-visual { order: 1; }
        .phones-row {
            position: relative;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: .8rem;
            min-height: 600px;
            max-width: 100%;
            overflow: visible;
        }
        .screen-shot {
            display: grid;
            justify-items: center;
            gap: .85rem;
        }
        .phones-row .phone { position: relative; inset: auto; animation: none; }
        .phones-row .phone-main { width: 230px; height: 500px; }
        .phones-row .phone-left, .phones-row .phone-right { width: 174px; height: 378px; top: auto; left: auto; right: auto; opacity: .96; margin-top: 2.8rem; }
        .screen-caption {
            max-width: 150px;
            color: var(--text-body);
            font-size: .78rem;
            font-weight: 700;
            line-height: 1.35;
            text-align: center;
        }
        .screen-caption span {
            display: block;
            margin-top: .18rem;
            color: var(--muted);
            font-size: .72rem;
            font-weight: 500;
        }
        .bullets { display: grid; gap: .85rem; }
        .bul {
            display: flex;
            gap: .9rem;
            align-items: flex-start;
            padding: 1rem;
            border: 1px solid rgba(91, 46, 18, .12);
            border-radius: 14px;
            background: rgba(255, 251, 244, .72);
        }
        .bul-ico {
            display: grid;
            place-items: center;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            border-radius: 10px;
            background: var(--gold-soft);
            color: var(--gold);
        }
        .bul-ico svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }
        .bul-ico img {
            width: 25px;
            height: 25px;
            object-fit: contain;
            filter: drop-shadow(0 2px 3px rgba(91, 46, 18, .20));
        }
        .bul strong { display: block; margin-bottom: .15rem; color: var(--ink); font-size: .9rem; }
        .bul span { color: var(--muted); font-size: .86rem; line-height: 1.5; }

        #free {
            overflow: hidden;
            isolation: isolate;
            text-align: center;
            background:
                linear-gradient(180deg, rgba(238, 232, 220, .94), rgba(238, 232, 220, .88)),
                url('../backgrounds/reliquest-archive-bg.webp');
            background-size: cover;
            background-position: center;
        }
        .free-inner { max-width: 760px; margin: 0 auto; padding: 0 2rem; }
        .free-title { margin-bottom: 1.1rem; font-size: 3rem; }
        .free-sub {
            margin-bottom: 2rem;
            color: var(--text-body);
            font-family: 'Lora', serif;
            font-size: 1.08rem;
            line-height: 1.8;
        }
        .free-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .85rem;
            text-align: left;
        }
        .free-item {
            display: flex;
            gap: .75rem;
            align-items: flex-start;
            padding: 1rem;
            border: 1px solid rgba(91, 46, 18, .12);
            border-radius: 14px;
            background: rgba(255, 251, 244, .76);
            color: var(--text-body);
            font-size: .93rem;
            transition: transform .18s ease, background .18s ease, border-color .18s ease;
        }
        .free-item:hover { transform: translateY(-2px); border-color: rgba(47, 91, 73, .24); background: rgba(255, 251, 244, .9); }
        .free-check {
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            flex: 0 0 22px;
            border-radius: 50%;
            background: var(--forest);
            color: var(--bg-white);
        }
        .free-check svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.4; }

        .compare-grid { grid-template-columns: repeat(3, 1fr); }
        .compare-card { padding: 1.65rem; }
        .compare-card h3 {
            margin-bottom: 1rem;
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-size: 1rem;
        }
        .compare-list { display: grid; gap: .75rem; }
        .compare-list li {
            list-style: none;
            display: flex;
            gap: .55rem;
            color: var(--muted);
            font-size: .9rem;
            line-height: 1.55;
        }
        .compare-list li::before {
            content: '';
            width: 7px;
            height: 7px;
            flex: 0 0 7px;
            margin-top: .52rem;
            border-radius: 50%;
            background: var(--gold);
        }
        .compare-card.reliquest { background: rgba(255, 251, 244, .92); box-shadow: inset 0 0 0 1px var(--gold-border); }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: .9rem;
        }
        .faq-item {
            padding: 1.35rem;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(38, 24, 13, .05);
        }
        .faq-item h3 {
            margin-bottom: .45rem;
            color: var(--ink);
            font-family: 'Cinzel', serif;
            font-size: .96rem;
            line-height: 1.35;
        }
        .faq-item p { color: var(--muted); font-size: .9rem; line-height: 1.65; }

        #cta {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            padding: 7.5rem 0;
            text-align: center;
            background:
                linear-gradient(180deg, rgba(228, 220, 203, .92), rgba(228, 220, 203, .88)),
                url('../backgrounds/reliquest-hero-bg.webp');
            background-size: cover;
            background-position: center;
        }
        .cta-inner { width: min(100%, 560px); margin: 0 auto; padding: 0 2rem; }
        .cta-title { margin-bottom: .9rem; font-size: 2.65rem; }
        .cta-sub { margin-bottom: 1.7rem; color: var(--text-body); font-size: 1rem; line-height: 1.75; }
        .cta-col { display: grid; gap: .75rem; }
        .cta-col .btn-primary { min-width: 140px; }
        .cta-col .form-ok { margin: 0 auto; text-align: left; }

        #devnote { padding-bottom: 6rem; }
        .devnote-inner { width: min(100%, 780px); margin: 0 auto; padding: 0 2rem; }
        .devnote-card {
            position: relative;
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 2.2rem;
            padding: 2.6rem;
            overflow: hidden;
        }
        .devnote-card::before {
            content: '◆';
            position: absolute;
            right: 1rem;
            bottom: -2.2rem;
            color: var(--gold);
            font-size: 8rem;
            line-height: 1;
            opacity: .05;
        }
        .devnote-avatar {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--gold-border);
            box-shadow: 0 0 0 5px rgba(168, 115, 40, .08), 0 8px 20px rgba(38, 24, 13, .15);
        }
        .devnote-from {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: .55rem;
            margin-bottom: 1rem;
        }
        .devnote-from strong { color: var(--accent); font-family: 'Cinzel', serif; letter-spacing: .04em; }
        .devnote-from span {
            padding: .18rem .55rem;
            border-radius: 999px;
            background: rgba(91, 46, 18, .08);
            color: var(--muted);
            font-size: .78rem;
        }
        .devnote-quote {
            color: var(--text-body);
            font-family: 'Lora', serif;
            font-size: 1.02rem;
            line-height: 1.82;
        }
        .devnote-quote p + p { margin-top: 1rem; }
        .devnote-quote em { color: var(--accent); }
        .devnote-support {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            margin-top: 1.4rem;
            padding: .62rem .9rem;
            border: 1px solid var(--gold-border);
            border-radius: 10px;
            background: var(--gold-soft);
            color: var(--accent-mid);
            font-size: .84rem;
            font-weight: 700;
        }
        .devnote-support svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

        footer {
            padding: 3rem 2rem 2.5rem;
            border-top: 1px solid rgba(91, 46, 18, .12);
            text-align: center;
        }
        .footer-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .65rem;
            margin-bottom: .7rem;
        }
        .footer-logo img {
            width: 38px;
            height: 38px;
            border-radius: 10px;
            border: 1px solid var(--gold-border);
            object-fit: cover;
        }
        .footer-logo strong { color: var(--accent); font-family: 'Cinzel', serif; font-size: .92rem; letter-spacing: .08em; }
        .footer-tag { color: var(--muted); font-family: 'Lora', serif; font-style: italic; }
        .footer-meta { margin-top: .35rem; color: var(--muted); font-size: .78rem; opacity: .7; }

        @media (max-width: 1060px) {
            .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
            .hero-copy { max-width: 760px; text-align: center; margin: 0 auto; }
            .hero-brand, .hero-badge, .hero-proof, .hero-platforms { justify-content: center; }
            .hero-form-wrap { margin: 0 auto; text-align: left; }
            .hero-visual { min-height: 500px; max-width: 620px; width: 100%; margin: 0 auto; }
            .phone-stage { min-height: 560px; }
            .phone-main { width: 240px; height: 522px; }
            .phone-left { width: 188px; height: 409px; left: 28px; top: 112px; }
            .phone-right { width: 184px; height: 400px; right: 32px; top: 88px; }
            .vault-card { right: 22px; bottom: 42px; }
            .features-grid { grid-template-columns: repeat(2, 1fr); }
            .problem-grid, .seo-grid, .compare-grid, .usecase-grid { grid-template-columns: repeat(2, 1fr); }
            .concept-grid, .screens-grid { grid-template-columns: 1fr; gap: 3rem; }
            .screens-copy { order: 1; }
            .screens-visual { order: 2; overflow: visible; max-width: 100%; }
        }

        @media (max-width: 720px) {
            .wrap, .narrow, .free-inner, .cta-inner, .devnote-inner { padding: 0 1.15rem; }
            #nav { padding: .8rem 1rem; background: rgba(238, 232, 220, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
            #nav .logo { opacity: 1; pointer-events: auto; transform: none; }
            .logo-name { display: inline; font-size: .9rem; }
            .nav-links { display: none; }
            .nav-cta { display: none; }
            .nav-burger { display: flex; }
            #hero { padding: 5.8rem 0 2rem; }
            .hero-grid { gap: 1.7rem; }
            .hero-brand { margin-bottom: 1rem; }
            .hero-brand img { width: 54px; height: 54px; border-radius: 15px; }
            .hero-brand strong { font-size: 1.18rem; }
            .hero-title { font-size: 2.55rem; }
            .hero-sub { font-size: 1rem; line-height: 1.7; }
            .hero-visual { min-height: auto; overflow: visible; max-width: 100%; margin-top: 4rem; }
            .phone-stage { transform: scale(0.85); transform-origin: center center; margin-top: 0; width: 100%; max-width: 100%; position: relative; min-height: 420px; }
            .phone-main { width: 142px; height: 309px; }
            .phone-left { width: 131px; height: 285px; left: -10px; top: 65px; }
            .phone-right { width: 128px; height: 277px; right: -10px; top: 50px; }
            .vault-card { display: none; }
            .email-row { flex-direction: column; padding: .5rem; }
            .email-in { min-height: 42px; padding: .45rem .65rem; }
            .btn-primary { width: 100%; }
            .hero-platforms { margin-top: 1rem; }
            .promise-band { padding: 3.2rem 0 2.7rem; }
            .promise-grid, .features-grid, .free-list { grid-template-columns: 1fr; }
            .promise { min-height: auto; padding: 1.25rem; }
            #concept, #features, #screens, #free, #cta, #devnote,
            .problem-band, .seo-band, .compare-band, .usecases, .faq { padding: 5rem 0; }
            .section-copy h2, .features-head h2, .section-head h2 { font-size: 1.85rem; }
            .problem-grid, .seo-grid, .compare-grid, .usecase-grid, .faq-grid { grid-template-columns: 1fr; }
            .free-title { font-size: 2.2rem; }
            .cta-title { font-size: 2.05rem; }
            .phones-row { min-height: 390px; gap: .4rem; overflow: visible; width: 100vw; max-width: 100vw; margin-left: calc(-50vw + 50%); padding: 0 1rem; box-sizing: border-box; transform: scale(0.92); }
            .phones-row .phone-main { width: 168px; height: 365px; }
            .phones-row .phone-left, .phones-row .phone-right { width: 128px; height: 278px; }
            .screen-caption { max-width: 110px; font-size: .68rem; }
            .screen-caption span { display: none; }
            .phone { border-width: 5px; border-radius: 30px; }
            .screen-shot { flex-shrink: 0; }
            .devnote-card { grid-template-columns: 1fr; gap: 1.35rem; padding: 1.55rem; }
            .devnote-avatar { width: 64px; height: 64px; }
        }

        @media (max-width: 430px) {
            .hero-title { font-size: 2.18rem; }
            .hero-proof { justify-content: flex-start; }
            .proof-chip { width: 100%; justify-content: center; }
            .hero-visual { min-height: auto; overflow: visible; margin-top: 3rem; }
            .phone-stage { transform: scale(0.85); transform-origin: center center; min-height: 360px; }
            .phone-main { width: 155px; height: 337px; }
            .phone-left { width: 120px; height: 260px; left: -5px; top: 55px; }
            .phone-right { width: 117px; height: 254px; right: -5px; top: 45px; }
            .plat-chip { flex: 1 1 auto; justify-content: center; }
            .relic-row { align-items: flex-start; flex-direction: column; gap: .25rem; }
            .relic-row-val { text-align: left; }
        }

        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: .01ms !important;
            }
            .mote { display: none; }
        }
/* ── Consent banner ── */
#consent-banner {
    display: none;
    position: fixed;
    bottom: 1.2rem;
    right: 1.2rem;
    left: auto;
    transform: none;
    z-index: 9999;
    width: min(300px, calc(100% - 2.4rem));
    flex-direction: column;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgba(255, 251, 244, .96);
    backdrop-filter: blur(18px);
    color: var(--text-body);
    font-size: .8rem;
    line-height: 1.5;
    box-shadow: 0 8px 40px rgba(38, 24, 13, .18);
}
#consent-banner p { margin: 0; }
.consent-actions { display: flex; gap: .5rem; }
.consent-btn {
    flex: 1;
    min-height: 32px;
    padding: .35rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.consent-btn--accept {
    background: var(--forest);
    color: #fff;
    border-color: var(--forest);
}
.consent-btn--accept:hover { background: #254a3b; }
.consent-btn--refuse:hover { background: rgba(80, 55, 35, .08); }

/* ── Message de succès formulaire ── */
.form-ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    padding: 2rem 1.5rem;
    border: 1px solid var(--gold-border);
    border-radius: 14px;
    background: var(--gold-soft);
    text-align: center;
}
.form-ok-icon {
    color: var(--forest);
    animation: scaleIn .4s ease;
}
.form-ok strong {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
}
.form-ok-msg {
    color: var(--text-body);
    font-size: .92rem;
    line-height: 1.6;
}
@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* ── Journal ─────────────────────────────────────────────────────────────────── */

/* Nav links (journal + CTA dans la nav) */
.nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-right: .25rem;
}
.nav-link {
    color: var(--accent);
    font-family: 'Cinzel', serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .82;
    transition: opacity .18s ease;
}
.nav-link:hover { opacity: 1; }

/* Footer nav */
.footer-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: .65rem;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-nav a {
    color: var(--muted);
    font-size: .82rem;
    transition: color .18s ease;
}
.footer-nav a:hover { color: var(--accent); }

/* ── Journal hero ── */
.journal-hero {
    position: relative;
    padding: 8.5rem 0 5rem;
    overflow: hidden;
    isolation: isolate;
    background-image:
        linear-gradient(160deg, rgba(244,239,229,.97) 0%, rgba(233,226,213,.95) 100%),
        url('/assets/backgrounds/reliquest-archive-bg.webp');
    background-size: cover;
    background-position: center;
}
.journal-breadcrumb {
    margin-bottom: 1.75rem;
    color: var(--muted);
    font-size: .8rem;
}
.journal-breadcrumb a { color: var(--muted); transition: color .18s ease; }
.journal-breadcrumb a:hover { color: var(--accent); }
.journal-hero-copy { text-align: center; }
.journal-hero-copy h1 {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: .9rem;
}
.journal-hero-copy h1 em {
    display: block;
    color: var(--accent);
    font-family: 'Lora', serif;
    font-weight: 500;
    font-style: italic;
}
.journal-hero-sub {
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: 1.05rem;
    line-height: 1.78;
    max-width: 520px;
    margin: 0 auto;
}

/* ── Journal grid ── */
.journal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
    gap: 2rem;
    padding: 4rem 0 6rem;
}
.journal-grid--preview { padding-bottom: 0; }

.jcard {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: transform .2s ease, box-shadow .2s ease;
}
.jcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}
.jcard:focus-visible {
    outline: 3px solid rgba(91, 46, 18, .28);
    outline-offset: 4px;
}
.jcard-cover {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-alt);
}
.jcard-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.jcard:hover .jcard-cover img { transform: scale(1.03); }
.jcard-cover-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 2.2rem;
    font-family: 'Cinzel', serif;
    opacity: .28;
}
.jcard-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.6rem;
    gap: .7rem;
}
.jcard-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}
.jcard-date {
    color: var(--muted);
    font-size: .78rem;
}
.jcard-category {
    display: inline-block;
    padding: .18rem .5rem;
    border: 1px solid var(--gold-border);
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--accent-mid);
    font-size: .68rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.jcard-title {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
}
.jcard-excerpt {
    flex: 1;
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: .9rem;
    line-height: 1.72;
}
.jcard-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .25rem;
    color: var(--accent);
    font-size: .84rem;
    font-weight: 700;
    transition: gap .18s ease;
}
.jcard-link:hover { gap: .7rem; }
.jcard:hover .jcard-link { gap: .7rem; }
.jcard-link svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Journal empty state ── */
.journal-empty {
    text-align: center;
    padding: 5rem 0 7rem;
    color: var(--muted);
    font-family: 'Lora', serif;
    font-size: 1rem;
}

/* ── Article page ── */
.article-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 2rem;
}
.article-back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: 7rem 0 0;
    color: var(--muted);
    font-size: .84rem;
    transition: color .18s ease, gap .18s ease;
}
.article-back:hover { color: var(--accent); gap: .28rem; }
.article-back svg { width: 14px; height: 14px; flex-shrink: 0; }

.article-header { padding: 1.5rem 0 2.5rem; }
.article-meta {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.article-date  { color: var(--muted); font-size: .82rem; }
.article-updated { color: var(--muted); font-size: .75rem; opacity: .75; }

.article-title {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-bottom: 1.2rem;
}
.article-intro {
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: 1.1rem;
    line-height: 1.82;
    font-style: italic;
}
.article-cover {
    width: 100%;
    border-radius: var(--radius);
    margin: 1.5rem 0;
    border: 1px solid var(--border);
    display: block;
}

.article-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.25rem 0;
    opacity: .28;
}
.article-divider-line { flex: 1; height: 1px; background: var(--accent-mid); }
.article-divider-gem {
    color: var(--gold);
    font-size: .42rem;
    letter-spacing: .45em;
    white-space: nowrap;
}

.article-body { margin-bottom: 1rem; }
.article-body p {
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.88;
    margin-bottom: 1em;
}
.article-body p:last-child { margin-bottom: 0; }

.article-section { margin-bottom: 2.75rem; }
.article-section-label {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .75rem;
    color: var(--accent-mid);
    font-family: 'Cinzel', serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.article-section-label::before {
    content: '';
    width: 16px;
    height: 1px;
    background: currentColor;
    opacity: .45;
    flex-shrink: 0;
}
.article-section h2 {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: .9rem;
}

.article-summary {
    margin: 2.5rem 0;
    padding: 1.5rem 1.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius);
}
.article-summary-title {
    color: var(--accent);
    font-family: 'Cinzel', serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.article-summary ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.article-summary li {
    display: flex;
    align-items: baseline;
    gap: .65rem;
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: .95rem;
    line-height: 1.55;
}
.article-summary li::before {
    content: '◆';
    color: var(--gold);
    font-size: .48rem;
    flex-shrink: 0;
    position: relative;
    top: -.1em;
}

.article-infographic {
    margin: 2.5rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.article-infographic img { width: 100%; display: block; }
.article-infographic figcaption {
    padding: .7rem 1rem;
    background: var(--bg-alt);
    color: var(--muted);
    font-size: .78rem;
    font-family: 'Lora', serif;
    font-style: italic;
    text-align: center;
}

/* ── Article CTA ── */
.article-cta {
    position: relative;
    margin: 3rem 0 5rem;
    padding: 2.25rem 2rem;
    background: var(--bg-card);
    border: 1px solid var(--gold-border);
    border-radius: var(--radius);
    text-align: center;
    overflow: hidden;
}
.article-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(168,115,40,.09), transparent 68%);
    pointer-events: none;
}
.article-cta-title {
    position: relative;
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .65rem;
}
.article-cta-text {
    position: relative;
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: .95rem;
    line-height: 1.72;
    margin-bottom: 1.5rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.article-cta .btn-primary {
    position: relative;
    font-size: .9rem;
    text-decoration: none;
}

/* ── Section aperçu journal sur la landing ── */
#journal-preview {
    padding: 6rem 0 7rem;
    position: relative;
}
.journal-preview-head {
    text-align: center;
    margin-bottom: .5rem;
}
.journal-preview-head h2 {
    color: var(--ink);
    font-family: 'Cinzel', serif;
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: .65rem;
}
.journal-preview-head h2 em {
    color: var(--accent);
    font-family: 'Lora', serif;
    font-weight: 500;
    font-style: italic;
}
.journal-preview-head p {
    color: var(--text-body);
    font-family: 'Lora', serif;
    font-size: 1rem;
    line-height: 1.72;
    max-width: 500px;
    margin: 0 auto;
}
.journal-preview-more {
    text-align: center;
    margin-top: 2.5rem;
}
.journal-preview-more a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    color: var(--accent);
    font-size: .88rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    letter-spacing: .05em;
    transition: gap .18s ease;
}
.journal-preview-more a:hover { gap: .8rem; }
.journal-preview-more a svg { width: 14px; height: 14px; }

/* ── Responsive journal ── */
@media (max-width: 860px) {
    .article-title { font-size: 1.9rem; }
    .journal-hero-copy h1 { font-size: 2.4rem; }
}
@media (max-width: 720px) {
    .article-title { font-size: 1.55rem; }
    .article-wrap { padding: 0 1.15rem; }
    .article-back { padding-top: 5.5rem; }
    .journal-hero { padding: 6.5rem 0 3rem; }
    .journal-hero-copy h1 { font-size: 1.9rem; }
    .journal-grid { grid-template-columns: 1fr; padding: 3rem 0 5rem; }
    .journal-grid--preview { padding-bottom: 0; }
    #journal-preview { padding: 4.5rem 0 5.5rem; }
    .journal-preview-head h2 { font-size: 1.7rem; }
}

/* ── Mobile nav hamburger ── */
.nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
    display: block;
    position: relative;
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: background .2s ease;
}
.nav-burger span::before,
.nav-burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: transform .25s ease, top .25s ease;
}
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-burger.open span { background: transparent; }
.nav-burger.open span::before { top: 0; transform: rotate(45deg); background: var(--accent); }
.nav-burger.open span::after { top: 0; transform: rotate(-45deg); background: var(--accent); }

.nav-mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 499;
    padding: 5rem 1.5rem 2rem;
    background: rgba(238, 232, 220, .97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 24px rgba(38, 24, 13, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
    visibility: hidden;
}
.nav-mobile-menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}
.nav-mobile-menu a {
    color: var(--accent);
    font-family: 'Cinzel', serif;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .5rem 0;
}
.nav-mobile-menu .nav-mobile-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #6B3816, var(--accent));
    color: var(--bg-white);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px rgba(91, 46, 18, .18);
    margin-top: .5rem;
}

@media (min-width: 721px) {
    .nav-mobile-menu { display: none; }
    .nav-burger { display: none; }
    .nav-links { display: flex; }
}

/* ─── Lexicon (traduction du vocabulaire) ──────────────────────────────────── */
.lexicon {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    align-items: baseline;
    margin-top: 1.5rem;
    padding: .85rem 1.1rem;
    border: 1px dashed var(--gold-border);
    border-radius: 12px;
    background: var(--gold-soft);
    font-size: .86rem;
    color: var(--text-body);
    line-height: 1.7;
}
.lexicon em {
    color: var(--accent);
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: 500;
    margin-right: .3rem;
}
.lexicon span {
    color: var(--text-body);
}
.lexicon span + span::before {
    content: '·';
    color: var(--gold);
    margin-right: .85rem;
    opacity: .6;
}
.lexicon b {
    color: var(--accent);
    font-weight: 700;
}

/* ─── Mid-page CTA ─────────────────────────────────────────────────────────── */
.mid-cta {
    padding: 3rem 0 1rem;
}
.mid-cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem 2rem;
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(168, 115, 40, .07), rgba(168, 115, 40, .14));
    border: 1px solid var(--gold-border);
    box-shadow: var(--shadow-soft);
}
.mid-cta-kicker {
    font-family: 'Cinzel', serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0;
}
.mid-cta-title {
    flex: 1 1 320px;
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.4;
    margin: 0;
}
.mid-cta-title em {
    color: var(--accent);
    font-family: 'Lora', serif;
    font-weight: 500;
}
.mid-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .85rem 1.6rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #6B3816, var(--accent));
    color: var(--bg-white);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    letter-spacing: .01em;
    box-shadow: 0 10px 22px rgba(91, 46, 18, .18);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mid-cta-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #794018, var(--accent-hover));
    box-shadow: 0 14px 28px rgba(91, 46, 18, .25);
}
.mid-cta-btn svg {
    width: 16px;
    height: 16px;
    transition: transform .18s ease;
}
.mid-cta-btn:hover svg { transform: translateX(3px); }

/* ─── Roadmap & momentum ──────────────────────────────────────────────────── */
.roadmap-band {
    padding: 5rem 0 4.5rem;
}
.momentum-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem .9rem;
    margin: 1.75rem 0 2.5rem;
}
.momentum-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    color: var(--text-body);
    font-size: .82rem;
    box-shadow: var(--shadow-soft);
}
.momentum-badge strong {
    color: var(--accent);
    font-weight: 700;
}
.momentum-badge svg {
    width: 14px;
    height: 14px;
    color: var(--gold);
    flex-shrink: 0;
}
.pulse-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--forest);
    box-shadow: 0 0 0 0 rgba(47, 91, 73, .55);
    animation: pulseDot 2.2s ease-out infinite;
}
@keyframes pulseDot {
    0%   { box-shadow: 0 0 0 0 rgba(47, 91, 73, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(47, 91, 73, 0); }
    100% { box-shadow: 0 0 0 0 rgba(47, 91, 73, 0); }
}

.roadmap-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 1000px;
}
.roadmap-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    transition: transform .2s ease;
}
.roadmap-step:hover { transform: translateY(-2px); }
.roadmap-step-marker {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-white);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    flex-shrink: 0;
}
.roadmap-step-body {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
.roadmap-step-body strong {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: .02em;
}
.roadmap-step-body span {
    color: var(--muted);
    font-size: .85rem;
    line-height: 1.55;
}
.roadmap-step-pill {
    position: absolute;
    top: -10px;
    right: 14px;
    padding: .2rem .7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #6B3816, var(--accent));
    color: var(--bg-white);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 6px 14px rgba(91, 46, 18, .18);
}
.roadmap-step-pill--done {
    background: var(--forest);
    box-shadow: 0 6px 14px rgba(47, 91, 73, .22);
}

.roadmap-step--done {
    opacity: .85;
}
.roadmap-step--done .roadmap-step-marker {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--bg-white);
}
.roadmap-step--current {
    border-color: var(--gold-border);
    background: linear-gradient(135deg, rgba(168, 115, 40, .07), var(--bg-card) 65%);
    box-shadow: var(--shadow), inset 0 0 0 1px var(--gold-border);
}
.roadmap-step--current .roadmap-step-marker {
    background: linear-gradient(180deg, #6B3816, var(--accent));
    border-color: var(--accent);
    color: var(--bg-white);
}
.roadmap-step--todo .roadmap-step-marker {
    color: var(--muted);
}

@media (max-width: 720px) {
    .mid-cta { padding: 2rem 0 .5rem; }
    .mid-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.3rem 1.2rem;
        gap: 1rem;
    }
    .mid-cta-title { font-size: 1.1rem; }
    .mid-cta-btn { width: 100%; justify-content: center; }

    .roadmap-band { padding: 3.5rem 0 3rem; }
    .roadmap-steps { grid-template-columns: 1fr; gap: 1rem; }
    .roadmap-step-pill { top: -8px; right: 10px; font-size: .62rem; }

    .lexicon { font-size: .8rem; padding: .75rem .9rem; }
}