/* =========================================================================
   Exterienc — global styles (Tailwind utilities come from the CDN build)
   ========================================================================= */
:root {
    --brand-teal: #14b8a6;
    --brand-blue: #2563eb;
    --ink: #0b1121;
    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "cv11", "ss01"; }

/* Background layers ------------------------------------------------------- */
#bg-canvas {
    position: fixed; inset: 0; width: 100vw; height: 100vh;
    z-index: 0; pointer-events: none; opacity: .55;
}
.bg-aurora {
    position: fixed; inset: -20vmax; z-index: 0; pointer-events: none;
    background:
        radial-gradient(40vmax 40vmax at 15% 10%, rgba(37, 99, 235, .14), transparent 60%),
        radial-gradient(35vmax 35vmax at 85% 30%, rgba(20, 184, 166, .12), transparent 60%),
        radial-gradient(30vmax 30vmax at 50% 100%, rgba(6, 182, 212, .08), transparent 60%);
    animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    100% { transform: translate3d(-3vmax, 2vmax, 0) rotate(8deg); }
}

/* Navbar ---------------------------------------------------------------- */
#site-nav { background: rgba(11, 17, 33, .55); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#site-nav.is-scrolled { background: rgba(11, 17, 33, .88); border-bottom-color: rgba(51, 65, 85, .6); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
.dd-item { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; border-radius: .75rem; font-size: .875rem; font-weight: 600; color: #cbd5e1; transition: background .2s, color .2s; text-align: left; }
.dd-item:hover { background: rgba(30, 41, 59, .8); color: #fff; }
[data-dropdown-menu] { animation: pop .18s var(--ease-out); z-index: 120; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.burger { display: grid; gap: 5px; width: 22px; }
.burger span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease-out), opacity .2s; }
[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#mobile-menu:not(.hidden) { animation: slideDown .25s var(--ease-out); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Footer ---------------------------------------------------------------- */
.footer-title { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #e2e8f0; margin-bottom: 1.25rem; }
.footer-link { color: #94a3b8; transition: color .2s, padding .2s; }
.footer-link:hover { color: #5eead4; padding-left: 4px; }
.footer-ic { display: inline-flex; padding: .5rem; border-radius: .6rem; background: #0f172a; border: 1px solid #1e293b; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: .75rem; background: #0f172a; border: 1px solid #1e293b; color: #94a3b8; transition: all .3s var(--ease-out); }
.social-btn:hover { color: #fff; background: linear-gradient(135deg, var(--brand-blue), var(--brand-teal)); border-color: transparent; transform: translateY(-3px); box-shadow: 0 10px 24px -8px rgba(20, 184, 166, .5); }

/* Scroll reveal ---------------------------------------------------------- */
.js-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; }
.js-anim [data-reveal="left"] { transform: translateX(-32px); }
.js-anim [data-reveal="right"] { transform: translateX(32px); }
.js-anim [data-reveal="zoom"] { transform: scale(.94); }
.js-anim [data-reveal].revealed { opacity: 1; transform: none; }

/* Hero ------------------------------------------------------------------- */
.hero-glow { position: absolute; left: 50%; top: 45%; width: min(1100px, 120vw); height: 620px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(37, 99, 235, .28), rgba(20, 184, 166, .16) 55%, transparent 75%); filter: blur(30px); pointer-events: none; animation: breathe 9s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.grid-fade { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 20%, transparent 70%); }
.type-cursor { display: inline-block; width: .09em; min-width: 4px; height: .82em; margin-left: .12em; border-radius: 2px; vertical-align: -0.04em; background: #2dd4bf; box-shadow: 0 0 16px rgba(45, 212, 191, .8); animation: blink .9s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.float-y { animation: floatY 7s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; inset: 0; transform: translateX(-120%); background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .18) 50%, transparent 70%); transition: transform .8s var(--ease-out); }
.shine:hover::after { transform: translateX(120%); }

/* Gradient border card */
.glow-border { position: relative; }
.glow-border::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(37, 99, 235, .7), rgba(20, 184, 166, .7), rgba(6, 182, 212, .2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .6; transition: opacity .4s; }
.glow-border:hover::before { opacity: 1; }

/* Spotlight that follows the cursor on cards */
.spotlight { --mx: 50%; --my: 50%; }
.spotlight::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(45, 212, 191, .10), transparent 45%); opacity: 0; transition: opacity .4s; }
.spotlight:hover::after { opacity: 1; }

/* Marquee ---------------------------------------------------------------- */
.marquee { --gap: 1.5rem; display: flex; overflow: hidden; gap: var(--gap); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; flex-shrink: 0; gap: var(--gap); min-width: 100%; justify-content: space-around; animation: marquee var(--speed, 40s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-100% - var(--gap))); } }

/* FAQ accordion ------------------------------------------------------------ */
.faq-item[open] summary .faq-chev { transform: rotate(180deg); }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-body { animation: fadeIn .35s var(--ease-out); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Toasts & modals ---------------------------------------------------------- */
.toast { pointer-events: auto; display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border-radius: 1rem; background: rgba(15, 23, 42, .96); border: 1px solid #334155; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); color: #e2e8f0; animation: toastIn .45s var(--ease-out); }
.toast.leaving { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-16px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-12px) scale(.97); } }
.modal-backdrop { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(2, 6, 23, .72); backdrop-filter: blur(6px); animation: fadeIn .2s ease; }
.modal-backdrop[hidden] { display: none; }
.modal-panel { width: 100%; max-height: 90vh; overflow-y: auto; animation: modalIn .35s var(--ease-out); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
body.modal-open { overflow: hidden; }

/* Markdown content ----------------------------------------------------------- */
.prose-x { color: #cbd5e1; line-height: 1.8; font-size: 1rem; }
.prose-x h1, .prose-x h2, .prose-x h3, .prose-x h4 { color: #fff; font-weight: 800; letter-spacing: -.01em; margin: 2rem 0 .75rem; line-height: 1.3; scroll-margin-top: 110px; }
.prose-x h1 { font-size: 2rem; } .prose-x h2 { font-size: 1.5rem; } .prose-x h3 { font-size: 1.2rem; } .prose-x h4 { font-size: 1.05rem; }
.prose-x > :first-child { margin-top: 0; }
.prose-x p { margin: .9rem 0; }
.prose-x a { color: #5eead4; text-decoration: underline; text-underline-offset: 3px; }
.prose-x ul, .prose-x ol { margin: .9rem 0; padding-left: 1.4rem; }
.prose-x ul { list-style: disc; } .prose-x ol { list-style: decimal; }
.prose-x li { margin: .35rem 0; } .prose-x li.nested { margin-left: 1.25rem; list-style: circle; }
.prose-x code { background: rgba(30, 41, 59, .9); border: 1px solid #334155; padding: .1rem .4rem; border-radius: .4rem; font-size: .85em; color: #5eead4; }
.prose-x pre { background: #020617; border: 1px solid #1e293b; border-radius: 1rem; padding: 1rem 1.2rem; overflow-x: auto; margin: 1.2rem 0; }
.prose-x pre code { background: none; border: 0; padding: 0; color: #e2e8f0; font-size: .85rem; }
.prose-x blockquote { border-left: 3px solid #14b8a6; padding: .25rem 1rem; color: #94a3b8; margin: 1.2rem 0; background: rgba(20, 184, 166, .05); border-radius: 0 .75rem .75rem 0; }
.prose-x hr { border-color: #1e293b; margin: 2rem 0; }
.prose-x img { border-radius: 1rem; max-width: 100%; }
.prose-x .table-wrap { overflow-x: auto; margin: 1.2rem 0; border: 1px solid #1e293b; border-radius: 1rem; }
.prose-x table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.prose-x th { background: #0f172a; color: #fff; text-align: left; font-weight: 700; }
.prose-x th, .prose-x td { padding: .65rem .9rem; border-bottom: 1px solid #1e293b; vertical-align: top; }
.prose-x strong { color: #f1f5f9; }

/* Optional liquid cursor (Admin → Settings → Appearance) ------------------------ */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; border-radius: 50%; transform: translate(-50%, -50%); }
.cursor-dot { width: 7px; height: 7px; background: #2dd4bf; }
.cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(45, 212, 191, .55); transition: width .25s var(--ease-out), height .25s var(--ease-out), background .25s; }
.cursor-ring.hover { width: 54px; height: 54px; background: rgba(37, 99, 235, .12); border-color: rgba(96, 165, 250, .6); }

/* Misc ------------------------------------------------------------------------ */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.no-scrollbar::-webkit-scrollbar { display: none; } .no-scrollbar { scrollbar-width: none; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .thin-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 6px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
.skeleton { background: linear-gradient(90deg, #111827 25%, #1f2937 37%, #111827 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: .75rem; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.progress-shine { position: relative; overflow: hidden; }
.progress-shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); animation: shimmer 2.2s infinite; transform: translateX(-100%); }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .js-anim [data-reveal] { opacity: 1 !important; transform: none !important; }
    #bg-canvas { display: none; }
}