/* =========================================================
   PREMIUM QR CODES
   LINK IN BIO LANDING PAGE V1
   ========================================================= */

body.pqr-link-bio-page {
    --lib-ink:#101626;
    --lib-muted:#667086;
    --lib-line:rgba(94,79,153,.13);
    --lib-card:rgba(255,255,255,.82);
    --lib-soft:rgba(248,249,255,.82);
    --lib-accent:#6547eb;
    --lib-accent-2:#22b6d2;
    --lib-shadow:
        0 22px 65px rgba(49,39,94,.10),
        inset 0 1px 0 rgba(255,255,255,.88);

    color:var(--lib-ink);

    background:
        radial-gradient(
            circle at 8% 3%,
            rgba(34,182,210,.09),
            transparent 31rem
        ),
        radial-gradient(
            circle at 92% 5%,
            rgba(101,71,235,.12),
            transparent 35rem
        ),
        #f4f6ff !important;

    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

html[data-pqr-theme="midnight"]
body.pqr-link-bio-page,
html[data-bs-theme="dark"]
body.pqr-link-bio-page {
    --lib-ink:#f5f7ff;
    --lib-muted:#aab2c5;
    --lib-line:rgba(255,255,255,.10);
    --lib-card:rgba(14,18,29,.80);
    --lib-soft:rgba(20,25,39,.78);
    --lib-shadow:
        0 24px 70px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.07);

    background:
        radial-gradient(
            circle at 8% 3%,
            rgba(27,172,198,.08),
            transparent 30rem
        ),
        radial-gradient(
            circle at 92% 4%,
            rgba(105,69,220,.14),
            transparent 34rem
        ),
        #07090f !important;
}

.lib-shell {
    width:min(1320px,calc(100% - 32px));
    margin:0 auto;
}

.pqr-link-bio-page .pqr-site-header .container {
    width:100%;
    max-width:1380px;
    margin:0 auto;
    padding:0 22px;
}

.pqr-link-bio-page .pqr-header-inner {
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
}

.pqr-link-bio-page .pqr-brand {
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--lib-ink);
    text-decoration:none;
    font-size:15px;
    font-weight:850;
}

.pqr-link-bio-page .pqr-brand-mark {
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    color:#fff;
    background:
        linear-gradient(135deg,#7655f2,#5432d3);
    box-shadow:
        0 8px 20px rgba(84,50,211,.24);
}

.pqr-link-bio-page .pqr-header-nav {
    display:flex;
    align-items:center;
    gap:5px;
}

.pqr-link-bio-page .pqr-nav-link {
    min-height:39px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 12px;
    border-radius:10px;
    color:var(--lib-muted);
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.pqr-link-bio-page .pqr-nav-link:hover {
    color:var(--lib-ink);
    background:var(--lib-soft);
}

.pqr-link-bio-page .pqr-nav-primary {
    color:var(--lib-accent);
    background:
        color-mix(
            in srgb,
            var(--lib-accent) 10%,
            transparent
        );
}


/* HERO */

.lib-hero {
    padding:52px 0 64px;
}

.lib-breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:26px;
    color:var(--lib-muted);
    font-size:12px;
    font-weight:750;
}

.lib-breadcrumb a {
    color:var(--lib-accent);
    text-decoration:none;
}

.lib-hero-grid {
    display:grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(360px,.85fr);
    gap:64px;
    align-items:center;
}

.lib-eyebrow,
.lib-section-kicker {
    width:fit-content;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 11px;
    border:1px solid var(--lib-line);
    border-radius:999px;
    color:var(--lib-accent);
    background:var(--lib-card);
    font-size:11px;
    font-weight:850;
    letter-spacing:.035em;
}

.lib-hero h1 {
    max-width:760px;
    margin:16px 0 0;
    color:var(--lib-ink);
    font-size:clamp(42px,6vw,72px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:900;
}

.lib-answer {
    max-width:790px;
    margin:26px 0 0;
    padding:17px 19px;
    border:1px solid
        color-mix(
            in srgb,
            var(--lib-accent) 22%,
            var(--lib-line)
        );
    border-radius:17px;
    background:
        color-mix(
            in srgb,
            var(--lib-card) 90%,
            var(--lib-accent) 10%
        );
}

.lib-answer strong {
    display:block;
    margin-bottom:5px;
    font-size:13px;
}

.lib-answer p {
    margin:0;
    color:var(--lib-muted);
    font-size:14px;
    line-height:1.7;
}

.lib-hero-lead {
    max-width:760px;
    margin:22px 0 0;
    color:var(--lib-muted);
    font-size:17px;
    line-height:1.75;
}

.lib-hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:27px;
}

.lib-primary-action,
.lib-secondary-action {
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 18px;
    border-radius:13px;
    text-decoration:none;
    font-size:13px;
    font-weight:850;
}

.lib-primary-action {
    color:#fff;
    background:
        linear-gradient(135deg,#7655f2,#5432d3);
    box-shadow:
        0 11px 25px rgba(85,50,211,.25);
}

.lib-secondary-action {
    border:1px solid var(--lib-line);
    color:var(--lib-ink);
    background:var(--lib-card);
}

.lib-signin-note {
    margin:11px 0 0;
    color:var(--lib-muted);
    font-size:11px;
}

.lib-intent-route {
    margin-top:18px;
    color:var(--lib-muted);
    font-size:12px;
}

.lib-intent-route a,
.lib-text-link {
    color:var(--lib-accent);
    font-weight:800;
    text-decoration:none;
}


/* PRODUCT MOCKUP */

.lib-product-preview {
    padding:20px;
    border:1px solid var(--lib-line);
    border-radius:26px;
    background:var(--lib-card);
    box-shadow:var(--lib-shadow);
    backdrop-filter:blur(18px);
}

.lib-preview-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.lib-preview-top span {
    color:var(--lib-accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.12em;
}

.lib-preview-top strong {
    color:var(--lib-muted);
    font-size:10px;
}

.lib-phone {
    width:min(100%,300px);
    margin:0 auto;
    padding:8px;
    border-radius:34px;
    background:#111827;
    box-shadow:
        0 22px 45px rgba(15,23,42,.18);
}

.lib-phone-screen {
    min-height:500px;
    padding:44px 20px 22px;
    border-radius:27px;
    text-align:center;
    background:
        linear-gradient(
            145deg,
            #edf4ff,
            #fbfbff
        );
    color:#172033;
}

.lib-demo-avatar {
    width:72px;
    height:72px;
    display:grid;
    place-items:center;
    margin:0 auto 13px;
    border:3px solid #fff;
    border-radius:50%;
    color:#6547eb;
    background:#eeeaff;
    font-size:25px;
    box-shadow:
        0 7px 20px rgba(15,23,42,.08);
}

.lib-demo-name {
    display:block;
    font-size:17px;
}

.lib-demo-bio {
    margin:6px 0 20px;
    color:#64748b;
    font-size:11px;
}

.lib-demo-link {
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-bottom:9px;
    padding:8px 12px;
    border-radius:14px;
    background:#fff;
    box-shadow:
        0 6px 18px rgba(15,23,42,.06);
    font-size:11px;
    font-weight:800;
}

.lib-demo-brand {
    margin-top:30px;
    color:#94a3b8;
    font-size:9px;
}

.lib-preview-meta {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:14px;
}

.lib-preview-meta div {
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid var(--lib-line);
    border-radius:11px;
    color:var(--lib-muted);
    background:var(--lib-soft);
    font-size:9px;
    font-weight:800;
}

.lib-preview-meta i {
    color:var(--lib-accent);
}


/* MAIN */

.lib-main {
    padding:10px 0 84px;
}

.lib-section {
    margin-top:26px;
    padding:44px;
    border:1px solid var(--lib-line);
    border-radius:25px;
    background:var(--lib-card);
    box-shadow:var(--lib-shadow);
}

.lib-section-soft {
    background:
        color-mix(
            in srgb,
            var(--lib-card) 72%,
            var(--lib-accent) 3%
        );
}

.lib-section-head {
    max-width:780px;
    margin-bottom:29px;
}

.lib-section-head h2,
.lib-qr-copy h2,
.lib-storage-section h2,
.lib-final-cta h2 {
    margin:13px 0 9px;
    color:var(--lib-ink);
    font-size:clamp(27px,4vw,40px);
    line-height:1.08;
    letter-spacing:-.04em;
    font-weight:900;
}

.lib-section-head > p,
.lib-qr-copy > p,
.lib-storage-section p,
.lib-final-cta p {
    margin:0;
    color:var(--lib-muted);
    font-size:14px;
    line-height:1.75;
}

.lib-feature-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:14px;
}

.lib-feature-card,
.lib-use-grid article,
.lib-behavior-grid article,
.lib-boundary-grid article,
.lib-help-grid article,
.lib-faq article {
    padding:20px;
    border:1px solid var(--lib-line);
    border-radius:17px;
    background:var(--lib-soft);
}

.lib-feature-card > i,
.lib-use-grid article > i {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin-bottom:15px;
    border-radius:12px;
    color:var(--lib-accent);
    background:
        color-mix(
            in srgb,
            var(--lib-accent) 10%,
            transparent
        );
}

.lib-section h3 {
    margin:0 0 7px;
    color:var(--lib-ink);
    font-size:15px;
    line-height:1.35;
    font-weight:850;
}

.lib-section article p {
    margin:0;
    color:var(--lib-muted);
    font-size:12px;
    line-height:1.7;
}

.lib-section article a {
    color:var(--lib-accent);
    font-weight:800;
}


/* STEPS */

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

.lib-step {
    position:relative;
    min-height:180px;
    padding:20px;
    border:1px solid var(--lib-line);
    border-radius:17px;
    background:var(--lib-card);
}

.lib-step > span {
    display:block;
    margin-bottom:24px;
    color:
        color-mix(
            in srgb,
            var(--lib-accent) 62%,
            var(--lib-muted)
        );
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.lib-step p {
    margin:0;
    color:var(--lib-muted);
    font-size:12px;
    line-height:1.7;
}


/* USES */

.lib-use-grid {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:12px;
}


/* QR */

.lib-qr-section {
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        minmax(330px,.7fr);
    gap:48px;
    align-items:center;
    overflow:hidden;
}

.lib-qr-copy p + p {
    margin-top:12px;
}

.lib-text-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-top:18px;
    font-size:12px;
}

.lib-qr-visual {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
}

.lib-qr-frame {
    width:140px;
    height:140px;
    display:grid;
    place-items:center;
    border:1px solid var(--lib-line);
    border-radius:22px;
    color:var(--lib-ink);
    background:#fff;
    box-shadow:
        0 16px 36px rgba(15,23,42,.09);
    font-size:96px;
}

.lib-qr-arrow {
    color:var(--lib-accent);
    font-size:22px;
}

.lib-mini-page {
    width:118px;
    min-height:178px;
    padding:19px 12px;
    display:grid;
    align-content:start;
    gap:9px;
    border:5px solid #111827;
    border-radius:22px;
    background:#f5f7fb;
}

.lib-mini-page div {
    width:34px;
    height:34px;
    margin:0 auto 7px;
    border-radius:50%;
    background:#d9d3ff;
}

.lib-mini-page span {
    height:20px;
    border-radius:8px;
    background:#fff;
}


/* BEHAVIOUR */

.lib-behavior-grid,
.lib-help-grid,
.lib-faq {
    display:grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap:12px;
}

.lib-section code {
    padding:2px 5px;
    border-radius:5px;
    color:var(--lib-accent);
    background:
        color-mix(
            in srgb,
            var(--lib-accent) 8%,
            transparent
        );
}


/* STORAGE */

.lib-storage-section {
    display:grid;
    grid-template-columns:
        86px
        minmax(0,1fr);
    gap:24px;
    align-items:start;
}

.lib-storage-icon {
    width:78px;
    height:78px;
    display:grid;
    place-items:center;
    border-radius:22px;
    color:#fff;
    background:
        linear-gradient(135deg,#7655f2,#5432d3);
    box-shadow:
        0 15px 32px rgba(84,50,211,.24);
    font-size:28px;
}

.lib-storage-section p + p {
    margin-top:11px;
}

.lib-trust-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:18px;
}

.lib-trust-links a {
    padding:8px 11px;
    border:1px solid var(--lib-line);
    border-radius:10px;
    color:var(--lib-ink);
    background:var(--lib-soft);
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}


/* BOUNDARIES */

.lib-boundary-grid {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:12px;
}


/* FINAL CTA */

.lib-final-cta {
    margin-top:26px;
    padding:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:34px;
    border:1px solid
        color-mix(
            in srgb,
            var(--lib-accent) 28%,
            var(--lib-line)
        );
    border-radius:25px;
    background:
        linear-gradient(
            135deg,
            color-mix(
                in srgb,
                var(--lib-card) 94%,
                #7655f2 6%
            ),
            var(--lib-card)
        );
    box-shadow:var(--lib-shadow);
}

.lib-final-cta > div {
    max-width:760px;
}

.lib-final-cta .lib-primary-action {
    flex:0 0 auto;
}


/* EVIDENCE / TRUST */

.lib-evidence {
    margin-top:18px;
    padding:18px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    border:1px solid var(--lib-line);
    border-radius:17px;
    color:var(--lib-muted);
    background:var(--lib-soft);
}

.lib-evidence strong {
    color:var(--lib-ink);
    font-size:11px;
}

.lib-evidence p {
    max-width:720px;
    margin:4px 0 0;
    font-size:10px;
    line-height:1.6;
}

.lib-evidence-links {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.lib-evidence-links a {
    color:var(--lib-accent);
    text-decoration:none;
    font-size:10px;
    font-weight:800;
}


/* RESPONSIVE */

@media (max-width:1100px) {

    .lib-hero-grid {
        grid-template-columns:
            minmax(0,1fr)
            330px;
        gap:34px;
    }

    .lib-feature-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .lib-use-grid,
    .lib-steps {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


@media (max-width:820px) {

    .pqr-link-bio-page .pqr-header-inner {
        align-items:flex-start;
        flex-direction:column;
        padding:13px 0;
    }

    .pqr-link-bio-page .pqr-header-nav {
        width:100%;
        overflow-x:auto;
        padding-bottom:3px;
    }

    .pqr-link-bio-page .pqr-nav-link {
        flex:0 0 auto;
    }

    .lib-hero {
        padding:34px 0 42px;
    }

    .lib-hero-grid {
        grid-template-columns:1fr;
    }

    .lib-product-preview {
        width:min(100%,430px);
        margin:0 auto;
    }

    .lib-section {
        padding:28px;
    }

    .lib-qr-section {
        grid-template-columns:1fr;
    }

    .lib-storage-section {
        grid-template-columns:1fr;
    }

    .lib-boundary-grid {
        grid-template-columns:1fr;
    }

    .lib-final-cta {
        align-items:flex-start;
        flex-direction:column;
    }

    .lib-evidence {
        align-items:flex-start;
        flex-direction:column;
    }
}


@media (max-width:600px) {

    .lib-shell {
        width:calc(100% - 18px);
    }

    .lib-hero h1 {
        font-size:38px;
    }

    .lib-answer {
        padding:15px;
    }

    .lib-hero-lead {
        font-size:15px;
    }

    .lib-hero-actions {
        display:grid;
        grid-template-columns:1fr;
    }

    .lib-primary-action,
    .lib-secondary-action {
        width:100%;
    }

    .lib-section {
        padding:21px 17px;
        border-radius:20px;
    }

    .lib-feature-grid,
    .lib-use-grid,
    .lib-steps,
    .lib-behavior-grid,
    .lib-help-grid,
    .lib-faq {
        grid-template-columns:1fr;
    }

    .lib-preview-meta {
        grid-template-columns:1fr;
    }

    .lib-qr-visual {
        gap:10px;
    }

    .lib-qr-frame {
        width:105px;
        height:105px;
        font-size:72px;
    }

    .lib-mini-page {
        width:95px;
        min-height:145px;
    }

    .lib-final-cta {
        padding:26px 20px;
    }
}


@media (prefers-reduced-motion:reduce) {

    .pqr-link-bio-page *,
    .pqr-link-bio-page *::before,
    .pqr-link-bio-page *::after {
        scroll-behavior:auto !important;
        transition:none !important;
    }
}