body{font-family:'Manrope',sans-serif;color:#0f172a;background:#f8fafc;overflow-x:hidden}
h1,h2,h3,h4,.font-display{font-family:'Outfit',sans-serif}
::selection{background:#bfdbfe;color:#1e3a8a}
.hex-pattern{background-image:url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 4L52 18v28L28 60 4 46V18z' fill='none' stroke='%233b82f6' stroke-opacity='0.07' stroke-width='1.5'/%3E%3C/svg%3E")}
.molecule-bg{background-image:radial-gradient(circle at 2px 2px, rgba(59,130,246,.10) 2px, transparent 0);background-size:44px 44px}
.glass-card{background:rgba(255,255,255,.72);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 32px rgba(30,58,138,.08)}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.animate-float{animation:floatY 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.9;transform:scale(1.08)}}
.animate-glow{animation:glowPulse 4s ease-in-out infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.marquee{animation:marquee 30s linear infinite}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.visible{opacity:1;transform:none}
.card-lift{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.card-lift:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(30,58,138,.12)}
.slide{opacity:0;transform:translateX(60px) scale(.92);transition:opacity .6s,transform .6s;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.slide.active{opacity:1;transform:none;pointer-events:auto}
html{scroll-behavior:smooth}