/* Global Variables */
:root {
    --color-bg: #000000;
    --color-text: #FFFFFF;
    --color-text-dim: #999999;
    --color-accent: #FFFFFF;
    --color-form-bg: #111111;
    --color-border: #333333;

    --font-primary: 'Inter', sans-serif;

    --container-width-desktop: 1280px;
    --container-width-tablet: 768px;
    --container-width-mobile: 100%;

    --spacing-section: 160px;
    --spacing-element: 24px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-primary);
    overflow-x: hidden;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--container-width-desktop);
    margin: 0 auto;
    padding: 0 40px;
}

/* Typography Utilities */
.section-label {
    display: block;
    font-size: 14px;
    color: var(--color-accent);
    margin-bottom: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.section-title-large {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
}

/* Header & Nav */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: background 0.3s;
    padding: 45px 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    display: block;
    height: 24px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    flex-shrink: 0;
}

.nav {
    display: flex;
    align-items: center;
    gap: 50px;
}

.nav__list {
    display: flex;
    gap: 40px;
}

.nav__link {
    font-size: 15px;
    font-weight: 500;
    color: #ccc;
    transition: color 0.3s;
}

.nav__link:hover {
    color: #fff;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    position: relative;
    user-select: none;
}

.lang-arrow {
    display: block;
    transition: transform 0.3s ease;
    width: 12px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}

.lang-selector.active .lang-arrow {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 8px 0;
    border-radius: 8px;
    display: none;
    min-width: 80px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.lang-selector.active .lang-dropdown {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lang-dropdown li {
    padding: 5px 10px;
    text-align: center;
}

.lang-dropdown li:hover {
    background: #333;
}

/* Hero Section */
.hero {
    position: relative;
    height: 60vh;
    /* Reduced height from 100vh/800px to ~half */
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    /* Ensure bg is fully visible through the overlay box */
}

.hero__content {
    /* Deprecated in favor of hero__box, but keeping container properties if needed */
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-width-desktop);
    padding: 0 40px;
    display: flex;
    justify-content: flex-start;
    /* Align box to left/start or center based on design? Image shows left aligned text inside a large box? Actually looks like the box itself is somewhat centered or spanning. Let's look at the image again. The box seems to start from left and span wide. Let's make it inline-block or fit-content but with max-width. */
}

.hero__box {
    position: relative;
    /* Ensure z-index works */
    z-index: 2;
    /* Bring above background image (z-index: 1) */
    background: transparent;
    /* Translucent dark background */
    /* backdrop-filter: blur(5px); */
    /* Significantly reduced blur as requested */
    /* -webkit-backdrop-filter: blur(5px); */
    border: none;
    border-radius: 40px;
    padding: 70px 80px 50px;
    /* Top 70px, Sides 80px, Bottom 50px */
    margin-top: 120px;
    /* Shifted down significantly */
    max-width: 1200px;
    min-height: 240px;
    width: calc(100% - 40px);
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center content if height is fixed */
}

/* ... unchanged ... */

.work-overlay h3 {
    font-size: 20px;
    margin-bottom: 4px;
    /* Reduced from 8px by 50% */
}

.work-overlay p {
    margin: 0;
    /* Ensure no auto margin causing spacing */
    font-size: 14px;
    color: #ddd;
}

.hero__title {
    font-size: 72px;
    /* Slightly smaller to fit box padding if needed */
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #ffffff;
    opacity: 1;
    /* Force opaque */
}

.hero__subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #ffffff;
    /* White for better visibility on dark glass */
    opacity: 1;
    /* Force opaque */
    line-height: 1.6;
}

.hero__center-obj {
    /* Removing the center object as the new design focuses on the box overlay */
    display: none;
}

/* About Section */
.about {
    padding: var(--spacing-section) 0;
}

.about__container {
    max-width: 900px;
    /* Aligns with Hero Box width as requested */
    margin: 0 auto;
    padding: 0 40px;
    /* Match Hero Box padding visually if needed, or consistent container padding */
}

.about__header-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    /* Ratio to give text enough space */
    gap: 60px;
    margin-bottom: 80px;
    align-items: start;
}

.about__title-col {
    /* Holds label and title */
}

.about__desc-col {
    /* Holds description text */
}

.about__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-dim);
    margin-bottom: 24px;
    word-break: keep-all;
    /* Better for Korean line breaks */
}

.about__text:last-child {
    margin-bottom: 0;
}

.about__carousel {
    width: 100%;
    /* Aspect ratio or fixed height? Design shows a wide slot. */
    /* Let's try aspect-ratio based on image or a fixed height relative to width */
    /* Increased height by changing aspect ratio from 16/7 to 16/9 */
    aspect-ratio: 16/9;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid #222;
    /* Subtle border if needed */
}

.carousel__stage {
    display: flex;
    /* Flexrow for sliding */
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    /* Slide transition */
}

.carousel__item {
    min-width: 100%;
    /* Full width of container */
    height: 100%;
    position: relative;
    /* Not absolute anymore */
    opacity: 1;
    /* Always visible in flex row */
}

.carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel__indicators {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.indicator {
    width: 32px;
    /* Wide bar style */
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s;
}

.indicator.active {
    background: #fff;
}

/* Responsive for About */
@media (max-width: 768px) {
    .about__header-grid {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        gap: 40px;
    }

    .about__container {
        padding: 0 20px;
    }

    .carousel__indicators {
        bottom: 16px;
    }

    .indicator {
        width: 20px;
    }
}

/* Works Section */
.works {
    padding-bottom: var(--spacing-section);
    scroll-margin-top: var(--spacing-section);
}

.works__header {
    text-align: center;
    margin-bottom: 80px;
}

.works__desc {
    font-size: 16px;
    color: var(--color-text-dim);
    line-height: 1.6;
    margin-top: 20px;
}

.works__wide-container {
    width: 100%;
    max-width: var(--container-width-desktop);
    margin: 0 auto;
    padding: 0 40px;
}

.works__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.work-item {
    aspect-ratio: 589 / 323;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.work-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.work-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.work-item:hover .work-overlay {
    opacity: 1;
}

.work-item:hover img {
    transform: scale(1.05);
}

.work-overlay h3 {
    font-size: 20px;
    margin-bottom: 4px;
    /* Reduced from 8px by 50% */
}

.work-overlay p {
    margin: 0;
    font-size: 14px;
    color: #ddd;
}

/* Services Section */
.services {
    padding-bottom: var(--spacing-section);
}

/* Services Header Grid - Matching About Section */
.services__header-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 60px;
    margin-bottom: 80px;
    align-items: start;
}

.services__text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-dim);
    margin-bottom: 24px;
    word-break: keep-all;
}

.services__text:last-child {
    margin-bottom: 0;
}

.services__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 100px;
}

.service-card {
    background: transparent;
    padding: 0;
    overflow: visible;
    /* Allow content layout */
    display: flex;
    flex-direction: column;
}

/* Remove card hover movement */
.service-card:hover {
    transform: none;
}

.service-card__image {
    width: 100%;
    aspect-ratio: 16/9;
    /* Standard ratio or adapt to image */
    height: auto;
    overflow: hidden;
    margin: 0;
    border-radius: 20px;
    /* Radius on image only */
}

.service-card__image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.service-card:hover .service-card__image img {
    transform: scale(1.05);
    /* Only image zooms */
}

.service-card__content {
    padding: 20px 0 0 0;
    /* Top padding only */
}

.service-card__content h3 {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-transform: uppercase;
}

/* Hardwares Section */
.hardwares {
    padding-top: 0;
    padding-bottom: var(--spacing-section);
}

.hardwares__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
}

.section-title-medium {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #fff;
}

.hardwares__desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-dim);
    word-break: keep-all;
}

.hardwares__image-wrapper {
    width: 100%;
    /* Display block to remove bottom whitespace if any inline issues occur */
    display: block;
}

.hardwares__image-wrapper img {
    width: 100%;
    height: 100%;
    max-height: 530px;
    object-fit: cover;
    display: block;
}

/* Contact Section */
.contact {
    padding-bottom: var(--spacing-section);
    scroll-margin-top: var(--spacing-section);
}

.contact__container {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 80px;
    align-items: start;
}

.contact__desc {
    font-size: 16px;
    color: var(--color-text-dim);
    line-height: 1.7;
    margin-bottom: 0;
    word-break: keep-all;
}

/* Removed Meta styles */

.contact__form-wrapper {
    /* Wrapper to align with design if needed, or just apply to form */
}

.contact__form {
    background: #111111;
    /* Dark card background */
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #222;
    /* Subtle border for definition */
}

.form-group {
    margin-bottom: 24px;
}

.form-group:last-of-type {
    margin-bottom: 40px;
    /* Space before button */
}

.form-group label {
    font-size: 14px;
    font-weight: 500;
    color: #999;
    margin-bottom: 12px;
    display: block;
}

.form-group input,
.form-group textarea {
    width: 100%;
    background: #000000;
    border: 1px solid #333;
    /* Subtle input border */
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    font-size: 15px;
    transition: border-color 0.3s;
    font-family: inherit;
    resize: none;
}

.form-group textarea {
    min-height: 200px;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #666;
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    /* Right align button */
}

.btn--submit {
    background: #333;
    color: #fff;
    width: auto;
    padding: 12px 32px;
    border-radius: 8px;
    /* Slightly less rounded than pill */
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.3s;
    border: none;
    cursor: pointer;
}

.btn--submit:hover {
    background: #555;
}

/* Responsive */
@media (max-width: 1023px) {
    .hero__title {
        font-size: 60px;
    }

    .about__header-grid {
        grid-template-columns: 1fr;
    }

    .about__text {
        width: 100%;
        margin: 0 0 24px 0;
    }

    .works__grid {
        grid-template-columns: 1fr;
    }

    .contact__container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 767px) {
    :root {
        --spacing-section: 100px;
    }

    .container {
        padding: 0 20px;
    }

    .hero__title {
        font-size: 40px;
    }

    .services__header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hardwares__header {
        margin-bottom: 60px;
        /* Ensure 60px here too */
    }

    .section-title-medium {
        font-size: 24px;
    }

    .works__wide-container {
        padding: 0 20px;
    }

    .works__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .services__list {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 15px;
        row-gap: 40px;
    }

    .contact__form {
        padding: 24px;
    }

    .btn--submit {
        width: 100%;
        /* Full width on mobile if desired, or keep right */
        text-align: center;
    }
}



/* Footer Section */
.footer {
    padding-bottom: 60px;
}

.footer__divider {
    width: 100%;
    height: 1px;
    background-color: #333;
    margin-bottom: 40px;
}

.footer__content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.footer__info p {
    font-size: 14px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.5;
}

.footer__brand {
    color: #fff;
    margin-bottom: 12px !important;
    font-weight: 500;
}

.footer__copy {
    margin-top: 32px;
    color: #666 !important;
    margin-bottom: 0 !important;
}

.footer__icons {
    display: flex;
    gap: 12px;
}

.footer__icon-link {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity 0.3s;
}

.footer__icon-link:hover {
    opacity: 0.8;
}

.footer__icon-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive */
@media (max-width: 1023px) {
    .hero__title {
        font-size: 60px;
    }

    .about__content {
        flex-direction: column;
    }

    .about__text {
        width: 100%;
        margin: 0;
    }

    .works__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact__container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact__form {
        padding: 40px;
    }

    /* Tablet Navigation Adjustments */
    .nav {
        gap: 30px;
    }

    .nav__list {
        gap: 24px;
    }

    .hero__box {
        margin-top: 180px;
        /* Push down further on tablet/resized desktop */
    }
}

@media (max-width: 767px) {
    :root {
        --spacing-section: 100px;
    }

    .container {
        padding: 0 20px;
    }

    .hero__title {
        font-size: 40px;
    }

    .section-title-large {
        font-size: 30px;
        /* Reduced by half from 48px */
    }

    .services__header-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hardwares__header {
        margin-bottom: 60px;
    }

    .section-title-medium {
        font-size: 25px;
    }

    /* Mobile Body Text Size */
    .about__text,
    .works__desc,
    .services__text,
    .hardwares__desc,
    .contact__desc {
        font-size: 15px;
        line-height: 1.6;
    }

    .works__grid {
        grid-template-columns: 1fr;
    }

    .services__list {
        grid-template-columns: 1fr;
    }

    .form-footer {
        flex-direction: column-reverse;
        gap: 20px;
        align-items: stretch;
    }

    .btn--submit {
        width: 100%;
        text-align: center;
    }

    .footer__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .footer__icons {
        align-self: flex-end;
    }

    /* Mobile Layout Overhaul */
    .header__container {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .nav {
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }

    .nav__list {
        flex: 1;
        justify-content: flex-start;
        /* Use fixed gap instead of space-between to prevent excessive spreading */
        gap: 30px;
        /* Override desktop gap with slightly tighter spacing */
        padding-right: 0;
        /* No longer needed with flex-start */
    }

    .hero__box {
        padding: 40px 24px 30px;
        /* Compact padding */
        margin-top: 140px;
        /* Increased from 40px to clear the taller mobile header */
        min-height: auto;
    }

    .hero__title {
        font-size: 35px;
        /* Reduced from 40px to prevent cutoff */
        margin-bottom: 16px;
    }

    .hero__subtitle {
        font-size: 18px;
        /* Reduced from 20px */
        line-height: 1.5;
    }
}

/* Small Smartphone Optimization */
@media (max-width: 480px) {

    /* Hero Title Font Size Fix for Small Screens */
    .hero__title {
        font-size: 28px !important;
        /* Reduce further to prevent wrapping on narrow phones */
        letter-spacing: -0.03em;
        /* Tighten slightly */
    }

    .section-title-large {
        font-size: 28px !important;
        /* Scale down section titles too */
    }

    /* Reduce horizontal padding on very small screens to give text more room */
    .container {
        padding: 0 16px;
    }

    .hero__box {
        padding: 40px 20px 30px;
        /* Tighter padding */
    }
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delay for grid items on desktop */
@media (min-width: 768px) {
    .works__grid .work-item:nth-child(even).reveal {
        transition-delay: 0.15s;
    }
    
    .services__list .service-card:nth-child(even).reveal {
        transition-delay: 0.15s;
    }
}