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

:root {
  --primary: #FFD600;
  --primary-light: #FFE657;
  --primary-dark: #C9A800;
  --secondary: #FF3D6B;
  --accent: #00E5FF;
  --dark: #0A0A0A;
  --white: #FFFFFF;
  --gray-100: #F5F5F5;
  --gray-200: #E0E0E0;
  --gray-300: #BDBDBD;
  --gray-400: #9E9E9E;
  --gray-500: #757575;
  --gray-600: #616161;
  --gray-700: #424242;
  --gray-800: #212121;
  --gray-900: #121212;
  --success: #00E676;
  --warning: #FF9100;
  --error: #FF1744;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;

  --gradient-primary: linear-gradient(135deg, #FFD600 0%, #FF3D6B 50%, #00E5FF 100%);
  --gradient-hero: linear-gradient(160deg, #0A0A0A 0%, #1a0a2e 40%, #0d1a0a 70%, #0A0A0A 100%);
  --gradient-fire: linear-gradient(135deg, #FFD600 0%, #FF6B00 40%, #FF3D6B 100%);
  --gradient-subtle: linear-gradient(180deg, #121212 0%, #1C1C1C 100%);

  --shadow-sm: 0 2px 8px rgba(255, 214, 0, 0.15);
  --shadow-md: 0 4px 20px rgba(255, 214, 0, 0.2);
  --shadow-lg: 0 8px 40px rgba(255, 61, 107, 0.25);
  --shadow-xl: 0 16px 64px rgba(0, 229, 255, 0.2);

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --container-width: 1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body { font-family: var(--font-body); color: var(--white); background: var(--dark); line-height: 1.6; }

img { max-width: 100%; height: auto; }

a { color: var(--primary); }

.reveal,
.reveal-left,
.reveal-right {
  opacity: 1;
  transform: none;
}

.js .reveal,
.js .reveal-left,
.js .reveal-right {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s, transform 0.7s;
}

.js .reveal.revealed,
.js .reveal-left.revealed,
.js .reveal-right.revealed {
  opacity: 1;
  transform: none;
}

.gradient-text { color: var(--primary); background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ===== FORCE CONTENT VISIBILITY FIX ===== */

.reveal,
.reveal-left,
.reveal-right,
.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.js .reveal,
.js .reveal-left,
.js .reveal-right,
.js .reveal.revealed,
.js .reveal-left.revealed,
.js .reveal-right.revealed {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
}

main[data-section="page-content"],
main[data-section="page-content"] .container,
main[data-section="page-content"] .hero__content,
main[data-section="page-content"] .hero__text,
main[data-section="page-content"] .hero__visual,
main[data-section="page-content"] .section-header,
main[data-section="page-content"] .services__grid,
main[data-section="page-content"] .service-card,
main[data-section="page-content"] .about__grid,
main[data-section="page-content"] .about__text,
main[data-section="page-content"] .portfolio__grid,
main[data-section="page-content"] .portfolio__item,
main[data-section="page-content"] .process__steps,
main[data-section="page-content"] .process__step,
main[data-section="page-content"] .testimonials__grid,
main[data-section="page-content"] .testimonial-card,
main[data-section="page-content"] .cta-section__inner,
main[data-section="page-content"] .cta-section__actions,
main[data-section="page-content"] .cta-section__contact-row {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

main[data-section="page-content"] .hero__content,
main[data-section="page-content"] .cta-section__inner {
  position: relative;
  z-index: 2;
}