/* --------- Core resets --------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#0c0c0c;
  color:#fff;
  font-family:"Inter","Space Grotesk",sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  letter-spacing:0.01em;
}

/* --------- Film grain texture overlay */
.noise-overlay {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events:none;
  opacity:0.2;
  z-index:10;
  mix-blend-mode:overlay;
  animation:grain 8s steps(10) infinite;
}

@keyframes grain {
  0%, 100%{transform:translate(0,0)}
  10%{transform:translate(-1%,-1%)}
  20%{transform:translate(1%,1%)}
  30%{transform:translate(-2%,-1%)}
  40%{transform:translate(2%,2%)}
  50%{transform:translate(-1%,2%)}
  60%{transform:translate(3%,-3%)}
  70%{transform:translate(-3%,0)}
  80%{transform:translate(1%,-2%)}
  90%{transform:translate(0,3%)}
}

/* --------- Mosaic grid --------- */
.mosaic {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto auto;
  gap:0;
  row-gap:16px;
  max-width:1800px;
  width:100%;
  padding:6vw 2vw 4vw;
  position:relative;
  margin:0 auto;
}

/* First row tiles */
.threshold-tile {
  grid-column: 1;
  grid-row: 1;
  height: 60vh;
  overflow: hidden;
  position: relative;
  border-right: none; /* No border on right side */
}

.cave-tile {
  grid-column: 2;
  grid-row: 1;
  height: 60vh;
  overflow: hidden;
  position: relative;
  border-left: none; /* No border on left side */
  border-right: none; /* No border on right side */
}

.underwater-tile {
  grid-column: 3;
  grid-row: 1;
  height: 60vh;
  overflow: hidden;
  position: relative;
  border-left: none; /* No border on left side */
  border-right: none; /* No border on right side */
}

.horror-tile {
  grid-column: 4;
  grid-row: 1;
  height: 60vh;
  overflow: hidden;
  position: relative;
  border-left: none; /* No border on left side */
}

/* Second row tiles */
.signal-tile {
  grid-column: 1;
  grid-row: 2;
  height: 40vh;
  overflow: hidden;
  position: relative;
}

.will-you-tile {
  grid-column: 2 / span 3; /* Spans columns 2-4 */
  grid-row: 2;
  height: 40vh;
  background: #f5f2e8; /* Cream background */
  position: relative;
}

/* Basic tile styling */
.tile {
  position: relative;
  overflow: hidden;
  min-height: 180px; /* Minimum height for tiles */
}

/* Tile variations */
.tile.span-2 {
  grid-column: span 2; /* Span two columns */
}

.tile.wide {
  grid-column: span 2; /* Wide tile spans two columns */
}

.tile.tall {
  grid-row: span 2; /* Tall tile spans two rows */
}

/* Custom isometric tile with 9:16 format */
.isometric-tile {
  grid-row: span 2; /* Span two rows for height */
}

.isometric-tile img {
  aspect-ratio: 9/16 !important; /* Force 9:16 aspect ratio */
  object-fit: cover;
}

/* Image styling with mystery mask */
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* Smooth hover transition */
}

/* Add mysterious masking effect to tiles - more pronounced vignette */
.tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.7) 100%);
  opacity: 0.7;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.5s ease;
  z-index: 2;
}

/* Hover effect for all images */
.mosaic img:hover {
  transform: scale(1.04);
  z-index: 1; /* Ensures hovered image appears above others */
}

.tile:hover::after {
  opacity: 0.3; /* Reduce the mask opacity on hover to reveal more of the image */
}

/* Image styling for all tiles */
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0; /* No rounded corners */
  transition: transform 0.3s ease; /* Smooth hover transition */
}

/* Hover effect for all images */
.mosaic img:hover {
  transform: scale(1.04);
  z-index: 1; /* Ensures hovered image appears above others */
}

/* Container for stacked WHAT WILL text */
.stacked-text-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 3.5rem 0 0 3.5rem; /* Increased padding for more elegant spacing */
  z-index: 5;
  grid-column: 1 / span 4; /* Span all columns */
  grid-row: 1;
  pointer-events: none; /* Allow clicks to pass through */
  background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 80%); /* Enhanced gradient overlay */
  height: 350px; /* Increased height for better gradient fade */
}

/* Stacked text styling */
.stacked-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* WHAT text styling */
.what-text {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 0.9;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  transform: translateY(-10px); /* Slight upward shift */
  opacity: 0.9; /* Subtle transparency for elegance */
}

/* WILL text styling (stacked) */
.will-text-stacked {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 0.9;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin-top: -1.2rem; /* Tighter spacing between WHAT and WILL */
  opacity: 0.9; /* Subtle transparency for elegance */
}

/* WILL YOU banner styling */
.will-you-tile {
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for elegance */
  padding: 0;
  background: #f5f2e8; /* Cream background */
  position: relative;
  height: 100%; /* Match height of adjacent tiles */
  overflow: hidden; /* Prevent text overflow */
}

/* WILL text (center aligned) */
.will-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* Center horizontally and vertically */
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 5.5rem; /* Reduced font size */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #111;
  opacity: 0.9;
}

/* YOU text (right aligned) */
.you-text {
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%); /* Center vertically */
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 5.5rem; /* Reduced font size */
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #111;
  opacity: 0.9;
}

/* WHAT overlay spanning both tiles */
.what-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2.5rem; /* Increased padding for more elegance */
  z-index: 5;
  pointer-events: none; /* Allow clicks to pass through to images */
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%); /* Enhanced gradient overlay */
  height: 220px; /* Increased height for better gradient */
  display: flex;
  align-items: flex-start;
}

/* Emphasis for CREATE? message */
.emphasis {
  background: #111; /* Dark background */
  color: #f5f2e8; /* Cream text */
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px); /* Increased font size */
}

/* CREATE tile - ensure flush alignment with row */
.create-tile {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%; /* Full height of the grid cell */
}

.create-tile .message-block {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Full height */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #f5f2e8;
}

/* Bottom content section containing CTA */
.bottom-content {
  width: 100%;
  margin: 3rem auto 4rem;
  position: relative;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --------- CTA button with clean hover effect --------- */
.cta {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.4); /* Very dulled white/grey color initially */
  text-decoration: none;
  font-weight: 400; /* Lighter weight initially */
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 4px;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, font-weight 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2); /* Very dulled border initially */
  z-index: 10; /* Ensure button is in foreground */
}

.cta:hover {
  color: rgba(255, 255, 255, 1); /* Full white on hover */
  border-color: rgba(255, 255, 255, 1); /* Full white border on hover */
  transform: scale(1.02); /* Subtle scale effect */
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); /* Subtle glow effect */
  font-weight: 700; /* Bold text on hover */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .bottom-content {
    height: 80px;
    margin: 2rem auto 3rem;
  }
  
  .cta {
    padding: 0.8rem 1.6rem;
    font-size: 0.9rem;
  }
}

/* Enhanced mobile responsiveness */
@media (max-width: 480px) {
  /* Hide noise overlay on mobile */
  .noise-overlay {
    display: none;
  }
  
  /* Adjust mosaic grid */
  .mosaic {
    grid-template-columns: repeat(2, 1fr); /* Change to 2 columns on mobile */
    gap: 6px; /* Reduced gap */
    row-gap: 6px;
    padding: 4vw 2vw 3vw; /* Reduced padding */
    overflow-x: hidden; /* Hide horizontal overflow */
  }
  
  /* Adjust all tiles to fit the new grid */
  .threshold-tile {
    grid-column: 1;
    grid-row: 1;
    height: auto;
  }
  
  .cave-tile {
    grid-column: 2;
    grid-row: 1;
    height: auto;
  }
  
  .underwater-tile {
    grid-column: 1;
    grid-row: 2;
    height: auto;
  }
  
  .horror-tile {
    grid-column: 2;
    grid-row: 2;
    height: auto;
  }
  
  .signal-tile {
    grid-column: 1;
    grid-row: 3;
    height: auto;
  }
  
  .will-you-tile {
    grid-column: 2;
    grid-row: 3;
    height: auto;
  }
  
  /* Adjust remaining tiles */
  .tile:nth-of-type(1) {
    grid-column: 1;
    grid-row: 4;
  }
  
  .tile:nth-of-type(2) {
    grid-column: 2;
    grid-row: 4;
  }
  
  .tile.wide {
    grid-column: 1;
    grid-row: 5;
    width: auto;
  }
  
  .tile:nth-of-type(4) {
    grid-column: 2;
    grid-row: 5;
  }
  
  .create-tile {
    grid-column: 1 / span 2; /* Span both columns */
    grid-row: 6;
    height: auto;
  }
  
  /* Completely different approach for WHAT text */
  .stacked-text-container {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: auto;
    padding: 5px;
    height: auto;
    background: rgba(0,0,0,0.7);
    z-index: 10;
  }
  
  .what-text {
    font-size: 1.5rem;
    letter-spacing: 0;
    transform: none;
    line-height: 1;
    margin: 0;
    padding: 5px;
  }
  
  /* Completely reposition WILL/YOU tile for mobile */
  .will-you-tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem;
  }
  
  /* Stack WILL and YOU vertically on mobile */
  .will-text {
    position: relative;
    font-size: 1.8rem;
    left: auto;
    top: auto;
    transform: none;
    margin-bottom: 0.2rem;
  }
  
  .you-text {
    position: relative;
    font-size: 1.8rem;
    right: auto;
    top: auto;
    transform: none;
  }
  
  /* Adjust word tiles and message blocks */
  .message-block, .word-tile, .word-overlay {
    font-size: clamp(14px, 5vw, 32px);
  }
  
  /* Ensure CREATE message is visible */
  .create-tile .message-block {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 8vw, 40px);
  }
  
  /* Adjust CTA button */
  .bottom-content {
    height: 70px;
    margin: 1rem auto 2rem;
  }
  
  .cta {
    padding: 0.7rem 1.4rem;
    font-size: 0.85rem;
  }
  
  /* Ensure all images have the hover effect */
  .mosaic img {
    transition: transform 0.3s ease;
  }

  .mosaic img:hover {
    transform: scale(1.04);
    z-index: 1;
  }
}

/* Focus styles for accessibility */
.cta:focus {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

/* --------- Footer (refined for elegance) --------- */
.site-footer {
  font-size: .8rem;
  color: rgba(255, 255, 255, 0.4); /* More sophisticated transparent white */
  margin-bottom: 3rem;
  text-align: center;
  letter-spacing: 0.04em; /* Increased letter spacing for elegance */
  font-weight: 400;
  padding-top: 1rem;
}

/* Footer styling simplified - no special treatment for 'made' */

/* --------- Responsive tweaks --------- */
@media(max-width:600px){
  .flex-layout { gap: 8px; }
  .cta { font-size: .9rem; }
  .site-footer { font-size: .7rem; }
}

/* === FLOWSTATE FLEXBOX ENHANCEMENTS ============================== */

/* 1. Warm / cool palette mix */
.mosaic img:nth-child(2n){
  filter: hue-rotate(20deg) saturate(1.2);
}
.mosaic img:nth-child(3n){
  filter: hue-rotate(-25deg) saturate(1.15);
}

/* Make cave and horror images more prominent with enhanced contrast */
.mosaic img[alt="Cave painting origins tile"],
.mosaic img[alt="Horror scene tile"] {
  filter: contrast(1.1) brightness(1.05);
  z-index: 2; /* Higher z-index for prominence */
}
  
/* 2. Image-only soft-glow pass */
.mosaic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
              rgba(255, 255, 255, 0.06) 0%,
              rgba(255, 255, 255, 0) 70%);
  z-index: 1; /* Lower z-index to ensure it doesn't affect text */
}
  
/* 3. Subtle brightness pulse */
@keyframes softPulse {
  0%, 100% { filter: brightness(1); }
  50%     { filter: brightness(1.08); }
}
  
.mosaic img {
  animation: softPulse 7s ease-in-out infinite;
  z-index: 0; /* Ensure images are below text */
}
  
  /* 5. Cream colored word‑tiles */
/* Refined message blocks for elegant typography */
.message-block {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f2e8; /* Cream color */
  color: #111;
  font-family: 'Inter', sans-serif;
  font-weight: 600; /* Slightly lighter for more elegance */
  font-size: clamp(24px, 3.5vw, 52px); /* Slightly smaller for refinement */
  letter-spacing: 0.02em; /* Increased letter spacing for elegance */
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15px;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Final row CREATE? message styling */
.final-row .message-block {
  width: 50%; /* Take up half the width in the final row */
  height: 100%;
  margin: 0 auto; /* Center horizontally */
}

/* Elegant text styling */
.elegant-text {
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Large text for WHAT */
.large-text {
  font-size: 5.5rem;
  letter-spacing: 0.08em;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); /* Add shadow for better visibility */
  font-weight: 900;
  line-height: 1;
  transform: translateY(-10px); /* Slight upward shift for better positioning */
}

/* WHAT overlay spanning both tiles */
.what-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 2.5rem; /* Increased padding for more elegance */
  z-index: 5;
  pointer-events: none; /* Allow clicks to pass through to images */
  background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%); /* Enhanced gradient overlay */
  height: 220px; /* Increased height for better gradient */
  display: flex;
  align-items: flex-start;
}

/* Container for WILL YOU positioned below underwater and horror tiles */
.will-you-container {
  grid-column: 2 / span 2; /* Position in middle columns */
  height: 60px; /* Fixed height for the banner */
  margin-top: -8px; /* Negative margin to position closer to tiles above */
  position: relative; /* Enable positioning context */
  z-index: 4; /* Ensure it appears above other elements */
}

.justified-text {
  background: #f5f2e8; /* Cream background */
  color: #111;
  height: 100%;
  width: 100%;
  padding: 0.8rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between; /* Justify content with space between */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for elegance */
}

.justified-text span:first-child {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Slightly lighter for elegance */
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em; /* Increased letter spacing for sophistication */
  margin-left: 5%; /* Position WILL at the left margin */
}

.justified-text span:last-child {
  font-family: 'Inter', sans-serif;
  font-weight: 700; /* Slightly lighter for elegance */
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em; /* Increased letter spacing for sophistication */
  margin-right: 5%; /* Position YOU at the right margin */
}

/* Ensure all images have the hover effect */
.mosaic img {
  transition: transform 0.3s ease;
}

.mosaic img:hover {
  transform: scale(1.04);
  z-index: 1;
}

/* Dark emphasis for CREATE? - refined */
.message-block.emphasis {
  background: #1a1a1a; /* Slightly softer than pure black for elegance */
  color: #fff;
  font-size: clamp(28px, 4.5vw, 64px); /* Slightly smaller for refinement */
  font-weight: 800; /* Not as heavy as 900 for more elegance */
  letter-spacing: 0.03em; /* Increased letter spacing for sophistication */
}

/* Expanded WHAT message */
.message-block.expanded {
  font-size: clamp(40px, 8vw, 120px); /* Larger font size for expanded message */
  font-weight: 900; /* Bolder for impact */
  letter-spacing: 0.05em; /* More letter spacing for emphasis */
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

/* Refined full-width top banner for WHAT */
.message-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* Elegant overlay for WHAT message */
.elegant-overlay {
  align-items: flex-start; /* Align to top */
  justify-content: flex-start; /* Align to left */
  padding-top: 1rem; /* Space from top */
  padding-left: 1rem; /* Space from left */
}

.message-overlay .message-block {
  background: rgba(10, 10, 10, 0.85); /* Slightly richer black with higher opacity */
  color: #fff;
  height: auto;
  width: 100%;
  padding: 18px 36px; /* More generous padding for elegance */
  margin: 0;
  font-weight: 700; /* Not as heavy for more refinement */
  transition: transform .25s ease;
  letter-spacing: 0.04em; /* More pronounced letter spacing for the header */
}

/* Add hover effect to all message blocks */
.message-block {
  transition: transform .25s ease;
}

.message-block:hover,
.message-overlay .message-block:hover {
  transform: scale(1.02);
}

  
/* 6. Base wrapper for each mosaic cell */
.tile{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
}


/* Tile styling */

/* Ensure images inside .tile scale correctly */
.tile img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 7. Larger 2×2 tiles */
.span-2{
  grid-column:span 2;
  grid-row:span 2;
}

/* Let rectangular tiles fill their grid area */
.tall{
  grid-row: span 2;      /* 1×2 portrait */
  aspect-ratio:auto;
}
.wide{
  grid-column: span 2;   /* 2×1 landscape */
  aspect-ratio:auto;
}

.tall{
  grid-row: span 2;      /* 1×2 portrait */
  aspect-ratio:auto;
}

/* --------- Modal styles --------- */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: #111;
  border-radius: 8px;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 10;
  transform: translateZ(0);
  will-change: transform;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  color: #777;
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.2s;
}

.modal-close:hover {
  color: #fff;
}

.modal h2 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.signup-form input {
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  color: #fff;
  font-family: inherit;
}

.signup-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.signup-form button {
  padding: 0.8rem 1rem;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s;
}

.signup-form button:hover {
  background: #f0f0f0;
}

/* Removed old word-overlay styling in favor of the new message-overlay system */

/* Removed dual-word styling in favor of the new message-block system */

/* --- Simplified CTA button --- */
.cta{
  display: inline-block;
  margin: 2rem auto 3rem;
  padding: 0.9rem 2.5rem;
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  text-transform: lowercase;
  background: transparent;
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cta:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.3);
  transform: translateY(-2px);
}

/* --- Footer cursive flair with underline --- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap');

/* Responsive styles */
@media (max-width: 1200px) {
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .what-text {
    font-size: 6rem;
  }
  
  .will-text, .you-text {
    font-size: 4.5rem;
  }
  
  .create-message {
    font-size: 4.5rem;
  }
}

@media (max-width: 900px) {
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .what-text {
    font-size: 5rem;
  }
  
  .will-text, .you-text {
    font-size: 3.5rem;
  }
  
  .create-message {
    font-size: 3.5rem;
  }
  
  .bottom-content {
    margin: 2rem auto 3rem;
  }
}

@media (max-width: 600px) {
  .mosaic {
    grid-template-columns: 1fr;
  }
  
  .what-text {
    font-size: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 100%;
  }
  
  .will-text {
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
  }
  
  .you-text {
    right: 0;
    width: 100%;
    text-align: center;
    font-size: 2.5rem;
  }
  
  .create-message {
    font-size: 2.5rem;
  }
  
  .cta {
    padding: 0.75rem 1.5rem;
  }
  
  .flowstate-logo {
    height: 25px;
    max-width: 150px;
  }
  
  .site-footer {
    font-size: 0.8rem;
    padding: 1rem;
  }
}