@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root {
  --brand: #4f46e5;
  --brand-2: #7c3aed;
  --accent: #f59e0b;
}

* { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11','ss01','ss03';
}
h1,h2,h3,.font-display {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  letter-spacing: -0.02em;
}

.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}

/* Mesh gradient hero */
.mesh-bg {
  background-color: #0b1020;
  background-image:
    radial-gradient(at 15% 20%, hsla(253,85%,55%,0.55) 0px, transparent 50%),
    radial-gradient(at 85% 10%, hsla(189,90%,55%,0.35) 0px, transparent 50%),
    radial-gradient(at 70% 80%, hsla(289,85%,60%,0.45) 0px, transparent 50%),
    radial-gradient(at 20% 90%, hsla(340,85%,60%,0.30) 0px, transparent 50%),
    radial-gradient(at 50% 50%, hsla(217,90%,40%,0.40) 0px, transparent 60%);
}

.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.15);
}

.glass-light {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.5);
}

/* Animated gradient text */
.gradient-text {
  background: linear-gradient(135deg, #fbbf24 0%, #f472b6 50%, #818cf8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: shift 6s ease infinite;
}
@keyframes shift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Float animation */
.float { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Hover lift */
.lift { transition: all .35s cubic-bezier(.2,.8,.2,1); }
.lift:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -15px rgba(79,70,229,0.35); }

/* Marquee */
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 3rem; animation: scroll 30s linear infinite; flex-shrink: 0; }
@keyframes scroll { from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* Reveal */
.reveal { opacity: 0; transform: translateY(20px); transition: all .8s; }
.reveal.in { opacity: 1; transform: none; }

/* Glow ring */
.glow { box-shadow: 0 0 60px -10px rgba(124,58,237,0.55); }

/* Card noise overlay */
.noise::before {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#f1f5f9}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}