/* GLOBAL */
body, html {
	margin: 0;
	padding: 0;
	font-family: 'Inter', sans-serif;
	background: linear-gradient(to bottom, #0f0f0f, #1a1a1a);
	color: #eaeaea;
}

#fp-watermark {
	display: none !important;
}

/* NAVBAR (BIGGER + CLEAN) */
.gnb {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 90px;
	padding: 0 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(10,10,10,0.85);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255,255,255,0.08);
	z-index: 999;
}

/* Logo */
.gnb .logo {
	color: white;
	font-weight: 500;
	text-decoration: none;
	font-size: 22px;
	letter-spacing: 2px;
}

/* Center nav */
.gnb nav {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

/* Nav list */
.gnb nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 35px;
	align-items: center;
}

/* Nav links */
.gnb nav ul li a {
	color: #ccc;
	text-decoration: none;
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	position: relative;
	padding: 6px 0;
	transition: 0.3s;
}

/* Accent color */
:root {
	--accent: #c6a96b;
}

.gnb nav ul li a:hover {
	color: white;
}

.gnb nav ul li a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0%;
	height: 1px;
	background: #c6a96b;
	transition: 0.3s;
}

.gnb nav ul li a:hover::after {
	width: 100%;
}

/* SECTIONS */
.section {
	position: relative;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	color: white;
	padding: 0 20px;
	overflow: hidden;
}

/* BACKGROUND LAYER (for zoom effect) */
.section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1);
	transition: transform 1.5s ease;
	z-index: 0;
}

/* DARK OVERLAY */
.section::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
	z-index: 1;
}

/* KEEP TEXT ABOVE */
.section .text,
.section h1,
.section h2,
.section p,
.section a {
	position: relative;
	z-index: 2;
}

.section.active::before {
	transform: scale(1.08);
}

/* BACKGROUNDS */

.idx_story01 {
	background-image: url("../images/SPW60.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.idx_story02 {
	background-image: url("../images/VM909.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.idx_story03 {
	background-image: url("../images/NS823.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story01 {
	background-image: url("../images/Image_20250105155350.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story01 .text {
	max-width: 600px;
	margin-left: 80px; /* adjust this to match your screenshot */
	text-align: left;
}

.story02 {
	background-image: url("../images/SPW70.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story03 {
	background-image: url("../images/20250807_131709.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story04 {
	background-image: url("../images/LW105.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story05 {
	background-image: url("../images/LW122_NEW.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story06 {
	background-image: url("../images/LW122_NEW.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.story07 {
	background-image: url("../images/LW120.jpeg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* TEXT */
h1 {
	font-size: 64px;
	font-family: 'Playfair Display', serif;
	letter-spacing: 2px;
}

h2 {
	font-size: 42px;
	font-family: 'Playfair Display', serif;
}

p {
	font-size: 18px;
	max-width: 600px;
	color: #bbb;
}

/* FOOTER */
.footer {
	margin-top: auto;
	width: 100%;
	padding: 25px 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(10,10,10,0.9);
	border-top: 1px solid rgba(255,255,255,0.08);
	backdrop-filter: blur(10px);
}

.footer .logo {
	color: white;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 1px;
	position: relative;
	left: -70px;
}

/* COMMON SECTIONS */
.gallery-common-section,
.simulation-common-section,
.product-common-section,
.help-common-section {
	padding: 100px 20px;
	background: #0f0f0f;
}

/* SECTION HEADERS */
.gallery-section__header,
.simulation-section__header,
.product-section__header,
.help-section__header {
	text-align: center;
	margin-bottom: 50px;
	border-radius: 6px;
	background: transparent;
	padding: 10px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	width: 500px;
	margin: 0 auto 50px auto;
}

.gallery-section__header h2,
.simulation-section__header h2,
.product-section__header h2,
.help-section__header h2 {
	font-size: 2.2rem;
	color: white;
}

/* GRID */
.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	gap: 25px;
	max-width: 1600px;
	margin: 0 auto;
}

/* ITEMS */
.gallery__item,
.simulation__item,
.product__item,
.help__item {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* IMAGES */
.gallery__item img,
.simulation__item img,
.product__item img,
.help__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery__item:hover img,
.simulation__item:hover img,
.product__item:hover img,
.help__item:hover img {
	transform: scale(1.05);
}

/* CAPTION */
.gallery__item figcaption,
.simulation__item figcaption,
.product__item figcaption,
.help__item figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
	color: white;
	padding: 20px;
	opacity: 0;
	transition: 0.3s;
	font-size: 14px;
}

.gallery__item:hover figcaption,
.simulation__item:hover figcaption,
.product__item:hover figcaption,
.help__item:hover figcaption {
	opacity: 1;
}

/* TABS */
.tabs {
	display: flex;
	justify-content: center;
	margin: 30px 0;
}

.tab-btn {
	padding: 12px 25px;
	border: 1px solid rgba(255,255,255,0.2);
	cursor: pointer;
	background: transparent;
	color: white;
	margin: 0 5px;
	transition: 0.3s;
}

.tab-btn.active,
.tab-btn:hover {
	background: #c6a96b;
	color: black;
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

/* TECH DATA */
.tech-data {
	width: 90%;
	margin: 80px auto;
	font-size: 20px;
	color: #ccc;
}

.tech-list {
	border-top: 1px solid rgba(255,255,255,0.1);
}

.tech-row {
	display: grid;
	grid-template-columns: 50px 150px 1fr 40px;
	align-items: center;
	padding: 15px 10px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
	transition: 0.2s;
}

.tech-row:hover {
	background: rgba(255,255,255,0.03);
}

.col-title {
	color: white;
}

.col-download {
	color: #aaa;
}

.col-download:hover {
	color: #c6a96b;
}

/* Search Bar */
.search-wrapper {
	display: flex;
	justify-content: center; /* center horizontally */
	align-items: center;
	width: 100%;
	/* FUTURE CONTROL */
	transform: translateX(0px); /* change this later to move left/right */
	margin-top: 60px; /* vertical spacing */
}

.autocomplete-container {
	position: relative;
	width: 700px; /* slightly tighter = more premium feel */
}

.input-group {
	display: flex;
	gap: 10px;
}

#autocomplete-input {
	flex: 1;
	padding: 14px 16px;
	border: 1px solid #ddd;
	border-radius: 8px;
	font-size: 15px;
	background: #fafafa;
	transition: all 0.25s ease;
}

#autocomplete-input:focus {
	outline: none;
	border-color: #999;
	background: #fff;
	box-shadow: 0 0 0 2px rgba(0,0,0,0.05);
}

.input-group button {
	padding: 0 22px;
	border: none;
	border-radius: 8px;
	background: #c6a96b; /* luxury = dark, minimal */
	color: white;
	font-weight: 500;
	letter-spacing: 0.5px;
	transition: all 0.25s ease;
}

.input-group button:hover {
	background: #333;
}

.autocomplete-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	background: white;
	border-radius: 10px;
	border: 1px solid #eee;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	overflow: hidden;
	max-height: 280px;
	overflow-y: auto;
	z-index: 1000;
}

/* ITEMS */
.autocomplete-suggestion {
	padding: 14px 16px;
	font-size: 14px;
	color: #333;
	transition: background 0.2s ease;
}

.autocomplete-suggestion:hover {
	background: #f5f5f5;
}

.autocomplete-suggestion.highlight {
	background: #111;
	color: white;
}