:root { --ink: #081428; --brand: #0e9be0; }
html { scroll-behavior: smooth; }
body { font-family: Inter, system-ui, sans-serif; color: #0b1f3a; background: #fff; -webkit-font-smoothing: antialiased; }
[x-cloak] { display: none !important; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { animation: none !important; } }

/* gradient text */
.grad-text { background: linear-gradient(95deg, #7dd0fb 0%, #38b6f3 40%, #a78bfa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text-dark { background: linear-gradient(95deg, #0a5a78, #0e9be0 55%, #7c3aed); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* aurora hero */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 9999px; filter: blur(90px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 560px; height: 560px; background: #0e9be0; top: -180px; left: -120px; }
.aurora i:nth-child(2) { width: 480px; height: 480px; background: #7c3aed; top: 10%; right: -140px; animation-delay: -6s; opacity: .4; }
.aurora i:nth-child(3) { width: 420px; height: 420px; background: #16a34a; bottom: -200px; left: 35%; animation-delay: -11s; opacity: .28; }
@keyframes drift { to { transform: translate(60px, 40px) scale(1.15); } }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }
.dots-bg { background-image: radial-gradient(#cfe3f1 1.2px, transparent 1.2px); background-size: 22px 22px; }

/* glass + cards */
.glass { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card { background: #fff; border: 1px solid #e6eef5; border-radius: 1.25rem; box-shadow: 0 1px 2px rgba(8,20,40,.05), 0 12px 32px -14px rgba(8,20,40,.12); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 24px 50px -20px rgba(14,155,224,.35); border-color: #b3e3ff; }

/* spotlight product cards */
.spot { position: relative; overflow: hidden; }
.spot::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), var(--c, rgba(14,155,224,.22)), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.spot:hover::before { opacity: 1; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; padding: .85rem 1.4rem; border-radius: 9999px; transition: transform .25s, box-shadow .25s, background .25s; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: linear-gradient(95deg, #0e9be0, #0a7db8); color: #fff; box-shadow: 0 10px 30px -10px rgba(14,155,224,.7); }
.btn-primary:hover { box-shadow: 0 16px 36px -10px rgba(14,155,224,.85); }
.btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-outline { color: #0b1f3a; border: 1px solid #cfe0ec; background: #fff; }
.btn-outline:hover { border-color: #0e9be0; color: #0a7db8; }

/* eyebrow */
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #0a7db8; }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }
.on-dark .eyebrow { color: #7dd0fb; }

/* chat bubbles */
.bubble { max-width: 82%; padding: .6rem .85rem; border-radius: 1rem; font-size: .85rem; line-height: 1.4; animation: popin .4s ease both; }
.bubble.in { background: #fff; color: #0b1f3a; border-top-left-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.bubble.out { background: #d9fdd3; color: #0b1f3a; margin-left: auto; border-top-right-radius: .25rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
@keyframes popin { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.typing span { display: inline-block; width: 6px; height: 6px; margin: 0 1.5px; border-radius: 50%; background: #94a3b8; animation: bounce 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: none; } 30% { transform: translateY(-4px); } }

/* bars + timeline */
.bar { height: 8px; border-radius: 9999px; background: #e6eef5; overflow: hidden; }
.bar > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38b6f3, #0a7db8); width: 0; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }
.tl-line { background: linear-gradient(#0e9be0, rgba(14,155,224,.05)); }

/* marquee */
.marquee-mask { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* extraction demo */
.scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #38b6f3, transparent); box-shadow: 0 0 18px 4px rgba(56,182,243,.7); }
.field-row { animation: popin .45s ease both; }
.caret::after { content: "▍"; animation: blink 1s steps(1) infinite; color: #38b6f3; }

/* nav */
.nav-link { position: relative; font-size: .92rem; font-weight: 500; color: rgba(255,255,255,.82); transition: color .2s; }
.nav-link:hover { color: #fff; }
.nav-scrolled { background: rgba(5,13,26,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.08); }

/* prose-ish helpers */
.tick { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 9999px; display: inline-grid; place-items: center; background: #d8f0ff; color: #0a7db8; }
.tilt { transform-style: preserve-3d; transition: transform .2s ease-out; will-change: transform; }
::selection { background: #b3e3ff; }

/* chat columns: never squash messages, clip anything that scrolls off the top */
.chat-col { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.chat-col > * { flex-shrink: 0; }