/* CatMedia.ai — Gallery Black & White */
:root {
  --black: #000000;
  --dark: #0e0e0e;
  --charcoal: #1f1f1f;
  --grey: #6a6a6a;
  --silver: #b8b8b8;
  --light: #e6e6e6;
  --white: #ffffff;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

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

html, body {
  height: 100%;
  width: 100%;
  background: var(--black);
  color: var(--light);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}

body {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,0.04) 0%, transparent 60%),
    var(--black);
}

/* FULL-VIEWPORT STAGE — no scrolling on any device */
.stage {
  height: 100dvh;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3vh, 36px) clamp(20px, 5vw, 64px);
  gap: clamp(8px, 2vh, 20px);
}

/* BRAND MARK */
.brand {
  display: flex;
  justify-content: center;
  align-items: center;
}
.brand-mark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  letter-spacing: 0.4em;
  color: var(--silver);
  text-transform: uppercase;
}
.brand-mark .dot { color: var(--white); }

/* HERO */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(28px, 5vh, 56px);
  min-height: 0;
}

.headline {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--white);
  /* Each line scales identically — equal scale */
  font-size: clamp(2.1rem, 7.2vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: -0.5px;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.6vh, 8px);
}
.headline span {
  display: block;
}

/* START BUTTON */
.start-btn {
  --pad-x: clamp(34px, 4.5vw, 56px);
  --pad-y: clamp(12px, 1.6vh, 16px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-y) var(--pad-x);
  border: 1px solid var(--silver);
  color: var(--white);
  font-family: var(--sans);
  font-size: clamp(0.72rem, 1vw, 0.85rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  transition: background 0.35s ease, color 0.35s ease, letter-spacing 0.35s ease, border-color 0.35s ease;
}
.start-btn span { display: inline-block; padding-left: 0.42em; }
.start-btn:hover,
.start-btn:focus-visible {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  letter-spacing: 0.55em;
  outline: none;
}

/* FOUNDERS FOOTER */
.founders {
  text-align: center;
  color: var(--silver);
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.68rem, 1.05vw, 0.85rem);
  letter-spacing: 0.08em;
  line-height: 1.6;
  max-width: 1100px;
  margin: 0 auto;
}
.founders p { padding: 0 8px; }
.nation {
  white-space: nowrap;
  color: var(--light);
}
.flag {
  display: inline-block;
  font-size: 1.05em;
  vertical-align: -0.08em;
  margin-left: 0.15em;
  filter: saturate(1) contrast(1.05);
}

/* SHORT / LANDSCAPE PHONES */
@media (max-height: 520px) {
  .headline { font-size: clamp(1.5rem, 5.4vh, 3rem); }
  .hero { gap: clamp(14px, 3vh, 24px); }
  .stage { gap: 6px; padding: 10px clamp(16px, 4vw, 40px); }
  .brand-mark { font-size: 0.7rem; }
  .founders { font-size: 0.65rem; }
}

/* NARROW PHONES */
@media (max-width: 420px) {
  .founders { font-size: 0.62rem; letter-spacing: 0.06em; }
  .start-btn { letter-spacing: 0.38em; }
}