:root {
    --bg-color: #0a0a0a;
    --text-color: #f0f0f0;
    --accent-color: #00ff88;
    /* Neon Green/Mint for futuristic feel */
    --secondary-color: #888888;
    --font-main: 'Inter', sans-serif;
    --font-kr: 'Noto Sans KR', sans-serif;
    --header-height: 80px;
}

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

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.6;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

/* Scroll Animation Utilities */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-kr);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Header */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
    background: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--accent-color);
}

nav ul {
    display: flex;
    gap: 2rem;
}

nav a {
    font-size: 0.9rem;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

nav a:hover {
    color: var(--accent-color);
}

/* Hero Section */
#hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    padding-top: var(--header-height);
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('assets/images/hero-bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-content {
    z-index: 1;
    opacity: 0;
    /* JS animation will handle this */
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.hero-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.hero-content h1 {
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
    letter-spacing: -2px;
}

.hero-content p {
    font-size: 1.5rem;
    color: var(--accent-color);
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.hero-content p::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background-color: var(--accent-color);
}

.scroll-indicator {
    position: absolute;
    bottom: 3rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    animation: bounce 2s infinite;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.scroll-indicator::after {
    content: '';
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, #fff, transparent);
}

@keyframes bounce {

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

    40% {
        transform: translateY(-10px);
    }

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

/* Common Section Styles */
section {
    padding: 100px 5%;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 4rem;
    text-align: center;
}

.section-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #fff;
}

.section-header .subtitle {
    color: var(--accent-color);
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.highlight {
    color: var(--accent-color);
}

/* About Section */
#about {
    background-color: #111;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text h3 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    line-height: 1.4;
    color: #fff;
}

.about-text p {
    font-size: 1.1rem;
    color: #aaa;
    margin-bottom: 3rem;
    line-height: 1.8;
}

.stats {
    display: flex;
    gap: 3rem;
}

.stats li {
    display: flex;
    flex-direction: column;
}

.stats .number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.5rem;
}

.stats .label {
    font-size: 0.9rem;
    color: var(--secondary-color);
    text-transform: uppercase;
}

.about-image {
    height: 400px;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    /* Soften edges slightly */
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.about-image:hover img {
    transform: scale(1.05);
    /* Subtle zoom effect */
}

/* Business Section */
#business {
    background-color: #0a0a0a;
    overflow: hidden;
    /* Import for slider */
    padding-left: 0;
    padding-right: 0;
}

#business .container {
    padding: 0 5%;
}

/* Slider Container */
.business-slider {
    margin-top: 2rem;
    position: relative;
    width: 100%;
}

.business-slider::before,
.business-slider::after {
    content: "";
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    /* Let clicks pass through */
}

.business-slider::before {
    left: 0;
    background: linear-gradient(to right, #0a0a0a, transparent);
}

.business-slider::after {
    right: 0;
    background: linear-gradient(to left, #0a0a0a, transparent);
}

/* Slider Track */
.slider-track {
    display: flex;
    width: calc(400px * 12);
    /* 3 cards * 4 sets * width */
    animation: scroll 40s linear infinite;
    gap: 2rem;
}

.slider-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-400px * 3 - 2rem * 3));
    }

    /* Slide width of one full set (3 cards) */
}

.business-card {
    width: 400px;
    /* Fixed width for slider */
    flex-shrink: 0;
    background: #151515;
    padding: 3rem 2rem;
    border: 1px solid #333;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.business-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0, 255, 136, 0.1);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 2rem;
    color: var(--accent-color);
}

.business-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.business-card p {
    color: #888;
    line-height: 1.6;
    font-size: 0.95rem;
}

.business-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.business-card:hover::before {
    transform: scaleX(1);
}

/* Contact Section */
#contact {
    background-color: #111;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contact-info p {
    color: #aaa;
    line-height: 1.8;
}

.contact-info .address {
    margin-bottom: 2rem;
}

.contact-details p strong {
    color: #fff;
    margin-right: 10px;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: #0a0a0a;
    border: 1px solid #333;
    color: #fff;
    font-family: var(--font-main);
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
}

.submit-btn {
    padding: 1rem 2rem;
    background: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn:hover {
    background: var(--accent-color);
    color: #000;
}

/* Footer */
footer {
    background: #000;
    padding: 3rem 5%;
    border-top: 1px solid #222;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    color: #fff;
    font-weight: 900;
    font-size: 1.2rem;
}

footer p {
    color: #555;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 1rem;
    }
}

.about-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(45deg,
            rgba(0, 0, 0, 0.1),
            rgba(0, 0, 0, 0.1) 10px,
            rgba(0, 0, 0, 0.2) 10px,
            rgba(0, 0, 0, 0.2) 20px);
}

.image-placeholder {
    color: #555;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Responsive Control */
.menu-toggle {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {

    /* Layout */
    section {
        padding: 60px 5%;
    }

    /* Header & Navigation */
    .menu-toggle {
        display: block;
        cursor: pointer;
    }

    .menu-toggle .bar {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px auto;
        transition: all 0.3s ease-in-out;
        background-color: #fff;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: var(--header-height);
        gap: 0;
        flex-direction: column;
        background-color: rgba(10, 10, 10, 0.95);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-menu ul {
        flex-direction: column;
        gap: 2rem;
    }

    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Hero Section */
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content p {
        font-size: 1rem;
    }

    /* About Section */
    .about-content {
        grid-template-columns: 1fr;
    }

    .stats {
        flex-direction: column;
        gap: 1.5rem;
    }

    .about-image {
        height: 300px;
        margin-top: 2rem;
    }

    /* Business Section */
    .business-slider {
        margin-top: 1rem;
    }

    /* Stop animation on mobile if needed, or adjust */
    /* Often better to keep animation but adjust card widths */

    .business-card {
        width: 80vw;
        /* Responsive width */
        max-width: 320px;
        padding: 2rem 1.5rem;
    }

    /* Adjust slider track width calculation logic if purely CSS or ensure enough overflow */
    /* Since the original CSS uses fixed pixels in calc, we might need a different approach for mobile slider 
       OR just rely on the overflow. 
       However, the animation 'scroll' uses specific translateX values based on card width.
       If card width changes, the animation smooth scroll might break or jump.
       For a quick fix, we'll keep the animation but maybe accept it might not be perfect sync, 
       OR we disable the complicated animation on mobile and make it a horizontal scroll container.
    */
}

/* Enhancing Mobile Slider to simple horizontal scroll for better UX on small screens */
@media (max-width: 768px) {
    .slider-track {
        animation: none;
        /* Disable auto scroll on mobile for better control */
        width: auto;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 2rem;
        /* Space for scrollbar */
        gap: 1rem;
    }

    .business-card {
        scroll-snap-align: center;
        flex-shrink: 0;
        margin-right: 0;
    }

    /* Hide scrollbar */
    .slider-track::-webkit-scrollbar {
        display: none;
    }

    .slider-track {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* Adjust gradient overlays */
    .business-slider::before,
    .business-slider::after {
        width: 50px;
        /* Smaller fade area */
    }

    /* Footer & Contact */
    .contact-content {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
}