.btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
            font-weight: 700;
            letter-spacing: -0.01em;
            padding: 0.85rem 1.7rem;
            border-radius: 100px;
            border: none;
            cursor: pointer;
            text-decoration: none;
            transition: transform 0.15s var(--ease), background 0.18s ease, box-shadow 0.15s var(--ease), border-color 0.18s ease;
        }
        .btn:active { transform: translate(1px, 1px); }
        .btn-primary {
            background: var(--violet);
            color: #fff;
            box-shadow: var(--shadow-ink-sm);
        }
        .btn-primary:hover {
            background: var(--violet-deep);
            transform: translate(-1px, -1px);
            box-shadow: 4px 4px 0 rgba(28, 25, 23, 0.92);
        }
        .btn-primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(28, 25, 23, 0.92); }
        .btn-ghost {
            background: transparent;
            color: var(--ink);
            border: 1.5px solid var(--ink);
        }
        .btn-ghost:hover { background: var(--white); box-shadow: var(--shadow-ink-sm); transform: translate(-1px, -1px); }

        /* ── reveal ── */
        .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
        .reveal.in { opacity: 1; transform: none; }
        .reveal-d1 { transition-delay: 0.08s; }
        .reveal-d2 { transition-delay: 0.16s; }
        @media (prefers-reduced-motion: reduce) {
            .reveal { opacity: 1; transform: none; transition: none; }
            html { scroll-behavior: auto; }
        }

        /* ════════ NAV ════════ */
        .nav {
            position: fixed;
            top: 0; left: 0; right: 0;
            z-index: 100;
            transition: background 0.25s ease, border-color 0.25s ease;
            border-bottom: 1px solid transparent;
        }
        .nav.scrolled {
            background: rgba(250, 249, 245, 0.86);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-bottom-color: var(--line);
        }
        .nav-inner {
            padding: 0 var(--gutter);
            height: 64px;
            display: flex;
            align-items: center;
            gap: 2.2rem;
            position: relative;
        }
        .nav-logo {
            font-family: var(--font-display);
            font-weight: 760;
            font-size: 1.1rem;
            letter-spacing: -0.015em;
            text-decoration: none;
            color: var(--ink);
            display: inline-flex;
            align-items: baseline;
            gap: 0.04rem;
            line-height: 1.4;
        }
        /* animated brand logo — 1Click → Report ⇄ bar-graph */
        .logo-click-part { display: inline-block; font-weight: 760; }
        .logo-click-part span {
            display: inline-block;
            background: linear-gradient(135deg, var(--violet), var(--violet-deep));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .char-C { animation: charC_click 8s ease-in-out infinite; transform-origin: bottom center; }
        .char-l { animation: charRipple1 8s ease-in-out infinite; transform-origin: bottom center; }
        .char-i { animation: charRipple2 8s ease-in-out infinite; transform-origin: bottom center; }
        .char-c { animation: charRipple3 8s ease-in-out infinite; transform-origin: bottom center; }
        .char-k { animation: charRipple4 8s ease-in-out infinite; transform-origin: bottom center; }
        .logo-transform-container { position: relative; display: inline-block; width: 56px; vertical-align: baseline; }
        .logo-report-text {
            display: inline-block; line-height: 1; font-weight: 500; color: var(--ink);
            white-space: nowrap; opacity: 1; animation: textToGraph 8s ease-in-out infinite;
        }
        .logo-graph {
            position: absolute; left: 0; top: 1px; display: flex; align-items: flex-end;
            gap: 3px; height: 16px; opacity: 0; animation: graphAppear 8s ease-in-out infinite;
        }
        .logo-graph .bar { width: 7px; background: linear-gradient(180deg, var(--violet), var(--violet-deep)); border-radius: 2px 2px 0 0; transform-origin: bottom; }
        .logo-graph .bar-1 { height: 100%; animation: barGrow1 8s ease-in-out infinite; }
        .logo-graph .bar-2 { height: 70%;  animation: barGrow2 8s ease-in-out infinite; }
        .logo-graph .bar-3 { height: 85%;  animation: barGrow3 8s ease-in-out infinite; }
        .logo-graph .bar-4 { height: 60%;  animation: barGrow4 8s ease-in-out infinite; }
        @keyframes charC_click { 0% { transform: translateY(0) rotate(0deg); } 5% { transform: translateY(-50%) rotate(0deg); } 10% { transform: translateY(-50%) rotate(30deg); } 15% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(0) rotate(0deg); } }
        @keyframes charRipple1 { 0%, 10% { transform: translateY(0); } 12% { transform: translateY(-8px); } 14% { transform: translateY(0); } 100% { transform: translateY(0); } }
        @keyframes charRipple2 { 0%, 12% { transform: translateY(0); } 14% { transform: translateY(-8px); } 16% { transform: translateY(0); } 100% { transform: translateY(0); } }
        @keyframes charRipple3 { 0%, 14% { transform: translateY(0); } 16% { transform: translateY(-8px); } 18% { transform: translateY(0); } 100% { transform: translateY(0); } }
        @keyframes charRipple4 { 0%, 16% { transform: translateY(0); } 18% { transform: translateY(-8px); } 20% { transform: translateY(0); } 100% { transform: translateY(0); } }
        @keyframes textToGraph { 0%, 20% { opacity: 1; transform: scale(1); } 22%, 50% { opacity: 0; transform: scale(0.8); } 55%, 100% { opacity: 1; transform: scale(1); } }
        @keyframes graphAppear { 0%, 20% { opacity: 0; transform: translateY(10px); } 22%, 50% { opacity: 1; transform: translateY(0); } 55%, 100% { opacity: 0; transform: translateY(10px); } }
        @keyframes barGrow1 { 0%, 22% { transform: scaleY(0); } 35% { transform: scaleY(1); } 50%, 100% { transform: scaleY(0); } }
        @keyframes barGrow2 { 0%, 24% { transform: scaleY(0); } 37% { transform: scaleY(1); } 50%, 100% { transform: scaleY(0); } }
        @keyframes barGrow3 { 0%, 26% { transform: scaleY(0); } 39% { transform: scaleY(1); } 50%, 100% { transform: scaleY(0); } }
        @keyframes barGrow4 { 0%, 28% { transform: scaleY(0); } 41% { transform: scaleY(1); } 50%, 100% { transform: scaleY(0); } }
        /* animated cycling wordmark: Report → Ads → Agents → rest on Report (driven by JS, once on load) */
        .logo-cycle { position: relative; display: inline-flex; align-items: baseline; }
        .logo-cycle .lc-word { font-weight: 700; color: var(--ink); transition: opacity .35s, transform .35s, filter .35s; }
        .logo-cycle .lc-word.out { opacity: 0; transform: translateY(-4px) scale(.96); filter: blur(2px); }
        .logo-cycle .lc-bars { display: inline-flex; align-items: flex-end; gap: 2px; margin-left: 5px; height: .72em; width: 20px; opacity: 1; overflow: hidden; transition: width .35s, opacity .35s; }
        .logo-cycle .lc-bars.lc-hide { width: 0; opacity: 0; }
        .logo-cycle .lc-bars i { width: 4px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, #6ee7b7, #34d399); transform: scaleY(1); transform-origin: bottom; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
        .logo-cycle .lc-bars.lc-hide i { transform: scaleY(0); }
        .logo-cycle .lc-bars i:nth-child(1){ height:42%; }
        .logo-cycle .lc-bars i:nth-child(2){ height:72%; }
        .logo-cycle .lc-bars i:nth-child(3){ height:100%; }
        .logo-cycle .lc-bars i:nth-child(4){ height:60%; }
        .logo-cycle .lc-sparks { position: absolute; inset: 0; pointer-events: none; }
        .logo-cycle .lc-sparks .s { position: absolute; color: var(--violet); opacity: 0; font-size: .6em; filter: drop-shadow(0 0 3px rgba(124,58,237,.5)); }
        .logo-cycle .lc-sparks .s.fire { animation: lcspark .7s ease-out forwards; }
        @keyframes lcspark { 0%{opacity:0;transform:scale(.2)} 25%{opacity:1;transform:scale(1.1) rotate(20deg)} 100%{opacity:0;transform:scale(.3) translateY(-8px) rotate(50deg)} }
        .nav-links { display: flex; gap: 1.6rem; position: absolute; left: 50%; transform: translateX(-50%); }
        .nav-links a {
            font-size: 0.88rem;
            font-weight: 500;
            color: var(--ink-2);
            text-decoration: none;
            transition: color 0.15s ease;
        }
        .nav-links a:hover { color: var(--ink); }
        .nav-cta { margin-left: auto; display: flex; align-items: center; gap: 1.2rem; }
        .nav-signin { font-size: 0.88rem; font-weight: 500; color: var(--ink-2); text-decoration: none; }
        .nav-signin:hover { color: var(--ink); }
        .nav .btn { padding: 0.55rem 1.2rem; font-size: 0.86rem; box-shadow: 2px 2px 0 rgba(28, 25, 23, 0.92); }