/* -------accessibility--------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Focus visible indicators for keyboard navigation */
:focus-visible {
  outline: 2px solid #00ffff;
  outline-offset: 2px;
}
[data-mode="villa"] :focus-visible {
  outline-color: #1a6b3a;
}

/* -------sns icon--------- */
@font-face {
	font-family: 'sns_ico';
	src:
		url('../fonts/sns_ico.ttf?sij4de') format('truetype'),
		url('../fonts/sns_ico.woff?sij4de') format('woff'),
		url('../fonts/sns_ico.svg?sij4de#sns_ico') format('svg');
	font-weight: normal;
	font-style: normal;
}

i.snsIcon {
	font-family: 'sns_ico' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #fff;
}

.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-tw:before { content: "\e908";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}

/* ////////////////////////////////////////////////////////////////////////////////

	Common

//////////////////////////////////////////////////////////////////////////////// */
html {
	line-height: 1.8;
	letter-spacing: 0.08em;
	scroll-behavior: smooth;
	font-family: "noto-sans-cjk-jp", sans-serif;
	font-weight: 400;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	color: #333;
	font-size: min(3.4vw, 16px);
}
img {
	width: 100%;
	vertical-align: middle;
}
li {
	list-style: none;
}
a {
	transition: all 0.5s ease;
	text-decoration: none;
	color: #333;
}

h2 {
	font-size: min(3.4vw, 16px);
	font-weight: 700;
	text-align: center;
	margin-bottom: min(8vw, 40px);
}
section {
	padding: min(16vw, 100px) 0;
}
section:nth-of-type(1) {
	padding-top: min(16vw, 160px);
}
.inner {
	max-width: 1028px;
	padding: 0 min(5vw, 64px);
	margin: auto;
}

.anim {
	opacity: 0;
	transform: translateY(60px);
	transition: all .8s ease-out;
}
.anim.on {
	opacity: 1;
	transform: translateY(0);
}

.btnWrap {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: min(4vw, 32px);
}
.btnWrap a {
	width: 80%;
	max-width: 300px;
	min-width: fit-content;
	display: block;
	padding: min(3vw, 16px);
	font-size: min(3.4vw, 16px);
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	background-color: #000;
	color: #fff;
	border-radius: 100px;
}
.btnWrap.airb a {
	background-image: linear-gradient(90deg, #e61d4f 30%, #d70466 70%);
  background-size: 200% 100%;
	padding: min(3vw, 14px);
  animation: airbBG 3s linear 0s infinite alternate;
}
@keyframes airbBG {
  0% { background-position: 0%;}
  100% { background-position: 100%;}
}


.btnWrap.airb img {
	width: 92px;
}

@media screen and (min-width:821px) {
	.sp {display: none;}
}
@media (hover: hover) {
	a:hover {
		opacity: 0.6;
	}
}


/* ////////////////////////////////////////////////////////////////////////////////

	menu button

//////////////////////////////////////////////////////////////////////////////// */



header {
	position: relative;
	z-index: 10;
}
header .hdrLogo {
	display: none;
}
#menuButton {
	display: block;
  width: 70px;
  height: 36px;
	position: fixed;
	top: 3vw;
	right: 2vw;
	z-index: 9999;
  background: #000;
  border-radius: 100px;
}
#menuButton span {
	display: block;
	background: #fff;
	width: 40%;
	height: 2px;
	position: absolute;
  top: 50%;
	left: 50%;
	transition: all 0.4s;
}

#menuButton span:nth-child(1) { transform: translate(-50%, -250%);}
#menuButton span:nth-child(2) { transform: translate(-50%, 150%);}

#menuButton.active span:nth-child(1),
#menuButton.active span:nth-child(2) { transform: translate(-50%, -50%);}

#globalNav {
	display: none;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 10;
  background-color: #fff;
  width: min(100vw, 600px);
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
#globalNav .menuLogo {
  display: flex;
  align-items: baseline;
  padding: min(6vw, 40px) min(6vw, 60px);
  gap: min(6vw, 30px);
  margin-bottom: min(3vw, 20px);
}
#globalNav .menuLogo img {
  width: min(40vw, 200px);
}
#globalNav .menuLogo span {
  font-size: min(3.6vw, 18px);
}

.mainNav {
	background-color: #fff;
  padding: 0 min(6vw, 60px);
	list-style: none;
}
.mainNav li {
  border-bottom: #000 solid 1px;
  padding: min(2vw, 20px) 0;
}
.mainNav li:first-child {
  border-top: #000 solid 1px;
}
.mainNav li > a {
	color: #333;
	font-size: min(4.2vw, 20px);
	font-weight: 700;
  line-height: 2;
	letter-spacing: 0.1em;
  text-decoration: none;
}
.mainNav li > a.nav-join {
  color: #00aa00;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.6vw, 16px);
}

.mainNav li .propertyThumbList {
  margin-top: min(3vw, 15px);
  display: flex;
  flex-wrap: wrap;
  gap: min(2vw, 15px);
}
.mainNav li .propertyThumbList a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc((100% - min(4vw, 30px)) / 3);
  aspect-ratio: 2/1;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
  background-color: #000;
  position: relative;
}
.mainNav li .propertyThumbList a::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
}
.mainNav li .propertyThumbList a:nth-child(1)::before { background: url("../images/property01.jpg") no-repeat center center; background-size: cover;}
.mainNav li .propertyThumbList a:nth-child(2)::before { background: url("../images/property02.jpg") no-repeat center center; background-size: cover;}
.mainNav li .propertyThumbList a:nth-child(3)::before { background: url("../images/property03.jpg") no-repeat center center; background-size: cover;}
.mainNav li .propertyThumbList a:nth-child(4)::before { background: url("../images/property04.jpg") no-repeat center center; background-size: cover;}
.mainNav li .propertyThumbList a:nth-child(5)::before { background: url("../images/property05.jpg") no-repeat center center; background-size: cover;}

.mainNav li .propertyThumbList a span {
  position: relative;
  z-index: 2;
  font-size: min(3vw, 12px);
  font-weight: 600;
  letter-spacing: 0;
}

#globalNav .snsList {
  display: flex;
  font-size: min(5.4vw, 24px);
  gap: min(4vw, 20px);
  padding: 0 min(6vw, 60px);
  margin-top: min(5vw, 30px);
}
#globalNav .snsList i.snsIcon {
  color: #000;
}


@media (hover: hover) {
	.mainNav a {
		position: relative;
	}
}

@media screen and (max-width:820px) {
	#menuButton {
    width: 50px;
    height: 30px;
    top: 5vw;
    right: 4vw;
	}
  
  #menuButton span:nth-child(1) { transform: translate(-50%, -200%);}
  #menuButton span:nth-child(2) { transform: translate(-50%, 100%);}
  
  .mainNav li .propertyThumbList a {
    width: calc((100% - min(4vw, 30px)) / 2);
    aspect-ratio: 2 / 0.9;
  }
  
}

/* ////////////////////////////////////////////////////////////////////////////////

	Main Visual

//////////////////////////////////////////////////////////////////////////////// */

@keyframes fade {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
@keyframes slideUp {
	0% { transform: translateY(min(4vw, 30px));}
	100% { transform: translateY(0);}
}

header {
	opacity: 0;
	animation: fade 1.5s ease-out 6.6s forwards;
}
/* ------- op --------- */
#op {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
  flex-direction: column;
	justify-content: center;
	align-items: center;
  gap: min(3.8vw, 17px);
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	animation: opBg 1s ease-out 2s forwards;
  pointer-events: none;
}
#op img.mark {
/*
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
*/
	width: 24%;
	max-width: 120px;
	opacity: 0;
	animation: fade 1s ease-out .5s forwards;
}
#op img.title {
/*
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
*/
	width: 35%;
	max-width: 180px;
	opacity: 0;
	animation: fade 1s ease-out .5s forwards;
}
@keyframes opBg {
/*
	0% { width: 100vw;}
	100% { width: 40vw;}
*/
	0% { opacity: 1;}
	100% { opacity: 0;}
}
@keyframes opBgSp {
	0% { width: 100vw;}
	100% { width: 0vw;}
}
@keyframes oplogo {
	0% { opacity: 0;}
	30% { opacity: 1;}
	70% { opacity: 1;}
	100% { opacity: 0;}
}
@media screen and (orientation: portrait) {
	#op {
		left: auto;
		right: 0;
	}
}


#mainVisual {
	position: relative;
	display: flex;
	height: 100vh;
	height: 100svh;
	font-feature-settings: "palt";
}
#mainVisual .mvLeft {
	position: relative;
	width: 40vw;
  z-index: 1;
}
#mainVisual .mvLeft .brandLogo {
	width: 6.3vw;

	opacity: 0;
	animation: fade 1.5s ease-out 6.6s forwards;
}
#mainVisual .mvLeft .catch {
  font-size: 1.64vw;
	letter-spacing: 0.15em;
  line-height: 2;

	opacity: 0;
	animation: fade 1s ease-out 5.6s forwards, slideUp 1s cubic-bezier(0, 0.55, 0.45, 1) 5.6s forwards;
}
#mainVisual .mvLeft .catch .en {
	display: block;
	font-family: sofia-pro, sans-serif;
	/* font-weight: 300; */
	font-weight: 400;
	font-style: normal;
	font-size: 0.583em;
	letter-spacing: 0.01em;
	margin-top: 1em;
}
#mainVisual .mvLeft h1 {
	width: 43.6vw;
	opacity: 0;
	animation: fade 2.5s ease-out 5.3s forwards, slideUp 1s cubic-bezier(0, 0.55, 0.45, 1) 5.3s forwards;
}
#mainVisual .mvRight {
	height: 100vh;
	width: 60vw;
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
	animation: opImg 1s cubic-bezier(0.83, 0, 0.17, 1) 4s forwards;
}
#mainVisual .mvRight img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 20% 50%;
}
@keyframes opImg {
	0% { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);}
	100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);}
}

#mainVisual .scroll {
	display: flex;
	align-items: center;
	position: absolute;
	left: 5vw;
	bottom: 2%;
	font-family: sofia-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2vw;
	letter-spacing: 0.01em;

	opacity: 0;
	animation: fade 1.5s ease-out 6.6s forwards;
}
#mainVisual .scroll span {
  display: block;
	width: 2em;
  aspect-ratio: 1/1;
  border-radius: 50%;
  overflow: hidden;
  border: #000 solid 1px;
	margin-right: 0.6em;
}
#mainVisual .scroll img {
	display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: scrl 2.4s ease-out 0s infinite;
}
@keyframes scrl {
  0% { transform: translateY(0%);}
  35% { transform: translateY(100%);}
  35.1% { transform: translateY(-100%);}
  70% { transform: translateY(0%);}
}


@media screen and (orientation: landscape) {
	#mainVisual .mvLeft .brandLogo {
		position: absolute;
		top: 5.6%;
		left: 5.8vw;
	}
	#mainVisual .mvLeft .catch {
		position: absolute;
		top: 52%;
		left: 5.8vw;
		font-size: 1.5vw;
		letter-spacing: 0.15em;
	}
	#mainVisual .mvLeft h1 {
		position: absolute;
		top: 30%;
		left: 5.8vw;
	}
}
@media screen and (orientation: portrait) {
  #op {
    padding-bottom: 5vh;
  }
	#mainVisual {
		flex-direction: column;
	}
	#mainVisual .mvLeft {
    width: 100vw;
		padding-top: 4vw;
		padding-left: 7.2vw;
	}
	#mainVisual .mvLeft .brandLogo {
		width: 7.7vh;
	}
	#mainVisual .mvLeft .catch {
		font-size: min(2.02vh, 4.6vw);
		margin-top: 3.2vh;
	}
	#mainVisual .mvLeft .catch .en {
		font-size: 0.7em;
		margin-top: 0.6em;
	}
	#mainVisual .mvLeft h1 {
		width: min(44.3vh, 86vw);
		margin-top: 4.6vh;
	}
	#mainVisual .mvRight {
		width: 92.8vw;
		height: 42.5vh;
		margin-top: 4.5vh;
		margin-left: 7.2vw;
	}
	#mainVisual .scroll {
		left: 7.2vw;
		bottom: 3%;
		font-size: 3.2vw;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////

	about

//////////////////////////////////////////////////////////////////////////////// */
#about .lead {
	font-size: min(4.2vw, 30px);
	font-weight: 500;
	line-height: 1.8;
	margin-bottom: min(6vw, 40px);
  text-align: center;
}
#about .mission-lead {
  font-size: min(8vw, 48px);
  font-weight: 900;
  letter-spacing: 0.1em;
}
.aboutText p {
	line-height: 2.6;
  text-align: center;
  font-size: min(4vw, 20px);
}
.aboutText p + p {
	margin-top: 1em;
}
#about .btnWrap {
	margin-top: min(8vw, 48px);
}

@media screen and (max-width:820px) {
  .aboutText p {
    letter-spacing: 0;
  }
}

/* ////////////////////////////////////////////////////////////////////////////////

	Typewriter

//////////////////////////////////////////////////////////////////////////////// */
.cursor {
  animation: blink-cursor 0.8s step-end infinite;
  font-weight: 100;
}
@keyframes blink-cursor {
  from, to { opacity: 1; }
  50% { opacity: 0; }
}

/* ////////////////////////////////////////////////////////////////////////////////

	Philosophy — Terminal Style

//////////////////////////////////////////////////////////////////////////////// */
#philosophy {
  background-color: #0a0a0a;
  color: #fff;
  padding: min(16vw, 120px) 0;
}
#philosophy h2 {
  color: #888;
}
.philosophy-subtitle {
  text-align: center;
  font-size: min(3vw, 14px);
  color: #666;
  margin-bottom: min(8vw, 48px);
  font-style: italic;
}

.terminal {
  max-width: 680px;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background-color: #1a1a2e;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(100, 100, 255, 0.05);
}
.terminal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #16162a;
}
.terminal-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.terminal-dot.red { background-color: #ff5f56; }
.terminal-dot.yellow { background-color: #ffbd2e; }
.terminal-dot.green { background-color: #27c93f; }
.terminal-title {
  margin-left: 8px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  color: #666;
}

.terminal-body {
  padding: min(6vw, 32px);
  margin: 0;
  overflow-x: auto;
  line-height: 2;
}
.terminal-body code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace;
  font-size: min(3vw, 14px);
  letter-spacing: 0;
  white-space: pre;
}
.code-comment { color: #6a737d; font-style: italic; }
.code-keyword { color: #c678dd; }
.code-var { color: #e5c07b; }
.code-key { color: #61afef; }
.code-string { color: #98c379; }

.terminal-body code .code-key,
.terminal-body code .code-string,
.terminal-body code .code-comment {
  opacity: 0;
  animation: terminal-line-in 0.4s ease forwards;
}

.terminal.on .terminal-body code .code-key,
.terminal.on .terminal-body code .code-string,
.terminal.on .terminal-body code .code-comment {
  opacity: 1;
}

@media screen and (max-width:820px) {
  .terminal-body code {
    font-size: min(2.6vw, 12px);
  }
  .terminal-body {
    padding: min(4vw, 20px);
    line-height: 1.8;
  }
}

/* ////////////////////////////////////////////////////////////////////////////////

	Products

//////////////////////////////////////////////////////////////////////////////// */

/* Products — terminal / hacker style */
#products {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(rgba(0,255,0,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,0,0.025) 1px, transparent 1px);
  background-size: 28px 28px;
}
#products h2 {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  color: #00ff00;
  text-shadow: 0 0 14px rgba(0,255,0,0.5);
  letter-spacing: 0.14em;
}

.products-subtitle {
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #999;
  margin-bottom: min(10vw, 60px);
  letter-spacing: 0.04em;
}

.productGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(44vw, 260px), 1fr));
  gap: min(4vw, 20px);
}

/* per-card accent colors */
.productCard.c-orange { --c: #ffaa00; --cs: rgba(255,170,0,0.12); --cb: rgba(255,170,0,0.25); }
.productCard.c-cyan   { --c: #00ffff; --cs: rgba(0,255,255,0.10); --cb: rgba(0,255,255,0.25); }
.productCard.c-green  { --c: #00ff00; --cs: rgba(0,255,0,0.10);   --cb: rgba(0,255,0,0.25);   }
.productCard.c-purple { --c: #aa66ff; --cs: rgba(170,102,255,0.12); --cb: rgba(170,102,255,0.25); }

.productCard {
  --c: #00ff00;
  --cs: rgba(0,255,0,0.10);
  --cb: rgba(0,255,0,0.25);
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-top: 2px solid var(--c);
  border-radius: 3px;
  padding: min(5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: min(3vw, 14px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .productCard:hover {
    border-color: var(--cb);
    box-shadow: 0 0 24px var(--cs);
  }
}

.productCard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.productCard-name {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(4vw, 16px);
  font-weight: 700;
  color: var(--c);
  letter-spacing: 0.06em;
}
.productCard-lang {
  font-family: 'SF Mono', monospace;
  font-size: min(2.4vw, 10px);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid var(--cb);
  color: var(--c);
  white-space: nowrap;
  opacity: 0.8;
}

.productCard-desc {
  font-size: min(3.2vw, 13px);
  line-height: 1.9;
  color: #888;
  flex: 1;
}

.productCard-stats {
  display: flex;
  flex-wrap: wrap;
  gap: min(2.4vw, 12px);
  font-family: 'SF Mono', monospace;
  font-size: min(2.6vw, 11px);
  color: #999;
}

.productCard-reward {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 12px);
  font-weight: 600;
  color: var(--c);
  border: 1px solid var(--cb);
  padding: 4px 10px;
  text-align: center;
  opacity: 0.85;
}

.productCard-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.productCard-btn {
  display: block;
  padding: min(2.2vw, 10px) min(3vw, 14px);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
.productCard-btn-primary {
  background-color: var(--c);
  color: #000;
}
.productCard-btn-secondary {
  background-color: transparent;
  color: #666;
  border: 1px solid #222;
}
@media (hover: hover) {
  .productCard-btn-primary:hover { opacity: 0.85; }
  .productCard-btn-secondary:hover {
    color: var(--c);
    border-color: var(--cb);
    background-color: var(--cs);
    opacity: 1;
  }
}

@media screen and (max-width:820px) {
  .productGrid { grid-template-columns: 1fr; }
}
.productGrid-status {
  grid-column: 1 / -1;
  text-align: center;
  color: #555;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 13px;
  padding: 40px 0;
}
.productGrid-retry {
  margin-top: 12px;
  background: transparent;
  border: 1px solid #333;
  color: #00ff00;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 12px;
  padding: 8px 20px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.productGrid-retry:hover {
  border-color: #00ff00;
  background: rgba(0,255,0,0.05);
}

/* ── Availability Calendar ─────── */
.availability-cal {
  margin: 24px 0;
}
.avail-title {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 12px;
  color: #888;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.avail-months {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: thin;
  scrollbar-color: #333 transparent;
}
.avail-month {
  flex-shrink: 0;
  min-width: 200px;
}
.avail-month-name {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 11px;
  color: #aaa;
  margin-bottom: 6px;
  font-weight: 600;
}
.avail-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.avail-dow {
  font-size: 9px;
  color: #555;
  text-align: center;
  font-family: 'SF Mono','Fira Code',monospace;
  padding: 2px 0;
}
.avail-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-family: 'SF Mono','Fira Code',monospace;
  border-radius: 2px;
  color: #888;
  background: rgba(0,255,0,0.08);
  transition: background 0.15s;
}
.avail-day.booked {
  background: rgba(255,60,60,0.15);
  color: #664444;
  text-decoration: line-through;
}
.avail-day.today {
  outline: 1px solid #00ff00;
  color: #00ff00;
  font-weight: 700;
}
.avail-day.past {
  background: transparent;
  color: #333;
}
.avail-day.empty {
  background: transparent;
}
.avail-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 10px;
  font-family: 'SF Mono','Fira Code',monospace;
  color: #666;
}
.avail-legend span::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}
.avail-legend .leg-avail::before { background: rgba(0,255,0,0.15); }
.avail-legend .leg-booked::before { background: rgba(255,60,60,0.2); }

/* Availability — contact fallback */
.availability-contact {
  margin: 24px 0;
  padding: 20px 24px;
  border: 1px solid rgba(0,255,0,0.15);
  border-left: 2px solid rgba(0,255,0,0.4);
  background: rgba(0,255,0,0.02);
  text-align: center;
}
.availability-contact-text {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #888;
  margin-bottom: 12px;
}
.availability-contact-btn {
  display: inline-block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  font-weight: 700;
  color: #00ff00;
  border: 1px solid rgba(0,255,0,0.35);
  padding: 10px 24px;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
.availability-contact-btn:hover {
  background: rgba(0,255,0,0.08);
  border-color: #00ff00;
  opacity: 1;
}
[data-mode="villa"] .availability-contact {
  border-color: rgba(26,107,58,0.12);
  border-left-color: #1a6b3a;
  background: rgba(26,107,58,0.02);
}
[data-mode="villa"] .availability-contact-text { color: #999; }
[data-mode="villa"] .availability-contact-btn {
  color: #1a6b3a;
  border-color: rgba(26,107,58,0.3);
}
[data-mode="villa"] .availability-contact-btn:hover {
  background: rgba(26,107,58,0.06);
  border-color: #1a6b3a;
}

/* Availability contact fallback */
.availability-contact {
  margin: 24px 0;
  padding: 20px;
  border: 1px dashed rgba(0,255,0,0.2);
  border-radius: 4px;
  text-align: center;
}
.availability-contact-text {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3vw, 13px);
  color: #999;
  margin-bottom: 12px;
}
.availability-contact-btn {
  display: inline-block;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3vw, 13px);
  font-weight: 700;
  color: #00ff00;
  text-decoration: none;
  padding: 8px 20px;
  border: 1px solid rgba(0,255,0,0.3);
  border-radius: 3px;
  transition: all 0.2s ease;
}
.availability-contact-btn:hover {
  background: rgba(0,255,0,0.08);
  border-color: #00ff00;
  opacity: 1;
}
[data-mode="villa"] .availability-contact { border-color: rgba(26,107,58,0.2); }
[data-mode="villa"] .availability-contact-text { color: #888; }
[data-mode="villa"] .availability-contact-btn {
  color: #1a6b3a;
  border-color: rgba(26,107,58,0.3);
}
[data-mode="villa"] .availability-contact-btn:hover {
  background: rgba(26,107,58,0.06);
  border-color: #1a6b3a;
}

/* Villa mode overrides for calendar */
[data-mode="villa"] .avail-day {
  background: rgba(26,107,58,0.08);
  color: #666;
}
[data-mode="villa"] .avail-day.booked {
  background: rgba(180,80,80,0.12);
  color: #999;
}
[data-mode="villa"] .avail-day.today {
  outline-color: #1a6b3a;
  color: #1a6b3a;
}

/* ////////////////////////////////////////////////////////////////////////////////

  Numbers — Social Proof

//////////////////////////////////////////////////////////////////////////////// */

#numbers {
  background-color: #0a0a0a;
  border-top: 1px solid rgba(0,255,0,0.08);
  border-bottom: 1px solid rgba(0,255,0,0.08);
  padding: min(12vw, 72px) 0;
}
#numbers h2 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #00ffff;
  text-shadow: 0 0 12px rgba(0,255,255,0.3);
  letter-spacing: 0.12em;
}
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: min(4vw, 24px);
  text-align: center;
}
.numbers-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: min(4vw, 20px) min(2vw, 12px);
  border: 1px solid #1c1c1c;
  border-radius: 4px;
  background: #0f0f0f;
  transition: border-color 0.25s ease;
}
.numbers-item:hover {
  border-color: rgba(0,255,255,0.3);
}
.numbers-value {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(7vw, 32px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
}
.numbers-label {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #00ffff;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.numbers-sub {
  font-size: min(2.6vw, 11px);
  color: #666;
}

@media screen and (max-width:820px) {
  .numbers-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Villa mode overrides for numbers */
[data-mode="villa"] #numbers {
  background-color: #f9f7f3;
  border-color: #e8e4dc;
}
[data-mode="villa"] #numbers h2 { color: #1a6b3a; text-shadow: none; }
[data-mode="villa"] .numbers-item {
  background: #fff;
  border-color: #e8e4dc;
}
[data-mode="villa"] .numbers-item:hover { border-color: #1a6b3a; }
[data-mode="villa"] .numbers-value { color: #111; }
[data-mode="villa"] .numbers-label { color: #1a6b3a; }
[data-mode="villa"] .numbers-sub { color: #999; }

/* ////////////////////////////////////////////////////////////////////////////////

  Mode Selection Splash

//////////////////////////////////////////////////////////////////////////////// */

#modeSplash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splash-fadein 0.5s ease;
}
@keyframes splash-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
.splash-inner {
  text-align: center;
  max-width: 520px;
  padding: 0 24px;
}
.splash-logo {
  width: 60px;
  margin-bottom: 24px;
  opacity: 0.8;
}
.splash-question {
  font-size: min(5vw, 22px);
  font-weight: 700;
  color: #fff;
  margin-bottom: min(6vw, 32px);
}
.splash-options {
  display: flex;
  gap: min(4vw, 16px);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: min(4vw, 24px);
}
.splash-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(42vw, 220px);
  padding: min(5vw, 28px) min(4vw, 20px);
  border: 1px solid #333;
  border-radius: 8px;
  background: #111;
  cursor: pointer;
  transition: all 0.25s ease;
}
.splash-btn:hover {
  transform: translateY(-2px);
}
.splash-btn-villa:hover {
  border-color: rgba(255,170,0,0.5);
  box-shadow: 0 4px 24px rgba(255,170,0,0.1);
}
.splash-btn-code:hover {
  border-color: rgba(0,255,0,0.5);
  box-shadow: 0 4px 24px rgba(0,255,0,0.1);
}
.splash-emoji {
  font-size: min(10vw, 40px);
}
.splash-btn-title {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.6vw, 15px);
  font-weight: 700;
  color: #fff;
}
.splash-btn-sub {
  font-size: min(2.8vw, 12px);
  color: #888;
}
.splash-skip {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  color: #666;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.2s;
  padding: 8px 16px;
}
.splash-skip:hover { color: #fff; }

/* ////////////////////////////////////////////////////////////////////////////////

  Footer Links

//////////////////////////////////////////////////////////////////////////////// */

.footer-links {
  display: flex;
  gap: min(4vw, 24px);
  flex-wrap: wrap;
  margin-bottom: min(4vw, 20px);
  width: 100%;
}
.footer-links a {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  color: #888;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-links a:hover {
  color: #00ffff;
  opacity: 1;
}

[data-mode="villa"] .footer-links a { color: #999; }
[data-mode="villa"] .footer-links a:hover { color: #1a6b3a; }

/* ////////////////////////////////////////////////////////////////////////////////

  Explainer — What is enabler?

//////////////////////////////////////////////////////////////////////////////// */

#explainer {
  background-color: #0a0a0a;
  padding: min(16vw, 100px) 0;
}
#explainer h2 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #00ffff;
  text-shadow: 0 0 12px rgba(0,255,255,0.3);
  letter-spacing: 0.12em;
}

.explainer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(80vw, 280px), 1fr));
  gap: min(5vw, 24px);
  margin-bottom: min(10vw, 56px);
}
.explainer-card {
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-top: 2px solid #00ffff;
  border-radius: 4px;
  padding: min(6vw, 28px);
}
.explainer-icon {
  font-size: min(8vw, 36px);
  margin-bottom: min(3vw, 12px);
}
.explainer-card-title {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(4vw, 16px);
  font-weight: 700;
  color: #fff;
  margin-bottom: min(2vw, 10px);
}
.explainer-card-body {
  font-size: min(3.4vw, 14px);
  color: #aaa;
  line-height: 1.9;
}
.explainer-card-body strong {
  color: #ffaa00;
}

.explainer-cta {
  text-align: center;
}
.explainer-lead {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(4vw, 18px);
  color: #999;
  margin-bottom: min(4vw, 20px);
}
.explainer-paths {
  display: flex;
  gap: min(4vw, 16px);
  justify-content: center;
  flex-wrap: wrap;
}
.explainer-path-btn {
  display: inline-block;
  padding: min(3.4vw, 16px) min(6vw, 32px);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.4vw, 15px);
  font-weight: 700;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
.explainer-path-btn.path-villa {
  background: transparent;
  border: 1px solid rgba(255,170,0,0.4);
  color: #ffaa00;
}
.explainer-path-btn.path-villa:hover {
  background: rgba(255,170,0,0.08);
  border-color: #ffaa00;
  opacity: 1;
}
.explainer-path-btn.path-code {
  background: transparent;
  border: 1px solid rgba(0,255,0,0.4);
  color: #00ff00;
}
.explainer-path-btn.path-code:hover {
  background: rgba(0,255,0,0.08);
  border-color: #00ff00;
  opacity: 1;
}

/* Villa mode overrides for explainer */
[data-mode="villa"] #explainer {
  background-color: #f5f2ec;
}
[data-mode="villa"] #explainer h2 { color: #1a6b3a; text-shadow: none; }
[data-mode="villa"] .explainer-card {
  background: #fff;
  border-color: #eee;
  border-top-color: #1a6b3a;
}
[data-mode="villa"] .explainer-card-title { color: #111; }
[data-mode="villa"] .explainer-card-body { color: #666; }
[data-mode="villa"] .explainer-lead { color: #888; }
[data-mode="villa"] .explainer-path-btn.path-villa {
  border-color: rgba(180,120,0,0.35);
  color: #b07800;
}
[data-mode="villa"] .explainer-path-btn.path-villa:hover {
  background: rgba(180,120,0,0.06);
  border-color: #b07800;
}
[data-mode="villa"] .explainer-path-btn.path-code {
  border-color: rgba(26,107,58,0.35);
  color: #1a6b3a;
}
[data-mode="villa"] .explainer-path-btn.path-code:hover {
  background: rgba(26,107,58,0.06);
  border-color: #1a6b3a;
}

/* ////////////////////////////////////////////////////////////////////////////////

	Join — chatweb.ai connect flow

//////////////////////////////////////////////////////////////////////////////// */

#join {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(rgba(0,255,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,0,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: min(16vw, 100px) 0;
}

.join-terminal {
  max-width: 680px;
  margin: 0 auto;
  border: 1px solid rgba(0,255,0,0.2);
  border-top: 2px solid #00ff00;
  border-radius: 4px;
  background: #0f0f0f;
  box-shadow: 0 0 60px rgba(0,255,0,0.07);
  overflow: hidden;
}
.join-body {
  padding: min(8vw, 40px) min(7vw, 40px) min(8vw, 40px);
}

/* phase visibility */
.join-phase { }
.join-phase-hidden { display: none; }

.join-prompt {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #999;
  margin-bottom: min(5vw, 20px);
}
.join-caret { color: #00ff00; margin-right: 8px; }

.join-heading {
  font-size: min(7vw, 34px);
  font-weight: 900;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: min(3vw, 14px);
}
.join-sub {
  font-size: min(3.6vw, 15px);
  color: #888;
  margin-bottom: min(6vw, 28px);
  line-height: 1.8;
}
.join-highlight { color: #ffaa00; font-weight: 700; }

/* plan badges */
.join-plans {
  display: flex;
  gap: 10px;
  margin-bottom: min(6vw, 28px);
  flex-wrap: wrap;
}
.join-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #222;
  padding: 10px 18px;
  flex: 1;
  min-width: 80px;
}
.join-plan-rec {
  border-color: rgba(0,255,0,0.35);
}
.join-plan-badge {
  position: absolute;
  top: -9px;
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  background: #00ff00;
  color: #000;
  padding: 1px 6px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.join-plan-name {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 11px);
  color: #666;
  margin-bottom: 4px;
}
.join-plan-price {
  font-family: 'SF Mono', monospace;
  font-size: min(4vw, 18px);
  font-weight: 700;
  color: #fff;
}
.join-plan-rec .join-plan-price { color: #00ff00; }
.join-plan-mo { font-size: 0.6em; color: #999; }

/* primary CTA */
.join-cta-btn {
  display: block;
  width: 100%;
  background: #00ff00;
  color: #000;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.4vw, 15px);
  font-weight: 700;
  text-align: center;
  padding: 16px 24px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
  margin-bottom: 12px;
}
.join-cta-btn:hover { opacity: 0.85; color: #000; }

/* API key input */
.join-apikey-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.join-input {
  flex: 1;
  min-width: 200px;
  background: #111;
  border: 1px solid #2a2a2a;
  color: #fff;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.2vw, 14px);
  padding: 14px 16px;
  outline: none;
  transition: border-color 0.2s ease;
}
.join-input::placeholder { color: #444; }
.join-input:focus { border-color: rgba(0,255,0,0.5); }

.join-btn {
  background: #00ff00;
  color: #000;
  border: none;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  font-weight: 700;
  padding: 14px 24px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  letter-spacing: 0.04em;
}
.join-btn:hover { opacity: 0.85; }
.join-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.join-note {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 12px);
  margin-top: 12px;
  min-height: 1.4em;
}
.join-note.err { color: #ff5f56; }

/* generated command */
.join-command-gen {
  position: relative;
  background: #111;
  border: 1px solid #1a3a1a;
  padding: 16px 48px 16px 16px;
  margin-bottom: min(5vw, 24px);
  overflow-x: auto;
}
.join-cmd-pre {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #00ff00;
  margin: 0;
  white-space: pre;
  line-height: 1.8;
}
.join-copy {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: 'SF Mono', monospace;
  font-size: min(2.4vw, 10px);
  color: #555;
  background: transparent;
  border: 1px solid #333;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.join-copy:hover, .join-copy.copied { color: #00ff00; border-color: #00ff00; }

/* what happens list */
.join-what-happens {
  border-left: 2px solid rgba(0,255,0,0.2);
  padding-left: 16px;
}
.join-what-title {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 12px);
  color: #999;
  margin-bottom: 10px;
}
.join-what-item {
  display: flex;
  gap: 10px;
  font-size: min(3.2vw, 13px);
  color: #888;
  margin-bottom: 8px;
  line-height: 1.5;
}
.join-what-arrow { color: #00ff00; flex-shrink: 0; }
.join-what-item code {
  font-family: 'SF Mono', monospace;
  font-size: 0.9em;
  color: #00ffff;
}
.join-what-item a { color: #00ffff; }

.join-fine {
  font-size: min(2.6vw, 11px);
  color: #999;
  margin-top: 10px;
  line-height: 1.6;
}

@media screen and (max-width:820px) {
  .join-plans { flex-wrap: wrap; }
  .join-apikey-form { flex-direction: column; }
  .join-btn { width: 100%; }
}

/* ////////////////////////////////////////////////////////////////////////////////

	Property

//////////////////////////////////////////////////////////////////////////////// */

#property {
  overflow: hidden;
}

.propertyWrap {
  margin-bottom: min(28vw, 220px);
}
.propertyTitle {
  margin: min(4vw, 30px) min(4vw, 30px);
  aspect-ratio: 2/1;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.propertyTitle .bgText {
  font-family: sofia-pro, sans-serif;
  font-weight: 600;
  font-size: 5.4vw;
  line-height: 1.2;
  letter-spacing: 0.06em;
  margin-bottom: 0.2em;
}
.propertyTitle h3 {
  font-size: 1.8vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  margin-bottom: 1.8em;
}
.propertyTitle .btnWrap {
  width: 100%;
}
.propertyTitle .propertyTitleiImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background-color: #000;
  transition: opacity 2s ease-out;
  opacity: 0;
}
.propertyTitle.on .propertyTitleiImg {
  opacity: 1;
}
.propertyTitle .propertyTitleiImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: transform 3s cubic-bezier(0, 0.55, 0.45, 1);
  transform: scale(1.3);
}
.propertyTitle.on .propertyTitleiImg img {
  transform: scale(1);
}

.slideWrap {
	overflow: hidden;
}
.propertySlider {
  display: flex;
  min-width: 100%;
  width: min-content;
}
.propertyWrap > div:nth-child(odd) .propertySlider {
  animation: 40s linear infinite sliderAnimLeft;
}
.propertyWrap > div:nth-child(even) .propertySlider {
  animation: 40s linear infinite sliderAnimRight;
	transform: translateX(-50%);
}
.propertySlider > div {
  height: 27.8vw;
  width: 30vw;
  margin: 0 1.4vw;
  position: relative;
}
.propertySlider > div img {
  width: 100%;
	height: 100%;
	object-fit: cover;
}
@keyframes sliderAnimLeft {
  100% { transform: translateX(-50%);}
}
@keyframes sliderAnimRight {
	0% { transform: translateX(-50%);}
  100% { transform: translateX(0%);}
}

.propertyContent.inner {
  padding-top: min(8vw, 60px);
}
.propertyContent .lead {
  font-size: min(4vw, 20px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.6;
  margin-bottom: 1.8em;
}
.propertyContent .text {
  margin-bottom: min(8vw, 60px);
}
.propertyContent .text p + p {
  margin-top: 1.4em;
}


@media screen and (max-width:820px) {
  
  .propertyTitle {
    aspect-ratio: 2 / 1.36;
  }
  .propertyTitle .bgText {
    font-size: 6.4vw;
    letter-spacing: 0.04em;
  }
  
  .propertyTitle h3 {
    font-size: 3vw;
  }
  .btnWrap.airb img {
    width: 20vw;
  }
  .btnWrap.airb a {
    padding: min(2vw, 14px);
    max-width: 200px;
    font-size: min(3.6vw, 16px);
  }
  
}



/* ////////////////////////////////////////////////////////////////////////////////

	Project Story

//////////////////////////////////////////////////////////////////////////////// */
#story {
  background-color: #0a0a0a;
  background-image:
    url(../images/project_bg.jpg),
    linear-gradient(rgba(0,255,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,0,0.02) 1px, transparent 1px);
  background-repeat: no-repeat, repeat, repeat;
  background-size: cover, 28px 28px, 28px 28px;
  background-position: 0% 100%, 0 0, 0 0;
  background-blend-mode: overlay, normal, normal;
  color: #fff;
}
#story h2 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #00ff00;
  text-shadow: 0 0 12px rgba(0,255,0,0.4);
  letter-spacing: 0.12em;
}
#story h2 + p {
	font-size: min(6.8vw, 38px);
	font-weight: 700;
	text-align: center;
	line-height: 1;
	letter-spacing: 0.06em;
	margin-bottom: min(6vw, 40px);
}
.storyText p {
	line-height: 3;
  text-align: center;
  color: #aaa;
}
.storyText p + p {
	margin-top: 1em;
}
#story .btnWrap {
	margin-top: min(8vw, 48px);
}
#story .btnWrap a {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  letter-spacing: 0.06em;
	background-color: transparent;
  border: 1px solid rgba(0,255,0,0.4);
  color: #00ff00;
  border-radius: 3px;
}
@media (hover: hover) {
  #story .btnWrap a:hover {
    background-color: rgba(0,255,0,0.08);
    border-color: #00ff00;
    opacity: 1;
  }
}

@media screen and (max-width:820px) {
  #story h2 + p {
    letter-spacing: 0.16em;
    font-feature-settings: "palt";
    line-height: 1.4;
  }
  .storyText p {
    line-height: 2.6;
    letter-spacing: 0;
    font-size: min(3vw, 12px);
  }
}


/* ////////////////////////////////////////////////////////////////////////////////

	Message

//////////////////////////////////////////////////////////////////////////////// */
#message {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(rgba(0,255,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,0,0.02) 1px, transparent 1px);
  background-size: 28px 28px;
	color: #fff;
}
#message h2 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #00ff00;
  text-shadow: 0 0 12px rgba(0,255,0,0.4);
  letter-spacing: 0.12em;
}
.messageText {
  border: 1px solid rgba(0,255,0,0.2);
  border-left: 2px solid #00ff00;
  padding: min(12vw, 60px) min(6vw, 40px) min(8vw, 60px);
  position: relative;
  margin-top: min(12vw, 60px);
  background: rgba(0,255,0,0.02);
}
.messageText h3 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #0a0a0a;
  padding: 0 min(3vw, 20px);
  white-space: nowrap;
  font-size: min(4.2vw, 22px);
  text-align: center;
  color: #ccc;
}
.messageText p {
	line-height: 3;
  color: #888;
}
.messageText p + p {
	margin-top: 1em;
}
.messageText .signature {
	text-align: right;
	font-weight: 500;
  line-height: 1.6;
  color: #aaa;
}
.messageText .signature strong {
  font-weight: 600;
  font-size: 1.2em;
  color: #fff;
}

#message .btnWrap {
  margin-top: min(6.5vw, 40px);
}
#message .btnWrap a {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  letter-spacing: 0.06em;
  background-color: transparent;
  border: 1px solid rgba(0,255,0,0.35);
  color: #00ff00;
  border-radius: 3px;
}
@media (hover: hover) {
  #message .btnWrap a:hover {
    background-color: rgba(0,255,0,0.07);
    border-color: #00ff00;
    opacity: 1;
  }
}
#message .btnWrap a::after {
  content: " ↗";
}


@media screen and (max-width:820px) {
  .messageText p {
    line-height: 2.6;
    letter-spacing: 0;
    font-size: min(3vw, 12px);
  }
}

.company {
	display: flex;
	margin-top: min(12vw, 80px);
  background-color: #0f0f0f;
  border: 1px solid rgba(0,255,0,0.12);
  border-left: 2px solid rgba(0,255,0,0.3);
}
.company .companyInfo p {
  color: #888;
  font-size: min(3.2vw, 14px);
}
.company .companyLogo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 30%;
	padding: min(4vw, 40px);
}
.company .companyLogo .logoMark {
	width: 85px;
}
.company .companyLogo .logoTitle {
	width: 127px;
	margin: 4% 0 5%;
}
.company .companyInfo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
	padding: min(6vw, 40px);
	letter-spacing: 0.06em;
}
.company .companyInfo p:first-child {
	font-weight: 500;
	font-size: min(3.8vw, 18px);
	margin-bottom: 0.8em;
}

@media screen and (max-width:820px) {
	.company {
		flex-direction: column;
	}
	.company .companyLogo {
		width: 100%;
	}
	.company .companyLogo .logoMark {
		width: min(31.5vw, 43px);
	}
	.company .companyLogo .logoTitle {
		width: min(47vw, 64px);
		margin: 0 0 2vw;
	}
	.company .companyInfo {
    display: block;
    width: 100%;
    border-left: none;
    padding-top: 0;
	}
}

/* ////////////////////////////////////////////////////////////////////////////////

  Wallet Button (inside nav menu)

//////////////////////////////////////////////////////////////////////////////// */

.nav-wallet-wrap {
  padding: min(4vw, 20px) min(6vw, 60px);
}
.wallet-btn {
  display: block;
  width: 100%;
  padding: min(3vw, 14px) min(4vw, 20px);
  background: #000;
  border: 1px solid rgba(170,102,255,0.4);
  border-radius: 3px;
  cursor: pointer;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.4vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #aa66ff;
  text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.wallet-btn:hover { border-color: rgba(170,102,255,0.8); background: rgba(170,102,255,0.08); }
.wallet-btn:disabled { opacity: 0.6; cursor: wait; }
.wallet-btn.wallet-connected {
  border-color: rgba(0,255,0,0.4);
  color: #00ff00;
  background: rgba(0,255,0,0.05);
}
.wallet-btn.wallet-connected:hover { border-color: rgba(255,80,80,0.5); color: #ff5050; background: rgba(255,80,80,0.05); }

[data-mode="villa"] .wallet-btn {
  background: #f5f2ec;
  border-color: rgba(120,80,180,0.3);
  color: #7a50b4;
}
[data-mode="villa"] .wallet-btn:hover { border-color: rgba(120,80,180,0.6); background: rgba(120,80,180,0.05); }
[data-mode="villa"] .wallet-btn.wallet-connected {
  border-color: rgba(26,107,58,0.35);
  color: #1a6b3a;
  background: rgba(26,107,58,0.05);
}
[data-mode="villa"] .wallet-btn.wallet-connected:hover { border-color: rgba(180,60,60,0.4); color: #b44040; background: rgba(180,60,60,0.04); }

.peek-members-link {
  display: block;
  margin-top: 8px;
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.6vw, 11px);
  color: #888;
  letter-spacing: 0.02em;
}
.peek-members-link:hover { color: #aa66ff; opacity: 1; }

/* ////////////////////////////////////////////////////////////////////////////////

  Members Section

//////////////////////////////////////////////////////////////////////////////// */

#members {
  background-color: #0a0a0a;
  background-image:
    linear-gradient(rgba(170,102,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170,102,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
  padding: min(16vw, 100px) 0;
}
#members h2 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: #aa66ff;
  text-shadow: 0 0 14px rgba(170,102,255,0.5);
  letter-spacing: 0.14em;
}
.members-subtitle {
  text-align: center;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #666;
  margin-bottom: min(6vw, 32px);
  letter-spacing: 0.04em;
}
.members-wallet-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: min(8vw, 40px);
}
.members-badge {
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  background: rgba(170,102,255,0.15);
  border: 1px solid rgba(170,102,255,0.3);
  color: #aa66ff;
  text-transform: uppercase;
}
.members-addr {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 12px);
  color: #666;
}
.membersGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(90vw, 320px), 1fr));
  gap: min(4vw, 20px);
}
.members-prop-card {
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-top: 2px solid #aa66ff;
  border-radius: 3px;
  padding: min(5vw, 24px);
}
.members-prop-name {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.4vw, 14px);
  font-weight: 700;
  color: #aa66ff;
  letter-spacing: 0.04em;
  margin-bottom: min(3vw, 14px);
}
.members-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: #999;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  padding: 40px 0;
}

/* Members section headers */
.members-section-header {
  margin-top: min(10vw, 48px);
  margin-bottom: min(5vw, 24px);
  padding-bottom: min(3vw, 14px);
  border-bottom: 1px solid #1c1c1c;
}
.members-section-header:first-of-type {
  margin-top: 0;
}
.members-section-title {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(4vw, 18px);
  font-weight: 700;
  color: #00ff00;
  letter-spacing: 0.06em;
  margin-bottom: min(1.5vw, 6px);
}
.members-section-title.nah-title {
  color: #00ffff;
  text-shadow: 0 0 10px rgba(0,255,255,0.3);
}
.members-section-desc {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #999;
}
.members-nah-header {
  margin-top: min(14vw, 64px);
  border-bottom-color: rgba(0,255,255,0.2);
}

[data-mode="villa"] .members-section-header { border-bottom-color: #eee; }
[data-mode="villa"] .members-section-title { color: #1a6b3a; }
[data-mode="villa"] .members-section-title.nah-title { color: #7a50b4; text-shadow: none; }
[data-mode="villa"] .members-section-desc { color: #aaa; }
[data-mode="villa"] .members-nah-header { border-bottom-color: rgba(120,80,180,0.15); }

.nah-locked {
  color: #666 !important;
  border: 1px dashed #333;
  border-radius: 4px;
  padding: 40px 20px !important;
}
[data-mode="villa"] .nah-locked { border-color: #ddd; }

/* Members calendar color overrides */
#members .avail-day {
  background: rgba(170,102,255,0.08);
}
#members .avail-day.today {
  outline-color: #aa66ff;
  color: #aa66ff;
}
#members .avail-legend .leg-avail::before { background: rgba(170,102,255,0.15); }

/* Villa mode overrides for members */
[data-mode="villa"] #members {
  background-color: #f5f2ec;
  background-image: none;
}
[data-mode="villa"] #members h2 { color: #7a50b4; text-shadow: none; }
[data-mode="villa"] .members-subtitle { color: #aaa; }
[data-mode="villa"] .members-badge {
  background: rgba(120,80,180,0.08);
  border-color: rgba(120,80,180,0.25);
  color: #7a50b4;
}
[data-mode="villa"] .members-addr { color: #999; }
[data-mode="villa"] .members-prop-card {
  background: #fff;
  border-color: #eee;
  border-top-color: #7a50b4;
}
[data-mode="villa"] .members-prop-name { color: #7a50b4; }
[data-mode="villa"] #members .avail-day {
  background: rgba(120,80,180,0.06);
  color: #666;
}
[data-mode="villa"] #members .avail-day.booked {
  background: rgba(180,80,80,0.12);
  color: #999;
}
[data-mode="villa"] #members .avail-day.today {
  outline-color: #7a50b4;
  color: #7a50b4;
}
[data-mode="villa"] #members .avail-legend .leg-avail::before { background: rgba(120,80,180,0.1); }

/* ── Members Filter Bar ─────── */
.members-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: min(6vw, 28px);
  padding: 14px 18px;
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-radius: 3px;
}
.members-filter label {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  color: #888;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.members-filter select,
.members-filter input[type="checkbox"] {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  background: #111;
  color: #ccc;
  border: 1px solid #2a2a2a;
  padding: 6px 10px;
  border-radius: 2px;
  outline: none;
}
.members-filter select:focus {
  border-color: rgba(170,102,255,0.5);
}
.members-filter input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #aa66ff;
}

[data-mode="villa"] .members-filter {
  background: #fff;
  border-color: #eee;
}
[data-mode="villa"] .members-filter label { color: #888; }
[data-mode="villa"] .members-filter select {
  background: #f5f5f2;
  color: #333;
  border-color: #ddd;
}
[data-mode="villa"] .members-filter select:focus { border-color: rgba(120,80,180,0.4); }
[data-mode="villa"] .members-filter input[type="checkbox"] { accent-color: #7a50b4; }

/* ── Member Rich Card ─────── */
.member-card {
  background: #0f0f0f;
  border: 1px solid #1c1c1c;
  border-top: 2px solid #aa66ff;
  border-radius: 3px;
  padding: min(5vw, 24px);
  display: flex;
  flex-direction: column;
  gap: min(3vw, 14px);
}
.member-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.member-card-name {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.4vw, 14px);
  font-weight: 700;
  color: #aa66ff;
  letter-spacing: 0.04em;
}
.member-card-location {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.6vw, 11px);
  color: #666;
}
.card-type-badge {
  font-family: 'SF Mono', monospace;
  font-size: min(2.2vw, 9px);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}
.card-type-badge.badge-villa {
  background: rgba(170,102,255,0.12);
  border: 1px solid rgba(170,102,255,0.3);
  color: #aa66ff;
}
.card-type-badge.badge-club-house {
  background: rgba(0,255,255,0.08);
  border: 1px solid rgba(0,255,255,0.25);
  color: #00cccc;
}
.card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.btn-inquiry,
.btn-book {
  flex: 1;
  min-width: 120px;
  padding: min(2.4vw, 10px) min(3vw, 14px);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  letter-spacing: 0.04em;
  transition: opacity 0.2s ease;
}
.btn-inquiry {
  background: rgba(170,102,255,0.15);
  border: 1px solid rgba(170,102,255,0.35);
  color: #aa66ff;
}
.btn-inquiry:hover { background: rgba(170,102,255,0.25); }
.btn-book {
  background: rgba(0,200,100,0.15);
  border: 1px solid rgba(0,200,100,0.35);
  color: #00cc66;
}
.btn-book:hover { background: rgba(0,200,100,0.25); }

/* High season day cell */
.avail-day.day-high-season {
  background: rgba(255,170,0,0.12);
  color: #cc8800;
}
.avail-day.day-high-season.booked {
  background: rgba(255,60,60,0.15);
  color: #664444;
}

/* Villa mode member card overrides */
[data-mode="villa"] .member-card {
  background: #fff;
  border-color: #eee;
  border-top-color: #7a50b4;
}
[data-mode="villa"] .member-card-name { color: #7a50b4; }
[data-mode="villa"] .member-card-location { color: #999; }
[data-mode="villa"] .card-type-badge.badge-villa {
  background: rgba(120,80,180,0.06);
  border-color: rgba(120,80,180,0.2);
  color: #7a50b4;
}
[data-mode="villa"] .card-type-badge.badge-club-house {
  background: rgba(0,140,180,0.06);
  border-color: rgba(0,140,180,0.2);
  color: #007a8a;
}
[data-mode="villa"] .btn-inquiry {
  background: rgba(120,80,180,0.06);
  border-color: rgba(120,80,180,0.25);
  color: #7a50b4;
}
[data-mode="villa"] .btn-inquiry:hover { background: rgba(120,80,180,0.12); }
[data-mode="villa"] .btn-book {
  background: rgba(26,107,58,0.06);
  border-color: rgba(26,107,58,0.25);
  color: #1a6b3a;
}
[data-mode="villa"] .btn-book:hover { background: rgba(26,107,58,0.12); }
[data-mode="villa"] .avail-day.day-high-season {
  background: rgba(200,140,0,0.08);
  color: #b08000;
}

/* ── Inquiry Modal ─────── */
.inquiry-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inquiry-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
}
.inquiry-modal-content {
  position: relative;
  background: #0f0f0f;
  border: 1px solid rgba(170,102,255,0.3);
  border-top: 2px solid #aa66ff;
  border-radius: 4px;
  padding: min(8vw, 40px);
  max-width: 480px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.inquiry-modal-content h3 {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(4vw, 18px);
  font-weight: 700;
  color: #aa66ff;
  margin-bottom: min(4vw, 20px);
}
.inquiry-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: #666;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.inquiry-modal-close:hover { color: #fff; }
.inquiry-prop-name {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  color: #ccc;
  margin-bottom: min(4vw, 16px);
  padding-bottom: 8px;
  border-bottom: 1px solid #222;
}
#inquiryForm label {
  display: block;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.8vw, 12px);
  color: #888;
  margin-bottom: min(3vw, 14px);
}
#inquiryForm input,
#inquiryForm textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  background: #111;
  border: 1px solid #2a2a2a;
  color: #ccc;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3vw, 13px);
  border-radius: 2px;
  outline: none;
  transition: border-color 0.2s;
}
#inquiryForm input:focus,
#inquiryForm textarea:focus {
  border-color: rgba(170,102,255,0.5);
}
#inquiryForm textarea {
  resize: vertical;
}
.inquiry-submit {
  display: block;
  width: 100%;
  padding: 14px;
  background: #aa66ff;
  color: #fff;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(3.2vw, 14px);
  font-weight: 700;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: opacity 0.2s;
  margin-top: min(4vw, 16px);
}
.inquiry-submit:hover { opacity: 0.85; }
.inquiry-submit:disabled { opacity: 0.5; cursor: wait; }
.inquiry-status {
  font-family: 'SF Mono', monospace;
  font-size: min(2.8vw, 12px);
  margin-top: 10px;
  min-height: 1.4em;
  text-align: center;
}
.inquiry-status.ok { color: #00cc66; }
.inquiry-status.err { color: #ff5f56; }

/* Villa mode modal overrides */
[data-mode="villa"] .inquiry-modal-content {
  background: #fff;
  border-color: rgba(120,80,180,0.2);
  border-top-color: #7a50b4;
}
[data-mode="villa"] .inquiry-modal-content h3 { color: #7a50b4; }
[data-mode="villa"] .inquiry-modal-close { color: #bbb; }
[data-mode="villa"] .inquiry-modal-close:hover { color: #333; }
[data-mode="villa"] .inquiry-prop-name { color: #555; border-bottom-color: #eee; }
[data-mode="villa"] #inquiryForm label { color: #888; }
[data-mode="villa"] #inquiryForm input,
[data-mode="villa"] #inquiryForm textarea {
  background: #f5f5f2;
  border-color: #ddd;
  color: #333;
}
[data-mode="villa"] #inquiryForm input:focus,
[data-mode="villa"] #inquiryForm textarea:focus {
  border-color: rgba(120,80,180,0.4);
}
[data-mode="villa"] .inquiry-submit { background: #7a50b4; }

/* ── Avail legend high season ─────── */
.avail-legend .leg-high::before { background: rgba(255,170,0,0.2); }
[data-mode="villa"] .avail-legend .leg-high::before { background: rgba(200,140,0,0.15); }

/* ////////////////////////////////////////////////////////////////////////////////

	footer

//////////////////////////////////////////////////////////////////////////////// */

footer {
	position: relative;
	display: flex;
	justify-content: space-between;
	padding: min(6vw, 64px);
  background-color: #0a0a0a;
  border-top: 1px solid rgba(0,255,0,0.15);
	color: #555;
}
footer .snsList {
	display: flex;
	font-size: min(5.4vw, 24px);
	gap: min(6vw, 32px);
}
footer .copy {
	font-size: min(2.4vw, 10px);
	letter-spacing: 0.06em;
}

footer .pageTop {
	display: none;
	position: fixed;
	right: min(6vw, 64px);
	bottom: min(6vw, 64px);
}
footer .pageTop a {
	display: flex;
	align-items: center;
}
footer .pageTop p {
	font-family: sofia-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.2vw;
}
footer .pageTop.on p {
	color: #fff;
	transition: all .6s ease-out;
}
footer .pageTop span {
	position: relative;
	display: block;
	width: 2em;
	height: 2em;
	margin-left: 0.6em;
}
footer .pageTop span img {
	position: absolute;
	top: 0;
	left: 0;
	transition: all .6s ease-out;
}
footer .pageTop.on span img:nth-child(1) {
	display: none;
}
footer .pageTop:not(.on) span img:nth-child(2) {
	display: none;
}


@media screen and (min-width:821px) {
	footer .copy {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}
@media screen and (max-width:820px) {
	footer {
		flex-direction: column;
		align-items: center;
		gap: min(8vw, 40px);
	}

	footer .pageTop p {
		font-size: 3.2vw;
	}

}

/* ////////////////////////////////////////////////////////////////////////////////

  Property Tagline

//////////////////////////////////////////////////////////////////////////////// */

.propertyTagline {
  font-family: sofia-pro, sans-serif;
  font-size: min(2.6vw, 14px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.1em;
  margin-bottom: 1.4em;
  line-height: 1.5;
}

@media screen and (max-width:820px) {
  .propertyTagline { font-size: min(3.4vw, 13px); }
}

/* ////////////////////////////////////////////////////////////////////////////////

  Story — bridge tagline

//////////////////////////////////////////////////////////////////////////////// */

.story-bridge {
  font-size: min(4.4vw, 22px);
  font-weight: 700;
  text-align: center;
  color: rgba(255,255,255,0.9);
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin-bottom: min(8vw, 56px);
}

/* ////////////////////////////////////////////////////////////////////////////////

  Mode Toggle Button

//////////////////////////////////////////////////////////////////////////////// */

#modeToggle {
  position: fixed;
  top: min(3vw, 18px);
  left: min(3vw, 20px);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(10,10,10,0.85);
  border: 1px solid rgba(0,255,0,0.3);
  border-radius: 100px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s ease, background 0.3s ease;
}
#modeToggle:hover {
  border-color: rgba(0,255,0,0.7);
}
.mode-seg {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: min(2.4vw, 11px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #999;
  transition: color 0.3s ease;
}
.mode-divider {
  color: #333;
  font-size: 10px;
}

/* Code mode: Code seg lit */
[data-mode="code"] #modeLabelCode { color: #00ff00; }
[data-mode="code"] #modeToggle    { background: rgba(10,10,10,0.88); }

/* Villa mode: Villa seg lit, button becomes light */
[data-mode="villa"] #modeToggle {
  background: rgba(250,250,248,0.92);
  border-color: rgba(0,100,40,0.3);
}
[data-mode="villa"] #modeToggle:hover { border-color: rgba(0,100,40,0.7); }
[data-mode="villa"] .mode-seg     { color: #bbb; }
[data-mode="villa"] .mode-divider { color: #ccc; }
[data-mode="villa"] #modeLabelVilla { color: #1a6b3a; }

@media screen and (max-width:820px) {
  #modeToggle { top: min(5vw, 14px); left: min(4vw, 14px); padding: 6px 10px; }
}

/* ////////////////////////////////////////////////////////////////////////////////

  Villa Mode — dark sections go light

//////////////////////////////////////////////////////////////////////////////// */

/* Philosophy */
[data-mode="villa"] #philosophy {
  background-color: #f5f2ec;
  background-image: none;
  color: #333;
}
[data-mode="villa"] #philosophy h2 {
  color: #1a6b3a; text-shadow: none;
}
[data-mode="villa"] .philosophy-subtitle { color: #999; }
[data-mode="villa"] .terminal {
  background-color: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
[data-mode="villa"] .terminal-header { background-color: #eee; }
[data-mode="villa"] .terminal-title  { color: #aaa; }
[data-mode="villa"] .code-comment    { color: #aaa; }
[data-mode="villa"] .code-keyword    { color: #7a3fa0; }
[data-mode="villa"] .code-var        { color: #b06000; }
[data-mode="villa"] .code-key        { color: #1a6b9a; }
[data-mode="villa"] .code-string     { color: #2d6b30; }

/* Products */
[data-mode="villa"] #products {
  background-color: #fafaf8;
  background-image: none;
}
[data-mode="villa"] #products h2 { color: #1a6b3a; text-shadow: none; }
[data-mode="villa"] .products-subtitle { color: #aaa; font-family: inherit; }

[data-mode="villa"] .productCard {
  background: #fff;
  border-color: #eee;
}
[data-mode="villa"] .productCard-desc   { color: #666; }
[data-mode="villa"] .productCard-stats  { color: #bbb; }
[data-mode="villa"] .productCard-btn-secondary {
  color: #888; border-color: #e0e0e0;
}
@media (hover: hover) {
  [data-mode="villa"] .productCard-btn-secondary:hover {
    color: var(--c); border-color: var(--cb); background-color: var(--cs); opacity: 1;
  }
}

/* Join */
[data-mode="villa"] #join {
  background-color: #f5f2ec;
  background-image: none;
}
[data-mode="villa"] .join-terminal {
  background: #fff;
  border-color: rgba(26,107,58,0.2);
  border-top-color: #1a6b3a;
  box-shadow: 0 0 40px rgba(0,0,0,0.05);
}
[data-mode="villa"] .join-prompt  { color: #bbb; }
[data-mode="villa"] .join-caret   { color: #1a6b3a; }
[data-mode="villa"] .join-heading { color: #111; }
[data-mode="villa"] .join-sub     { color: #777; }
[data-mode="villa"] .join-plan    { border-color: #e8e8e8; }
[data-mode="villa"] .join-plan-rec { border-color: rgba(26,107,58,0.3); }
[data-mode="villa"] .join-plan-badge { background: #1a6b3a; }
[data-mode="villa"] .join-plan-name  { color: #aaa; }
[data-mode="villa"] .join-plan-price { color: #111; }
[data-mode="villa"] .join-plan-rec .join-plan-price { color: #1a6b3a; }
[data-mode="villa"] .join-cta-btn { background: #1a6b3a; }
[data-mode="villa"] .join-input {
  background: #f5f5f2; border-color: #ddd; color: #111;
}
[data-mode="villa"] .join-btn  { background: #1a6b3a; }
[data-mode="villa"] .join-copy { color: #aaa; border-color: #ddd; }
[data-mode="villa"] .join-copy:hover, [data-mode="villa"] .join-copy.copied { color: #1a6b3a; border-color: #1a6b3a; }
[data-mode="villa"] .join-command-gen { background: #f5f5f2; border-color: #e0e8e3; }
[data-mode="villa"] .join-cmd-pre { color: #1a6b3a; }
[data-mode="villa"] .join-what-happens { border-left-color: rgba(26,107,58,0.2); }
[data-mode="villa"] .join-what-arrow { color: #1a6b3a; }
[data-mode="villa"] .join-what-item  { color: #777; }
[data-mode="villa"] .join-fine       { color: #bbb; }

/* Story */
[data-mode="villa"] #story {
  background-image: url(../images/project_bg.jpg);
  background-color: #0a0a0a;
  background-blend-mode: normal;
  background-image: url(../images/project_bg.jpg);
}
[data-mode="villa"] #story h2 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
[data-mode="villa"] .storyText p { color: rgba(255,255,255,0.8); }
[data-mode="villa"] #story .btnWrap a {
  background: rgba(255,255,255,0.92); color: #333;
  border: none;
}
[data-mode="villa"] .story-bridge { color: rgba(255,255,255,0.85); }

/* Message */
[data-mode="villa"] #message {
  background-color: #f5f2ec;
  background-image: none;
  color: #333;
}
[data-mode="villa"] #message h2 { color: #1a6b3a; text-shadow: none; }
[data-mode="villa"] .messageText {
  border-color: rgba(26,107,58,0.15);
  border-left-color: #1a6b3a;
  background: rgba(26,107,58,0.02);
}
[data-mode="villa"] .messageText h3 { background-color: #f5f2ec; color: #333; }
[data-mode="villa"] .messageText p  { color: #666; }
[data-mode="villa"] .messageText .signature { color: #777; }
[data-mode="villa"] .messageText .signature strong { color: #111; }
[data-mode="villa"] #message .btnWrap a {
  background: transparent; border-color: rgba(26,107,58,0.35); color: #1a6b3a;
}
[data-mode="villa"] #message .btnWrap a::after { content: " ↗"; }
[data-mode="villa"] .company {
  background: #ede8df;
  border-color: rgba(26,107,58,0.1);
  border-left-color: rgba(26,107,58,0.25);
}
[data-mode="villa"] .company .companyInfo p { color: #777; }

/* Footer */
[data-mode="villa"] footer {
  background-color: #ede8df;
  border-top-color: rgba(26,107,58,0.1);
  color: #aaa;
}
[data-mode="villa"] footer .copy { color: #bbb; }
[data-mode="villa"] footer i.snsIcon { color: #555; }

/* ////////////////////////////////////////////////////////////////////////////////

  Scroll Log (git log style)

//////////////////////////////////////////////////////////////////////////////// */

#scrollLog {
  position: fixed;
  right: min(3vw, 24px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  text-align: right;
  user-select: none;
}
#scrollLog.visible { opacity: 1; }

.slog-item {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: #333;
  transition: color 0.3s ease;
  white-space: nowrap;
}
.slog-item.current { color: #00ff00; }

[data-mode="villa"] .slog-item        { color: #ccc; }
[data-mode="villa"] .slog-item.current { color: #1a6b3a; }

.slog-hash  { color: #333; font-size: 9px; }
.slog-label { }
.slog-dot   { width: 6px; height: 6px; border-radius: 50%; background: #2a2a2a; flex-shrink: 0; transition: background 0.3s ease; }
.slog-item.current .slog-dot   { background: #00ff00; box-shadow: 0 0 6px rgba(0,255,0,0.6); }
[data-mode="villa"] .slog-item.current .slog-dot { background: #1a6b3a; box-shadow: 0 0 6px rgba(26,107,58,0.4); }
.slog-line  { width: 1px; height: 14px; background: #222; margin-left: auto; margin-right: 2px; }
[data-mode="villa"] .slog-line { background: #ddd; }

@media screen and (max-width:820px) {
  #scrollLog { display: none; }
}

/* =====================================
   Chat Concierge
   ===================================== */
.property-chat {
  margin: 24px 0;
  border: 1px solid rgba(0,255,0,0.15);
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(0,255,0,0.05);
  border-bottom: 1px solid rgba(0,255,0,0.1);
}
.chat-title {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3.2vw, 13px);
  color: #ccc;
  font-weight: 700;
}
.chat-status {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(2.8vw, 11px);
  color: #00ff00;
  background: rgba(0,255,0,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0,255,0,0.2);
}
.chat-messages {
  max-height: 360px;
  min-height: 120px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: min(3.2vw, 14px);
  line-height: 1.6;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.chat-bubble.ai {
  align-self: flex-start;
  background: rgba(0,255,0,0.06);
  color: #ccc;
  border: 1px solid rgba(0,255,0,0.1);
  border-bottom-left-radius: 2px;
}
.chat-bubble.user {
  align-self: flex-end;
  background: rgba(0,255,0,0.12);
  color: #fff;
  border: 1px solid rgba(0,255,0,0.2);
  border-bottom-right-radius: 2px;
}
.chat-input-wrap {
  display: flex;
  border-top: 1px solid rgba(0,255,0,0.1);
  background: rgba(0,0,0,0.2);
}
.chat-input-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  color: #ccc;
  padding: 12px 16px;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3.2vw, 13px);
  outline: none;
}
.chat-input-wrap input::placeholder { color: #555; }
.chat-input-wrap button {
  border: none;
  background: rgba(0,255,0,0.1);
  color: #00ff00;
  padding: 12px 20px;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3.2vw, 13px);
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}
.chat-input-wrap button:hover { background: rgba(0,255,0,0.18); }
.chat-input-wrap button:disabled { opacity: 0.4; cursor: default; }

/* Typing indicator */
.chat-typing {
  align-self: flex-start;
  padding: 10px 18px;
  background: rgba(0,255,0,0.06);
  border: 1px solid rgba(0,255,0,0.1);
  border-radius: 12px;
  border-bottom-left-radius: 2px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.chat-typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: rgba(0,255,0,0.4);
  border-radius: 50%;
  animation: chatTyping 1.2s ease-in-out infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Booking confirmation card */
.chat-booking-card {
  align-self: flex-start;
  max-width: 90%;
  background: rgba(0,255,0,0.04);
  border: 1px solid rgba(0,255,0,0.2);
  border-left: 3px solid #00ff00;
  border-radius: 8px;
  padding: 14px 16px;
  font-family: 'SF Mono','Fira Code',monospace;
}
.chat-booking-card .booking-title {
  font-size: min(3vw, 12px);
  color: #00ff00;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
}
.chat-booking-card .booking-detail {
  font-size: min(3vw, 13px);
  color: #aaa;
  margin-bottom: 4px;
}
.chat-booking-card .booking-amount {
  font-size: min(3.5vw, 16px);
  color: #fff;
  font-weight: 700;
  margin: 8px 0;
}
.chat-checkout-btn {
  display: inline-block;
  background: #16a34a;
  color: #fff !important;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: min(3.2vw, 13px);
  font-weight: 700;
  padding: 10px 24px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 8px;
  text-decoration: none;
}
.chat-checkout-btn:hover { background: #15803d; }

/* Floating chat button */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,255,0,0.15);
  border: 1px solid rgba(0,255,0,0.3);
  color: #00ff00;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-fab:hover {
  background: rgba(0,255,0,0.25);
  transform: scale(1.08);
  box-shadow: 0 4px 24px rgba(0,255,0,0.15);
}

/* Chat modal */
.chat-modal {
  position: fixed;
  bottom: 90px;
  right: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 520px;
  z-index: 1001;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  animation: chatModalIn 0.25s ease;
}
@keyframes chatModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-modal-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 520px;
  background: #0a0a0a;
  border: 1px solid rgba(0,255,0,0.15);
  border-radius: 10px;
  overflow: hidden;
}
.chat-modal-inner .chat-messages {
  flex: 1;
  max-height: 380px;
}
.chat-modal-close {
  background: none;
  border: none;
  color: #888;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.chat-modal-close:hover { color: #ccc; }

/* Villa mode overrides */
[data-mode="villa"] .property-chat {
  border-color: rgba(26,107,58,0.12);
  background: rgba(255,255,255,0.5);
}
[data-mode="villa"] .chat-header {
  background: rgba(26,107,58,0.04);
  border-bottom-color: rgba(26,107,58,0.1);
}
[data-mode="villa"] .chat-title { color: #333; }
[data-mode="villa"] .chat-status {
  color: #1a6b3a;
  background: rgba(26,107,58,0.06);
  border-color: rgba(26,107,58,0.2);
}
[data-mode="villa"] .chat-bubble.ai {
  background: rgba(26,107,58,0.04);
  color: #444;
  border-color: rgba(26,107,58,0.1);
}
[data-mode="villa"] .chat-bubble.user {
  background: rgba(26,107,58,0.1);
  color: #222;
  border-color: rgba(26,107,58,0.2);
}
[data-mode="villa"] .chat-input-wrap {
  border-top-color: rgba(26,107,58,0.1);
  background: rgba(255,255,255,0.3);
}
[data-mode="villa"] .chat-input-wrap input { color: #333; }
[data-mode="villa"] .chat-input-wrap input::placeholder { color: #aaa; }
[data-mode="villa"] .chat-input-wrap button {
  background: rgba(26,107,58,0.08);
  color: #1a6b3a;
}
[data-mode="villa"] .chat-input-wrap button:hover { background: rgba(26,107,58,0.15); }
[data-mode="villa"] .chat-typing span { background: rgba(26,107,58,0.4); }
[data-mode="villa"] .chat-booking-card {
  background: rgba(26,107,58,0.03);
  border-color: rgba(26,107,58,0.15);
  border-left-color: #1a6b3a;
}
[data-mode="villa"] .chat-booking-card .booking-title { color: #1a6b3a; }
[data-mode="villa"] .chat-booking-card .booking-detail { color: #666; }
[data-mode="villa"] .chat-booking-card .booking-amount { color: #222; }
[data-mode="villa"] .chat-fab {
  background: rgba(26,107,58,0.12);
  border-color: rgba(26,107,58,0.25);
  color: #1a6b3a;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
[data-mode="villa"] .chat-fab:hover {
  background: rgba(26,107,58,0.2);
  box-shadow: 0 4px 24px rgba(26,107,58,0.15);
}
[data-mode="villa"] .chat-modal-inner {
  background: #fff;
  border-color: rgba(26,107,58,0.12);
}
[data-mode="villa"] .chat-modal-close { color: #aaa; }
[data-mode="villa"] .chat-modal-close:hover { color: #333; }

/* ---- Availability Summary ---- */
#availability-summary { padding: 80px 0 40px; }
#availability-summary h2 { text-align: center; }
.avs-subtitle {
  text-align: center;
  color: #999;
  font-size: 12px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  margin-bottom: 32px;
}
.avs-loading {
  color: #555;
  text-align: center;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  font-size: 13px;
  padding: 40px 0;
}
.avs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}
.avs-card {
  background: #0f0f0f;
  border: 1px solid #1a1a1a;
  border-left: 3px solid rgba(0,255,0,0.3);
  padding: 20px;
  transition: border-color 0.2s, background 0.2s;
}
.avs-card:hover {
  border-left-color: #00ff00;
  background: #111;
}
.avs-card-name {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  margin-bottom: 4px;
}
.avs-card-location {
  color: #666;
  font-size: 11px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  margin-bottom: 12px;
}
.avs-stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.avs-stat {
  flex: 1;
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  padding: 10px;
  text-align: center;
}
.avs-stat-value {
  display: block;
  color: #00ff00;
  font-size: 20px;
  font-weight: 700;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
}
.avs-stat-label {
  display: block;
  color: #666;
  font-size: 10px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  margin-top: 2px;
}
.avs-windows {
  margin-top: 10px;
}
.avs-window-title {
  color: #555;
  font-size: 10px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.avs-window {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #0a0a0a;
  border-left: 2px solid #00ff00;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
}
.avs-window.best {
  border-left-color: #00ffff;
  background: rgba(0,255,255,0.03);
}
.avs-window-dates {
  color: #ccc;
  font-size: 12px;
}
.avs-window-nights {
  color: #00ff00;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.avs-window.best .avs-window-nights { color: #00ffff; }
.avs-card-cta {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 8px;
  color: #00ff00;
  border: 1px solid rgba(0,255,0,0.2);
  font-size: 12px;
  font-family: 'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.avs-card-cta:hover {
  background: rgba(0,255,0,0.05);
  border-color: #00ff00;
}

/* Villa mode overrides */
[data-mode="villa"] #availability-summary { background: #f9f8f4; }
[data-mode="villa"] .avs-subtitle { color: #888; }
[data-mode="villa"] .avs-loading { color: #aaa; }
[data-mode="villa"] .avs-card {
  background: #fff;
  border-color: #e8e5dd;
  border-left-color: rgba(26,107,58,0.3);
}
[data-mode="villa"] .avs-card:hover {
  border-left-color: #1a6b3a;
  background: #fefefe;
}
[data-mode="villa"] .avs-card-name { color: #222; }
[data-mode="villa"] .avs-card-location { color: #999; }
[data-mode="villa"] .avs-stat {
  background: #f5f3ee;
  border-color: #e8e5dd;
}
[data-mode="villa"] .avs-stat-value { color: #1a6b3a; }
[data-mode="villa"] .avs-stat-label { color: #999; }
[data-mode="villa"] .avs-window-title { color: #aaa; }
[data-mode="villa"] .avs-window {
  background: #f5f3ee;
  border-left-color: #1a6b3a;
}
[data-mode="villa"] .avs-window.best {
  border-left-color: #0a8f6a;
  background: rgba(10,143,106,0.04);
}
[data-mode="villa"] .avs-window-dates { color: #444; }
[data-mode="villa"] .avs-window-nights { color: #1a6b3a; }
[data-mode="villa"] .avs-window.best .avs-window-nights { color: #0a8f6a; }
[data-mode="villa"] .avs-card-cta {
  color: #1a6b3a;
  border-color: rgba(26,107,58,0.2);
}
[data-mode="villa"] .avs-card-cta:hover {
  background: rgba(26,107,58,0.05);
  border-color: #1a6b3a;
}

@media (max-width: 640px) {
  .avs-grid { grid-template-columns: 1fr; }
}