/* ============================================================
   ZYNG OS — shared site styles (design tokens live per page,
   components + harmonization live here). Load order matters:
   harmony section is last so it wins specificity ties.
   ============================================================ */

/* ── zyng-motion-css ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

      /* ── Scroll-reveal atoms ────────────────────────── */
      .zyng-up {
        opacity: 0;
        transform: translateY(28px);
        will-change: opacity, transform;
        transition:
          opacity  0.72s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms),
          transform 0.72s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms);
      }
      .zyng-up.zyng-in  { opacity: 1; transform: none; }

      .zyng-scale {
        opacity: 0;
        transform: scale(0.94) translateY(14px);
        will-change: opacity, transform;
        transition:
          opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms),
          transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms);
      }
      .zyng-scale.zyng-in { opacity: 1; transform: none; }

      .zyng-left {
        opacity: 0;
        transform: translateX(-22px);
        will-change: opacity, transform;
        transition:
          opacity  0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms),
          transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) var(--zd, 0ms);
      }
      .zyng-left.zyng-in { opacity: 1; transform: none; }

      /* ── Section label line-draw ──────────────────── */
      .section-label.zyng-left::before {
        width: 0 !important;
        transition: width 0.52s cubic-bezier(0.16, 1, 0.3, 1)
                    calc(var(--zd, 0ms) + 180ms) !important;
      }
      .section-label.zyng-left.zyng-in::before { width: 24px !important; }

      /* ── Card hover lift ──────────────────────────── */
      .zyng-lift {
        transition:
          transform 0.38s cubic-bezier(0.34, 1.4, 0.64, 1),
          box-shadow 0.38s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
      }
      .zyng-lift:hover {
        transform: translateY(-6px) !important;
        box-shadow:
          0 20px 48px -8px  rgba(28, 26, 23, 0.13),
          0  8px 16px -4px  rgba(28, 26, 23, 0.07) !important;
      }

      /* ── Button spring ────────────────────────────── */
      .zyng-spring {
        transition:
          transform  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
          background 0.2s ease,
          box-shadow 0.3s ease !important;
      }
      .zyng-spring:hover  { transform: translateY(-3px) scale(1.02) !important; }
      .zyng-spring:active { transform: scale(0.96) !important; }

      /* ── Count-up flash ───────────────────────────── */
      @keyframes zyng-flash {
        0%   { color: var(--blue, #2563eb); }
        100% { color: inherit; }
      }
      .zyng-counted { animation: zyng-flash 0.9s ease forwards; }

    }

/* ── zyng-standard-style ─────────────────────────────── */
@keyframes zyngBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
            @keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
            @keyframes entSpin { to { transform: rotate(360deg); } }
            @keyframes zyngNavIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
            @keyframes zyngFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

            /* ---- Consistent gutters across nav / footer / chapter bar ---- */
            #site-nav { padding-left: 48px; padding-right: 48px; }
            #footer { padding-left: 48px; padding-right: 48px; }

            /* ---- NAV: classy entrance ---- */
            #site-nav { animation: zyngNavIn 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

            /* Desktop layout tuning so 7 items + CTA never wrap before the
               hamburger breakpoint, and animated underline on links. */
            @media (min-width: 769px) {
                #site-nav .nav-links { gap: 30px; align-items: center; }
                #site-nav .nav-links a {
                    position: relative;
                    padding-bottom: 2px;
                }
                #site-nav .nav-links a::after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: -4px;
                    height: 2px;
                    width: 100%;
                    background: var(--blue);
                    border-radius: 2px;
                    transform: scaleX(0);
                    transform-origin: right center;
                    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
                }
                #site-nav .nav-links a:hover::after,
                #site-nav .nav-links a.active::after {
                    transform: scaleX(1);
                    transform-origin: left center;
                }
                /* staggered link entrance */
                #site-nav .nav-links > li { animation: zyngNavIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
                #site-nav .nav-links > li:nth-child(1) { animation-delay: 0.06s; }
                #site-nav .nav-links > li:nth-child(2) { animation-delay: 0.10s; }
                #site-nav .nav-links > li:nth-child(3) { animation-delay: 0.14s; }
                #site-nav .nav-links > li:nth-child(4) { animation-delay: 0.18s; }
                #site-nav .nav-links > li:nth-child(5) { animation-delay: 0.22s; }
                #site-nav .nav-links > li:nth-child(6) { animation-delay: 0.26s; }
                #site-nav .nav-links > li:nth-child(7) { animation-delay: 0.30s; }
                #site-nav .nav-links > li:nth-child(8) { animation-delay: 0.34s; }
            }
            /* Mid-size screens: tighten so it fits without wrapping. */
            @media (min-width: 769px) and (max-width: 1080px) {
                #site-nav { padding-left: 32px; padding-right: 32px; }
                #site-nav .nav-links { gap: 20px; }
                #site-nav .nav-links a { font-size: 13px; }
                #site-nav .nav-cta-desktop { padding: 10px 18px; font-size: 13px; }
            }

            /* ---- FOOTER: guaranteed dark + consistent + classy link motion ---- */
            #footer {
                background: var(--ink);
                color: #fff;
                padding-top: 80px;
                padding-bottom: 48px;
            }
            #footer .footer-grid {
                display: grid;
                grid-template-columns: 2fr 1fr 1fr 1fr;
                gap: 64px;
                padding-bottom: 64px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }
            #footer .footer-col-title {
                font-family: var(--mono);
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.08em;
                text-transform: uppercase;
                color: rgba(255, 255, 255, 0.45);
                margin-bottom: 18px;
            }
            #footer .footer-links { list-style: none; margin: 0; padding: 0; }
            #footer .footer-links li { margin-bottom: 12px; }
            #footer .footer-links a {
                font-family: var(--body);
                font-size: 15px;
                color: rgba(255, 255, 255, 0.7);
                text-decoration: none;
                position: relative;
                display: inline-block;
                transition: color 0.2s ease, transform 0.2s ease;
            }
            #footer .footer-links a:hover {
                color: #fff;
                transform: translateX(4px);
            }
            #footer .footer-brand-desc {
                font-family: var(--body);
                font-size: 15px;
                color: rgba(255, 255, 255, 0.6);
                line-height: 1.7;
                margin-top: 20px;
                max-width: 420px;
            }
            #footer .footer-bottom {
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-wrap: wrap;
                gap: 16px;
                padding-top: 32px;
            }
            #footer .footer-legal {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                gap: 20px;
                font-family: var(--body);
                font-size: 13px;
                color: rgba(255, 255, 255, 0.45);
            }
            #footer .footer-legal a {
                color: rgba(255, 255, 255, 0.55);
                text-decoration: none;
                transition: color 0.2s ease;
            }
            #footer .footer-legal a:hover { color: #fff; }
            #footer .footer-status {
                display: flex;
                align-items: center;
                gap: 8px;
                font-family: var(--mono);
                font-size: 12px;
                color: rgba(255, 255, 255, 0.55);
            }

            /* ---- STORY-FLOW CHAPTER NAV (compact strip, secondary to top nav) ---- */
            .zyng-chapter-nav {
                background: var(--bg-warm, #f7f6f2);
                border-top: 1px solid var(--gray-200, #e2ddd6);
                padding: 18px 48px;
            }
            .zyng-chapter-inner {
                max-width: 1100px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 16px;
            }
            .zyng-chapter {
                display: flex;
                flex-direction: column;
                gap: 1px;
                text-decoration: none;
                padding: 6px 10px;
                border-radius: var(--r-sm, 8px);
                min-width: 0;
                flex: 0 1 auto;
                transition: background 0.2s ease;
            }
            .zyng-chapter-prev { align-items: flex-start; text-align: left; }
            .zyng-chapter-next { align-items: flex-end; text-align: right; }
            .zyng-chapter:hover { background: rgba(37, 99, 235, 0.06); }
            .zyng-chapter-dir {
                font-family: var(--mono, monospace);
                font-size: 10px;
                font-weight: 700;
                letter-spacing: 0.07em;
                text-transform: uppercase;
                color: var(--ink-soft, #5c5850);
            }
            .zyng-chapter-name {
                font-family: var(--body, sans-serif);
                font-size: 14px;
                font-weight: 600;
                color: var(--ink, #1c1a17);
                transition: color 0.2s ease;
            }
            .zyng-chapter:hover .zyng-chapter-name { color: var(--blue, #2563eb); }
            /* Next gets a subtle accent (no heavy block) so the top nav stays primary */
            .zyng-chapter-next .zyng-chapter-name { color: var(--blue, #2563eb); }
            .zyng-chapter .zyng-arrow {
                display: inline-block;
                transition: transform 0.2s ease;
            }
            .zyng-chapter-prev:hover .zyng-arrow { transform: translateX(-3px); }
            .zyng-chapter-next:hover .zyng-arrow { transform: translateX(3px); }
            .zyng-chapter-meter {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 6px;
                flex: 0 0 auto;
                padding: 0 8px;
            }
            .zyng-chapter-step {
                font-family: var(--mono, monospace);
                font-size: 11px;
                font-weight: 700;
                letter-spacing: 0.05em;
                color: var(--ink-soft, #5c5850);
            }
            .zyng-chapter-of { color: var(--gray-300, #c8c3ba); }
            .zyng-chapter-dots { display: flex; gap: 6px; }
            .zyng-chapter-dots .zyng-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: var(--gray-300, #c8c3ba);
                transition: transform 0.3s ease, background 0.3s ease;
            }
            .zyng-chapter-dots .zyng-dot.on {
                background: var(--blue, #2563eb);
                transform: scale(1.3);
            }

            /* ---- Scroll reveal (JS sets initial hidden state; visible if JS off) ---- */
            [data-zyng-reveal].zyng-pre { opacity: 0; transform: translateY(22px); }
            [data-zyng-reveal].zyng-in {
                opacity: 1;
                transform: none;
                transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
            }

            /* ---- Responsive: chapter bar + footer + gutters ---- */
            @media (max-width: 768px) {
                #site-nav { padding-left: 24px; padding-right: 24px; }
                #footer { padding-left: 24px; padding-right: 24px; }
                #footer .footer-grid {
                    grid-template-columns: 1fr 1fr;
                    gap: 40px;
                }
                #footer .footer-bottom { flex-direction: column; align-items: flex-start; }
                .zyng-chapter-nav { padding: 14px 20px; }
                .zyng-chapter-inner { gap: 8px; }
                .zyng-chapter { padding: 4px 6px; }
                .zyng-chapter-name { font-size: 13px; }
                .zyng-chapter-meter { padding: 0 2px; gap: 5px; }
            }
            @media (max-width: 480px) {
                #footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
                .zyng-chapter-of { display: none; }
                .zyng-chapter-dots { display: none; }
            }

            /* ---- Honor reduced-motion ---- */
            @media (prefers-reduced-motion: reduce) {
                #site-nav,
                #site-nav .nav-links > li,
                [data-zyng-reveal].zyng-in { animation: none !important; transition: none !important; }
                [data-zyng-reveal].zyng-pre { opacity: 1 !important; transform: none !important; }
                .zyng-chapter, .zyng-chapter .zyng-arrow, #footer .footer-links a { transition: none !important; }
            }

/* ── cohesion-style ─────────────────────────────── */
/* 1. Unify fonts + remap legacy cool tokens onto the primary system.
               (Declared last so these win the cascade for the variables.) */
            :root {
                --sans: "DM Sans", var(--body), system-ui, sans-serif;
                --color-bg: var(--white, #fafaf8);
                --color-surface: var(--white-pure, #ffffff);
                --color-text-main: var(--ink, #1c1a17);
                --color-text-muted: var(--ink-soft, #5c5850);
                --color-brand: var(--blue, #2563eb);
                --color-brand-bg: var(--blue-lt, #eef3ff);
                --color-brand-hover: var(--blue-dim, rgba(37,99,235,0.07));
                --border-color: var(--gray-200, #e2ddd6);
            }

            /* 2. Smooth, offset anchor scrolling — glide between sections */
            html { scroll-behavior: smooth; scroll-padding-top: 88px; }
            @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

            /* 3. Unified text selection */
            ::selection { background: rgba(37, 99, 235, 0.20); color: var(--ink, #1c1a17); }
            ::-moz-selection { background: rgba(37, 99, 235, 0.20); color: var(--ink, #1c1a17); }

            /* 4. Consistent accent focus ring (0-specificity so it never fights section styles) */
            :where(a, button, [role="button"], [role="tab"], input, select, textarea, summary, .faq-q, details > summary):focus-visible {
                outline: 2px solid var(--blue, #2563eb);
                outline-offset: 2px;
                border-radius: 6px;
            }

            /* 5. Gentle default link transition (0-specificity; won't override per-section rules) */
            :where(a) { transition: color 0.2s ease; }

            /* 6. Cohesive custom scrollbar across the whole page */
            @media (pointer: fine) {
                html { scrollbar-width: thin; scrollbar-color: rgba(37, 99, 235, 0.55) transparent; }
                ::-webkit-scrollbar { width: 11px; height: 11px; }
                ::-webkit-scrollbar-track { background: transparent; }
                ::-webkit-scrollbar-thumb {
                    background: linear-gradient(180deg, #2563eb, #3b82f6);
                    border-radius: 10px;
                    background-clip: padding-box;
                    border: 3px solid transparent;
                }
                ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #1d4ed8, #1d4ed8); background-clip: padding-box; border: 3px solid transparent; }
            }

/* ── liquid-glass-nav ─────────────────────────────── */
#site-nav {
                position: fixed; top: 14px; left: 0 !important; right: 0 !important;
                margin-left: auto !important; margin-right: auto !important;
                width: calc(100% - 32px) !important; max-width: 1100px !important;
                padding: 11px 12px 11px 22px !important;
                border-radius: 999px !important;
                border: 1px solid rgba(255,255,255,0.6) !important;
                background: linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.34)) !important;
                -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
                box-shadow: 0 12px 38px -12px rgba(28,26,23,0.24), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.18) !important;
                overflow: hidden; isolation: isolate;
                transition: top .35s cubic-bezier(.16,1,.3,1), padding .35s ease, max-width .35s ease, background .35s ease, box-shadow .35s ease;
            }
            #site-nav.scrolled {
                top: 8px !important; max-width: 980px !important;
                padding: 8px 10px 8px 20px !important;
                background: linear-gradient(180deg, rgba(255,255,255,0.74), rgba(255,255,255,0.52)) !important;
                box-shadow: 0 10px 30px -10px rgba(28,26,23,0.30), inset 0 1px 0 rgba(255,255,255,0.9) !important;
            }
            #site-nav::before {
                content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit;
                background: radial-gradient(220px circle at var(--nx,30%) var(--ny,0%), rgba(255,255,255,0.55), rgba(255,255,255,0) 60%);
                opacity: 0; transition: opacity .35s ease;
            }
            #site-nav:hover::before { opacity: 1; }
            #site-nav::after {
                content: ""; position: absolute; top: 0; left: 15%; right: 15%; height: 1px; z-index: 1; pointer-events: none;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
            }
            #site-nav > * { position: relative; z-index: 2; }
            #site-nav .nav-links { position: relative; }
            #site-nav .nav-links li { position: relative; z-index: 1; }
            #site-nav .nav-links a::after { display: none !important; }
            #site-nav .nav-links a { transition: color .25s ease; }
            #site-nav .nav-links a.active { color: var(--blue, #2563eb); }
            .nav-glass-pill {
                position: absolute; top: 50%; transform: translateY(-50%); height: 34px; left: 0; width: 0; opacity: 0;
                border-radius: 999px; z-index: 0; pointer-events: none;
                background: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.7);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 2px 10px rgba(37,99,235,0.14);
                transition: left .45s cubic-bezier(.34,1.4,.5,1), width .45s cubic-bezier(.34,1.4,.5,1), opacity .25s ease;
            }
            @media (max-width: 768px) {
                #site-nav {
                    top: 12px !important; width: calc(100% - 20px) !important; max-width: none !important;
                    border-radius: 22px !important; padding: 9px 10px 9px 18px !important; overflow: visible !important;
                }
                #site-nav.scrolled { top: 8px !important; padding: 8px 10px 8px 16px !important; }
                #site-nav::before { display: none !important; }
                .nav-glass-pill { display: none !important; }
                #site-nav .nav-links {
                    display: flex !important; flex-direction: column !important; align-items: stretch !important;
                    position: absolute !important; top: calc(100% + 10px) !important;
                    left: 0 !important; right: 0 !important; width: auto !important;
                    gap: 0 !important; margin: 0 !important; padding: 0 16px !important;
                    border-radius: 18px !important;
                    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,255,255,0.94)) !important;
                    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
                    border: 1px solid rgba(255,255,255,0.6) !important;
                    box-shadow: 0 18px 44px -14px rgba(28,26,23,0.28) !important;
                    max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
                    transition: max-height .38s ease, opacity .25s ease, padding .25s ease !important;
                }
                #site-nav.nav-open .nav-links {
                    max-height: 78vh !important; opacity: 1 !important; pointer-events: auto !important;
                    padding: 8px 16px 14px !important; overflow-y: auto !important;
                }
                #site-nav .nav-links li { width: 100% !important; }
                #site-nav .nav-links li > a { display: block !important; width: 100% !important; padding: 14px 6px !important; border-bottom: 1px solid rgba(28,26,23,0.07) !important; }
                #site-nav .nav-links-cta-li { padding-top: 12px !important; }
                #site-nav .nav-links-cta-li .nav-cta-mobile { display: block !important; width: 100% !important; }
            }
            @media (prefers-reduced-motion: reduce) {
                #site-nav { transition: none !important; }
                .nav-glass-pill { transition: opacity .2s ease !important; }
            }

/* ── liquid-glass-system ─────────────────────────────── */
@keyframes lgFlow { to { background-position: 260% 0; } }
            @keyframes lgRipple { to { transform: translate(-50%,-50%) scale(1); opacity: 0; } }
            @keyframes lgGlint { 0%, 64% { transform: translateX(-170%) skewX(-16deg); } 100% { transform: translateX(290%) skewX(-16deg); } }
            @keyframes lgDrift {
                0% { transform: translate(0,0) scale(1.05) rotate(0deg); }
                50% { transform: translate(-7%,5%) scale(1.22) rotate(8deg); }
                100% { transform: translate(6%,-4%) scale(1.12) rotate(-6deg); }
            }

            /* shared glass overlays (inserted by JS) */
            .lg-caustic, .lg-glint { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; overflow: hidden; }
            .lg-caustic > i { position: absolute; inset: -45%;
                background:
                    radial-gradient(38% 50% at 24% 30%, rgba(37,99,235,0.75), transparent 70%),
                    radial-gradient(42% 52% at 78% 36%, rgba(6,182,212,0.62), transparent 70%),
                    radial-gradient(46% 56% at 52% 84%, rgba(99,102,241,0.58), transparent 70%);
                filter: blur(20px); will-change: transform;
                animation: lgDrift 17s ease-in-out infinite alternate;
            }
            .lg-glint > i {
                position: absolute; top: -35%; bottom: -35%; left: 0; width: 34%;
                background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent);
                transform: translateX(-170%) skewX(-16deg); will-change: transform;
                animation: lgGlint 8.5s ease-in-out infinite;
            }

            /* ---------- NAV ---------- */
            #site-nav {
                -webkit-backdrop-filter: blur(26px) saturate(195%) !important; backdrop-filter: blur(26px) saturate(195%) !important;
                background: linear-gradient(180deg, rgba(255,255,255,0.52), rgba(255,255,255,0.28)) !important;
            }
            #site-nav > .lg-caustic { z-index: 0; opacity: 0.55; }
            #site-nav > .lg-glint { z-index: 1; }
            #site-nav.scrolled { background: linear-gradient(180deg, rgba(255,255,255,0.68), rgba(255,255,255,0.46)) !important; }
            .nav-glass-pill { display: none !important; }
            #site-nav .nav-links a { position: relative; }
            #site-nav .nav-links a::after {
                content: "" !important; display: block !important;
                position: absolute; left: 50%; right: 50%; bottom: -1px; height: 3px; border-radius: 3px;
                background: linear-gradient(90deg, transparent, #2563eb, #06b6d4, #6366f1, #06b6d4, #2563eb, transparent);
                background-size: 280% 100%; opacity: 0; filter: drop-shadow(0 0 5px rgba(37,99,235,0.6));
                transition: left .36s cubic-bezier(.4,0,.2,1), right .36s cubic-bezier(.4,0,.2,1), opacity .3s ease;
            }
            #site-nav .nav-links a:hover::after, #site-nav .nav-links a.active::after {
                left: 8px; right: 8px; opacity: 1; animation: lgFlow 2.4s linear infinite;
            }
            @media (max-width: 768px) {
                #site-nav .nav-links a::after { display: none !important; }
                #site-nav.nav-open .nav-logo { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease; }
            }

            /* ---------- BUTTONS ---------- */
            .lg-btn { position: relative; overflow: hidden; isolation: isolate; }
            .lg-btn-label { position: relative; z-index: 3; }
            .lg-btn > .lg-caustic { z-index: 0; opacity: 0.5; mix-blend-mode: screen; }
            .lg-btn > .lg-glint { z-index: 1; }
            .lg-gloss {
                position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit;
                background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,0.5) 50%, transparent 64%);
                transform: translateX(-130%); opacity: 0;
                transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .35s ease;
            }
            .lg-btn:hover .lg-gloss { transform: translateX(130%); opacity: 1; }
            .lg-ripple {
                position: absolute; border-radius: 50%; transform: translate(-50%,-50%) scale(0);
                pointer-events: none; z-index: 2;
                background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
                animation: lgRipple .66s ease-out forwards;
            }

            /* ---------- CARDS / PANELS ---------- */
            .lg-card { position: relative; isolation: isolate; }
            .lg-card > .lg-caustic { z-index: -1; opacity: 0.42; mix-blend-mode: soft-light; }
            .lg-card > .lg-glint { z-index: -1; opacity: 0.7; }
            .lg-shine {
                position: absolute; top: 0; left: 7%; right: 7%; height: 1px; z-index: 4; pointer-events: none;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
            }
            .lg-card .lg-gloss { z-index: 4; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.22) 50%, transparent 58%); }

            /* ---------- DIVIDERS ---------- */
            .section-divider .sd-line {
                background: linear-gradient(90deg, transparent, rgba(37,99,235,0.6), rgba(6,182,212,0.45), rgba(99,102,241,0.55), rgba(37,99,235,0.6), transparent) !important;
                background-size: 260% 100% !important; animation: lgFlow 5.5s linear infinite;
                filter: drop-shadow(0 0 4px rgba(37,99,235,0.35));
            }

            /* ---------- FOOTER ---------- */
            #footer { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); }
            #footer > .lg-caustic { z-index: 0; opacity: 0.28; }
            #footer > .lg-caustic > i {
                background:
                    radial-gradient(40% 60% at 20% 40%, rgba(37,99,235,0.6), transparent 72%),
                    radial-gradient(45% 55% at 82% 60%, rgba(6,182,212,0.5), transparent 72%);
                animation-duration: 26s;
            }
            #footer .footer-grid, #footer .footer-bottom { position: relative; z-index: 1; }

            @media (prefers-reduced-motion: reduce) {
                .lg-caustic > i, .lg-glint > i, .sd-line,
                #site-nav .nav-links a:hover::after, #site-nav .nav-links a.active::after { animation: none !important; }
                .lg-gloss, .lg-ripple, .lg-glint { display: none !important; }
                .lg-caustic { opacity: 0.25 !important; }
            }

/* ── lg-liquid-glass-style ─────────────────────────────── */
:root {
    --lg-intensity: 1;            /* master dial for every effect's opacity */
    --lg-cool-1: 160, 196, 255;   /* periwinkle-aqua  (#a0c4ff) */
    --lg-cool-2: 192, 184, 255;   /* periwinkle       (#c0b8ff) */
    --lg-warm:   255, 226, 170;   /* warm gold-white  */
    --lg-scroll: 0;               /* live scrollY, written by JS for parallax */
  }

  @supports (background: paint(x)) {}
  @property --lg-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

  /* ── shared positioning for the injected pieces ─────────────────────── */
  #lg-ambient, #lg-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    border: 0;
    margin: 0;
    contain: layout style size;
  }

  /* ── 1+2+3 : page-wide liquid + breathing ambience ──────────────────── */
  #lg-ambient {
    z-index: 1;                       /* above flat section fills, below most UI */
    overflow: hidden;
    mix-blend-mode: soft-light;       /* safe over dark text: black stays black */
    opacity: calc(0.62 * var(--lg-intensity));
    transform: translate3d(0, calc(var(--lg-scroll) * -0.018px), 0); /* slow parallax */
  }
  #lg-ambient .lg-blob {
    position: absolute;
    width: 62vmax;
    height: 62vmax;
    border-radius: 50%;
    filter: blur(8px);
    will-change: transform;
  }
  #lg-ambient .lg-blob.b1 {
    left: -8vmax; top: -12vmax;
    background: radial-gradient(circle at 50% 50%, rgba(var(--lg-cool-1), 0.9), rgba(var(--lg-cool-1), 0) 64%);
  }
  #lg-ambient .lg-blob.b2 {
    right: -14vmax; top: -6vmax;
    background: radial-gradient(circle at 50% 50%, rgba(var(--lg-cool-2), 0.85), rgba(var(--lg-cool-2), 0) 64%);
  }
  #lg-ambient .lg-blob.b3 {
    left: 28vmax; bottom: -22vmax;
    background: radial-gradient(circle at 50% 50%, rgba(var(--lg-warm), 0.7), rgba(var(--lg-warm), 0) 66%);
  }

  /* ── 7 : ambient particle drift ─────────────────────────────────────── */
  #lg-particles {
    z-index: 2;
    overflow: hidden;
    transform: translate3d(0, calc(var(--lg-scroll) * -0.06px), 0); /* faster than bg */
  }
  #lg-particles .lg-orb {
    position: absolute;
    bottom: -6vh;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), rgba(var(--lg-cool-1), 0.55) 55%, rgba(var(--lg-cool-1), 0) 72%);
    opacity: 0;
    will-change: transform, opacity;
  }

  /* ── per-surface overlay : 1 glass rim · 2 shimmer · 3 glow · 4 border ─ */
  .lg-fx {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: visible;
    /* 2 · liquid shimmer (two soft gradients that drift across the surface) */
    background:
      radial-gradient(130% 90% at var(--lg-sx, 28%) var(--lg-sy, 18%),
        rgba(255,255,255,0.12), rgba(255,255,255,0) 55%),
      linear-gradient(115deg,
        rgba(var(--lg-warm), 0) 30%,
        rgba(var(--lg-warm), 0.12) 46%,
        rgba(var(--lg-cool-1), 0.10) 58%,
        rgba(var(--lg-cool-2), 0) 76%);
    background-size: 200% 200%, 260% 260%;
    background-position: 0% 0%, 0% 50%;
    mix-blend-mode: soft-light;
    opacity: calc(0.85 * var(--lg-intensity));
    /* 1 · glass rim (top/left refracted light) + 3 · resting ambient glow */
    box-shadow:
      0 0 22px -10px rgba(var(--lg-cool-1), calc(0.16 * var(--lg-intensity)));
    transition: background-position 0.6s ease-out;
  }
  /* 4 · flowing border light — a 1px conic ribbon that travels the rim */
  .lg-fx::before {
    content: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--lg-angle),
      rgba(var(--lg-cool-1), 0) 0deg,
      rgba(var(--lg-cool-1), 0) 200deg,
      rgba(var(--lg-cool-1), 0.85) 270deg,
      rgba(255,255,255,0.95) 300deg,
      rgba(var(--lg-warm), 0.8) 330deg,
      rgba(var(--lg-cool-1), 0) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: calc(0.55 * var(--lg-intensity));
    pointer-events: none;
  }
  /* 6 · hover ripple / refraction — light blooms from the cursor */
  .lg-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--lg-mx, 50%) var(--lg-my, 50%),
      rgba(255,255,255,0.45), rgba(var(--lg-cool-1), 0.22) 34%, rgba(var(--lg-cool-1), 0) 60%);
    opacity: 0;
    transform: scale(0.55);
    transform-origin: var(--lg-mx, 50%) var(--lg-my, 50%);
    mix-blend-mode: screen;
    transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    pointer-events: none;
  }
  .lg-host { position: relative; }      /* applied by JS ONLY when element was static */
  .lg-host:hover > .lg-fx {
    background-position: 100% 100%, 100% 50%;  /* shimmer leans toward the touch */
  }
  .lg-host:hover > .lg-fx::after {
    opacity: calc(0.30 * var(--lg-intensity));
    transform: scale(1);
  }

  /* ── MOTION (only when the user has not asked to reduce it) ──────────── */
  @media (prefers-reduced-motion: no-preference) {
    #lg-ambient .lg-blob.b1 { animation: lg-drift-1 26s ease-in-out infinite alternate; }
    #lg-ambient .lg-blob.b2 { animation: lg-drift-2 32s ease-in-out infinite alternate; }
    #lg-ambient .lg-blob.b3 { animation: lg-drift-3 38s ease-in-out infinite alternate; }
    .lg-fx {
      animation:
        lg-shimmer 11s ease-in-out infinite alternate,
        lg-glow 7s ease-in-out infinite;
    }
    .lg-fx::before { animation: lg-rotate 8s linear infinite; }
    .lg-orb { animation: lg-rise linear infinite; }
  }

  @keyframes lg-drift-1 {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(14vmax, 10vmax, 0) scale(1.18); }
  }
  @keyframes lg-drift-2 {
    0%   { transform: translate3d(0, 0, 0) scale(1.05); }
    100% { transform: translate3d(-12vmax, 14vmax, 0) scale(0.9); }
  }
  @keyframes lg-drift-3 {
    0%   { transform: translate3d(0, 0, 0) scale(0.95); }
    100% { transform: translate3d(10vmax, -12vmax, 0) scale(1.2); }
  }
  @keyframes lg-shimmer {
    0%   { background-position: 0% 0%,   0% 50%; }
    100% { background-position: 100% 100%, 100% 50%; }
  }
  @keyframes lg-glow {
    0%, 100% { box-shadow: 0 0 20px -10px rgba(var(--lg-cool-1), calc(0.14 * var(--lg-intensity))); }
    50%      { box-shadow: 0 0 38px -8px rgba(var(--lg-cool-2), calc(0.24 * var(--lg-intensity))); }
  }
  @keyframes lg-rotate { to { --lg-angle: 360deg; } }
  @keyframes lg-rise {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    12%  { opacity: var(--lg-orb-op, 0.16); }
    88%  { opacity: var(--lg-orb-op, 0.16); }
    100% { transform: translate3d(var(--lg-orb-dx, 4vw), -118vh, 0); opacity: 0; }
  }

  /* ── REDUCED-MOTION : static frosted-glass fallback (no movement) ────── */
  @media (prefers-reduced-motion: reduce) {
    #lg-particles { display: none; }
    #lg-ambient { opacity: calc(0.4 * var(--lg-intensity)); transform: none; }
    .lg-fx { animation: none; }
    .lg-fx::before { animation: none; opacity: calc(0.4 * var(--lg-intensity)); }
  }

/* ── zyng-harmony ─────────────────────────────── */

            .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--ink); color: var(--white-pure); font-family: var(--mono); font-size: 13px; padding: 10px 18px; border-radius: 0 0 8px 0; text-decoration: none; }
            .skip-link:focus { left: 0; }
            #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--green)); z-index: 1000; width: 0%; transition: width 0.1s; }
            .nav-home-mobile { display: none; }
            .nav-links a.active { color: var(--blue); }

            /* ── NAV: never wrap, never shrink on scroll ── */
            #site-nav { flex-wrap: nowrap !important; }
            #site-nav .nav-links { flex-wrap: nowrap; }
            #site-nav .nav-links a { white-space: nowrap; }

            /* hamburger -> X (same transform the engine pages use) */
            #site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
            #site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
            #site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

            @media (min-width: 1081px) {
                #site-nav.scrolled {
                    top: 14px !important;
                    max-width: 1100px !important;
                    width: calc(100% - 32px) !important;
                    padding: 11px 12px 11px 22px !important;
                }
            }
            @media (min-width: 1340px) {
                #site-nav .nav-links { gap: 29px; }
            }
            @media (min-width: 1081px) and (max-width: 1339px) {
                #site-nav .nav-links { gap: 18px; }
                .nav-links a { font-size: 13px; }
            }
            @media (max-width: 1080px) {
                .nav-toggle { display: flex !important; }
                .nav-cta-desktop { display: none !important; }
                .nav-home-mobile { display: list-item; }
            }
            /* tablet range gets the same liquid-glass drop panel the phone range has */
            @media (min-width: 769px) and (max-width: 1080px) {
                #site-nav { overflow: visible !important; }
                #site-nav::before { display: none !important; }
                .nav-glass-pill { display: none !important; }
                #site-nav .nav-links a::after { display: none !important; }
                #site-nav .nav-links > li { animation: none !important; }
                #site-nav .nav-links {
                    display: flex !important; flex-direction: column !important; align-items: stretch !important;
                    position: absolute !important; top: calc(100% + 10px) !important;
                    left: 0 !important; right: 0 !important; width: auto !important;
                    gap: 0 !important; margin: 0 !important; padding: 0 16px !important;
                    border-radius: 18px !important;
                    background: linear-gradient(180deg, rgba(255,255,255,0.985), rgba(255,255,255,0.94)) !important;
                    -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
                    border: 1px solid rgba(255,255,255,0.6) !important;
                    box-shadow: 0 18px 44px -14px rgba(28,26,23,0.28) !important;
                    max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
                    transition: max-height .38s ease, opacity .25s ease, padding .25s ease !important;
                }
                #site-nav.nav-open .nav-links {
                    max-height: 78vh !important; opacity: 1 !important; pointer-events: auto !important;
                    padding: 8px 16px 14px !important; overflow-y: auto !important;
                }
                #site-nav .nav-links li { width: 100% !important; }
                #site-nav .nav-links li > a { display: block !important; width: 100% !important; padding: 14px 6px !important; font-size: 16px !important; border-bottom: 1px solid rgba(28,26,23,0.07) !important; }
                #site-nav .nav-links-cta-li { padding-top: 12px !important; }
                #site-nav .nav-links-cta-li .nav-cta-mobile { display: block !important; width: 100% !important; }
                #site-nav.nav-open .nav-logo { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease; }
            }
            @media (max-width: 768px) {
                #site-nav .nav-links li > a { font-size: 16px !important; }
            }

            /* ── FOOTER: identical responsive behavior on every page ── */
            #footer { overflow-x: clip; }
            #footer .footer-grid { max-width: 1380px; margin-left: auto; margin-right: auto; }
            #footer .footer-bottom { max-width: 1380px; margin-left: auto; margin-right: auto; }
            @media (min-width: 641px) and (max-width: 1080px) {
                #footer .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 48px !important; }
            }
            @media (max-width: 640px) {
                #footer { padding-left: 24px !important; padding-right: 24px !important; padding-top: 64px !important; }
                #footer .footer-grid { grid-template-columns: 1fr !important; gap: 40px !important; padding-bottom: 48px !important; }
                #footer .footer-bottom { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
                #footer .footer-legal { display: flex; flex-wrap: wrap; gap: 10px 16px; }
                #footer .footer-brand-desc { max-width: 100%; }
            }