:root {
				--primary-pink: #ffa546;
				--primary-pink-dark: #ed7327;
				--primary-pink-light: #ff8553;
				--primary-purple: #fd8675;
				--primary-purple-dark: #f74d1d;
				--primary-purple-light: #ffa493;
				--neon-pink: #ffa546;
				--neon-blue: #00bfff;
				--neon-purple: #ba01ff;
				--neon-green: #8bdf3b;
				--neon-teal: #01ffc3;
				--accent-coral: #ff6b6b;
				--accent-yellow: #ffd166;
				--accent-cyan: #06d6a0;
				--gradient-neon: linear-gradient(45deg, #e1aa81, #ff8339);
				--gradient-fire: linear-gradient(45deg, #e1aa81, #ff8339);
				--gradient-candy: linear-gradient(to right, #e1aa81, #ff8339);
				--gradient-sunset: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4);
				--profile-bg: linear-gradient(135deg, #44290f, #080401);
				--profile-bg-lighter: linear-gradient(135deg, #342a3d, #2d1a3e);
				--white: #ffffff;
				--text-dark: #343a40;
				--text-light: #f8f9fa;
				--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
				--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.1);
				--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
				--shadow-neon: 0 0 10px rgba(253, 108, 36, 0.7);
				--shadow-pink: 0 0 15px rgba(255, 162, 99, 0.8);
				--radius-sm: 8px;
				--radius-md: 12px;
				--radius-lg: 20px;
				--radius-full: 10px;
			}

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

			body {
				font-family: 'Noto Sans KR', sans-serif;
				color: var(--text-dark);
				background-color: #141311;
				overflow-x: hidden;
			}

			.container {
				width: 100%;
				margin: 0 auto;
				padding: 0;
				overflow: hidden;
			}

			@media (min-width: 768px) {
				.container {
					width: 80%;
				}
			}

			/* Redesigned Hero Section */
			.hero {
				position: relative;
				height: 70vh;
				/* Reduced height */
				min-height: 500px;
				max-height: 600px;
				width: 100%;
				overflow: hidden;
				background: linear-gradient(to bottom right, #290b0b, #251406);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 1rem;
			}

			.hero-background {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.hero-backdrop {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image:
					url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
				z-index: 1;
			}

			.circle-glow {
				position: absolute;
				border-radius: 50%;
				filter: blur(40px);
				opacity: 0.4;
				z-index: 1;
			}

			.circle-glow-1 {
				width: 250px;
				height: 250px;
				background-color: var(--primary-pink);
				top: -50px;
				left: -100px;
			}

			.circle-glow-2 {
				width: 300px;
				height: 300px;
				background-color: var(--primary-purple);
				bottom: -100px;
				right: -150px;
			}

			.circle-glow-3 {
				width: 150px;
				height: 150px;
				background-color: var(--neon-blue);
				top: 70%;
				left: 30%;
			}

			.hero-content-wrapper {
				position: relative;
				display: flex;
				flex-direction: column;
				width: 100%;
				max-width: 1200px;
				height: 100%;
				z-index: 10;
			}

			.hero-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
				width: 100%;
				z-index: 5;
				padding: 0 1rem;
				margin-top: 1rem;
			}

			.hero-title {
				font-size: 2.3rem;
				font-weight: 800;
				margin-bottom: 0.5rem;
				line-height: 1.2;
				background: var(--gradient-neon);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				filter: drop-shadow(0 0 8px rgba(255, 149, 88, 0.6));
				transform: translateY(20px);
				opacity: 0;
			}

			.hero-subtitle {
				font-size: 1rem;
				color: var(--white);
				opacity: 0;
				line-height: 1.4;
				max-width: 600px;
				margin: 0 auto 1rem;
				text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
			}

			.cta-button {
				padding: 0.8rem 2rem;
				border-radius: var(--radius-full);
				font-weight: 700;
				font-size: 1rem;
				color: var(--white);
				background: var(--gradient-candy);
				border: none;
				cursor: pointer;
				box-shadow: 0 0 15px rgba(255, 175, 84, 0.6);
				overflow: hidden;
				position: relative;
				z-index: 1;
				transition: all 0.3s ease;
				opacity: 0;
				text-decoration: none;
				transform: translateY(20px);
			}

			.cta-button::before {
				content: '';
				position: absolute;
				top: 0;
				left: -100%;
				width: 100%;
				height: 100%;
				background: linear-gradient(90deg, transparent, rgba(255, 137, 159, 0.2), transparent);
				transition: 0.5s;
				z-index: -1;
			}

			.cta-button:hover {
				box-shadow: 0 0 25px rgba(255, 186, 73, 0.8);
				transform: translateY(-3px);
			}

			.cta-button:hover::before {
				left: 100%;
			}

			/* Map Style Profile Display */
			.map-profiles-container {
				position: relative;
				width: 100%;
				height: 300px;
				margin-top: 1rem;
				z-index: 5;
			}

			.map-background {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(48, 27, 0, 0.5);
				border-radius: var(--radius-md);
				overflow: hidden;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.map-grid {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image:
					linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
					linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
				background-size: 40px 40px;
				opacity: 0.7;
			}

			.map-location-dot {
				position: absolute;
				width: 6px;
				height: 6px;
				background-color: rgba(255, 255, 255, 0.4);
				border-radius: 50%;
				transform: scale(0);
			}

			.location-pulse {
				position: absolute;
				top: 50%;
				left: 50%;
				width: 30px;
				height: 30px;
				background-color: rgba(255, 186, 73, 0.3);
				border-radius: 50%;
				transform: translate(-50%, -50%) scale(0);
			}

			.user-location {
				position: absolute;
				width: 20px;
				height: 20px;
				background: var(--gradient-candy);
				border-radius: 50%;
				border: 2px solid white;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				box-shadow: 0 0 10px rgba(255, 186, 73, 0.7);
				z-index: 10;
			}

			.user-location::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				width: 40px;
				height: 40px;
				background-color: rgba(255, 186, 73, 0.3);
				border-radius: 50%;
				transform: translate(-50%, -50%);
				animation: pulse-user 2s infinite;
			}

			@keyframes pulse-user {
				0% {
					transform: translate(-50%, -50%) scale(0.8);
					opacity: 0.8;
				}

				70% {
					transform: translate(-50%, -50%) scale(2);
					opacity: 0;
				}

				100% {
					transform: translate(-50%, -50%) scale(0.8);
					opacity: 0;
				}
			}

			.map-profile {
				position: absolute;
				transform: translate(-50%, -50%) scale(0);
				z-index: 5;
				cursor: pointer;
				transition: all 0.3s ease;
			}

			.map-profile:hover {
				z-index: 10;
			}

			.map-profile-image {
				width: 44px;
				height: 44px;
				border-radius: 50%;
				object-fit: cover;
				border: 2px solid var(--white);
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
				transition: all 0.3s ease;
			}

			.map-profile:hover .map-profile-image {
				transform: scale(1.2);
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4), 0 0 10px var(--primary-pink);
			}

			.map-online-indicator {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 12px;
				height: 12px;
				background-color: var(--neon-green);
				border-radius: 50%;
				border: 2px solid white;
				box-shadow: 0 0 5px rgba(57, 255, 20, 0.7);
				animation: pulse 1.5s infinite;
			}

			.map-profile-info {
				position: absolute;
				top: -40px;
				left: 50%;
				transform: translateX(-50%) translateY(10px);
				background-color: rgba(0, 0, 0, 0.8);
				color: white;
				padding: 3px 8px;
				border-radius: var(--radius-sm);
				font-size: 0.7rem;
				white-space: nowrap;
				opacity: 0;
				transition: all 0.3s ease;
				pointer-events: none;
			}

			.map-profile:hover .map-profile-info {
				opacity: 1;
				transform: translateX(-50%) translateY(0);
			}

			.map-distance {
				position: absolute;
				bottom: -25px;
				left: 50%;
				transform: translateX(-50%);
				background-color: rgba(253, 99, 87, 0.9);
				color: white;
				padding: 2px 6px;
				border-radius: var(--radius-full);
				font-size: 0.6rem;
				white-space: nowrap;
				pointer-events: none;
			}

			/* Decorative Elements */
			.decorative-shape {
				position: absolute;
				z-index: 2;
				opacity: 0.6;
			}

			.dec-circle {
				border-radius: 50%;
				border: 1px solid rgba(255, 255, 255, 0.2);
			}

			.dec-square {
				border: 1px solid rgba(255, 255, 255, 0.2);
				transform: rotate(45deg);
			}

			.dec-icon {
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(255, 255, 255, 0.7);
				font-size: 1rem;
			}

			.pulse-light {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background-color: var(--neon-pink);
				position: absolute;
				box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
				opacity: 0;
			}

			.floating-badge {
				position: absolute;
				padding: 5px 10px;
				border-radius: var(--radius-full);
				font-size: 0.7rem;
				font-weight: 600;
				color: white;
				background: rgba(255, 186, 73, 0.9);
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
				z-index: 3;
				opacity: 0;
				white-space: nowrap;
			}

			/* Social Proof Notifications */
			.notification-container {
				position: fixed;
				bottom: 20px;
				left: 20px;
				z-index: 9999;
				max-width: 80%;
			}

			.notification {
				background: linear-gradient(135deg, rgba(253, 122, 103, 0.9), rgba(255, 186, 73, 0.95));
				border-radius: var(--radius-md);
				padding: 12px 16px;
				color: white;
				margin-bottom: 10px;
				font-size: 0.9rem;
				font-weight: 500;
				box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
				display: flex;
				align-items: center;
				gap: 10px;
				transform: translateX(-120%);
				opacity: 0;
				line-height: 1.4;
				border: 1px solid rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(5px);
			}

			.notification i {
				font-size: 1.2rem;
				color: #ffda79;
			}

			/* Animation Helpers */
			@keyframes pulse {
				0% {
					box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.7);
				}

				70% {
					box-shadow: 0 0 0 10px rgba(57, 255, 20, 0);
				}

				100% {
					box-shadow: 0 0 0 0 rgba(57, 255, 20, 0);
				}
			}

			@keyframes neonPulse {
				0% {
					box-shadow: 0 0 5px rgba(255, 137, 63, 0.5), 0 0 10px rgba(255, 137, 63, 0.3);
				}

				50% {
					box-shadow: 0 0 20px rgba(255, 137, 63, 0.8), 0 0 30px rgba(255, 137, 63, 0.5);
				}

				100% {
					box-shadow: 0 0 5px rgba(255, 137, 63, 0.5), 0 0 10px rgba(255, 137, 63, 0.3);
				}
			}

			@keyframes bounce {

				0%,
				100% {
					transform: translateY(0);
				}

				50% {
					transform: translateY(-5px);
				}
			}

			/* Profiles Section */
			.profiles-section {
				padding: 2rem 1rem;
				background-color: #191814;
			}

			.profiles-section-title {
				color: white;
				font-size: 1.8rem;
				margin-bottom: 2rem;
				text-align: center;
				text-shadow: 0 0 10px rgba(221, 149, 90, 0.5);
			}

			.profiles-list {
				display: flex;
				flex-direction: column;
				gap: 1.5rem;
			}

			.profile-item {
				display: flex;
				flex-direction: column;
				background: var(--profile-bg);
				border-radius: var(--radius-md);
				overflow: hidden;
				box-shadow: var(--shadow-lg);
				transition: all 0.3s ease;
				opacity: 0;
				transform: translateY(20px);
				border: 1px solid rgba(221, 149, 90, 0.2);
			}

			.profile-item:hover {
				transform: translateY(-5px);
				box-shadow: var(--shadow-lg), var(--shadow-pink);
				border: 1px solid rgba(221, 149, 90, 0.4);
			}

			.profile-image-side {
				width: 100%;
				position: relative;
			}

			.profile-main-image {
				width: 100%;
				height: 300px;
				object-fit: cover;
			}

			.profile-badge {
				position: absolute;
				top: 15px;
				right: 15px;
				background-color: var(--primary-pink);
				color: white;
				padding: 5px 10px;
				border-radius: var(--radius-full);
				font-size: 0.8rem;
				font-weight: 500;
				box-shadow: var(--shadow-sm);
				z-index: 2;
			}

			.profile-online {
				position: absolute;
				bottom: 15px;
				left: 15px;
				background-color: rgba(0, 0, 0, 0.7);
				color: var(--neon-green);
				padding: 8px 12px;
				border-radius: var(--radius-full);
				font-size: 0.9rem;
				font-weight: 600;
				z-index: 2;
				display: flex;
				align-items: center;
				gap: 6px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
			}

			.online-dot {
				width: 8px;
				height: 8px;
				background-color: var(--neon-green);
				border-radius: 50%;
				display: inline-block;
				animation: pulse 1.5s infinite;
			}

			.profile-info-side {
				width: 100%;
				padding: 1.2rem;
				display: flex;
				flex-direction: column;
				position: relative;
				color: var(--text-light);
			}

			.profile-details-scroll {
				width: 100%;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
				margin-bottom: 0.8rem;
				-ms-overflow-style: none;
				/* IE and Edge */
				scrollbar-width: none;
				/* Firefox */
			}

			.profile-details-scroll::-webkit-scrollbar {
				display: none;
			}

			.profile-details {
				display: flex;
				gap: 0.5rem;
				min-width: max-content;
			}

			.profile-detail {
				display: flex;
				align-items: center;
				gap: 3px;
				font-size: 0.85rem;
				color: var(--text-light);
				background-color: rgba(255, 255, 255, 0.1);
				padding: 4px 8px;
				border-radius: var(--radius-full);
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
				white-space: nowrap;
				backdrop-filter: blur(5px);
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.profile-detail i {
				color: var(--primary-pink-light);
				font-size: 0.9rem;
			}

			.profile-views {
				position: relative;
				font-size: 0.9rem;
				font-weight: 600;
				margin: 0.8rem 0;
				padding: 0.7rem 0.8rem;
				border-radius: var(--radius-md);
				background: rgba(255, 255, 255, 0.1);
				color: var(--text-light);
				display: flex;
				align-items: center;
				gap: 8px;
				box-shadow: var(--shadow-sm);
				overflow: hidden;
				border: 1px solid rgba(255, 255, 255, 0.1);
			}

			.profile-views::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0.05) 75%, transparent 75%, transparent);
				background-size: 5px 5px;
				z-index: 1;
			}

			.profile-views i {
				color: var(--primary-pink);
				font-size: 1.1rem;
				position: relative;
				z-index: 2;
			}

			.view-count {
				position: relative;
				z-index: 2;
				color: var(--primary-pink-light);
				font-weight: 700;
			}

			.profile-gallery {
				display: flex;
				gap: 6px;
				margin: 0.8rem 0;
			}

			.gallery-thumb {
				position: relative;
				width: 90px;
				height: 90px;
				border-radius: var(--radius-sm);
				overflow: hidden;
				cursor: pointer;
				box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
				transition: all 0.3s ease;
			}

			.gallery-thumb img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				filter: blur(2px);
				transition: all 0.3s ease;
			}

			.gallery-thumb::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.3);
				z-index: 1;
			}

			/* Enhanced Play Button */
			.play-button {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 2;
				cursor: pointer;
				transition: all 0.3s ease;
				overflow: hidden;
				box-shadow: 0 0 10px rgba(255, 137, 63, 0.5);
				background: linear-gradient(135deg, #ff913b, #ffd98a);
				animation: neonPulse 2s infinite;
			}

			.play-button::before {
				content: '';
				position: absolute;
				width: 140%;
				height: 140%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
				top: -20%;
				left: -20%;
				opacity: 0;
				transition: opacity 0.3s ease;
			}

			.play-button i {
				color: white;
				font-size: 1rem;
				position: relative;
				z-index: 2;
				text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
				transform: translateX(1px);
			}

			.play-button::after {
				content: "Watch Video";
				position: absolute;
				bottom: -35px;
				left: 50%;
				transform: translateX(-50%);
				background: rgba(0, 0, 0, 0.7);
				color: white;
				padding: 3px 8px;
				border-radius: var(--radius-full);
				font-size: 0.7rem;
				white-space: nowrap;
				opacity: 0;
				transition: all 0.3s ease;
			}

			.gallery-thumb:hover img {
				filter: blur(1px) brightness(1.1);
				transform: scale(1.05);
			}

			.gallery-thumb:hover .play-button {
				transform: translate(-50%, -50%) scale(1.1);
				box-shadow: 0 0 20px rgba(255, 137, 63, 0.8), 0 0 30px rgba(255, 137, 63, 0.4);
				background: linear-gradient(135deg, #ff33cc, #ff3377);
			}

			.gallery-thumb:hover .play-button::before {
				opacity: 0.3;
				animation: rotateLight 1.5s linear infinite;
			}

			.gallery-thumb:hover .play-button::after {
				opacity: 1;
				bottom: -25px;
			}

			@keyframes rotateLight {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			.profile-buttons {
				display: flex;
				gap: 8px;
				margin-top: 0.8rem;
			}

			.btn {
				display: inline-block;
				background: var(--gradient-pink-purple);
				color: white;
				padding: 0.8rem 1rem;
				border-radius: 50px;
				font-weight: 600;
				text-align: center;
				border: none;
				cursor: pointer;
				transition: all 0.3s ease;
				box-shadow: var(--shadow-sm);
				text-decoration: none;
				position: relative;
				overflow: hidden;
				font-size: 0.85rem;
				flex: 1;
			}

			.btn::after {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background-color: rgba(255, 255, 255, 0.1);
				transform: rotate(45deg);
				transition: all 0.5s ease;
				opacity: 0;
			}

			.btn:hover {
				transform: translateY(-3px);
				box-shadow: var(--shadow-md), var(--shadow-glow);
			}

			.btn:hover::after {
				opacity: 1;
				transform: rotate(45deg) translateX(100%);
			}

			.profile-btn-secondary {
				background: linear-gradient(135deg, var(--primary-purple-light), var(--primary-purple));
			}

			/* CTA Section */
			.cta-section {
				background: var(--gradient-candy);
				padding: 2.5rem 1.5rem;
				text-align: center;
				border-radius: var(--radius-lg);
				margin: 2rem 1rem 4rem;
				position: relative;
				overflow: hidden;
				box-shadow: var(--shadow-lg);
				opacity: 0;
				transform: translateY(30px);
			}

			.cta-section::before {
				content: '';
				position: absolute;
				top: -50%;
				left: -50%;
				width: 200%;
				height: 200%;
				background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
				background-size: 15px 15px;
				z-index: 1;
			}

			.cta-title {
				font-size: 1.6rem;
				color: white;
				margin-bottom: 1.5rem;
				position: relative;
				z-index: 2;
			}

			.cta-buttons {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 1rem;
				margin-top: 1.5rem;
				position: relative;
				z-index: 2;
			}

			.cta-btn {
				padding: 1rem 2rem;
				border-radius: 50px;
				font-weight: 600;
				font-size: 1.1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				width: 100%;
				max-width: 280px;
				box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
			}

			.cta-line {
				background: linear-gradient(135deg, #06C755, #04A346);
			}

			.cta-telegram {
				background: linear-gradient(135deg, #0088cc, #0066A3);
			}

			/* Responsive Adjustments */
			@media (min-width: 768px) {
				.hero {
					height: 60vh;
				}

				.hero-content {
					margin-top: 2rem;
				}

				.hero-title {
					font-size: 3.5rem;
				}

				.hero-subtitle {
					font-size: 1.3rem;
				}

				.profile-item {
					flex-direction: row;
					align-items: stretch;
				}

				.profile-image-side {
					flex: 0 0 35%;
					width: auto;
				}

				.profile-main-image {
					height: 100%;
				}

				.profile-info-side {
					flex: 0 0 65%;
					width: auto;
				}

				.cta-buttons {
					flex-direction: row;
					justify-content: center;
				}
			}