html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { font-family: 'Inter', ui-sans-serif, system-ui; }
.font-display { font-family: 'Sora', ui-sans-serif, system-ui; }

/* Navbar */
#navbar { transition: box-shadow .25s ease, background-color .25s ease; }
#navbar.is-scrolled { box-shadow: 0 8px 30px -12px rgba(26, 37, 48, .25); background-color: rgba(255, 255, 255, .96); }
.nav-link { position: relative; }
.nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: #f4b942; transform: scaleX(0); transition: transform .25s ease; }
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.marquee-track, .float-slow, .pulse-dot::before { animation: none !important; }
}

/* Backgrounds */
.bg-hero {
	background:
		radial-gradient(55% 60% at 85% 20%, rgba(26, 188, 156, .20), transparent 70%),
		radial-gradient(45% 55% at 10% 90%, rgba(244, 185, 66, .14), transparent 70%),
		linear-gradient(160deg, #1a2530 0%, #2c3e50 55%, #34495e 100%);
}
.bg-grid {
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.bg-grid-light {
	background-image:
		linear-gradient(rgba(52, 73, 94, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(52, 73, 94, .06) 1px, transparent 1px);
	background-size: 44px 44px;
}
.text-gradient { background: linear-gradient(90deg, #f4b942, #f7cf78 60%, #6fd6bd); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Marquee */
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track.marquee-slow { animation-duration: 44s; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-mask { mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent); }

/* Floating decorations */
.float-slow { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.pulse-dot { position: relative; }
.pulse-dot::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: inherit; animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* Flow steps (horizontal on desktop, vertical on mobile) */
.flow { display: grid; gap: 1rem; }
.flow-step { position: relative; }
@media (min-width: 1024px) {
	.flow { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1.25rem; }
	.flow-step:not(:last-child)::after {
		content: ''; position: absolute; top: 28px; left: calc(50% + 34px); right: calc(-50% + 34px - 1.25rem);
		border-top: 2px dashed rgba(52, 73, 94, .28);
	}
	.flow-dark .flow-step:not(:last-child)::after { border-top-color: rgba(255, 255, 255, .22); }
}

/* Chat */
.bubble { max-width: 85%; border-radius: 18px; padding: .7rem 1rem; font-size: .875rem; line-height: 1.45; }
.bubble-user { margin-left: auto; background: #f4b942; color: #1a2530; border-bottom-right-radius: 6px; }
.bubble-bot { background: #fff; color: #2c3e50; border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(26, 37, 48, .08); }

/* Architecture connectors */
.converge { position: relative; height: 48px; }
.converge::before { content: ''; position: absolute; top: 0; left: 16.66%; right: 16.66%; height: 24px; border: 2px solid rgba(52, 73, 94, .25); border-top: 0; border-radius: 0 0 16px 16px; }
.converge::after { content: ''; position: absolute; top: 24px; left: 50%; height: 24px; border-left: 2px solid rgba(52, 73, 94, .25); }
.vline { width: 2px; height: 22px; margin: 0 auto; background: rgba(52, 73, 94, .25); }

/* Forms */
.field { width: 100%; border: 1px solid #c9d4de; border-radius: 12px; padding: .8rem 1rem; font-size: .95rem; color: #1a2530; background: #fff; transition: border-color .2s, box-shadow .2s; }
.field:focus { outline: none; border-color: #34495e; box-shadow: 0 0 0 4px rgba(52, 73, 94, .12); }