/* ------------------------------------------------------------------
 * Brand styles layered on top of Tailwind (Play CDN).
 * Palette derives from the logo gradient: teal -> cyan -> orange.
 * ------------------------------------------------------------------ */
:root {
  --teal:   #2dd4bf;
  --cyan:   #22d3ee;
  --orange: #f97316;
  --coral:  #fb7185;
  --ink:    #0b1120;
  --ink-2:  #0f172a;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Gradient text + buttons --------------------------------------------------- */
.text-gradient {
  background: linear-gradient(100deg, var(--teal), var(--cyan) 45%, var(--orange));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn-gradient {
  background: linear-gradient(100deg, var(--teal), var(--cyan) 50%, var(--orange));
  background-size: 180% 180%;
  transition: background-position .5s ease, transform .2s ease, box-shadow .3s ease;
}
.btn-gradient:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -12px rgba(34, 211, 238, .6);
}
.ring-gradient { position: relative; }
.ring-gradient::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(120deg, var(--teal), var(--cyan), var(--orange));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* Hero mesh glow ------------------------------------------------------------ */
.hero-mesh {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-mesh::before, .hero-mesh::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55;
}
.hero-mesh::before {
  width: 46rem; height: 46rem; top: -14rem; left: -10rem;
  background: radial-gradient(circle at center, var(--teal), transparent 60%);
  animation: float1 16s ease-in-out infinite;
}
.hero-mesh::after {
  width: 40rem; height: 40rem; top: -8rem; right: -12rem;
  background: radial-gradient(circle at center, var(--orange), transparent 60%);
  animation: float2 20s ease-in-out infinite;
}
@keyframes float1 { 50% { transform: translate(4rem, 3rem) scale(1.1); } }
@keyframes float2 { 50% { transform: translate(-3rem, 4rem) scale(1.08); } }

/* Grid texture for dark sections */
.bg-grid {
  background-image:
    linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 50%, transparent 100%);
}

/* Cards --------------------------------------------------------------------- */
.card-hover { transition: transform .25s ease, box-shadow .3s ease, border-color .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -24px rgba(2,6,23,.5); }

/* Scroll reveal ------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-mesh::before, .hero-mesh::after { animation: none; }
  html { scroll-behavior: auto; }
}

/* Nav scroll state */
#nav { transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.nav-scrolled { background-color: rgba(11,17,32,.8); backdrop-filter: blur(12px); border-color: rgba(148,163,184,.12) !important; }

/* Marquee for trust strip */
.marquee { display: flex; gap: 3rem; width: max-content; animation: scrollx 30s linear infinite; }
.marquee-wrap:hover .marquee { animation-play-state: paused; }
@keyframes scrollx { to { transform: translateX(-50%); } }