/* ============================================
   SHARED — tokens, reset, navbar, buttons, footer, base hero
   ============================================ */

/* ---- from homepageCSS/root.css ---- */

:root {
    /* Sophisticated Color Palette - Earthy & Cultured */
    --primary: #2C5F7C;           /* KEEP THIS ONE*/
    --primary-light: #4A8BA6;     /* Lighter teal */
    --primary-dark: #1A3A4D;      /* Dark navy teal */
    
    --secondary: #D4855A;         /* Warm Terracotta - earthy, inviting */
    --secondary-light: #E5A57D;   /* KEEP THIS ONE */
    --secondary-dark: #B86D42;    
    
    --accent-sage: #7A9B76;       /* Sage Green - natural, grounded */
    --accent-plum: #6B4C7C;       /* Deep Plum - refined, creative ---KEEP THIS ONE*/
    --accent-gold: #C9A961;       /* Muted Gold - premium, elegant */
    --accent-slate: #5C6B73;      /* Slate Blue - professional */

      --accent-pink: #ec4899;
  --accent-purple: #a855f7;
  --accent-green: #10b981;

      /* Gradients */
  --gradient-primary: linear-gradient(135deg, #4A8BA6 0%, #2C5F7C 100%);/* KEEP THIS ONE */
  --gradient-secondary: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
  --gradient-fun: linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #0ea5e9 100%);
  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

  --alt-gradient-primary: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    
    /* Neutrals - Sophisticated Grays */
    --bg-primary: #FAFBFC;        /* Off-white, not stark */
    --bg-secondary: #F4F6F7;      /* Soft gray */
    --bg-dark: #2A2E33;           /* Charcoal, not black */
    
    --text-primary: #2A2E33;      /* Dark charcoal for readability */
    --text-secondary: #5C6B73;    /* Muted slate for secondary text */
    --text-light: #8A9BA8;        /* Light gray for hints */
    
    /* Overlay & Effects */
    --overlay-dark: rgba(42, 46, 51, 0.85);
    --overlay-gradient: linear-gradient(135deg, rgba(44, 95, 124, 0.95), rgba(107, 76, 124, 0.95));
    
    /* Spacing System */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    
    /* Typography Scale */
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Inter', -apple-system, system-ui, sans-serif;
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --text-6xl: 4rem;
    
    /* Shadows - Subtle & Sophisticated */
    --shadow-sm: 0 1px 3px rgba(42, 46, 51, 0.08);
    --shadow-md: 0 4px 12px rgba(42, 46, 51, 0.1);
    --shadow-lg: 0 8px 24px rgba(42, 46, 51, 0.12);
    --shadow-xl: 0 16px 48px rgba(42, 46, 51, 0.15);

     --shadow-glow: 0 0 40px rgba(14, 165, 233, 0.4);
  --shadow-glow-pink: 0 0 40px rgba(236, 72, 153, 0.4);
  --shadow-glow-purple: 0 0 40px rgba(168, 85, 247, 0.4);
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition: 300ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Z-index Scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ---- from homepageCSS/resetAndBase.css ---- */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-3xl); }
h4 { font-size: var(--text-2xl); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }

p {
    margin-bottom: var(--space-md);
    color: var(--text-secondary);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-base);
}

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

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

/* ---- from homepageCSS/utilities.css ---- */

/* ============================================
   UTILITY CLASSES
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.section {
    padding: var(--space-3xl) 0;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }

/* ---- from homepageCSS/header.css ---- */
/* ====================================
   SECTION HEADERS
   ==================================== */

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--space-md);
  border: 2px solid rgba(14, 165, 233, 0.2);
}

.tag-icon {
  font-size: 1.2rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
}

.highlight-text {
  background: var(--gradient-fun);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 600px;
}

.section-header {
  margin-bottom: var(--space-3xl);
}

.section-header.tilted {
  transform: rotate(-1deg);
}

/* ---- from homepageCSS/navbar.css ---- */

/* ====================================
   NAVBAR
   ==================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: var(--space-md) 0;
  transition: var(--transition);
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md);
  padding: var(--space-sm) 0;
}

/* Pages whose hero is a dark image/gradient (set via body[data-hero="dark"])
   need light nav text until the white scrolled background kicks in. */
.navbar.on-dark:not(.scrolled) .nav-links a:not(.cta-nav) {
  color: white;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.navbar.on-dark:not(.scrolled) .nav-links a:not(.cta-nav):hover,
.navbar.on-dark:not(.scrolled) .nav-links a:not(.cta-nav).active {
  color: white;
  opacity: 0.8;
}

.navbar.on-dark:not(.scrolled) .mobile-menu-btn span {
  background: white;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.logo {
  height: 50px;
  width: auto;
  transition: var(--transition);
  position: relative;
  z-index: 2;
}

.logo:hover {
  transform: scale(1.05) rotate(-3deg);
}

.logo-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--gradient-primary);
  border-radius: 50%;
  opacity: 0.3;
  animation: pulse 2s infinite;
  z-index: 1;
}

@keyframes pulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

.nav-links {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}

.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-primary);
  position: relative;
  padding: 0.5rem 0;
  transition: var(--transition);
}

.nav-links a:not(.cta-nav)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  transition: var(--transition);
}

.nav-links a:not(.cta-nav):hover::after,
.nav-links a:not(.cta-nav).active::after {
  width: 100%;
}

.nav-links a:not(.cta-nav):hover,
.nav-links a:not(.cta-nav).active {
  color: var(--primary);
}

.cta-nav {
  background: var(--gradient-primary);
  color: white !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: var(--shadow-md);
  transition: var(--transition-bounce) !important;
}

.cta-nav:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow);
}

.cta-arrow {
  transition: var(--transition);
}

.cta-nav:hover .cta-arrow {
  transform: translateX(5px);
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.mobile-menu-btn span {
  width: 28px;
  height: 3px;
  background: var(--text-primary);
  border-radius: var(--radius-full);
  transition: var(--transition);
}

@media (max-width: 768px) {
  .mobile-menu-btn {
    display: flex;
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: white;
    box-shadow: var(--shadow-md);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease;
  }

  .nav-links.active {
    max-height: 400px;
    opacity: 1;
  }

  .nav-links li {
    width: 100%;
  }

  /* Dropdown panel is always light, regardless of scroll/on-dark hero state */
  .nav-links a:not(.cta-nav) {
    display: block;
    padding: 1rem var(--space-lg);
    color: var(--text-primary) !important;
    text-shadow: none !important;
  }

  .nav-links a.cta-nav {
    margin: var(--space-sm) var(--space-lg) var(--space-md);
    justify-content: center;
  }
}

/* ---- from homepageCSS/buttons.css ---- */

/* ====================================
   BUTTONS - OLD
   ==================================== */


/*

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-glow);
}

.btn-glow {
  animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: var(--shadow-lg);
  }
  50% {
    box-shadow: var(--shadow-glow);
  }
}

.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--primary);
  transform: translateY(-4px);
}

.btn-outline-fun {
  background: transparent;
  border: 3px solid var(--primary);
  color: var(--primary);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.btn-outline-fun::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: var(--transition);
  z-index: -1;
}

.btn-outline-fun:hover {
  color: white;
  border-color: var(--primary);
  transform: translateY(-4px);
}

.btn-outline-fun:hover::before {
  left: 0;
}

.btn-arrow {
  transition: var(--transition);
}

.btn:hover .btn-arrow {
  transform: translateX(5px);
}
*/


/* ============================================
   BUTTONS
   ============================================ */


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-full);
    transition: all var(--transition-bounce);
    cursor: pointer;
    border: 2px solid transparent;
}




.btn-primary {
   /* background: linear-gradient(135deg, var(--primary), var(--primary-dark));*/
    background: var(--gradient-primary); 
   color: white;
    box-shadow: var(--shadow-sm);
}




.btn-primary:hover {
    transform: translateY(-2px)scale(1.02);
    box-shadow: var(--shadow-glow);
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-lg);
}

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
}




.btn-glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: var(--text-primary);
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: var(--primary);
  transform: translateY(-4px);
}

.btn-outline-fun {
  background: transparent;
  border: 3px solid var(--primary);
  color: var(--primary);
  font-weight: 700;
  position: relative;
  overflow: hidden;
}

.btn-outline-fun::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: var(--gradient-primary);
  transition: var(--transition);
  z-index: -1;
}
.btn-outline-fun:hover {
  color: white;
  border-color: var(--primary);
  transform: translateY(-4px);
}

.btn-outline-fun:hover::before {
  left: 0;
}

.btn-arrow {
  transition: var(--transition);
}

.btn:hover .btn-arrow {
  transform: translateX(5px);
}


/* ====================================
   BUTTONS
   ==================================== 

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  border: none;
  transition: var(--transition-bounce);
  position: relative;
  overflow: hidden;
}

.btn-primary {
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-lg);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-glow);
}

.btn-glow {
  animation: glow-pulse 2s infinite;
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: var(--shadow-lg);
  }
  50% {
    box-shadow: var(--shadow-glow);
  }
}







/* ---- from homepageCSS/footer.css ---- */

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: var(--bg-dark);
    color: rgba(255, 255, 255, 0.8);
    padding: var(--space-3xl) 0 var(--space-xl);
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

@media (max-width: 1024px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
    }
}

.footer-section h4 {
    color: white;
    font-size: var(--text-lg);
    margin-bottom: var(--space-lg);
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.7;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--space-sm);
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    transition: color var(--transition-base);
}

.footer-links a:hover {
    color: white;
    padding-left: var(--space-xs);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.footer-social-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: white;
    border: 2px solid transparent;
    transition: var(--transition-bounce);
}

.footer-social-link:hover {
    background: var(--gradient-primary);
    border-color: var(--primary-light);
    transform: translateY(-5px) rotate(-5deg);
}

.footer-bottom {
    padding-top: var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* ---- from homepageCSS/hero.css ---- */

/* ====================================
   HERO SECTION
   ==================================== */

.hero {
    background-image: url("../images/BG3.webp");
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat;  

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) 0;
  padding-top: 120px;
  position: relative;
  overflow: hidden;
}

.hero-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
  text-align: center;
  position: relative;
  z-index: 10;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: rgba(14, 165, 233, 0.1);
  border: 2px solid rgba(14, 165, 233, 0.3);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-xl);
  animation: fadeInUp 0.6s ease;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: blink 2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 6rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: var(--space-lg);
  letter-spacing: -0.02em;
}

.title-word {
  display: inline-block;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
}

.title-word:nth-child(1) { animation-delay: 0.1s; }
.title-word:nth-child(2) { animation-delay: 0.2s; }
.title-word:nth-child(3) { animation-delay: 0.3s; }
.title-word:nth-child(5) { animation-delay: 0.4s; }
.title-word:nth-child(6) { animation-delay: 0.5s; }

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

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

.title-emoji {
  display: inline-block;
  animation: rotate 3s infinite ease-in-out;
}

@keyframes rotate {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto var(--space-xl);
  line-height: 1.8;
  animation: fadeInUp 0.6s ease 0.6s backwards;
}

.hero-subtitle strong {
  color: var(--primary);
  font-weight: 700;
}

.hero-cta {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--space-3xl);
  animation: fadeInUp 0.6s ease 0.7s backwards;
}



/* Hero Visual - Gaming themed */
.hero-visual {
    position: relative;
    height: 600px;
    animation: fadeInRight 0.8s ease-out 0.2s both;
}

/* IMAGE SUGGESTION: 
      Add a sophisticated gaming illustration here:
   - Isometric game world with muted, earthy colors
   - Abstract geometric shapes representing game elements
   - Hand-drawn/illustrated style (not 3D cartoon)
   - Think: Monument Valley aesthetic, minimalist gaming art
   - Color palette: teals, terracottas, sage greens
   - Should feel artistic and refined, not childish
*/

.hero-visual-inner {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(44, 95, 124, 0.05), 
        rgba(107, 76, 124, 0.05));
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

/* Floating game elements - sophisticated animation */
.floating-element {
    position: absolute;
    border-radius: var(--radius-md);
    animation: float 6s ease-in-out infinite;
    opacity: 0.6;
}

.floating-element:nth-child(1) {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--secondary), var(--secondary-light));
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

.floating-element:nth-child(3) {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--accent-sage), var(--accent-plum));
    bottom: 15%;
    left: 20%;
    animation-delay: 2s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ====================================
   HERO STATS
   ==================================== */

.hero-stats {
  display: flex;
  gap: var(--space-xl);
  justify-content: center;
  flex-wrap: wrap;
  animation: fadeInUp 0.6s ease 0.8s backwards;
}

.stat-card {
  background: white;
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  transition: var(--transition-bounce);
  border: 2px solid transparent;
  min-width: 180px;
}

.stat-card:hover {
  transform: translateY(-8px) rotate(-2deg);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-light);
}

.stat-card:nth-child(2):hover {
  border-color: var(--secondary-light);
}

.stat-card:nth-child(3):hover {
  border-color: var(--accent-pink);
}

.stat-icon {
  font-size: 2.5rem;
  animation: bounce 2s infinite;
}

.stat-card:nth-child(2) .stat-icon {
  animation-delay: 0.2s;
}

.stat-card:nth-child(3) .stat-icon {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.stat-number {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.stat-card:nth-child(2) .stat-number {
  color: var(--secondary);
}

.stat-card:nth-child(3) .stat-number {
  color: var(--accent-pink);
}

.stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}



/* ====================================
   SCROLL INDICATOR
   ==================================== */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  animation: fadeIn 1s ease 1s backwards;
}

.mouse {
  width: 30px;
  height: 50px;
  border: 3px solid var(--primary);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 10px;
  background: var(--primary);
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll 1.5s infinite;
}

@keyframes scroll {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(15px);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.scroll-indicator span {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 600;
}





/* ---- site-wide anchor scroll offset (was in styles.css) ---- */
html {
    scroll-padding-top: 80px;
}


/* ============================================
   HOME (index.html)
   ============================================ */

/* ---- from homepageCSS/styles.css ---- */


/* ============================================
   SOLKAHF INTERACTIVE - GAMING STUDIO
   Sophisticated & Playful Design System
   ============================================ */


/* IMPORTS FROM SEPERATES FILE */



/* ====================================
   FLOATING SHAPES BACKGROUND
   ==================================== */

body[data-page="home"] .floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

body[data-page="home"] .shape {
  position: absolute;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  opacity: 0.05;
  animation: home-float 20s infinite ease-in-out;
}

body[data-page="home"] .shape-1 {
  width: 300px;
  height: 300px;
  background: var(--gradient-primary);
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

body[data-page="home"] .shape-2 {
  width: 200px;
  height: 200px;
  background: var(--gradient-secondary);
  top: 60%;
  right: 10%;
  animation-delay: -5s;
}

body[data-page="home"] .shape-3 {
  width: 250px;
  height: 250px;
  background: var(--accent-purple);
  bottom: 10%;
  left: 15%;
  animation-delay: -10s;
}

body[data-page="home"] .shape-4 {
  width: 180px;
  height: 180px;
  background: var(--accent-pink);
  top: 30%;
  right: 20%;
  animation-delay: -15s;
}

body[data-page="home"] .shape-5 {
  width: 220px;
  height: 220px;
  background: var(--accent-green);
  bottom: 30%;
  right: 5%;
  animation-delay: -7s;
}

@keyframes home-float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(30px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(-20px, 20px) rotate(240deg);
  }
}



/* ============================================
   WHAT WE DO SECTION - Game Development Focus
   ============================================ */

body[data-page="home"] .what-we-do {
    background: var(--bg-primary);
}

body[data-page="home"] .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-xl);
}

body[data-page="home"] .service-card {
    position: relative;
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    border: 2px solid transparent;
    transition: all var(--transition-base);
    overflow: hidden;
}

/* Subtle gradient border effect */
body[data-page="home"] .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    padding: 2px;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition-base);
}

body[data-page="home"] .service-card:hover::before {
    opacity: 1;
}

body[data-page="home"] .service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

body[data-page="home"] .service-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(44, 95, 124, 0.1), rgba(107, 76, 124, 0.1));
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: 2rem;
    transition: transform var(--transition-base);
}

body[data-page="home"] .service-card:hover .service-icon {
    transform: scale(1.1) rotate(5deg);
}

body[data-page="home"] .service-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

body[data-page="home"] .service-description {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

body[data-page="home"] .service-features {
    list-style: none;
}

body[data-page="home"] .service-features li {
    padding: var(--space-xs) 0;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

body[data-page="home"] .service-features li::before {
    content: '→';
    color: var(--primary);
    font-weight: bold;
}




/* ============================================
   NEWSLETTER/COMMUNITY SECTION
   ============================================ */

body[data-page="home"] .newsletter-section {
    background: linear-gradient(135deg, 
        rgba(44, 95, 124, 0.05), 
        rgba(212, 133, 90, 0.05));
    padding: var(--space-3xl) 0;
}

body[data-page="home"] .newsletter-content {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

body[data-page="home"] .newsletter-icon {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

body[data-page="home"] .newsletter-form {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

body[data-page="home"] .newsletter-input {
    flex: 1;
    padding: var(--space-md) var(--space-lg);
    border: 2px solid rgba(44, 95, 124, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-family: var(--font-body);
    transition: all var(--transition-base);
}

body[data-page="home"] .newsletter-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.1);
}

body[data-page="home"] .newsletter-submit {
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

body[data-page="home"] .newsletter-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   CTA SECTION - Join Our Gaming Community
   ============================================ */

body[data-page="home"] .cta-section {
    background: var(--bg-dark);
    color: white;
    position: relative;
    overflow: hidden;
    text-align: center;
}

body[data-page="home"] .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(44, 95, 124, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(107, 76, 124, 0.3) 0%, transparent 50%);
    pointer-events: none;
}

body[data-page="home"] .cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

body[data-page="home"] .cta-title {
    font-size: var(--text-5xl);
    margin-bottom: var(--space-lg);
    color: white;
}

body[data-page="home"] .cta-text {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    margin-bottom: var(--space-2xl);
}

body[data-page="home"] .cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */

body[data-page="home"] .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

body[data-page="home"] .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   PARTICLE CANVAS - Subtle Interactive Background
   ============================================ */

body[data-page="home"] #particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

/* ============================================
   CUSTOM CURSOR (Optional - adds sophistication)
   ============================================ */

body[data-page="home"] .custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.1s ease;
    transform: translate(-50%, -50%);
}

body[data-page="home"] .custom-cursor-follower {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transition: all 0.15s ease;
    transform: translate(-50%, -50%);
}

/* ============================================
   LOADING ANIMATION
   ============================================ */

body[data-page="home"] .page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body[data-page="home"] .page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

body[data-page="home"] .loader-logo {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    max-width: 90vw;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: home-pulse 1.5s ease-in-out infinite;
}

@keyframes home-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ============================================
   GAME GENRE TAGS
   ============================================ */

body[data-page="home"] .genre-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

body[data-page="home"] .genre-tag {
    padding: var(--space-xs) var(--space-md);
    background: rgba(44, 95, 124, 0.1);
    border: 1px solid rgba(44, 95, 124, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--primary);
    transition: all var(--transition-base);
}

body[data-page="home"] .genre-tag:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-2px);
}

/* ============================================
   INTERACTIVE HOVER EFFECTS
   ============================================ */

body[data-page="home"] .hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

body[data-page="home"] .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

body[data-page="home"] .hover-glow {
    position: relative;
    transition: all var(--transition-base);
}

body[data-page="home"] .hover-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    border-radius: inherit;
    opacity: 0;
    z-index: -1;
    filter: blur(10px);
    transition: opacity var(--transition-base);
}

body[data-page="home"] .hover-glow:hover::after {
    opacity: 0.5;
}

/* ============================================
   BADGE STYLES
   ============================================ */

body[data-page="home"] .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
}

body[data-page="home"] .badge-new {
    background: linear-gradient(135deg, var(--secondary), var(--secondary-dark));
    color: white;
}

body[data-page="home"] .badge-featured {
    background: linear-gradient(135deg, var(--accent-gold), #B8954A);
    color: var(--bg-dark);
}

body[data-page="home"] .badge-coming-soon {
    background: linear-gradient(135deg, var(--accent-sage), #5F8A5B);
    color: white;
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */

body[data-page="home"] .tooltip {
    position: relative;
}

body[data-page="home"] .tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-dark);
    color: white;
    font-size: var(--text-sm);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
    z-index: var(--z-tooltip);
}

body[data-page="home"] .tooltip::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-dark);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
}

body[data-page="home"] .tooltip:hover::before,
    body[data-page="home"] .tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================
   ACCORDION COMPONENT
   ============================================ */

body[data-page="home"] .accordion {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

body[data-page="home"] .accordion-item {
    border-bottom: 1px solid rgba(92, 107, 115, 0.1);
}

body[data-page="home"] .accordion-item:last-child {
    border-bottom: none;
}

body[data-page="home"] .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    background: white;
    cursor: pointer;
    transition: background var(--transition-base);
}

body[data-page="home"] .accordion-header:hover {
    background: var(--bg-secondary);
}

body[data-page="home"] .accordion-header.active {
    background: var(--bg-secondary);
}

body[data-page="home"] .accordion-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

body[data-page="home"] .accordion-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: transform var(--transition-base);
}

body[data-page="home"] .accordion-header.active .accordion-icon {
    transform: rotate(180deg);
}

body[data-page="home"] .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

body[data-page="home"] .accordion-body {
    padding: var(--space-lg);
    background: white;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ============================================
   TABS COMPONENT
   ============================================ */

body[data-page="home"] .tabs {
    width: 100%;
}

body[data-page="home"] .tabs-nav {
    display: flex;
    gap: var(--space-sm);
    border-bottom: 2px solid rgba(92, 107, 115, 0.1);
    margin-bottom: var(--space-xl);
}

body[data-page="home"] .tab-button {
    padding: var(--space-md) var(--space-lg);
    background: transparent;
    border: none;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-base);
}

body[data-page="home"] .tab-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--accent-plum));
    transform: scaleX(0);
    transition: transform var(--transition-base);
}

body[data-page="home"] .tab-button:hover {
    color: var(--primary);
}

body[data-page="home"] .tab-button.tab-active {
    color: var(--primary);
}

body[data-page="home"] .tab-button.tab-active::after {
    transform: scaleX(1);
}

body[data-page="home"] .tab-panel {
    display: none;
    animation: home-fadeIn 0.3s ease;
}

body[data-page="home"] .tab-panel.tab-active {
    display: block;
}

@keyframes home-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MODAL COMPONENT (if needed)
   ============================================ */

body[data-page="home"] .modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

body[data-page="home"] .modal.active {
    display: flex;
}

body[data-page="home"] .modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 46, 51, 0.8);
    backdrop-filter: blur(4px);
    animation: home-fadeIn 0.3s ease;
}

body[data-page="home"] .modal-content {
    position: relative;
    max-width: 600px;
    width: 100%;
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-xl);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body[data-page="home"] .modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-base);
}

body[data-page="home"] .modal-close:hover {
    background: var(--primary);
    color: white;
    transform: rotate(90deg);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

body[data-page="home"] .form {
    width: 100%;
}

body[data-page="home"] .form-group {
    margin-bottom: var(--space-lg);
}

body[data-page="home"] .form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

body[data-page="home"] .form-input,
    body[data-page="home"] .form-textarea,
    body[data-page="home"] .form-select {
    width: 100%;
    padding: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    background: white;
    border: 2px solid rgba(92, 107, 115, 0.2);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

body[data-page="home"] .form-input:focus,
    body[data-page="home"] .form-textarea:focus,
    body[data-page="home"] .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(44, 95, 124, 0.1);
}

body[data-page="home"] .form-textarea {
    min-height: 150px;
    resize: vertical;
}

body[data-page="home"] .form-helper {
    display: block;
    margin-top: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--text-light);
}

body[data-page="home"] .form-error {
    color: #D64545;
}

/* ============================================
   ALERT/NOTIFICATION STYLES
   ============================================ */

body[data-page="home"] .alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    transition: opacity var(--transition-base);
}

body[data-page="home"] .alert-success {
    background: rgba(122, 155, 118, 0.1);
    border: 1px solid var(--accent-sage);
    color: #3D5F3B;
}

body[data-page="home"] .alert-info {
    background: rgba(44, 95, 124, 0.1);
    border: 1px solid var(--primary);
    color: var(--primary-dark);
}

body[data-page="home"] .alert-warning {
    background: rgba(212, 133, 90, 0.1);
    border: 1px solid var(--secondary);
    color: var(--secondary-dark);
}

body[data-page="home"] .alert-error {
    background: rgba(214, 69, 69, 0.1);
    border: 1px solid #D64545;    color: #A03333;
}

body[data-page="home"] .alert-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* ============================================
   BREADCRUMB NAVIGATION
   ============================================ */

body[data-page="home"] .breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

body[data-page="home"] .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

body[data-page="home"] .breadcrumb-item:not(:last-child)::after {
    content: '→';
    color: var(--text-light);
}

body[data-page="home"] .breadcrumb-link {
    color: var(--text-secondary);
    transition: color var(--transition-base);
}

body[data-page="home"] .breadcrumb-link:hover {
    color: var(--primary);
}

body[data-page="home"] .breadcrumb-current {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================
   PROGRESS BAR
   ============================================ */

body[data-page="home"] .progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
    overflow: hidden;
}

body[data-page="home"] .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent-plum));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* ============================================
   SKELETON LOADER (for loading states)
   ============================================ */

body[data-page="home"] .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        #E8EBED 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

body[data-page="home"] .skeleton-text {
    height: 1em;
    margin-bottom: var(--space-sm);
}

body[data-page="home"] .skeleton-title {
    height: 2em;
    width: 60%;
    margin-bottom: var(--space-md);
}

body[data-page="home"] .skeleton-card {
    height: 300px;
}

/* ============================================
   DIVIDER
   ============================================ */

body[data-page="home"] .divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(92, 107, 115, 0.2),
        transparent
    );
    margin: var(--space-2xl) 0;
}

body[data-page="home"] .divider-vertical {
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(92, 107, 115, 0.2),
        transparent
    );
}

/* ============================================
   CARD COMPONENT (Generic)
   ============================================ */

body[data-page="home"] .card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

body[data-page="home"] .card:hover {
    box-shadow: var(--shadow-md);
}

body[data-page="home"] .card-header {
    margin-bottom: var(--space-lg);
}

body[data-page="home"] .card-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-sm);
}

body[data-page="home"] .card-body {
    color: var(--text-secondary);
    line-height: 1.7;
}

body[data-page="home"] .card-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(92, 107, 115, 0.1);
}

/* ============================================
   GRID SYSTEM (Optional utility)
   ============================================ */

body[data-page="home"] .grid {
    display: grid;
    gap: var(--space-lg);
}

body[data-page="home"] .grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

body[data-page="home"] .grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

body[data-page="home"] .grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    body[data-page="home"] .grid-2,
    body[data-page="home"] .grid-3,
    body[data-page="home"] .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FLEX UTILITIES
   ============================================ */

body[data-page="home"] .flex {
    display: flex;
}

body[data-page="home"] .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

body[data-page="home"] .flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-page="home"] .flex-column {
    flex-direction: column;
}

body[data-page="home"] .gap-sm { gap: var(--space-sm); }
body[data-page="home"] .gap-md { gap: var(--space-md); }
body[data-page="home"] .gap-lg { gap: var(--space-lg); }

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

body[data-page="home"] .hidden {
    display: none !important;
}

body[data-page="home"] .visible {
    display: block !important;
}

@media (max-width: 768px) {
    body[data-page="home"] .hide-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) {
    body[data-page="home"] .hide-desktop {
        display: none !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    body[data-page="home"] .navbar,
    body[data-page="home"] .footer,
    body[data-page="home"] .cta-section,
    body[data-page="home"] .newsletter-section {
        display: none;
    }
    
    body[data-page="home"] {
        font-size: 12pt;
        line-height: 1.5;
        color: black;
    }
    
    body[data-page="home"] .container {
        max-width: 100%;
    }
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* Focus visible for keyboard navigation */
body[data-page="home"] *:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    body[data-page="home"] *,
    body[data-page="home"] *::before,
    body[data-page="home"] *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    body[data-page="home"] {
        --text-primary: #000000;
        --text-secondary: #333333;
        --primary: #1A3A4D;
    }
    
    body[data-page="home"] .btn {
        border-width: 3px;
    }
}

/* Screen reader only content */
body[data-page="home"] .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Uncomment to enable automatic dark mode
    :root {
        --bg-primary: #1A1E23;
        --bg-secondary: #2A2E33;
        --bg-dark: #0F1215;
        --text-primary: #F4F6F7;
        --text-secondary: #B8C5D0;
        --text-light: #8A9BA8;
    }
    
    .navbar {
        background: rgba(26, 30, 35, 0.95);
    }
    
    .game-card-featured,
    .game-card-small,
    .game-card-medium,
    .service-card,
    .testimonial-card,
    .card {
        background: var(--bg-secondary);
    }
    */
}

/* ============================================
   ANIMATION KEYFRAMES LIBRARY
   ============================================ */

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

/* ============================================
   SMOOTH SCROLL BEHAVIOR
   ============================================ */



/* ============================================
   SELECTION STYLING
   ============================================ */

body[data-page="home"] ::selection {
    background: var(--primary);
    color: white;
}

body[data-page="home"] ::-moz-selection {
    background: var(--primary);
    color: white;
}

/* ============================================
   SCROLLBAR STYLING (Webkit browsers)
   ============================================ */

body[data-page="home"] ::-webkit-scrollbar {
    width: 12px;
}

body[data-page="home"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body[data-page="home"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--accent-plum));
    border-radius: 6px;
}

body[data-page="home"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--primary-dark), var(--accent-plum));
}

/* ============================================
   END OF STYLESHEET
   ============================================ */

/* ---- from homepageCSS/gameSpotlight.css ---- */
/* ============================================
   GAME SPOTLIGHT SECTION
   ============================================ */

body[data-page="home"] .game-spotlight {
    position: relative;
    background:
        radial-gradient(circle at 82% 18%, rgba(107, 76, 124, 0.55), transparent 55%),
        radial-gradient(circle at 12% 88%, rgba(44, 95, 124, 0.65), transparent 55%),
        linear-gradient(160deg, var(--primary-dark) 0%, var(--bg-dark) 60%, #23272b 100%);
    color: #F4F6F7;
    overflow: hidden;
    padding: var(--space-3xl) 0;
}

body[data-page="home"] .spotlight-wrap {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: var(--space-3xl);
    align-items: center;
}

body[data-page="home"] .spotlight-eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--secondary);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
}

body[data-page="home"] .spotlight-title {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4.6vw, 3.6rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.02;
    margin: 0 0 var(--space-md);
    text-wrap: balance;
    color: var(--primary-light);
     color: #f0f9ff;
}

body[data-page="home"] .spotlight-genre {
    font-size: var(--text-sm);
    color: #afaca2;
    margin: 0 0 var(--space-lg);
}

body[data-page="home"] .spotlight-hook {
    font-size: var(--text-xl);
    line-height: 1.6;
    max-width: 44ch;
    margin: 0 0 var(--space-xl);
      color: #C3CBD1;
}

body[data-page="home"] .spotlight-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xl);
}

body[data-page="home"] .spotlight-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--text-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 7px 14px;
    border-radius: var(--radius-full);
}

body[data-page="home"] .spotlight-cta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

body[data-page="home"] .spotlight-btn {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-base);
    padding: 14px 28px;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

body[data-page="home"] .spotlight-btn-primary {
    background: var(--secondary);
    color: var(--primary-dark);
    box-shadow: 0 10px 30px rgba(212, 133, 90, 0.35);
}

body[data-page="home"] .spotlight-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(212, 133, 90, 0.45);
}

body[data-page="home"] .spotlight-btn-ghost {
    color: #F4F6F7;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 13px 24px;
}

body[data-page="home"] .spotlight-btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

body[data-page="home"] .spotlight-visual {
    position: relative;
    height: 460px;
}

body[data-page="home"] .spotlight-card {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xl);
    transform: rotate(2.2deg);
    background-image: url("../images/hrLong.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.14);
    overflow: hidden;
}

body[data-page="home"] .spotlight-badge {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-lg);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.92);
    color: var(--primary-dark);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    z-index: 2;
}

@media (max-width: 900px) {
    body[data-page="home"] .spotlight-wrap {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .spotlight-visual {
        height: 320px;
        order: -1;
    }
}


/* ---- from homepageCSS/featuregames.css ---- */

/* ============================================
   FEATURED GAMES SECTION
   ============================================ */

body[data-page="home"] .featured-games {
    background: var(--bg-secondary);
    position: relative;
}

body[data-page="home"] .section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

body[data-page="home"] .section-label {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(44, 95, 124, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-md);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body[data-page="home"] .section-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
}

body[data-page="home"] .section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Games Grid - Asymmetric & Playful */
body[data-page="home"] .games-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

/* Featured game card - larger, prominent */
body[data-page="home"] .game-card-featured {
    grid-column: span 7;
    min-width: 0;
    position: relative;
    height: 480px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-lg);
    border: 2px solid transparent;
    transition: var(--transition-bounce);
    cursor: pointer;
}

body[data-page="home"] .game-card-featured:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

/* IMAGE SUGGESTION:
   - Screenshot of your word-building game
   - Clean UI, sophisticated color scheme
   - Show actual gameplay, not marketing fluff
   - High-quality, professional screenshot
   - Aspect ratio: 16:9 or 4:3
*/

body[data-page="home"] .game-card-image {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    overflow: hidden;
}

/* Real per-game artwork, same treatment as the games.html cards */
body[data-page="home"] .game-card-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1);
    transition: transform 0.4s ease;
}

body[data-page="home"] .game-card-featured:hover .game-card-image::before,
body[data-page="home"] .game-card-small:hover .game-card-image::before {
    transform: scale(1.08);
}

body[data-page="home"] .game-card-image[data-game="1"]::before {
    background-image: url("../images/hrLong.jpg");
}

body[data-page="home"] .game-card-image[data-game="2"]::before {
    background-image: url("../images/muslimytriviabg.png");
}

/* Overlay gradient for text readability */
body[data-page="home"] .game-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(42, 46, 51, 0.9), transparent);
}

body[data-page="home"] .game-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    z-index: 2;
    color: white;
}

body[data-page="home"] .game-card-genre {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

body[data-page="home"] .game-card-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    color: white;
}

body[data-page="home"] .game-card-description {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

body[data-page="home"] .game-card-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-xs);
    gap: var(--space-lg);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
}

body[data-page="home"] .game-card-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Smaller game cards */
body[data-page="home"] .game-card-small {
    grid-column: span 5;
    min-width: 0;
    position: relative;
    height: 490px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: var(--transition-bounce);
    cursor: pointer;
}

body[data-page="home"] .game-card-small:hover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary-light);
}

body[data-page="home"] .game-card-small .game-card-image {
    height: 490px;
}

/* Extra room so the added Play Now button doesn't push the genre tag up
   into the Featured badge pinned to the top of the card */
body[data-page="home"] .game-card-featured .game-card-image {
    height: 480px;
}

body[data-page="home"] .game-card-small .game-card-title {
    font-size: var(--text-2xl);
}

/* Second row - different layout */
body[data-page="home"] .game-card-medium {
    grid-column: span 4;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

body[data-page="home"] .game-card-medium:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

body[data-page="home"] .game-card-medium .game-card-image {
    height: 320px;
}



/* ============================================
   PLATFORM ICONS
   ============================================ */

body[data-page="home"] .platform-icons {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

body[data-page="home"] .platform-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: all var(--transition-base);
}

body[data-page="home"] .platform-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}



/* ---- from homepageCSS/studioSection.css ---- */
/* ============================================
   TEAM/STUDIO CULTURE SECTION
   ============================================ */

body[data-page="home"] .studio-culture {
    background: var(--bg-primary);
}

body[data-page="home"] .culture-head {
    max-width: 640px;
    margin-bottom: var(--space-2xl);
}

body[data-page="home"] .culture-head .section-title {
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: left;
}

body[data-page="home"] .culture-head .section-subtitle {
    color: var(--text-secondary);
}

body[data-page="home"] .culture-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

body[data-page="home"] .culture-value {
    display: flex;
    flex-direction: column;
}

body[data-page="home"] .culture-value p {
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

body[data-page="home"] .culture-photo {
    position: relative;
    height: 340px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: flex-end;
    transition: transform var(--transition-base);
}

body[data-page="home"] .culture-value:hover .culture-photo {
    transform: translateY(-6px);
}

body[data-page="home"] .culture-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}

body[data-page="home"] .culture-photo-tag {
    position: relative;
    z-index: 1;
    color: white;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.01em;
    padding: var(--space-lg);
}

body[data-page="home"] .culture-photo.p1 { background: url("../images/game1.png") center / cover no-repeat, var(--gradient-primary); }
body[data-page="home"] .culture-photo.p2 { background: url("../images/game2.jpg") center / cover no-repeat, linear-gradient(150deg, var(--accent-sage), #4d6b49); }
body[data-page="home"] .culture-photo.p3 { background: url("../images/game3.jpg") center / cover no-repeat, linear-gradient(150deg, var(--accent-plum), #402d4c); }

@media (max-width: 900px) {
    body[data-page="home"] .culture-grid {
        grid-template-columns: 1fr;
    }
}



/* ---- from homepageCSS/insights.css ---- */

/* ====================================
   BLOG SECTION
   ==================================== */

body[data-page="home"] .blog-section {
  padding: var(--space-3xl) 0;
  background: var(--light);
}

body[data-page="home"] .blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

body[data-page="home"] .blog-card {
  background: white;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition-bounce);
  border: 3px solid transparent;
}

body[data-page="home"] .blog-card:hover {
  transform: translateY(-10px) rotate(-1deg);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-light);
}

body[data-page="home"] .featured-post {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
}

body[data-page="home"] .post-image {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 250px;
}

body[data-page="home"] .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition);
}

body[data-page="home"] .blog-card:hover .post-image img {
  transform: scale(1.1);
}

body[data-page="home"] .post-badge {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  background: var(--gradient-fun);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--shadow-md);
}

body[data-page="home"] .post-content {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

body[data-page="home"] .post-meta {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-bottom: var(--space-sm);
}

body[data-page="home"] .post-category {
  background: rgba(14, 165, 233, 0.1);
  color: var(--primary);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body[data-page="home"] .post-date {
  font-size: 0.85rem;
  color: var(--text-light);
  font-weight: 600;
}

body[data-page="home"] .post-content h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
  margin-bottom: var(--space-sm);
}

body[data-page="home"] .featured-post .post-content h3 {
  font-size: 2rem;
}

body[data-page="home"] .post-content p {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: var(--space-md);
}

body[data-page="home"] .post-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--primary);
  font-weight: 700;
  margin-top: auto;
  transition: var(--transition);
}

body[data-page="home"] .post-link:hover {
  gap: var(--space-md);
}

body[data-page="home"] .link-arrow {
  transition: var(--transition);
}

body[data-page="home"] .post-link:hover .link-arrow {
  transform: translateX(5px);
}

body[data-page="home"] .view-all-blog {
  text-align: center;
  margin-top: var(--space-2xl);
}

/* Kept at the end of the HOME section (not up near the top, where it
   originally lived) so these overrides actually win the cascade against
   the base component rules above — same specificity, so source order
   decides, and a media query positioned before what it's meant to
   override loses regardless of whether the viewport matches it. */
/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    body[data-page="home"] {
        --text-6xl: 3rem;
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.75rem;
    }

    body[data-page="home"] .hero .container {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    body[data-page="home"] .hero-visual {
        height: 400px;
    }

    body[data-page="home"] .games-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .game-card-featured,
    body[data-page="home"] .game-card-small,
    body[data-page="home"] .game-card-medium {
        grid-column: 1 / -1;
    }

    body[data-page="home"] .culture-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    body[data-page="home"] .navbar-menu {
        display: none; /* Add mobile menu implementation */
    }

    body[data-page="home"] .hero-title {
        font-size: var(--text-4xl);
    }

    body[data-page="home"] .hero-subtitle {
        font-size: var(--text-lg);
    }

    body[data-page="home"] .hero-cta {
        flex-direction: column;
    }

    body[data-page="home"] .btn {
        width: 100%;
    }

    body[data-page="home"] .services-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    body[data-page="home"] .tech-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    body[data-page="home"] .testimonials-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .newsletter-form {
        flex-direction: column;
    }

    body[data-page="home"] .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    body[data-page="home"] {
        --space-3xl: 3rem;
        --space-2xl: 2rem;
    }

    body[data-page="home"] .section {
        padding: var(--space-2xl) 0;
    }

    body[data-page="home"] .hero-title {
        font-size: var(--text-3xl);
    }

    body[data-page="home"] .stats-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="home"] .stat-number {
        font-size: var(--text-4xl);
    }

    body[data-page="home"] .process-timeline::before {
        left: 20px;
    }

    body[data-page="home"] .process-step {
        padding-left: 60px;
    }

    body[data-page="home"] .process-number {
        width: 50px;
        height: 50px;
        font-size: var(--text-lg);
    }
}

/* Featured game cards: on narrow screens the overlaid content (title,
   description, meta row) needs more room than a fixed-height image can
   give it - move it into normal flow below a shorter image instead of
   overlaying, so the card grows to fit whatever height the content needs. */
@media (max-width: 768px) {
    body[data-page="home"] .game-card-featured,
    body[data-page="home"] .game-card-small {
        height: auto;
    }

    body[data-page="home"] .game-card-featured .game-card-image,
    body[data-page="home"] .game-card-small .game-card-image {
        height: 200px;
    }

    body[data-page="home"] .game-card-image::after {
        display: none;
    }

    body[data-page="home"] .game-card-content {
        position: static;
        background: var(--bg-dark);
    }
}

/* ============================================
   GAMES (games.html)
   ============================================ */

/* ---- from styleGames.css ---- */
 


        
        
        
        body[data-page="games"] {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            line-height: 1.6;
            color: #333;
            background: #fff;
        }

        /* Hero Section */
        body[data-page="games"] .hero {
            position: relative;
            overflow: hidden;
            min-height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            background-image: url("../images/gameHeader.png");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            padding: 140px 20px 60px;
        }

        body[data-page="games"] .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(20, 12, 40, 0.35) 0%, rgba(20, 12, 40, 0.7) 100%);
        }

        body[data-page="games"] .hero-title {
            color: white;
        }

        body[data-page="games"] .hero .gradient-text {
            background: var(--gradient-fun);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
















        
/* ============================================
   FEATURED GAMES SECTION
   ============================================ 
   
   
   
   
   
   
   */




   
   body[data-page="games"] .section-header {
    text-align: center;
    max-width: 1400px;
    margin: 0 auto var(--space-3xl);
}

body[data-page="games"] .coming-soon-header {
    position: relative;
    margin-top: var(--space-2xl);
    padding-top: var(--space-2xl);
}

body[data-page="games"] .coming-soon-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 120px;
    height: 4px;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--primary), var(--accent-plum), var(--accent-sage));
}
   
   
   body[data-page="games"] .game-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    z-index: 2;
    color: white;
}
   

body[data-page="games"] .game-card-featured {
    grid-column: span 7;
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-lg);
    transition: all var(--transition-base);
    cursor: pointer;
}


   
   
   
   
   
   
body[data-page="games"] .featured-games {
    background:
        radial-gradient(circle 600px at 12% 8%, rgba(44, 95, 124, 0.3), transparent),
        radial-gradient(circle 700px at 90% 15%, rgba(107, 76, 124, 0.3), transparent),
        radial-gradient(circle 650px at 85% 95%, rgba(122, 155, 118, 0.3), transparent),
        var(--bg-secondary);
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    padding: var(--space-3xl) 0;
    padding-top: 120px;
    overflow: hidden;
}



body[data-page="games"] .section-label {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(44, 95, 124, 0.1);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-md);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}



body[data-page="games"] .section-title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-md);
    text-align: left;
}

body[data-page="games"] .section-subtitle {
    font-size: var(--text-lg);
    color: var(--text-secondary);
    line-height: 1.7;
   /* text-align: left;*/
}

/* Games Grid - Asymmetric & Playful */
body[data-page="games"] .games-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}


body[data-page="games"] .scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

body[data-page="games"] .scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Declared after .scroll-reveal.revealed (same specificity) so the hover
   lift isn't clobbered by the reveal's own transform once a card is visible. */
body[data-page="games"] .game-card-featured:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

/* IMAGE SUGGESTION:
   - Screenshot of your word-building game
   - Clean UI, sophisticated color scheme
   - Show actual gameplay, not marketing fluff
   - High-quality, professional screenshot
   - Aspect ratio: 16:9 or 4:3
*/

body[data-page="games"] .game-card-image {
    position: relative;
    width: 100%;
    height: 400px;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    overflow: hidden;
}

/* Overlay gradient for text readability */
body[data-page="games"] .game-card-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(42, 46, 51, 0.9), transparent);
}



body[data-page="games"] .game-card-genre {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.2);
    
    backdrop-filter: blur(10px);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

body[data-page="games"] .game-card-title {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
    color: white;
  
}

body[data-page="games"] .game-card-description {
    font-size: var(--text-base);
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: var(--space-md);
 }

body[data-page="games"] .game-card-meta {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-xs);
    gap: var(--space-lg);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.8);
}

body[data-page="games"] .game-card-meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* Smaller game cards */
body[data-page="games"] .game-card-small {
    grid-column: span 5;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

body[data-page="games"] .game-card-small:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

body[data-page="games"] .game-card-small .game-card-image {
    height: 400px;
}

body[data-page="games"] .game-card-small .game-card-title {
    font-size: var(--text-2xl);
}

/* Unreleased games — visually muted so they don't compete with playable ones */
body[data-page="games"] .game-card-coming-soon {
    cursor: default;
}

body[data-page="games"] .game-card-coming-soon:hover {
    transform: none;
    box-shadow: var(--shadow-md);
}

body[data-page="games"] .game-card-coming-soon .game-card-image {
    filter: grayscale(70%);
}

body[data-page="games"] .game-card-coming-soon .game-card-title,
    body[data-page="games"] .game-card-coming-soon .game-card-description,
    body[data-page="games"] .game-card-coming-soon .game-card-genre {
    opacity: 0.75;
}

/* Second row - different layout */
body[data-page="games"] .game-card-medium {
    grid-column: span 4;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: white;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    cursor: pointer;
}

body[data-page="games"] .game-card-medium:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

body[data-page="games"] .game-card-medium .game-card-image {
    height: 320px;
}
body[data-page="games"] .game-card-image::before {
    content: "";
    position: absolute;
    background-image: url("../images/BG3.webp");
   opacity: 0.1;
    background-size: cover;

     top: 0; /* Cover the entire parent */
    left: 0;
    right: 0;
    bottom: 0;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            transform: scale(1);
            transition: transform 0.4s ease;
}

body[data-page="games"] .game-card-featured:hover .game-card-image::before,
    body[data-page="games"] .game-card-small:hover .game-card-image::before {
    transform: scale(1.08);
}

body[data-page="games"] .game-card-coming-soon:hover .game-card-image::before {
    transform: scale(1);
}



/* Using attribute selectors */
body[data-page="games"] .game-card-image[data-game="1"]::before {
    align-items: center;
    justify-content: center;
    
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat; 

    background-image: url("../images/hrLong.jpg");
}

body[data-page="games"] .game-card-image[data-game="2"]::before {

     align-items: center;
    justify-content: center;
    
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat; 

    background-image: url("../images/muslimytriviabg.png");
}

body[data-page="games"] .game-card-image[data-game="3"]::before {

     align-items: center;
    justify-content: center;
    
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat; 

    background-image: url("../images/imamLegacy Logo.png");
}

body[data-page="games"] .game-card-image[data-game="4"]::before {

     align-items: center;
    justify-content: center;
    
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat; 

    background-image: url("../images/sklogo.webp");
}






/* Badges */
        body[data-page="games"] .badge {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        body[data-page="games"] .badge-featured {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }

        body[data-page="games"] .badge-new {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: white;
        }

        body[data-page="games"] .badge-coming-soon {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
            color: white;
        }


        
/* ============================================
   PLATFORM ICONS
   ============================================ */

body[data-page="games"] .platform-icons {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

body[data-page="games"] .platform-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: all var(--transition-base);
}

body[data-page="games"] .platform-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* ============================================
   TOOLTIP STYLES
   ============================================ */
body[data-page="games"] .tooltip {
    position: relative;
}

body[data-page="games"] .tooltip::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-dark);
    color: white;
    font-size: var(--text-sm);
    white-space: nowrap;
    border-radius: var(--radius-sm);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
    z-index: var(--z-tooltip);
}

body[data-page="games"] .tooltip::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-dark);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition-base);
}

body[data-page="games"] .tooltip:hover::before,
    body[data-page="games"] .tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* container centers content; hero breaks out edge-to-edge via .full-bleed
   (scoped to .featured-games so this doesn't also widen the shared footer's
   own .container, which lives in the same body[data-page="games"]) */
body[data-page="games"] .featured-games .container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 28px;
    width: 100%;
}

body[data-page="games"] .full-bleed {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* floating icons */
body[data-page="games"] .games-float-icon { position: absolute; width: 64px; height: 64px; opacity: .95; filter: drop-shadow(0 10px 30px rgba(2,6,23,0.6)); transform-origin: center; transition: transform .18s ease; }
body[data-page="games"] .icon-small { width: 44px; height: 44px; }
body[data-page="games"] .i1 { left: 6%; top: 10%; animation: games-float 6s ease-in-out infinite; animation-delay: -1s; }
body[data-page="games"] .i2 { right: 8%; top: 18%; animation: games-float 5.6s ease-in-out infinite; animation-delay: -2.2s; }
body[data-page="games"] .i3 { left: 14%; bottom: 8%; animation: games-float 7s ease-in-out infinite; animation-delay: -3.1s; }
body[data-page="games"] .i4 { right: 16%; bottom: 16%; animation: games-float 6.5s ease-in-out infinite; animation-delay: -1.9s; }
@keyframes games-float {
  0% { transform: translateY(0px) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
  100% { transform: translateY(0px) rotate(-4deg); }
}

/* Featured game cards: on narrow screens the overlaid content (title,
   description, meta row) needs more room than a fixed-height image can
   give it - move it into normal flow below a shorter image instead of
   overlaying, so the card grows to fit whatever height the content needs. */
@media (max-width: 768px) {
    body[data-page="games"] .games-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="games"] .game-card-featured,
    body[data-page="games"] .game-card-small {
        grid-column: 1 / -1;
        height: auto;
    }

    body[data-page="games"] .game-card-featured .game-card-image,
    body[data-page="games"] .game-card-small .game-card-image {
        height: 200px;
    }

    body[data-page="games"] .game-card-image::after {
        display: none;
    }

    body[data-page="games"] .game-card-content {
        position: static;
        background: var(--bg-dark);
    }
}

/* ============================================
   MUSLIMY TRIVIA (muslimy-trivia.html)
   ============================================ */

/* ---- from homepageCSS/muslimyTrivia.css ---- */

/* ============================================
   MUSLIMY TRIVIA — PAGE TOKENS
   ============================================ */
body[data-page="trivia"] {
    --triv-deep: #123B78;
    --triv-blue: #2E7CF6;
    --triv-blue-light: #EAF3FF;
    --triv-mint: #8FE9D0;
    --triv-pink: #F6A6C1;
    --triv-ink: #14284A;
}

body[data-page="trivia"] {
    background: var(--bg-primary);
}

body[data-page="trivia"] #particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

/* ============================================
   LOADING ANIMATION
   ============================================ */
body[data-page="trivia"] .page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body[data-page="trivia"] .page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

body[data-page="trivia"] .loader-logo {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    max-width: 90vw;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: trivia-pulse 1.5s ease-in-out infinite;
}

@keyframes trivia-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ============================================
   HERO
   ============================================ */
body[data-page="trivia"] .trivia-hero {
    position: relative;
    overflow: hidden;
    padding: 168px 24px 120px;
    text-align: center;
    color: white;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.28), transparent 46%),
        radial-gradient(circle at 12% 85%, rgba(143, 233, 208, 0.35), transparent 45%),
        radial-gradient(circle at 88% 78%, rgba(246, 166, 193, 0.3), transparent 45%),
        linear-gradient(160deg, var(--triv-blue) 0%, var(--triv-deep) 100%);
}

body[data-page="trivia"] .trivia-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/muslimytriviaoverlayicons.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

body[data-page="trivia"] .trivia-float {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1) 70%);
    opacity: 0.9;
    pointer-events: none;
}

body[data-page="trivia"] .trivia-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

body[data-page="trivia"] .trivia-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

body[data-page="trivia"] .trivia-mark {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: 0 auto var(--space-lg);
    box-shadow: var(--shadow-xl);
    border: 3px solid rgba(255, 255, 255, 0.55);
}

body[data-page="trivia"] .trivia-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body[data-page="trivia"] .trivia-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(6px);
}

body[data-page="trivia"] .trivia-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4rem);
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: var(--space-md);
    text-shadow: 0 8px 30px rgba(18, 59, 120, 0.4);
}

body[data-page="trivia"] .trivia-subtitle {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    max-width: 52ch;
    margin: 0 auto var(--space-xl);
}

body[data-page="trivia"] .trivia-chip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

body[data-page="trivia"] .trivia-other-games-link {
    display: inline-block;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

body[data-page="trivia"] .trivia-other-games-link:hover {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

body[data-page="trivia"] .trivia-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px 6px 12px;
    border-radius: var(--radius-full);
}

body[data-page="trivia"] .trivia-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

body[data-page="trivia"] .trivia-chip:nth-child(1)::before { background: var(--triv-mint); }
body[data-page="trivia"] .trivia-chip:nth-child(2)::before { background: var(--triv-pink); }
body[data-page="trivia"] .trivia-chip:nth-child(3)::before { background: var(--accent-gold); }

/* ============================================
   STORE BADGES
   ============================================ */
body[data-page="trivia"] .store-badges {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

body[data-page="trivia"] .store-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    color: white;
    transition: var(--transition-bounce);
}

body[data-page="trivia"] .store-badge:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

body[data-page="trivia"] .store-badge svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

body[data-page="trivia"] .store-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

body[data-page="trivia"] .store-badge-text small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

body[data-page="trivia"] .store-badge-text strong {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

/* ============================================
   HERO / ABOUT TRANSITION WAVE
   ============================================ */
body[data-page="trivia"] .trivia-hero-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;
    line-height: 0;
    z-index: 1;
}

body[data-page="trivia"] .trivia-hero-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   ABOUT
   ============================================ */
body[data-page="trivia"] .trivia-about {
    padding: var(--space-3xl) 24px;
    text-align: center;
}

body[data-page="trivia"] .trivia-about-inner {
    max-width: 720px;
    margin: 0 auto;
}

body[data-page="trivia"] .trivia-eyebrow-light {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--triv-blue);
    background: var(--triv-blue-light);
    border: 1px solid color-mix(in srgb, var(--triv-blue) 30%, white);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

body[data-page="trivia"] .trivia-about h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--triv-ink);
    margin-bottom: var(--space-md);
}

body[data-page="trivia"] .trivia-about p {
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--text-secondary);
  
}

/* ============================================
   TRAILER VIDEO (used inside the Preview section)
   ============================================ */
body[data-page="trivia"] .trivia-video-frame {
    position: relative;
}

body[data-page="trivia"] .trivia-video-frame::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--triv-blue) 25%, transparent), transparent 70%);
    filter: blur(20px);
}

body[data-page="trivia"] .trivia-video-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 4px solid white;
}

body[data-page="trivia"] .trivia-video-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   CATEGORIES
   ============================================ */
body[data-page="trivia"] .trivia-categories {
    background: var(--triv-blue-light);
    padding: var(--space-3xl) 24px;

     position: relative;
    overflow: hidden;
    background-image: url("../images/muslimytriviabg1.jpg");
}

body[data-page="trivia"] .trivia-categories::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(235, 248, 255, 0.856);
    pointer-events: none;
   
}
body[data-page="trivia"] .trivia-categories-inner {
    max-width: 1100px;
    margin: 0 auto;
     position: relative;
    z-index: 1;
}





body[data-page="trivia"] .trivia-categories-tagline {
    text-align: center;
    margin-top: var(--space-xl);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--triv-deep);
}

body[data-page="trivia"] .trivia-categories h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--triv-ink);
    text-align: center;
    margin-bottom: var(--space-2xl);
}

body[data-page="trivia"] .trivia-categories-intro {
    text-align: center;
    max-width: 640px;
    margin: -1.5rem auto var(--space-2xl);
    color: var(--text-secondary);
}



body[data-page="trivia"] .category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

body[data-page="trivia"] .category-card {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

body[data-page="trivia"] .category-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--triv-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

body[data-page="trivia"] .category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

body[data-page="trivia"] .category-card:hover::before {
    transform: scaleX(1);
}

body[data-page="trivia"] .category-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: transform var(--transition-bounce);
}

body[data-page="trivia"] .category-card:hover .category-icon {
    transform: scale(1.1) rotate(-4deg);
}

body[data-page="trivia"] .category-icon svg {
    width: 24px;
    height: 24px;
    color: var(--triv-deep);
}

body[data-page="trivia"] .category-card:nth-child(1) .category-icon { background: color-mix(in srgb, var(--triv-blue) 18%, white); }
body[data-page="trivia"] .category-card:nth-child(2) .category-icon { background: color-mix(in srgb, var(--triv-mint) 35%, white); }
body[data-page="trivia"] .category-card:nth-child(3) .category-icon { background: color-mix(in srgb, var(--triv-pink) 30%, white); }
body[data-page="trivia"] .category-card:nth-child(4) .category-icon { background: color-mix(in srgb, var(--accent-gold) 25%, white); }
body[data-page="trivia"] .category-card:nth-child(5) .category-icon { background: color-mix(in srgb, var(--accent-sage) 25%, white); }

body[data-page="trivia"] .category-card:nth-child(1)::before { background: var(--triv-blue); }
body[data-page="trivia"] .category-card:nth-child(2)::before { background: var(--triv-mint); }
body[data-page="trivia"] .category-card:nth-child(3)::before { background: var(--triv-pink); }
body[data-page="trivia"] .category-card:nth-child(4)::before { background: var(--accent-gold); }
body[data-page="trivia"] .category-card:nth-child(5)::before { background: var(--accent-sage); }

body[data-page="trivia"] .category-card h3 {
    font-size: var(--text-lg);
    color: var(--triv-ink);
    margin-bottom: var(--space-xs);
}

body[data-page="trivia"] .category-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}













/* ============================================
   PREVIEW / PHONE MOCKUP
   ============================================ */
body[data-page="trivia"] .trivia-preview {
    position: relative;
    overflow: hidden;
    background-image: url("../images/bgshapes.jpg");
  background-size: cover;        /* scale so the container is fully covered */
  background-position: center;   /* center-crop the image */
  background-repeat: no-repeat;
    padding: var(--space-3xl) 24px;

}
body[data-page="trivia"] .trivia-preview::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 254, 254, 0.575);
    pointer-events: none;
}
body[data-page="trivia"] .preview-wrap {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-3xl);
    align-items: center;
}

body[data-page="trivia"] .preview-copy h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--triv-ink);
    margin-bottom: var(--space-md);
}

body[data-page="trivia"] .preview-copy p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

body[data-page="trivia"] .preview-note {
    font-size: var(--text-sm);
    color: var(--text-light);
    font-style: italic;
}

body[data-page="trivia"] .preview-wrap .trivia-video-frame {
    width: 100%;
}

body[data-page="trivia"] .phone-screen {
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--triv-blue) 0%, var(--triv-deep) 100%);
    padding: var(--space-lg) var(--space-md) var(--space-xl);
    color: white;
}

body[data-page="trivia"] .phone-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-xs);
    opacity: 0.8;
    margin-bottom: var(--space-lg);
}

body[data-page="trivia"] .phone-category {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    padding: 5px 12px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

body[data-page="trivia"] .phone-question {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: var(--space-lg);
}

body[data-page="trivia"] .phone-answers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

body[data-page="trivia"] .phone-answer {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body[data-page="trivia"] .phone-answer.correct {
    background: var(--triv-mint);
    color: var(--triv-ink);
    font-weight: 700;
    border-color: transparent;
}

/* ============================================
   FINAL CTA
   ============================================ */
body[data-page="trivia"] .trivia-final-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-3xl) 24px;
    background: linear-gradient(160deg, var(--triv-blue) 0%, var(--triv-deep) 100%);
    color: white;
}

body[data-page="trivia"] .trivia-final-cta-inner {
    position: relative;
    z-index: 1;
}

body[data-page="trivia"] .trivia-final-cta h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: white;
    margin-bottom: var(--space-sm);
}

body[data-page="trivia"] .trivia-final-cta p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    body[data-page="trivia"] .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body[data-page="trivia"] .preview-wrap {
        grid-template-columns: 1fr;
    }

    body[data-page="trivia"] .preview-wrap .trivia-video-frame {
        order: -1;
    }
}

@media (max-width: 560px) {
    body[data-page="trivia"] .category-grid {
        grid-template-columns: 1fr;
    }
}



/* ============================================
   HIDDEN REMINDERS (hidden-reminders.html)
   ============================================ */

/* ---- from homepageCSS/hiddenReminders.css ---- */

/* ============================================
   HIDDEN REMINDERS — PAGE TOKENS
   ============================================ */
body[data-page="hidden-reminders"] {
    --hr-crimson: #6E1B34;
    --hr-crimson-light: #A8355C;
    --hr-violet: #2A1150;
    --hr-violet-light: #F4EEFA;
    --hr-rose: #FF6F91;
    --hr-ink: #241033;
}

body[data-page="hidden-reminders"] {
    background: var(--bg-primary);
}

body[data-page="hidden-reminders"] #particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.4;
}

/* ============================================
   LOADING ANIMATION
   ============================================ */
body[data-page="hidden-reminders"] .page-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

body[data-page="hidden-reminders"] .page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

body[data-page="hidden-reminders"] .loader-logo {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    max-width: 90vw;
    text-align: center;
    background: linear-gradient(135deg, var(--primary), var(--accent-plum));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hidden-reminders-pulse 1.5s ease-in-out infinite;
}

@keyframes hidden-reminders-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
}

/* ============================================
   HERO
   ============================================ */
body[data-page="hidden-reminders"] .hr-hero {
    position: relative;
    overflow: hidden;
    padding: 168px 24px 120px;
    text-align: center;
    color: white;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 46%),
        radial-gradient(circle at 12% 85%, rgba(255, 111, 145, 0.3), transparent 45%),
        radial-gradient(circle at 88% 78%, rgba(168, 53, 92, 0.35), transparent 45%),
        linear-gradient(160deg, var(--hr-crimson) 0%, var(--hr-violet) 100%);
}

body[data-page="hidden-reminders"] .hr-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../images/hiddenremindersoverlay1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

body[data-page="hidden-reminders"] .hr-float {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.08) 70%);
    opacity: 0.85;
    pointer-events: none;
}

body[data-page="hidden-reminders"] .hr-icon {
    position: absolute;
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

body[data-page="hidden-reminders"] .hr-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

body[data-page="hidden-reminders"] .hr-mark {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: 0 auto var(--space-lg);
    box-shadow: var(--shadow-xl);
    border: 3px solid rgba(255, 255, 255, 0.55);
}

body[data-page="hidden-reminders"] .hr-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

body[data-page="hidden-reminders"] .hr-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(6px);
}

body[data-page="hidden-reminders"] .hr-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4rem);
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: var(--space-sm);
    text-shadow: 0 8px 30px rgba(42, 17, 80, 0.5);
}

body[data-page="hidden-reminders"] .hr-tagline {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: var(--text-xl);
    color: var(--hr-rose);
    margin-bottom: var(--space-md);
}

body[data-page="hidden-reminders"] .hr-subtitle {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
    max-width: 54ch;
    margin: 0 auto var(--space-xl);
}

body[data-page="hidden-reminders"] .hr-chip-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-xl);
}

body[data-page="hidden-reminders"] .hr-other-games-link {
    display: inline-block;
    margin-top: var(--space-lg);
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transition);
}

body[data-page="hidden-reminders"] .hr-other-games-link:hover {
    color: white;
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

body[data-page="hidden-reminders"] .hr-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px 6px 12px;
    border-radius: var(--radius-full);
}

body[data-page="hidden-reminders"] .hr-chip::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

body[data-page="hidden-reminders"] .hr-chip:nth-child(1)::before { background: var(--hr-rose); }
body[data-page="hidden-reminders"] .hr-chip:nth-child(2)::before { background: var(--accent-gold); }
body[data-page="hidden-reminders"] .hr-chip:nth-child(3)::before { background: var(--hr-crimson-light); }

/* ============================================
   STORE BADGES
   ============================================ */
body[data-page="hidden-reminders"] .store-badges {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
}

body[data-page="hidden-reminders"] .store-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    color: white;
    transition: var(--transition-bounce);
}

body[data-page="hidden-reminders"] .store-badge:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-3px);
}

body[data-page="hidden-reminders"] .store-badge svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

body[data-page="hidden-reminders"] .store-badge-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

body[data-page="hidden-reminders"] .store-badge-text small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

body[data-page="hidden-reminders"] .store-badge-text strong {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

/* ============================================
   HERO / ABOUT TRANSITION WAVE
   ============================================ */
body[data-page="hidden-reminders"] .hr-hero-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 80px;
    line-height: 0;
    z-index: 1;
}

body[data-page="hidden-reminders"] .hr-hero-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================
   ABOUT
   ============================================ */
body[data-page="hidden-reminders"] .hr-about {
    padding: var(--space-3xl) 24px;
    text-align: center;
}

body[data-page="hidden-reminders"] .hr-about-inner {
    max-width: 720px;
    margin: 0 auto;
}

body[data-page="hidden-reminders"] .hr-eyebrow-light {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hr-crimson);
    background: var(--hr-violet-light);
    border: 1px solid color-mix(in srgb, var(--hr-crimson) 30%, white);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

body[data-page="hidden-reminders"] .hr-about h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--hr-ink);
    margin-bottom: var(--space-md);
}

body[data-page="hidden-reminders"] .hr-about p {
    font-size: var(--text-lg);
    line-height: 1.75;
    color: var(--text-secondary);
}

/* ============================================
   FEATURES
   ============================================ */
body[data-page="hidden-reminders"] .hr-features {
    position: relative;
    overflow: hidden;
    background: var(--hr-violet-light);
    background-image: url("../images/hrLong.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: var(--space-3xl) 24px;
}

body[data-page="hidden-reminders"] .hr-features::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(215, 209, 250, 0.514);
    pointer-events: none;
}

body[data-page="hidden-reminders"] .hr-features-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

body[data-page="hidden-reminders"] .hr-features h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--hr-ink);
    text-align: center;
    margin-bottom: var(--space-md);
    text-shadow: 0 0 18px var(--hr-violet-light), 0 0 8px var(--hr-violet-light), 0 0 8px var(--hr-violet-light);
}

body[data-page="hidden-reminders"] .hr-features-intro {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2xl);
    color: var(--hr-ink);
    text-shadow: 0 0 14px var(--hr-violet-light), 0 0 6px var(--hr-violet-light), 0 0 6px var(--hr-violet-light);
}

body[data-page="hidden-reminders"] .feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

body[data-page="hidden-reminders"] .feature-card {
    position: relative;
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

body[data-page="hidden-reminders"] .feature-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--hr-crimson);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

body[data-page="hidden-reminders"] .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

body[data-page="hidden-reminders"] .feature-card:hover::before {
    transform: scaleX(1);
}

body[data-page="hidden-reminders"] .feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    transition: transform var(--transition-bounce);
}

body[data-page="hidden-reminders"] .feature-card:hover .feature-icon {
    transform: scale(1.1) rotate(-4deg);
}

body[data-page="hidden-reminders"] .feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--hr-crimson);
}

body[data-page="hidden-reminders"] .feature-card:nth-child(1) .feature-icon { background: color-mix(in srgb, var(--hr-crimson) 18%, white); }
body[data-page="hidden-reminders"] .feature-card:nth-child(2) .feature-icon { background: color-mix(in srgb, var(--hr-rose) 25%, white); }
body[data-page="hidden-reminders"] .feature-card:nth-child(3) .feature-icon { background: color-mix(in srgb, var(--accent-gold) 25%, white); }

body[data-page="hidden-reminders"] .feature-card:nth-child(1)::before { background: var(--hr-crimson); }
body[data-page="hidden-reminders"] .feature-card:nth-child(2)::before { background: var(--hr-rose); }
body[data-page="hidden-reminders"] .feature-card:nth-child(3)::before { background: var(--accent-gold); }

body[data-page="hidden-reminders"] .feature-card h3 {
    font-size: var(--text-lg);
    color: var(--hr-ink);
    margin-bottom: var(--space-xs);
}

body[data-page="hidden-reminders"] .feature-card p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* ============================================
   PREVIEW / TRAILER
   ============================================ */
body[data-page="hidden-reminders"] .hr-preview {
    padding: var(--space-3xl) 24px;
}

body[data-page="hidden-reminders"] .preview-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

body[data-page="hidden-reminders"] .preview-copy h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--hr-ink);
    margin-bottom: var(--space-md);
}

body[data-page="hidden-reminders"] .preview-copy p {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--text-secondary);
}

body[data-page="hidden-reminders"] .hr-video-frame {
    position: relative;
}

body[data-page="hidden-reminders"] .hr-video-frame::before {
    content: "";
    position: absolute;
    inset: -30px;
    z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--hr-crimson) 30%, transparent), transparent 70%);
    filter: blur(20px);
}

body[data-page="hidden-reminders"] .hr-video-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 4px solid white;
}

body[data-page="hidden-reminders"] .hr-video-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ============================================
   SCREENSHOTS
   ============================================ */
body[data-page="hidden-reminders"] .hr-screenshots {
    padding: var(--space-3xl) 24px;
    text-align: center;
    background: var(--hr-violet-light);
}

body[data-page="hidden-reminders"] .hr-screenshots-inner {
    max-width: 900px;
    margin: 0 auto;
}

body[data-page="hidden-reminders"] .hr-screenshots h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--hr-ink);
    margin-bottom: var(--space-2xl);
}

body[data-page="hidden-reminders"] .hr-screenshots-grid {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

body[data-page="hidden-reminders"] .hr-screenshots-grid::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    background: radial-gradient(circle, color-mix(in srgb, var(--hr-crimson) 22%, transparent), transparent 70%);
    filter: blur(30px);
}

body[data-page="hidden-reminders"] .hr-screenshot {
    width: 220px;
    filter: drop-shadow(var(--shadow-xl));
    transition: transform var(--transition-slow);
}

body[data-page="hidden-reminders"] .hr-screenshot img {
    display: block;
    width: 100%;
}

body[data-page="hidden-reminders"] .hr-screenshot-1 {
    transform: rotate(-6deg) translateY(10px);
}

body[data-page="hidden-reminders"] .hr-screenshot-2 {
    transform: rotate(6deg);
}

body[data-page="hidden-reminders"] .hr-screenshot:hover {
    transform: rotate(0deg) translateY(-8px);
    z-index: 2;
}

/* ============================================
   FINAL CTA
   ============================================ */
body[data-page="hidden-reminders"] .hr-final-cta {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--space-3xl) 24px;
    background: linear-gradient(160deg, var(--hr-crimson) 0%, var(--hr-violet) 100%);
    color: white;
}

body[data-page="hidden-reminders"] .hr-final-cta-inner {
    position: relative;
    z-index: 1;
}

body[data-page="hidden-reminders"] .hr-final-cta h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: white;
    margin-bottom: var(--space-sm);
}

body[data-page="hidden-reminders"] .hr-final-cta p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    body[data-page="hidden-reminders"] .feature-grid {
        grid-template-columns: 1fr;
    }

    body[data-page="hidden-reminders"] .preview-wrap {
        grid-template-columns: 1fr;
    }

    body[data-page="hidden-reminders"] .hr-video-frame {
        order: -1;
    }
}

@media (max-width: 560px) {
    body[data-page="hidden-reminders"] .hr-screenshot {
        width: 42vw;
    }

    body[data-page="hidden-reminders"] .hr-screenshots-grid {
        gap: var(--space-md);
    }
}



/* ============================================
   ABOUT US (aboutus.html)
   ============================================ */

/* ---- from stylesau.css ---- */
/* IMPORTS FROM SEPARATE FILES */

body[data-page="about"] {
    background: var(--bg-primary);
}

/* ============================================
   STORY HERO
   ============================================ */
body[data-page="about"] .story-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    text-align: center;
    overflow: hidden;
    color: white;
}

body[data-page="about"] .story-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

body[data-page="about"] .story-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 26, 38, 0.55) 0%, rgba(15, 26, 38, 0.72) 60%, rgba(15, 26, 38, 0.88) 100%);
}

body[data-page="about"] .story-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 720px;
    margin: 0 auto;
    padding: 168px 24px 100px;
}

body[data-page="about"] .story-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: white;
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(6px);
}

body[data-page="about"] .story-title {
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-lg);
    color: white;
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

body[data-page="about"] .story-subtitle {
    font-size: var(--text-xl);
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.7;
    max-width: 46ch;
    margin: 0 auto var(--space-xl);
}

body[data-page="about"] .story-hero-cta {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

body[data-page="about"] .story-hero-cta .btn-outline {
    border-color: white;
    color: white;
}

/* ============================================
   NAME ORIGIN
   ============================================ */
body[data-page="about"] .origin {
    padding: var(--space-3xl) 24px;
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

body[data-page="about"] .origin-inner {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xl);
    align-items: center;
}

body[data-page="about"] .origin-mark {
    width: 300px;
    height: 300px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--radius-lg);

}

body[data-page="about"] .origin-label {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: var(--space-sm);
}

body[data-page="about"] .origin-word {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.01em;
}

body[data-page="about"] .origin-word .word-soul { color: var(--primary); }
body[data-page="about"] .origin-word .word-kahf { color: var(--accent-plum); }

body[data-page="about"] .origin p {
    font-size: var(--text-lg);
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 62ch;
}

@media (max-width: 700px) {
    body[data-page="about"] .origin-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    body[data-page="about"] .origin-mark {
        margin: 0 auto;
    }
}

/* ============================================
   VALUES — editorial flow
   ============================================ */
body[data-page="about"] .values-editorial {
    padding: var(--space-3xl) 24px;
}

body[data-page="about"] .values-wrap {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-3xl);
    align-items: center;
}

body[data-page="about"] .values-eyebrow {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: var(--space-md);
}

body[data-page="about"] .values-title {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    margin-bottom: var(--space-lg);
}

body[data-page="about"] .value-lede {
    display: block;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, var(--text-3xl));
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--value-hue, var(--primary));
}

body[data-page="about"] .values-title .value-lede:nth-child(1) { --value-hue: var(--primary); }
body[data-page="about"] .values-title .value-lede:nth-child(2) { --value-hue: var(--accent-sage); }
body[data-page="about"] .values-title .value-lede:nth-child(3) { --value-hue: var(--accent-plum); }

body[data-page="about"] .values-intro {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    max-width: 50ch;
}

body[data-page="about"] .value-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

body[data-page="about"] .value-statement {
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 55ch;
    padding-left: var(--space-md);
    border-left: 3px solid var(--value-hue, var(--primary));
}

body[data-page="about"] .value-statement:nth-child(1) { --value-hue: var(--primary); }
body[data-page="about"] .value-statement:nth-child(2) { --value-hue: var(--accent-sage); }
body[data-page="about"] .value-statement:nth-child(3) { --value-hue: var(--accent-plum); }

body[data-page="about"] .values-visual {
    position: relative;
    height: 480px;
}

body[data-page="about"] .values-visual::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 44% 56% 62% 38% / 40% 45% 55% 60%;
    background: radial-gradient(circle at 30% 30%, rgba(44, 95, 124, 0.25), transparent 65%),
        radial-gradient(circle at 75% 75%, rgba(107, 76, 124, 0.2), transparent 60%);
    filter: blur(6px);
    z-index: 0;
}

body[data-page="about"] .values-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 44% 56% 62% 38% / 40% 45% 55% 60%;
    transform: rotate(-2deg);
    box-shadow: var(--shadow-xl);
}

@media (max-width: 900px) {
    body[data-page="about"] .values-wrap {
        grid-template-columns: 1fr;
    }

    body[data-page="about"] .values-visual {
        height: 320px;
        order: -1;
    }
}

/* ============================================
   CLOSING CTA
   ============================================ */
body[data-page="about"] .story-cta {
    text-align: center;
    padding: var(--space-3xl) 24px;
    background: linear-gradient(150deg, var(--primary-dark) 0%, var(--accent-plum) 100%);
    color: white;
}

body[data-page="about"] .story-cta h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: white;
    margin-bottom: var(--space-sm);
}

body[data-page="about"] .story-cta p {
    font-size: var(--text-lg);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-xl);
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

body[data-page="about"] .story-cta-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}



/* ============================================
   CONTACT (contact.html)
   ============================================ */

/* ---- from stylesContact.css ---- */
/* IMPORTS FROM SEPARATE FILES */

body[data-page="contact"] {
    background: var(--bg-primary);
}

/* ============================================
   CONTACT HERO
   ============================================ */
body[data-page="contact"] .contact-hero {
    position: relative;
    overflow: hidden;
    padding: 168px 24px 120px;
    text-align: center;
    color: white;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.14), transparent 46%),
        radial-gradient(circle at 12% 85%, rgba(122, 155, 118, 0.35), transparent 45%),
        radial-gradient(circle at 88% 78%, rgba(107, 76, 124, 0.4), transparent 45%),
        linear-gradient(150deg, rgba(26, 58, 77, 0.692) 0%, rgba(107, 76, 124, 0.705) 100%),
        url("../images/BG3.webp") center / cover no-repeat;
}

body[data-page="contact"] .contact-float {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.08) 70%);
    opacity: 0.8;
    pointer-events: none;
}

body[data-page="contact"] .contact-doodle {
    position: absolute;
    width: 26px;
    height: 26px;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

body[data-page="contact"] .contact-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 620px;
    margin: 0 auto;
    
}

body[data-page="contact"] .contact-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(6px);
}

body[data-page="contact"] .contact-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 6vw, 4rem);
    letter-spacing: -0.01em;
    color: white;
    margin-bottom: var(--space-md);
    text-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

body[data-page="contact"] .contact-subtitle {
    font-size: var(--text-lg);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.92);
}

/* ============================================
   EMAIL CTA
   ============================================ */
body[data-page="contact"] .contact-email-wrap {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: var(--space-2xl);
    padding: 0 24px;
}

body[data-page="contact"] .email-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    background: white;
    color: var(--primary-dark);
    font-weight: 700;
    font-size: var(--text-lg);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-xl);
    transition: var(--transition-bounce);
}

body[data-page="contact"] .email-btn:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: var(--shadow-glow);
}

body[data-page="contact"] .email-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    body[data-page="contact"] .email-btn {
        max-width: 100%;
        padding: 14px 20px;
        font-size: var(--text-base);
        overflow-wrap: anywhere;
    }
}

/* ============================================
   REACH US GRID
   ============================================ */
body[data-page="contact"] .contact-main {
    padding: var(--space-3xl) 24px;
    text-align: center;
}

body[data-page="contact"] .contact-main-inner {
    max-width: 900px;
    margin: 0 auto;
}

body[data-page="contact"] .contact-section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(44, 95, 124, 0.1);
    color: var(--primary);
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-md);
}

body[data-page="contact"] .contact-main h2 {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

body[data-page="contact"] .contact-main-intro {
    font-size: var(--text-base);
    color: var(--text-secondary);
    max-width: 46ch;
    margin: 0 auto var(--space-2xl);
}

body[data-page="contact"] .social-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

body[data-page="contact"] .social-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-bounce);
}

body[data-page="contact"] .social-tile:hover {
    transform: translateY(-6px) rotate(-2deg);
    box-shadow: var(--shadow-lg);
}

body[data-page="contact"] .social-tile-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform var(--transition-bounce);
}

body[data-page="contact"] .social-tile:hover .social-tile-icon {
    transform: scale(1.1) rotate(6deg);
}

body[data-page="contact"] .social-tile-icon svg {
    width: 24px;
    height: 24px;
}

body[data-page="contact"] .social-tile-youtube .social-tile-icon { background: #FF3B3B; }
body[data-page="contact"] .social-tile-tiktok .social-tile-icon { background: #1F1F28; }
body[data-page="contact"] .social-tile-instagram .social-tile-icon { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
body[data-page="contact"] .social-tile-facebook .social-tile-icon { background: #3B5998; }
body[data-page="contact"] .social-tile-linktree .social-tile-icon { background: #43E660; }

body[data-page="contact"] .social-tile-name {
    font-size: var(--text-base);
    font-weight: 700;
}

/* Coffee / support tile stands apart from the social set */
body[data-page="contact"] .social-tile-coffee {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 30%, white), white);
    border: 2px dashed color-mix(in srgb, var(--accent-gold) 50%, white);
}

body[data-page="contact"] .social-tile-coffee .social-tile-icon {
    background: var(--accent-gold);
}

/* ============================================
   EXPLORE MORE
   ============================================ */
body[data-page="contact"] .contact-more {
    text-align: center;
    padding: var(--space-2xl) 24px var(--space-3xl);
}

body[data-page="contact"] .contact-more h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

body[data-page="contact"] .contact-more p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-bottom: var(--space-lg);
}

body[data-page="contact"] .contact-more-buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    body[data-page="contact"] .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 420px) {
    body[data-page="contact"] .social-grid {
        grid-template-columns: 1fr 1fr;
    }
}



/* ============================================
   LEGAL / PRIVACY POLICY PAGES
   ============================================ */

/* ---- from stylesLegal.css ---- */
/* IMPORTS FROM SEPARATE FILES */

body[data-page="legal"] {
    background: var(--bg-primary);
}

/* ============================================
   LEGAL PAGE HEADER
   ============================================ */
body[data-page="legal"] .legal-header {
    padding: 148px 24px 48px;
    text-align: center;
    background: var(--bg-secondary);
    border-bottom: 1px solid rgba(44, 95, 124, 0.1);
}

body[data-page="legal"] .legal-eyebrow {
    display: inline-block;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: var(--space-sm);
}

body[data-page="legal"] .legal-title {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

body[data-page="legal"] .legal-updated {
    font-size: var(--text-sm);
    color: var(--text-light);
}

/* ============================================
   LEGAL CONTENT
   ============================================ */
body[data-page="legal"] .legal-content {
    max-width: 740px;
    margin: 0 auto;
    padding: var(--space-3xl) 24px;
}

body[data-page="legal"] .legal-content p {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

body[data-page="legal"] .legal-content h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-sm);
}

body[data-page="legal"] .legal-content ul {
    margin: 0 0 var(--space-md);
    padding-left: 1.4em;
    color: var(--text-secondary);
    line-height: 1.8;
}

body[data-page="legal"] .legal-content li {
    margin-bottom: var(--space-xs);
}

body[data-page="legal"] .legal-content a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-color: rgba(44, 95, 124, 0.35);
}

body[data-page="legal"] .legal-content a:hover {
    text-decoration-color: var(--primary);
}

body[data-page="legal"] .legal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: var(--space-xl);
}