/* Hero background — animated soft-mesh gradient. Pure CSS, no JS. */
.hero-mesh {
    background:
        radial-gradient(at 12% 16%, rgba(124,58,237,0.16) 0%, transparent 50%),
        radial-gradient(at 92% 28%, rgba(139,92,246,0.14) 0%, transparent 55%),
        radial-gradient(at 24% 88%, rgba(167,139,250,0.16) 0%, transparent 50%),
        radial-gradient(at 80% 84%, rgba(124,58,237,0.10) 0%, transparent 50%),
        #ffffff;
}

/* Subtle dot grid behind hero copy */
.hero-grid {
    background-image: radial-gradient(rgba(10,15,31,0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
}

/* Slow drifting blob on the hero — purely decorative */
.hero-blob {
    animation: blob-drift 18s ease-in-out infinite;
    will-change: transform;
}
@keyframes blob-drift {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    33%      { transform: translate3d(20px,-12px,0) scale(1.04); }
    66%      { transform: translate3d(-14px,18px,0) scale(0.98); }
}

/* Logo marquee for trust strip */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 30s linear infinite; }

/* Article body: typography-plugin styles get most of it; one tweak for code blocks */
.prose pre { background: #0A0F1F; color: #f8fafc; border-radius: 0.5rem; padding: 1rem; overflow-x: auto; }

/* Portfolio preview: image "scrolls" vertically on hover by transitioning object-position */
.preview-window {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}
.preview-window img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0%;
    transition: object-position 4.5s ease-in-out;
}
.preview-window:hover img,
.preview-window:focus-within img {
    object-position: 50% 100%;
}

/* Liquid-glass nav — frosted, subtle inner highlight + soft outer shadow */
.liquid-nav {
    background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.58) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.6);
    box-shadow:
        inset 0 1px 0 0 rgba(255,255,255,0.6),
        0 1px 0 0 rgba(229,233,242,0.5),
        0 10px 30px -16px rgba(10,15,31,0.08);
}

/* FAQ accordion toggle: a "+" that collapses to "−" when its panel is open.
   Driven purely by the button's aria-expanded state (toggled in script.js). */
.faq-icon { position: relative; width: 14px; height: 14px; color: inherit; }
.faq-icon::before, .faq-icon::after {
    content: ""; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.faq-icon::before { width: 14px; height: 2px;  transform: translate(-50%, -50%); }
.faq-icon::after  { width: 2px;  height: 14px; transform: translate(-50%, -50%); }
[data-faq-toggle][aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }

/* Floating pill navigation — frosted glass capsule that hovers over the page */
.nav-pill {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow:
        0 10px 30px -14px rgba(10,15,31,0.22),
        inset 0 1px 0 0 rgba(255,255,255,0.6);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-blob, .marquee-track { animation: none !important; }
    .preview-window img { transition: none !important; }
}