/* style.css — for static HTML + Tailwind CDN setup */

/* 1) Global base */
:root{
  --brand-start:#2563eb; /* blue-600 */
  --brand-end:#9333ea;   /* purple-600 */
}

html, body { margin:0; padding:0; }
body{
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:#111827;              /* gray-900 */
  background:#f9fafb;         /* gray-50 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 2) Gradient text helper */
.gradient-text{
  background: linear-gradient(90deg, var(--brand-start), var(--brand-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 3) Card polish */
.card{
  background:#fff;
  border:1px solid #f3f4f6; /* gray-100 */
  border-radius:1rem;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* 4) Fine grid texture for hero backdrop (subtle, non-generic) */
.grid-texture{
  background-image:
    linear-gradient(rgba(37,99,235,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

/* 5) Compression bars in the hero diagram */
@keyframes shrink-bar {
  from { width: var(--from); }
  to   { width: var(--to); }
}
.compress-bar {
  animation: shrink-bar 1.4s ease-out both;
}

/* 6) Avoid scrollbars for hero decorative blobs */
.hero-decor { overflow:hidden; }