:root {
  --primary-color: #ffff00;
  --text-color: #000000;
  --secondary-text-color: #555;
  --font-main: "Borel", cursive;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  touch-action: pan-x pan-y;
  /* Disables pinch zoom */
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--primary-color);
  color: var(--text-color);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: var(--primary-color);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.bottom-cta {
  display: flex;
  flex-direction: column;
  /* Stack text above button */
  align-items: center;
  justify-content: center;
  gap: 15px;

  /* Mobile: Center in the viewport when reached */
  min-height: 80vh;
  margin: 0 auto;
  padding: 20px;
}

.bottom-cta p,
.bottom-cta .btn-primary {
  /* Invisible initially for individual animation */
  opacity: 0;
  transition: opacity 3s ease-in-out;
}

.bottom-cta.visible p,
.bottom-cta.visible .btn-primary {
  opacity: 1;
}

.bottom-cta.visible .btn-primary {
  transition-delay: 4s;
}

.bottom-cta p {
  margin: 0;
  font-size: 1.2rem;
  /* Slightly larger */
  cursor: default;
  font-weight: 500;
  text-align: center;
}

/* Desktop-only styles for sticky positioning - Sync with main cards at 1150px */
@media (min-width: 1150px) {
  .bottom-cta {
    position: fixed;
    bottom: 30px;
    right: 30px;

    display: flex;
    flex-direction: row;
    /* Ensure side-by-side */
    align-items: center;
    justify-content: flex-end;
    /* Align to right */
    gap: 15px;
    min-height: auto;
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
    border: none;
    z-index: 1000;
    animation: none;
  }

  .bottom-cta p {
    font-size: 1rem;
    text-align: right;
  }
}


header img {
  height: 69px;
  width: auto;
  /* Maintain aspect ratio */
}

header img:hover {
  cursor: none;
}

.logo-right {
  transform: scaleX(-1);
}

/* Button styled link */
.btn-primary {
  display: inline-block;
  padding: 6px 6px 6px 6px;
  /* Adjusted padding for visual balance */
  background-color: var(--text-color);
  color: var(--primary-color);
  border-radius: 6px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.1s ease, opacity 0.2s ease;
}

.btn-primary:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Default to vertical */
  align-items: center;
  padding: 40px 20px;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

@media (min-width: 1150px) {
  main {
    flex-direction: row;
    flex-wrap: wrap;
    /* Switch to horizontal if there is enough space, wrap if needed */
    justify-content: center;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {
  header {
    padding: 10px;
  }

  main {
    padding: 20px 10px;
  }

  .card h3 {
    font-size: 1.3rem;
  }
}

.card {
  width: 100%;
  max-width: 300px;
  display: block;
  /* changed from flex to block to support flip structure */
  text-align: center;
  padding: 0;
  /* padding moved to inner/back */
  margin: 10px;
  /* spacing */
  transition: transform 0.3s ease;
  cursor: pointer;
  animation: fadeInUp 0.8s ease-out backwards;
  perspective: 1000px;
  /* For 3D flip */
  background: transparent;
  /* Remove background from container */
}

/* Card Content Structure */
.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-front,
.card-back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* previously on img */
}

.card-front {
  background-color: transparent;
}

.card-front img {
  width: 80%;
  height: auto;
  border-radius: 10px;
  object-fit: contain;
}

/* Mobile: FLIP STYLES (Max Width 1149px) */
@media (max-width: 1149px) {
  .card.flipped .card-inner {
    transform: rotateY(180deg);
  }

  .card-back {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: rotateY(180deg);
    background-color: var(--primary-color);
    padding: 20px;
    /* Border removed */
    overflow-y: auto;
    /* Scroling if content matches height */
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .card-back::-webkit-scrollbar {
    display: none;
  }

  /* Ensure card has height on mobile based on front content */
  /* If absolute positioning is used, parent needs height. 
     JS might be needed to set height or aspect-ratio CSS. 
     For now, let's rely on content. But if back is absolute, it overlaps. 
     Actually, if front is relative, the card takes front's height. 
     Make sure back fits in that height. */
}

/* Desktop: HOVER REVEAL STYLES (Min Width 1150px) */
@media (min-width: 1150px) {
  .card {
    perspective: none;
  }

  .card-inner {
    transform: none !important;
    /* Disable flip */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .card-front {
    width: 100%;
    /* Image container */
  }

  .card-back {
    backface-visibility: visible;
    transform: none;
    position: relative;
    padding-top: 10px;
  }

  .card h3 {
    margin: 0;
    /* Use original positioning behavior */
  }
}


.card:hover {
  transform: scale(1.05);
  /* Keep original zoom effect */
}

.card:nth-child(1) {
  animation-delay: 0.1s;
}

.card:nth-child(2) {
  animation-delay: 0.3s;
}

.card:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card h3 {
  margin: 15px 0 10px;
  font-size: 1.5rem;
}

.card p {
  color: var(--secondary-text-color);
  font-size: 1rem;
  line-height: 1.4;
}

/* Desktop specific card hover effects (RETAINED from previous step, modified selector) */
@media (min-width: 900px) {
  .card p {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(10px);
    transition: all 0.4s ease-out;
    padding-top: 5px;
    /* Added to prevent font clipping */
  }

  .card:hover p {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
  }
}

footer {
  padding: 30px;
  background-color: var(--primary-color);
  text-align: center;
}



/* Accessibility focus styles */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}



/* Spacer for the long scroll requirement */
.spacer {
  height: 400vh;
  /* Simulates "4 pages down" */
}

.btn-secondary {
  display: inline-block;
  padding: 8px 16px;
  background-color: transparent;
  /* Invisible background */
  color: var(--primary-color);
  /* Match background color to hide initially? No, user said "only visible the characters" */
  color: rgba(0, 0, 0, 0.1);
  /* Very faint text, effectively "barely visible" until hovered? Or just visible text? user said: "only the text to be seen but the purpose is to make it barely visible" */
  /* Let's make text color very subtle, like a watermark */
  font-size: 0.8rem;
  text-decoration: none;
  border: none;
  /* No border */
  cursor: pointer;
  font-family: var(--font-main);
  transition: color 0.3s;
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus {
  color: #000;
  /* Visible on hover/active/focus */
  background-color: transparent;
}