/* Modern reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s, color 0.2s;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: hsl(var(--foreground));
}

/* Layout helpers */
.container-wide {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}
@media (min-width: 768px) { .container-wide { padding-inline: 2rem; } }

.section-padding {
  padding-block: 2.5rem;
  padding-inline: 1rem;
}
@media (min-width: 768px) { .section-padding { padding-block: 4rem; padding-inline: 2rem; } }
@media (min-width: 1024px) { .section-padding { padding-block: 6rem; } }

/* Visually hidden */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Background effects */
.bg-mesh {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(at 40% 20%, hsl(var(--primary) / 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsl(var(--orange) / 0.06) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsl(var(--teal) / 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsl(var(--primary) / 0.04) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsl(var(--orange) / 0.05) 0px, transparent 50%);
}
.bg-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(hsl(var(--primary) / 0.1) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.4;
}

/* Text colour helpers */
.text-primary { color: hsl(var(--primary)); }
.text-orange  { color: hsl(var(--orange)); }
.text-teal    { color: hsl(var(--teal)); }
.text-muted   { color: hsl(var(--muted-foreground)); }
.text-fg      { color: hsl(var(--foreground)); }

.bg-primary-soft { background: hsl(var(--primary) / 0.1); }
.bg-orange-soft  { background: hsl(var(--orange) / 0.1); }
.bg-teal-soft    { background: hsl(var(--teal) / 0.1); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(217 91% 65%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Cards & shadows */
.card-shadow { box-shadow: var(--shadow-card); }
.card-shadow-hover { box-shadow: var(--shadow-card-hover); }

/* Animations — entry */
.animate-fade-up { animation: fadeUp 0.6s ease-out forwards; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Scroll-reveal: hidden until [data-revealed] */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal[data-revealed] { opacity: 1; transform: translateY(0); }
.reveal.from-left { transform: translateX(-24px); }
.reveal.from-right { transform: translateX(24px); }
.reveal.from-left[data-revealed], .reveal.from-right[data-revealed] { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Utilities */
.flex { display: flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.text-center { text-align: center; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.hidden { display: none; }
@media (min-width: 768px) { .md\:block { display: block; } .md\:hidden { display: none; } }
@media (min-width: 1024px) { .lg\:block { display: block; } .lg\:hidden { display: none; } }