/* =========================
   Null Labs — Modern White Theme
   ========================= */

/* ---------- Variables ---------- */
:root{
  /* Palette - White Theme */
  --bg-white: #ffffff;
  --bg-light: #fafafa;
  --bg-gray: #f5f5f5;
  --panel: #ffffff;
  --fg: #1a1a1a;
  --muted: #666666;
  --muted-2: #888888;
  --line: rgba(0,0,0,0.08);
  --line-strong: rgba(0,0,0,0.15);
  --accent: #2563eb;
  --accent-hover: #1d4ed8;

  /* Typography & layout */
  --fs-base: 16px;
  --lh: 1.6;
  --h3: 19px;

  /* Card look */
  --radius: 12px;
  --shadow: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 30px rgba(0,0,0,0.12);

  /* Measures (mobile-first) */
  --maxw: 1200px;
  --col: 60ch;
  --pad-right: 16px;

  /* Safe area (iOS) */
  --gutter-xs: 16px;
  --gutter-left-mobile: max(var(--gutter-xs), env(safe-area-inset-left));
  --gutter-right-mobile: max(var(--gutter-xs), env(safe-area-inset-right));
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html, body{ height: 100%; }
html{ scrollbar-gutter: stable; overflow-y: scroll; }
body{
  margin: 0;
  padding-top: 100px;
  background: var(--bg-white);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: .002em;
}

a{ color: var(--accent); text-decoration: none; transition: color 0.2s ease; }
a:hover{ color: var(--accent-hover); text-decoration: none; }

/* ---------- Logo Animation ---------- */

a:not(.brand) {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:not(.brand):hover { color: var(--accent-hover); }
a:not(.brand):visited { color: var(--accent); }

/* Brand link: never change color, just show pointer */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:active,
.brand:focus {
  color: var(--fg);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent; /* kills blue tap highlight on WebKit */
  user-select: none;                         /* avoids accidental selection blue */
}

/* Optional: accessible focus style (keyboard users) */
.brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* In case some browsers add a border to linked images */
.brand img { border: 0; display: block; }

.brand {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .24em;
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  position: relative;
}

.brand:hover{ text-decoration: none; }

/* Header Logo - No Animation */
.header-logo {
  width: 32px;
  height: 32px;
}

/* Hero Logo Animation */
.hero-logo {
  width: 120px;
  height: 120px;
  display: block;
  animation: logoPushAnimation 3s ease forwards;
  align-self: center;
}

@keyframes logoPushAnimation {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  80% {
    opacity: 0;
    transform: translateX(-100px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateX(-100px) scale(0.8);
  }
}

.hero-wordmark {
  opacity: 0;
  animation: heroWordmarkSlideIn 2s ease forwards;
  animation-delay: 1s;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
  margin: 0 auto 40px auto;
}

@keyframes heroWordmarkSlideIn {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes taglineFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-tagline {
  opacity: 0;
  animation: taglineFadeIn 2s ease forwards;
  animation-delay: 3s;
  font-size: 18px;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Hero Animation Container */
.hero-animation-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  width: 100%;
  height: 100vh;
  position: relative;
}

.hero-n0 {
  font-size: 120px;
  font-weight: 900;
  color: var(--fg);
  text-align: center;
  animation: n0Animation 3s ease forwards;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "zero";
}

@keyframes n0Animation {
  0% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  60% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  80% {
    opacity: 1;
    transform: translateX(-100px) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translateX(-100px) scale(0.8);
  }
}

.hero-null-labs {
  opacity: 0;
  animation: nullLabsPushIn 2s ease forwards;
  animation-delay: 1s;
  font-size: 48px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--fg);
  text-align: center;
  position: relative;
  white-space: nowrap;
  user-select: none;
  transition: transform 0.1s ease;
}

@keyframes nullLabsPushIn {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.glitch-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.glitch-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* Letter displacement classes */
.letter-glitch-1 { transform: translateX(8px) translateY(-4px); }
.letter-glitch-2 { transform: translateX(-12px) translateY(8px); }
.letter-glitch-3 { transform: translateX(6px) translateY(-8px); }
.letter-glitch-4 { transform: translateX(-8px) translateY(6px); }
.letter-glitch-5 { transform: translateX(15px) translateY(-6px); }
.letter-glitch-6 { transform: translateX(-6px) translateY(12px); }
.letter-glitch-7 { transform: translateX(10px) translateY(-10px); }
.letter-glitch-8 { transform: translateX(-15px) translateY(8px); }

@keyframes glitchEffect {
  0%, 90%, 100% {
    text-shadow: none;
    transform: translateX(0);
  }
  2% {
    text-shadow: 
      2px 0 0 #ff0000,
      -2px 0 0 #00ffff,
      0 2px 0 #00ff00,
      0 -2px 0 #ff00ff;
    transform: translateX(-1px);
  }
  4% {
    text-shadow: 
      -2px 0 0 #ff0000,
      2px 0 0 #00ffff,
      0 -2px 0 #00ff00,
      0 2px 0 #ff00ff;
    transform: translateX(1px);
  }
  6% {
    text-shadow: 
      1px 0 0 #ff0000,
      -1px 0 0 #00ffff,
      0 1px 0 #00ff00,
      0 -1px 0 #ff00ff;
    transform: translateX(-0.5px);
  }
  8% {
    text-shadow: 
      -1px 0 0 #ff0000,
      1px 0 0 #00ffff,
      0 -1px 0 #00ff00,
      0 1px 0 #ff00ff;
    transform: translateX(0.5px);
  }
  10% {
    text-shadow: 
      3px 0 0 #ff0000,
      -3px 0 0 #00ffff,
      0 3px 0 #00ff00,
      0 -3px 0 #ff00ff;
    transform: translateX(-2px);
  }
  12% {
    text-shadow: 
      -3px 0 0 #ff0000,
      3px 0 0 #00ffff,
      0 -3px 0 #00ff00,
      0 3px 0 #ff00ff;
    transform: translateX(2px);
  }
  14% {
    text-shadow: 
      0.5px 0 0 #ff0000,
      -0.5px 0 0 #00ffff,
      0 0.5px 0 #00ff00,
      0 -0.5px 0 #ff00ff;
    transform: translateX(-0.3px);
  }
  16% {
    text-shadow: 
      -0.5px 0 0 #ff0000,
      0.5px 0 0 #00ffff,
      0 -0.5px 0 #00ff00,
      0 0.5px 0 #ff00ff;
    transform: translateX(0.3px);
  }
  18% {
    text-shadow: 
      4px 0 0 #ff0000,
      -4px 0 0 #00ffff,
      0 4px 0 #00ff00,
      0 -4px 0 #ff00ff;
    transform: translateX(-3px);
  }
  20% {
    text-shadow: 
      -4px 0 0 #ff0000,
      4px 0 0 #00ffff,
      0 -4px 0 #00ff00,
      0 4px 0 #ff00ff;
    transform: translateX(3px);
  }
}

/* Static content section */
.static-content {
  padding: 120px 0;
  background: var(--bg-white);
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.benefits-list li {
  position: relative;
  padding-left: 24px;
  font-size: 20px;
  color: var(--muted);
  line-height: 1.5;
}

.benefits-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 20px;
  font-weight: bold;
}

/* Feature rectangles */
.features-section {
  padding: 0;
  background: var(--fg);
  color: var(--bg-white);
  min-height: 100vh;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.features-intro {
  padding: 40px 20px 40px 20px;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.features-intro h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--bg-white);
  margin: 0;
  line-height: 1.3;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 100vh;
  gap: 0;
  width: 100vw;
}

.feature-rectangle {
  position: relative;
  background: var(--fg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.feature-placeholder {
  font-size: 64px;
  font-weight: 900;
  color: var(--bg-white);
  text-align: center;
  opacity: 0.3;
  transition: all 0.3s ease;
}

.feature-rectangle:hover .feature-placeholder {
  opacity: 0;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
  opacity: 1;
}

.feature-rectangle:hover .feature-image {
  opacity: 1;
  transform: scale(1.1);
}

.feature-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  padding: 40px;
  text-align: center;
}

.feature-rectangle:hover .feature-overlay {
  opacity: 1;
}

.feature-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--bg-white);
  margin-bottom: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.feature-description {
  color: var(--bg-white);
  line-height: 1.6;
  font-size: 18px;
  max-width: 300px;
}

/* Full Viewport Hero */
.hero {
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-inner {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

.slashed-zero{ 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; 
  font-feature-settings: "zero"; 
}

/* ---------- Bands (full-bleed background) ---------- */
.band{
  position: relative;
  left: 50%; right: 50%;
  margin-left: -50vw; margin-right: -50vw;
  width: 100vw;
}

.band--white{ background: var(--bg-white); }
.band--light{ background: var(--bg-light); }
.band--gray{ background: var(--bg-gray); }

/* ---------- Wrap (container) ---------- */
.wrap{
  max-width: 100%;
  margin: 0 auto;
  padding-left: var(--gutter-left-mobile);
  padding-right: var(--gutter-right-mobile);
}

/* ---------- Shared "measure" for content width ---------- */
.measure,
.header-row,
.hero-inner,
.plain-block {
  width: 100%;
  max-width: var(--col);
  margin: 0;
}

/* ---------- Header / Brand / Nav ---------- */
header{ 
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  padding: 0 20px; 
  background: transparent;
}

.header-row{ 
  display: flex; 
  align-items: center; 
  gap: 20px; 
  background: rgba(245, 245, 245, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 10px 16px;
  justify-content: space-between;
  max-width: 1200px;
  width: calc(100% - 40px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.primary-nav{ 
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
}

/* Research link with steady braces (no layout shift) */
.research-link{
  color: var(--fg); 
  font-size: 12px; 
  letter-spacing: .12em; 
  text-transform: uppercase; 
  text-decoration: none; 
  margin: 0;
  padding: 4px 8px;
  transition: all 0.2s ease;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.research-link::before, .research-link::after{
  display: inline-block; 
  opacity: 0; 
  transition: opacity 120ms ease;
}

.research-link::before{ content: "["; margin-right: .25em; }
.research-link::after{ content: "]"; margin-left: .25em; }

.research-link:hover{ 
  text-decoration: none; 
  color: var(--accent);
}

.research-link:hover::before, .research-link:hover::after{ opacity: 1; }

.research-link.active::before,
.research-link.active::after,
.research-link[aria-current="page"]::before,
.research-link[aria-current="page"]::after{ 
  opacity: 1; 
}

.research-link[aria-current="page"] {
  color: var(--fg);
}

/* ---------- Sections & hero ---------- */
section{ padding: 80px 0; }

.hero-canvas{
  position: absolute; 
  inset: 0; 
  width: 100%; 
  height: 100%;
  display: block; 
  opacity: .1; 
  pointer-events: none;
}

.eyebrow{ 
  font-variant-caps: all-small-caps; 
  font-size: 12px; 
  letter-spacing: .18em; 
  color: var(--accent); 
  margin-bottom: 16px;
  font-weight: 600;
}

.research-line{ 
  margin: 0; 
  font-size: 24px; 
  color: var(--muted); 
  font-weight: 400;
  line-height: 1.5;
}

/* ---------- Plain content blocks ---------- */
.plain-block{ 
  color: var(--muted); 
  margin: 0 0 32px 0; 
  text-align: left; 
  padding: 24px;
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s ease;
}

.plain-block:hover {
  box-shadow: var(--shadow-hover);
}

.plain-block strong{
  color: var(--fg); 
  display: block; 
  font-size: 20px; 
  margin-bottom: 12px; 
  font-weight: 600;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif; 
  letter-spacing: -.003em;
}

/* ---------- Headings ---------- */
h1{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 48px; 
  font-weight: 600; 
  margin: 0 0 24px 0;
  max-width: var(--col);
  color: var(--fg);
}

/* ---------- Misc ---------- */
.plain-block a{ 
  word-break: break-word; 
  overflow-wrap: anywhere; 
  font-weight: 500;
}

/* ---------- Responsive ---------- */
/* Slightly wider measure on larger phones/tablets */
@media (min-width: 480px){
  :root{ --col: 64ch; }
}

/* Desktop: restore left-biased rail + breathing room on right */
@media (min-width: 900px){
  :root{
    --maxw: 1200px;
    --col: 68ch;
    --pad-right: clamp(80px, 16vw, 320px);
    --gutter-left-desktop: 70px;
  }
  .wrap{
    max-width: var(--maxw);
    margin: 0 auto 0 max(var(--gutter-left-desktop), env(safe-area-inset-left));
    padding-left: 0;
    padding-right: max(var(--pad-right), env(safe-area-inset-right));
  }
}

/* Extra-wide desktops */
@media (min-width: 1200px){
  :root{ --col: 72ch; }
}

/* Modal Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

.modal-content {
  background-color: var(--bg-white);
  margin: 5% auto;
  padding: 40px;
  border-radius: var(--radius);
  width: 90%;
  max-width: 500px;
  position: relative;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
}

.close:hover {
  color: var(--fg);
}

.modal-subtitle {
  color: var(--muted);
  margin-bottom: 30px;
  font-size: 16px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500;
  color: var(--fg);
}

.contact-form input,
.contact-form textarea {
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  transition: border-color 0.2s ease;
  font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form button {
  position: relative;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: inherit;
  display: inline-block;
  align-self: flex-start;
}

.contact-form button::before {
  content: "[";
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contact-form button::after {
  content: "]";
  opacity: 0;
  transition: opacity 0.2s ease;
}

.contact-form button:hover {
  color: var(--accent);
}

.contact-form button:hover::before,
.contact-form button:hover::after {
  opacity: 1;
}

/* Desktop: force full black section height again */
@media (hover: hover) and (pointer: fine) {
  .features-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .features-grid {
    flex: 1;                  /* fill remaining height below intro */
    height: 100%;
    grid-template-rows: 1fr;   /* make sure rows expand evenly */
  }
}

/* =========================
   Desktop lock (pointer: fine = mouse/trackpad)
   ========================= */
@media (hover: hover) and (pointer: fine) {
  /* Keep desktop typography identical across OS */
  h1 { font-size: 48px; }
  .hero-null-labs { font-size: 48px; }
  .hero-logo { width: 120px; height: 120px; }
  .header-logo { width: 32px; height: 32px; }

  /* Desktop hero keeps classic 100vh; no dynamic units */
  .hero {   /* your original */
    padding: 0;           /* as before */
  }

  /* Features grid stays 3 columns on desktop */
  .features-grid { grid-template-columns: 1fr 1fr 1fr; height: auto; }
}

/* =========================
   Mobile/tablet adjustments (touch devices only)
   ========================= */
@media (hover: none) and (pointer: coarse) {
  /* Fluid sizes only on touch devices */
  h1 { font-size: clamp(28px, 6vw, 48px); }
  .hero-null-labs { font-size: clamp(28px, 10vw, 48px); }
  .hero-logo { width: clamp(56px, 18vw, 120px); height: clamp(56px, 18vw, 120px); }
  .header-logo { width: clamp(24px, 6vw, 32px); height: clamp(24px, 6vw, 32px); }

  /* Fill the visible viewport on mobile (iOS/Android bars) */
  .hero {
    height: auto;
   /* dynamic viewport */
    margin-top: 0;
    padding: 80px 0;
  }

  /* Features: 2 → 1 columns on smaller touch screens */
  .features-grid { grid-template-columns: 1fr 1fr; height: auto; }
  @media (max-width: 640px) {
    .features-grid { grid-template-columns: 1fr; }
  }

  .feature-rectangle { min-height: 40svh; aspect-ratio: 16/10; }

  /* Slightly smaller list text on phones */
  .benefits-list li { font-size: 18px; }

  /* Bigger tap targets */
  .get-started-btn, .research-link { padding: 8px 10px; }
}

/* =========================
   Misc consistency helpers
   ========================= */

/* Avoid horizontal jiggle from 100vw bands across platforms */
.band { overflow-x: clip; }

/* Keep header links from changing color on click across OS/browsers */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:active,
.brand:focus,
.get-started-btn,
.get-started-btn:link,
.get-started-btn:visited,
.research-link,
.research-link:link,
.research-link:visited {
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
}

/* Respect accessibility: disable big animations if requested */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hero-logo, .hero-null-labs { transform: none !important; opacity: 1 !important; }
}


@media (hover: none) and (pointer: coarse) {
  .features-section {
    min-height: auto;          /* no forced 100vh */
  }
  .features-grid {
    height: auto;              /* stacks naturally */
    grid-template-rows: auto;
  }
}

/* ===== 1) Define a single header height and use it everywhere ===== */
:root { --header-h: 72px; }

/* Your header already looks good; just pin its height so we can subtract it */
header { height: var(--header-h); }

/* Remove the need for negative hero margins by padding the body correctly */
body { padding-top: var(--header-h); }

/* ===== 2) Make hero fully visible on all devices (account for fixed header) ===== */
/* Desktop/laptop (mouse/trackpad): keep look identical but subtract header height */
@media (hover: hover) and (pointer: fine) {
  .hero {
    height: calc(100vh - var(--header-h));
    min-height: calc(100vh - var(--header-h));
    margin-top: 0;      /* important: no more -100px */
    padding: 0;         /* back to your original */
  }
}

/* Touch devices: use dynamic viewport units, still subtract header height */
@media (hover: none) and (pointer: coarse) {
  .hero {
    height: auto;
    min-height: calc(100dvh - var(--header-h));
    margin-top: 0;
    padding: 80px 0;   /* breathing room on phones */
  }
}

/* Make sure your hero canvas never gets clipped by a parent */
.hero-canvas { display: block; max-width: 100%; max-height: 100%; }

/* When scrolling to sections, don’t hide titles under the fixed header */
section, .band { scroll-margin-top: calc(var(--header-h) + 12px); }

/* ===== 3) Features section: keep it fully black on desktop; flexible on mobile ===== */
/* Desktop: fullscreen black section; grid fills the space below the intro */
@media (hover: hover) and (pointer: fine) {
  .features-section {
    min-height: calc(100vh - var(--header-h));
    display: flex; flex-direction: column;
  }
  .features-grid {
    flex: 1; height: 100%;
    grid-auto-rows: 1fr;   /* rows expand evenly if they wrap */
  }
}

/* Touch: allow natural height so content isn’t cut off */
@media (hover: none) and (pointer: coarse) {
  .features-section { min-height: auto; }
  .features-grid { height: auto; }
}

/* ===== 4) Make overlays work on tap (no hover on phones) ===== */
.feature-rectangle { position: relative; }
.feature-rectangle:focus-within .feature-overlay,
.feature-rectangle:focus .feature-overlay,
.feature-rectangle:active .feature-overlay {
  opacity: 1;
}

/* Allow the tile itself to be focusable (see HTML tweak below) */
.feature-rectangle { outline: none; }
.feature-rectangle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Optional: show an affordance that tiles are interactive on touch */
@media (hover: none) and (pointer: coarse) {
  .feature-overlay { background: rgba(0,0,0,0.7); }
}

/* ===== 5) Keep desktop look the same across Mac/Windows ===== */
/* Lock desktop font sizes; only scale on touch devices */
@media (hover: hover) and (pointer: fine) {
  h1 { font-size: 48px; }
  .hero-null-labs { font-size: 48px; }
  .hero-logo { width: 120px; height: 120px; }
}

/* Touch devices get fluid sizes */
@media (hover: none) and (pointer: coarse) {
  h1 { font-size: clamp(28px, 6vw, 48px); }
  .hero-null-labs { font-size: clamp(28px, 10vw, 48px); }
  .hero-logo { width: clamp(56px, 18vw, 120px); height: clamp(56px, 18vw, 120px); }
}

/* Safety: avoid 1–2px horizontal jiggle with full-bleed bands */
.band { overflow-x: clip; }

/* Desktop/laptop (mouse/trackpad): hero fills screen minus header */
@media (hover: hover) and (pointer: fine) {
  .hero {
    height: calc(100vh - var(--header-h));
    min-height: calc(100vh - var(--header-h));
    margin-top: 0;
    padding: 0;
  }
}

/* Touch devices: use dynamic viewport units so it doesn’t cut off */
@media (hover: none) and (pointer: coarse) {
  .hero {
    height: auto;
    min-height: calc(100dvh - var(--header-h));  /* dynamic viewport */
    margin-top: 0;
    padding: 80px 0;
  }
}