:root {
  --font-mono: "IBM Plex Mono", monospace;
  --font-sans: "Inter", sans-serif;
  --color-text: #fff;
  --content-z: 2;
  --desktop-width: 500px;
  --mobile-width: 300px;
  
  /* Responsive breakpoints */
  --breakpoint-mobile: 900px;
  --breakpoint-small: 500px;
  
  /* Mobile font size scaling - base size adapts to viewport */
  --base-font-size: clamp(12px, 2.5vw, 16px);
  
  /* Mobile scale factors for readability */
  --mobile-scale-title: clamp(0.6, 5vw / 100, 0.85);
  --mobile-scale-text: clamp(0.7, 4vw / 100, 1);
  --mobile-scale-description: clamp(0.75, 4.5vw / 100, 1);
  
  /* Mobile spacing */
  --mobile-padding: clamp(8px, 2vw, 16px);
  --mobile-gap: clamp(4px, 1vw, 8px);
  
  /* Grid dimensions - responsive, maintains 2:1 cell aspect ratio */
  --grid-columns: 20;  /* Desktop: 20 columns */
  --grid-rows: 40;     /* Desktop: 40 rows (2x columns = maintains 2:1 cell aspect ratio) */
}

/* Desktop: Short windows (low height) - reduce rows to prevent very thin cells */
/* When window aspect ratio > 2.0 (very wide and short), reduce rows proportionally */
/* Minimum cell height should be at least ~2% of viewport height */
@media (min-width: 901px) and (max-height: 600px) {
  /* For very short windows, reduce rows significantly */
  :root {
    --grid-rows: 24;  /* Reduced from 40 to prevent very thin cells */
  }
}

@media (min-width: 901px) and (min-height: 601px) and (max-height: 700px) {
  /* For moderately short windows */
  :root {
    --grid-rows: 30;  /* Reduced from 40 */
  }
}

@media (min-width: 901px) and (min-height: 701px) and (max-height: 800px) {
  /* For slightly short windows */
  :root {
    --grid-rows: 35;  /* Slightly reduced */
  }
}

/* Fonts are now loaded from Google Fonts via HTML link tag */

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

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  background: white; /* White background from start (was black) */
}

/* Loading splash screen - transparent overlay, grid visible behind */
.splash-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent; /* Transparent so grid is visible */
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

/* Excel VBA-style modal dialog */
.excel-modal {
  background: #f0f0f0; /* Light gray background like Excel forms */
  border: 2px solid #808080; /* Gray border */
  border-radius: 0; /* No rounded corners - classic Windows style */
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  min-width: 400px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Modal title bar - Excel style */
.modal-title-bar {
  background: linear-gradient(to bottom, #ece9d8 0%, #d4d0c8 100%); /* Beige gradient */
  border-bottom: 1px solid #808080;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 24px;
  cursor: move; /* Indicates draggable */
  user-select: none;
}

.modal-title {
  font-size: 11px;
  font-weight: 600;
  color: #000;
  letter-spacing: 0;
}

.modal-close {
  background: transparent;
  border: none;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 1;
  color: #000;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", sans-serif;
  transition: background 0.1s;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
}

.modal-close:active {
  background: rgba(0, 0, 0, 0.2);
}

/* Modal content area */
.modal-content {
  background: #ffffff;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.modal-logo {
  max-width: 200px;
  height: auto;
  opacity: 1;
}

.loading-bar-container {
  width: 300px;
  height: 2px;
  background: rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #000;
  transition: width 0.3s ease;
}

.glitch-deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.webgl-canvas {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Background image - lowest layer */
}

/* Gradient overlays - between background and content */
.gradient-overlay-radial,
.gradient-overlay-linear {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1; /* Between webgl-canvas (0) and grid-overlay/content (2) */
  opacity: 0; /* Start hidden, will be animated with text */
}

/* Radial gradient overlay from bottom-right corner */
.gradient-overlay-radial {
  bottom: -50vh; /* Start from outside viewport (below) */
  right: -50vw; /* Start from outside viewport (right) */
  width: 100vw; /* Large circle extending beyond viewport */
  height: 100vh; /* Large circle extending beyond viewport */
  background: radial-gradient(circle at bottom right, #3480C1 0%, rgba(52, 128, 193, 0.7) 20%, rgba(52, 128, 193, 0.3) 40%, rgb(5 13 19 / 29%) 70%);
  mix-blend-mode: normal; /* Normal blend mode for smooth gradient */
}

/* Radial gradient overlay - small circle at bottom right, slightly offset */
.gradient-overlay-linear {
  bottom: 0;
  top: 20%;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(50vw circle at 100% 100%, rgb(52 128 193 / 10%) 20%, rgb(52 128 193 / 89%) 50%, transparent 10%);
  mix-blend-mode: normal; /* Normal blend mode for smooth gradient */
}



/* Grid overlay matching shader cell dimensions */
/* Shader: cellWidth = 20.0 (20 cells horizontally), cellHeight = 40.0 (40 cells vertically) */
.grid-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--grid-columns, 20), 1fr);  /* Responsive columns */
  grid-template-rows: repeat(var(--grid-rows, 40), 1fr);     /* Responsive rows (maintains 2:1 cell aspect ratio) */
  z-index: var(--content-z);
  pointer-events: auto;  /* Enable pointer events for cell clicks */
  padding: 0; /* No padding - must match shader viewport exactly */
  box-sizing: border-box;
}

/* Visual grid lines with shadcn-inspired colors and reduced base opacity */
.grid-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
      /* Shadcn-inspired border colors: subtle grays with varying opacity and wave effect */
      /* Only the grid lines themselves, not an overlay */
      /* Use --grid-color variable to allow color changes (gray for intro, white for normal) */
      background-image: 
        repeating-linear-gradient(to right, rgba(var(--grid-color, 255, 255, 255),calc(var(--wave-opacity, 0.15) * 1)) 0, rgba(var(--grid-color, 255, 255, 255),calc(var(--wave-opacity, 0.15) * 1)) 1px, transparent 1px, transparent calc(100% / var(--grid-columns, 20))),
        repeating-linear-gradient(to bottom, rgba(var(--grid-color, 255, 255, 255),calc(var(--wave-opacity, 0.15) * 1)) 0, rgba(var(--grid-color, 255, 255, 255),calc(var(--wave-opacity, 0.15) * 1)) 1px, transparent 1px, transparent calc(100% / var(--grid-rows, 40)));
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.grid-overlay {
  --wave-opacity: 0.09;  /* Reduced base opacity for automated wave */
  --grid-color: 255, 255, 255;  /* Grid line color (RGB values for rgba) - white by default */
  --mouse-opacity: 0;
  --wave-x: 50%;
  --wave-y: 50%;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

/* Grid cell hover effect layer - only affects grid lines, not slide content */
.grid-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Only draw grid lines with enhanced opacity - no overlay on slide content */
  background-image: 
    /* Mouse-following effect on grid lines only */
    repeating-linear-gradient(
      to right, 
      rgba(255,255,255,calc(0.2 * var(--mouse-opacity, 0))) 0, 
      rgba(255,255,255,calc(0.2 * var(--mouse-opacity, 0))) 1px, 
      transparent 1px, 
      transparent calc(100% / var(--grid-columns, 20))
    ),
    repeating-linear-gradient(
      to bottom, 
      rgba(255,255,255,calc(0.2 * var(--mouse-opacity, 0))) 0, 
      rgba(255,255,255,calc(0.2 * var(--mouse-opacity, 0))) 1px, 
      transparent 1px, 
      transparent calc(100% / var(--grid-rows, 40))
    );
  pointer-events: none;
  z-index: -1;
  /* Use mask to only show grid lines near mouse position */
  mask-image: 
    radial-gradient(
      circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), 
      white 0%, 
      white 40%,
      transparent 70%
    );
  mask-composite: intersect;
  -webkit-mask-composite: source-over;
  transition: opacity 0.2s ease;
}

/* Cell tooltip styling - Excel-style */
.cell-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 2px 4px;
  font-size: 10px;
  font-family: var(--font-mono);
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  z-index: 10000;
  border-radius: 2px;
  white-space: nowrap;
  display: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Selected cell highlight - Excel-style */
.cell-selected {
  background: rgba(74, 158, 255, 0.15); /* Blue background with opacity */
  outline: 2px solid #4A9EFF; /* Blue outline */
  outline-offset: -2px;
  box-sizing: border-box;
}

/* Corner Text Styles - aligned to grid */
.corner-text {
  padding: 2px;
  color: white;
  font-family: var(--font-mono);
  font-size: 0.75rem;  /* 12px base (assuming 16px root) */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1em;  /* Dynamic line-height based on font-size */
  pointer-events: none;
}

.corner-text div {
  position: absolute;
  line-height: 0.85em;  /* Tighter line-height for better baseline alignment */
  margin: 0;
  padding: 0;
  padding-bottom: 0.15em;  /* Space for descenders */
  white-space: nowrap;
}

/* Top-left: spans 4 rows (rows 1-4), each line at bottom of its row, left-aligned */
.corner-text-top-left {
  height: 100%; /* Full height of its grid area (4 rows) */
}
.corner-text-top-left div:nth-child(1) {
  bottom: calc(3 * (100% / 4)); /* Bottom of row 1 (75% from top) */
  left: 0;
}
.corner-text-top-left div:nth-child(2) {
  bottom: calc(2 * (100% / 4)); /* Bottom of row 2 (50% from top) */
  left: 0;
}
.corner-text-top-left div:nth-child(3) {
  bottom: calc(1 * (100% / 4)); /* Bottom of row 3 (25% from top) */
  left: 0;
}
.corner-text-top-left div:nth-child(4) {
  bottom: 0;
  left: 0;
}

/* Top-right: spans 3 rows (rows 1-3), each line at bottom of its row, right-aligned */
.corner-text-top-right {
  height: 100%; /* Full height of its grid area (3 rows) */
}
.corner-text-top-right div:nth-child(1) {
  bottom: calc(2 * (100% / 3)); /* Bottom of row 1 (66.67% from top) */
  right: 0;
  text-align: right;
}
.corner-text-top-right div:nth-child(2) {
  bottom: calc(1 * (100% / 3)); /* Bottom of row 2 (33.33% from top) */
  right: 0;
  text-align: right;
}
.corner-text-top-right div:nth-child(3) {
  bottom: 0;
  right: 0;
  text-align: right;
}

/* Bottom-left: spans 4 rows (rows 37-40), each line at bottom of its row, left-aligned */
.corner-text-bottom-left {
  height: 100%; /* Full height of its grid area (4 rows) */
}
.corner-text-bottom-left div {
  padding-bottom: 0.2em;  /* Slightly more space for better alignment */
}
.corner-text-bottom-left div:nth-child(1) {
  bottom: calc(3 * (100% / 4)); /* Bottom of row 1 (75% from top) */
  left: 0;
}
.corner-text-bottom-left div:nth-child(2) {
  bottom: calc(2 * (100% / 4)); /* Bottom of row 2 (50% from top) */
  left: 0;
}
.corner-text-bottom-left div:nth-child(3) {
  bottom: calc(1 * (100% / 4)); /* Bottom of row 3 (25% from top) */
  left: 0;
}
.corner-text-bottom-left div:nth-child(4) {
  bottom: 0;
  left: 0;
}

/* Bottom-right: spans 2 rows (rows 38-40), each line at bottom of its row, right-aligned */
.corner-text-bottom-right {
  height: 100%; /* Full height of its grid area (2 rows) */
}
.corner-text-bottom-right div:nth-child(1) {
  bottom: calc(1 * (100% / 2)); /* Bottom of row 1 (50% from top) */
  right: 0;
  text-align: right;
}
.corner-text-bottom-right div:nth-child(2) {
  bottom: 0;
  right: 0;
  text-align: right;
}

.corner-text-top-left {
  grid-column: 1 / 4;  /* Columns 1-3 */
  grid-row: 1 / 5;     /* Rows 1-4 */
  align-self: start;
  justify-self: start;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;  /* Allow descenders to be visible */
}


.corner-text-top-right {
  grid-column: 18 / 21;  /* Columns 18-20 */
  grid-row: 1 / 4;        /* Rows 1-3 (spans 3 rows) */
  align-self: start;
  justify-self: end;
  text-align: right;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: visible;  /* Allow descenders to be visible */
}

/* Excel-style bottom bar - fixed at bottom, separated from content */
.excel-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 32px; /* Fixed height for navigation bar */
  /* Glassy/frosted glass effect */
  
  padding: 0;
  z-index: 1000; /* Above content but below tooltips */
  pointer-events: auto;
}

.bottom-bar-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 8px;
}

.bottom-bar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: 12px;
}

/* Navigation arrows */
.nav-arrow {
  background: rgba(255, 255, 255, 0.06); /* Subtle transparent background */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
  background: rgba(255, 255, 255, 0.2); /* More visible background for active tab */
  border-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px); /* Additional blur for glass effect */
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.85); /* Light color for glassy UI */
  cursor: pointer;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-family: var(--font-mono);
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 4px;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.95);
}

.nav-arrow:active {
  background: rgba(255, 255, 255, 0.18);
}

.nav-arrow:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

.nav-arrow svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* Language tabs - Glassy modern style, positioned next to arrows */
.language-tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px; /* Small gap between tabs for modern look */
  height: 100%;
  margin-left: 0; /* Positioned right after the separator */
}

.lang-tab {
  border: none;
  color: rgba(255, 255, 255, 0.65); /* Muted white text */
  background: rgba(255, 255, 255, 0.06); /* Subtle transparent background */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
  backdrop-filter: blur(10px); /* Additional blur for glass effect */
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  border-radius: 6px 6px 0 0; /* More rounded top corners */
  height: calc(100% - 2px); /* Slight inset for visual effect */
}

.lang-tab:hover {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.15);
}

.lang-tab.active {
  
  color: rgba(255, 255, 255, 0.95); /* Bright white text */
  font-weight: 500;
  background: rgba(255, 255, 255, 0.2); /* More visible background for active tab */
  border-color: rgba(255, 255, 255, 0.25);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6); /* Bright bottom border */
  z-index: 1; /* Bring active tab to front */
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Modern shadow */
}

.lang-tab.active::after {
  display: none; /* Remove old bottom border approach */
}

/* Slide number - placed in specific grid cell (row 2, column 3) */
.slide-number {
  grid-column: 3 / 4;   /* Column 3 */
  grid-row: 3 / 4;      /* Row 2 */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;  /* Allow grid to control height */
  margin: 0;
  padding: 0;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}

.slide-number span {
  position: absolute;  /* Use absolute for GSAP animations */
  bottom: 0;  /* Anchor to bottom */
  left: 0;  /* Anchor to left */
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.75rem;  /* 12px base */
  font-weight: 400;
  line-height: 1em;  /* Dynamic line-height based on font-size */
  transform: translateY(0px);
  will-change: transform;
  margin: 0;
  padding: 0;
  padding-bottom: 0.2em;  /* Space for descenders, adjust based on font */
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  display: block;
}

/* Slide title lines - placed in specific grid cells */
.slide-title-line {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;  /* Allow grid to control height */
  overflow: visible;  /* Allow descenders to be visible */
  margin: 0;
  padding: 0;
  padding-bottom: 0.2em;  /* Extra space at bottom for descenders */
}

/* Title lines span multiple rows - fixed height regardless of font size */
/* Each title line gets 3 rows for consistent spacing */
/* Aligned with slide number (starts at column 3) */
.slide-title-line[data-slide-title-line-1] {
  grid-column: 3 / -1;  /* Starts at column 3 to align with slide number */
  grid-row: 6 / 9;      /* Rows 5-7 (spans 3 rows) */
}

.slide-title-line[data-slide-title-line-2] {
  grid-column: 3 / -1;  /* Starts at column 3 to align with slide number */
  grid-row: 9 / 12;      /* Rows 8-10 (spans 3 rows) */
}

.slide-title-line h1 {
  position: absolute;  /* Use absolute for GSAP animations */
  bottom: 8%;  /* Anchor to bottom of grid cell */
  left: 0;  /* Anchor to left */
  color: var(--color-text);
  font-family: var(--font-sans);
  /* Font size calculated so capital letters are exactly 3 rows tall */
  /* Each row = 100vh / 40 = 2.5vh, so 3 rows = 7.5vh */
  /* Cap height is typically ~0.72-0.75 of font-size for most sans-serif fonts */
  /* To make caps exactly 3 rows: font-size = 3 rows / cap-height-ratio */
  font-size: min(calc(3 * (100vh / 40) / 0.66), 76px);  /* Makes capital letters exactly 3 rows tall, max 76px */
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1em;  /* Normal line-height since font-size is now grid-based */
  transform: translateY(0px);
  will-change: transform;
  margin: 0;
  padding: 0;
  padding-bottom: 0.2em;  /* Space for descenders (p, y, g, etc.) */
  white-space: nowrap;
  display: block;
}

/* Slide description - placed in specific grid cell (row 11, columns 3-11) */
.slide-description {
  grid-column: 3 / 13;  /* Columns 3-11 */
  grid-row: 12 / 13;      /* Row 11 */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;  /* Allow grid to control height */
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: visible;  /* Allow descenders to be visible */
  margin: 0;
  padding: 0;
}

.slide-description p {
  position: absolute;  /* Use absolute for GSAP animations */
  bottom: 0;  /* Anchor to bottom */
  left: 0;  /* Anchor to left */
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.6875rem;  /* 11px base */
  font-weight: 400;
  line-height: 0.85em;  /* Tighter line-height for better baseline alignment */
  transform: translateY(0px);
  will-change: transform;
  margin: 0;
  padding: 0;
  padding-bottom: 0.15em;  /* Space for descenders */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: block;
}

/* Paragraph text - multi-line support, spans multiple rows */
.slide-paragraph {
  grid-column: 13 / 19;  /* Columns 13-18 (matching original position) */
  grid-row: -8 / -4;      /* 3 rows from the end (counting from bottom: -1 = last row) */
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;  /* Allow grid to control height */
  overflow: visible;  /* Allow descenders to be visible */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-end;  /* Align text to bottom like other elements */
}

.slide-paragraph p {
  position: absolute;  /* Use absolute for GSAP animations */
  bottom: 0;  /* Anchor to bottom */
  left: 0;  /* Anchor to left */
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1.1rem;  /* Scales with root font-size */
  font-weight: 400;
  /* Line height calculated to match grid rows: each row = 100vh / 40 = 2.5vh */
  /* Using 1.2em line-height for comfortable reading */
  line-height: 1.24em;  /* Comfortable line spacing for multi-line text */
  transform: translateY(0px);
  will-change: transform;
  margin: 0;
  padding: 0;
  white-space: pre-line;  /* Preserve line breaks and wrap text */
  display: block;
  max-width: 100%;
  word-wrap: break-word;  /* Break long words if needed */
  overflow-wrap: break-word;
  letter-spacing: -.02rem;
  opacity: .8;
}

/* ========================================
   RESPONSIVE DESIGN - Mobile First Approach
   ======================================== */

/* Mobile and Tablet (up to 900px) */
@media (max-width: 900px) {
  /* Mobile grid: 10 columns and 40 rows creates nice 2:1 aspect ratio cells */
  /* This ratio works well on mobile viewports */
  :root {
    --grid-columns: 10;  /* Mobile: 10 columns (from user's successful test) */
    --grid-rows: 30;     /* Mobile: 40 rows (maintains good cell aspect ratio) */
  }
  
  /* Grid overlay - maintain structure but improve spacing */
  
  
  /* Slide number - responsive sizing */
  .slide-number {
    grid-column: 2 / 4;
    grid-row: 3 / 4;
  }
  
  .slide-number span {
    font-size: clamp(0.625rem, 2.5vw, 0.75rem); /* 10px - 12px */
    line-height: 1.2;
  }
  
  /* Title lines - scaled for mobile readability */
  /* Each title line spans 3 rows for mobile (same as desktop but with adjusted font size) */
  .slide-title-line[data-slide-title-line-1] {
    grid-column: 2 / -2;
    grid-row: 5 / 8;  /* 3 rows (rows 5-7) */
  }
  
  .slide-title-line[data-slide-title-line-2] {
    grid-column: 2 / -2;
    grid-row: 8 / 11;  /* 3 rows (rows 8-10), starting after line 1 */
  }
  
  .slide-title-line h1 {
    /* Font size for mobile: doubled for better visibility */
    /* Using rem units for consistent sizing across mobile devices */
    font-size: clamp(
      3rem,    /* Minimum: 48px (doubled from 24px) */
      8vw,     /* Preferred: doubled from 4vw (scales with viewport width) */
      4.75rem  /* Maximum: 76px */
    );
    font-weight: 600; /* Stronger weight for iPhone visibility */
    line-height: 1.2em; /* Slightly more line-height for readability */
    letter-spacing: -0.04em; /* Match desktop letter spacing */
    bottom: 0; /* Align to bottom of grid cell */
    white-space: nowrap; /* Keep text on one line on mobile like desktop */
    word-wrap: normal; /* Don't break words */
  }
  
  /* Description - improved readability */
  /* Moved down to accommodate larger title (title now spans rows 6-18) */
  .slide-description {
    grid-column: 2 / -2; /* Wider on mobile for better readability */
    grid-row: 11 / 12;  /* Moved down to row 19 to be after both title lines */
  }
  
  .slide-description p {
    font-size: clamp(0.6875rem, 2vw, 0.75rem); /* 11px - 12px */
    line-height: 1.3; /* Improved line-height for readability */
    letter-spacing: 0.03em; /* Slightly less spacing on mobile */
  }
  
  /* Paragraph - better positioning and sizing */
  .slide-paragraph {
    grid-column: 2 / -2; /* Full width on mobile for better readability */
    grid-row: -10 / -6; /* 4 rows from the end, adjusted for mobile */
  }
  
  .slide-paragraph p {
    font-size: clamp(1rem, 3vw, 1.25rem); /* 16px - 20px, scales with viewport */
    line-height: 1.4; /* Improved line-height for multi-line readability */
    letter-spacing: 0.01em; /* Slightly more spacing for readability */
    padding-bottom: 0.2em; /* More space for descenders */
  }
  
  /* Corner text - maintain visibility */
  .corner-text {
    font-size: clamp(0.625rem, 2vw, 0.75rem); /* 10px - 12px */
  }
  
  .corner-text-top-right {
    grid-column: 16 / -1; /* Adjust for mobile */
    grid-row: 1 / 4;
  }
  
  /* Bottom bar - place in last grid row on mobile instead of fixed */
  .excel-bottom-bar {
    position: relative !important; /* Remove fixed positioning on mobile */
    bottom: auto !important; /* Remove fixed bottom */
    left: auto !important; /* Remove fixed left */
    right: auto !important; /* Remove fixed right */
    width: auto !important; /* Let grid control width */
    height: auto !important; /* Let content control height */
    grid-column: 2 / -2; /* Same padding as other elements (columns 2 to -2) */
    grid-row: -1; /* Place in last row of grid */
    padding: 0; /* Remove padding, grid handles spacing */
    z-index: auto; /* Remove high z-index on mobile */
  }
  
  .bottom-bar-content {
    padding: 0; /* Remove padding, grid handles spacing */
    width: 100%; /* Full width of grid cell */
  }
  
  .nav-arrow {
    width: clamp(32px, 8vw, 40px);
    height: clamp(32px, 8vw, 40px);
  }
  
  .lang-tab {
    padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
    font-size: clamp(0.75rem, 2.5vw, 0.875rem);
  }
}

/* Small Mobile (up to 500px) */
@media (max-width: 500px) {

  :root {
    --grid-columns: 8;  /* Mobile: 10 columns (from user's successful test) */
    --grid-rows: 40;     /* Mobile: 40 rows (maintains good cell aspect ratio) */
  }


  .excel-bottom-bar {
    grid-row: -3;
  }

  .lang-tab {
    border-radius: 6px;
  }

  .bottom-bar-content{
    justify-content: space-between;
    grid-column: 2 / -2;
  }
  
  /* Disable cursor following effect (overlay beam light) on small mobile devices */
  .grid-overlay {
    --mouse-opacity: 0 !important; /* Force mouse opacity to 0 on small mobile */
  }

  
  
  /* Further adjustments for very small screens */
  /* Smaller font size for very small mobile screens */
  .slide-title-line h1 {
    /* Doubled font size for very small screens too */
    font-size: clamp(
      1rem,  /* Minimum: 40px (doubled from 20px) */
      6vw,     /* Preferred: doubled from 3.5vw */
      3.6rem     /* Maximum: 64px (doubled from 32px) */
    );
    font-weight: 500 !important; /* Stronger weight for iPhone visibility */
    white-space: normal; /* Allow wrapping on very small screens */
    word-break: break-word;
  }
  
  .slide-paragraph p {
    font-size: clamp(0.875rem, 3.5vw, 1rem); /* 14px - 16px on small screens */
    line-height: 1.5; /* Even more line-height for small screens */
  }
  
  .slide-description p {
    font-size: clamp(0.625rem, 2.5vw, 0.6875rem); /* 10px - 11px */
  }
  
  /* Modal - full width on very small screens */
  .excel-modal {
    min-width: calc(100vw - var(--mobile-padding) * 2);
    max-width: calc(100vw - var(--mobile-padding) * 2);
  }
  
  .modal-content {
    padding: var(--mobile-padding);
  }
  
  .modal-logo {
    max-width: clamp(120px, 30vw, 180px);
  }

  .slide-number {
    grid-row: 3 / 4;
  }

  .slide-title-line[data-slide-title-line-1] {
    grid-row: 6 / 7; /* Place après slide-number automatiquement */
  }

  .slide-title-line[data-slide-title-line-2] {
    grid-row: 8 / 9; /* Place après title-line-1 automatiquement */
  }

  .slide-description {
    grid-row: 10 / 12; /* 2 rows pour éviter l'overlap avec paragraph */
  }

  .slide-paragraph {
    grid-row: 15 / 18; /* Plus d'espace après description, 3 rows pour le texte */
  }
}