:root {
  --tint: rgba(0,0,0,0.35);      /* overlay darkness */
  --ui: rgba(255,255,255,0.92);
  --ui-dim: rgba(255,255,255,0.75);
  --text: #0a0a0a;
  --focus: #5b9dff;
  --gap: clamp(12px, 2vw, 24px);
  --edge: clamp(14px, 3vw, 28px); /* arrow/edges spacing */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: white;
  background: #000; /* while first image loads */
  overflow: hidden;
}

/* Stage & background */
.stage {
  position: fixed;
  inset: 0;
  isolation: isolate;
}

.bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-image 400ms ease-in-out, filter 400ms ease-in-out;
}
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tint);
  pointer-events: none;
}

/* Header */
.header {
  padding-left: calc(var(--gap) + env(safe-area-inset-left));
  padding-right: calc(var(--gap) + env(safe-area-inset-right));
  position: absolute;
  top: var(--gap);
  left: var(--gap);
  right: var(--gap);
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  max-width: min(72vw, 640px);
}

.logo {
  height: clamp(28px, 4.2vw, 44px);
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
  border: none;
  outline: none;
  background: transparent;
}

/* Tagline */
.tagline {
  font-size: clamp(14px, 1.8vw, 18px);
  line-height: 1.35;
  opacity: 0.95;
  text-wrap: balance;
  margin: 0;
}

/* Buttons */
.btn {
  appearance: none;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.28);
  color: white;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 120ms ease, transform 100ms ease, border-color 120ms ease;
}
.btn:hover { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.4); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--text); border-color: rgba(0,0,0,0.25); }
.btn.primary { background: #111; color: white; border-color: #111; }

/* Footer */
.footer {
  padding-left: calc(var(--gap) + env(safe-area-inset-left));
  padding-right: calc(var(--gap) + env(safe-area-inset-right));
  position: absolute;
  bottom: var(--gap);
  left: var(--gap);
  right: var(--gap);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}
.links {
  display: flex;
  gap: clamp(12px, 1.6vw, 18px);
  align-items: center;
  background: rgba(0,0,0,0.28);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.links a {
  color: white;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .2px;
  opacity: 0.9;
}
.links a:hover { opacity: 1; text-decoration: underline; }

/* Arrows — Studio.Build-inspired */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 3;
  width: 44px;          /* hit area */
  height: 44px;         /* hit area */
  display: grid;
  place-items: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.08); }
.arrow:active { transform: translateY(-50%) scale(0.98); }

.arrow--prev { left: calc(var(--edge) + env(safe-area-inset-left)); }
.arrow--next { right: calc(var(--edge) + env(safe-area-inset-right)); }

.arrow-icon {
  width: 28px;          /* arrow size */
  height: auto;
  filter: invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.45)); /* make white + readable */
  pointer-events: none; /* ensure button gets the click */
}
.arrow--prev .arrow-icon { transform: scaleX(-1); } /* flip left */

/* Contact Modal */
dialog#contactModal {
  width: min(92vw, 520px);
  border: 0;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  background: var(--ui);
  color: var(--text);
}
dialog::backdrop {
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px);
}
.modal-header { padding: 16px 18px; border-bottom: 1px solid rgba(0,0,0,0.08); display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding: 18px; }
.modal-actions { padding: 14px 18px; border-top: 1px solid rgba(0,0,0,0.08); display:flex; justify-content:flex-end; gap:10px; }

form .field { display: grid; gap: 6px; margin-bottom: 14px; }
label { font-size: 14px; color: #333; }
input, textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.15);
  background: white;
  font-size: 15px;
}
textarea { min-height: 120px; resize: vertical; }

/* Toast */
.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}

/* Accessibility */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .bg { transition: none; }
  .arrow { transition: none; }
}
@media (max-width: 480px) {
  .brand { max-width: 80vw; }
  .tagline { font-size: 13px; }
  .arrow-icon { width: 24px; }
  .arrow { width: 40px; height: 40px; }
  :root { --edge: 16px; }
}


@media (max-width: 768px) {
  .header { align-items: center; }
  .brand { max-width: 100%; }
  .tagline { font-size: 14px; line-height: 1.3; }
}

@media (max-width: 560px) {
  .header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .btn { padding: 8px 12px; }
  .tagline { font-size: 13px; opacity: 0.9; }
}

@media (max-width: 380px) {
  .tagline { display: none; } /* ultra small devices: keep it super minimal */
}


/* Header menu for Work/Play */
.menu {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  margin-right: 8px;
}
.menu-item {
  appearance: none;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.28);
  color: white;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 120ms ease, border-color 120ms ease, transform 100ms ease, opacity 120ms ease;
  font-size: 14px;
  letter-spacing: .2px;
}
.menu-item:hover { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.4); }
.menu-item:active { transform: translateY(1px); }
.menu-item.active, .menu-item[aria-pressed="true"] {
  background: white;
  color: #111;
  border-color: white;
}
@media (max-width: 560px) {
  .menu-item { padding: 6px 10px; font-size: 13px; }
}