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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: linear-gradient(180deg, #2d1810 0%, #1a0f08 100%);
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    word-break: keep-all;
}

/* Floating Shapes Animation */
.floating-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.shape {
    position: absolute;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    opacity: 0.15;
    animation: float 15s infinite ease-in-out;
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 10%;
    left: 10%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    top: 20%;
    right: 15%;
    transform: rotate(45deg);
    animation-delay: 2s;
}

.shape-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 5%;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    animation-delay: 4s;
}

.shape-4 {
    width: 70px;
    height: 70px;
    top: 60%;
    right: 10%;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: 1s;
}

.shape-5 {
    width: 50px;
    height: 50px;
    bottom: 10%;
    right: 30%;
    transform: rotate(20deg);
    animation-delay: 3s;
}

@keyframes float {

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

    25% {
        transform: translateY(-30px) rotate(5deg);
    }

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

    75% {
        transform: translateY(-30px) rotate(3deg);
    }
}

/* Hero Section */
.hero {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    overflow: hidden;
    /* Ensure background doesn't spill out */
}

/* Background Slideshow */
#hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Behind content */
    overflow: hidden;
}

/* Overlay to darken background for text readability */
#hero-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Adjust opacity as needed */
    z-index: 1;
}

.hero-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 0;
}

.hero-media.active {
    opacity: 1;
}

/* Ken Burns Effect */
@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
        /* Subtle zoom */
    }
}

.ken-burns {
    animation: kenBurns 6s ease-out forwards;
}


/* Logo Design - Glassmorphism */
.logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 4rem;
    padding: 12px 25px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.15);
}

.logo span {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
}

.play-icon {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
    animation: pulseIcon 2s infinite;
}

.play-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 10px solid white;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

@keyframes pulseIcon {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.7);
    }

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

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

/* Hero Typography */
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    padding: 0 1rem;
}

.hero-subtitle {
    font-size: 4.5rem;
    /* Increased size */
    font-weight: 900;
    margin-bottom: 2rem;
    line-height: 1.1;
    /* Tighter line height for punchy look */

    /* Animated Gradient Text */
    background: linear-gradient(300deg,
            #ffffff 0%,
            #ff6b35 25%,
            #f7931e 50%,
            #ff6b35 75%,
            #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    animation: gradientMove 5s ease infinite;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    /* Deep shadow for readability */

    opacity: 0;
    transform: translateY(30px);
    animation: gradientMove 5s ease infinite, slideUpFade 1s 0.2s forwards;
}

@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.hero-description {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 1rem;
    text-align: center;
    color: #f0f0f0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);

    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFade 1s 0.6s forwards;
}

.highlight {
    color: #ff6b35;
    font-weight: 800;
}

/* Entrance Animation */
@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-sub {
    font-size: 1.1rem;
    color: #cccccc;
    max-width: 600px;
}

/* Wrapper for inner sections - Remove vertical padding to allow margin collapse */
.main-content {
    padding: 0 2rem;
}

/* Sections */
section {
    position: relative;
    z-index: 2;
    padding: 6rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Standardize spacing and styling for inner sections */
.content-block,
.use-cases,
.industry-section,
.process-section,
.service-section,
.target-section,
.results-section,
.differentiation-section,
.cta-section,
#consultation {
    margin: 8rem auto;
    /* Standardized external spacing with centering */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 1rem;
    /* Standardized internal spacing */
    backdrop-filter: blur(10px);
    scroll-margin-top: 100px;
}

/* Add a gradient divider line below each section */
.content-block::after,
.use-cases::after,
.industry-section::after,
.process-section::after,
.service-section::after,
.target-section::after,
.differentiation-section::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #ff6b35, #f7931e);
    margin: 3rem auto -1.5rem;
    border-radius: 3px;
    opacity: 0.7;
}

/* Differentiation Section Specifics */
.diff-box {
    max-width: 800px;
    margin: 0 auto;
}

.diff-list {
    list-style: none;
    padding: 0;
}

.diff-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    margin-bottom: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 500;
}

.diff-item.bad {
    border-left: 4px solid #666;
    color: #999;
    text-decoration: line-through;
    text-decoration-color: #666;
}

.diff-item.good {
    border-left: 4px solid #ff6b35;
    background: rgba(255, 107, 53, 0.1);
    color: #fff;
    font-weight: 700;
}

.diff-mark {
    font-size: 1.5rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-description {
    text-align: center;
    font-size: 1.1rem;
    color: #cccccc;
    margin-bottom: 3rem;
    line-height: 1.8;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    background: rgba(45, 24, 16, 0.8);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: #ff6b35;
    box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

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


.content-title {
    font-size: 2.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 2rem;
}

.highlight-text {
    color: #ff6b35;
    font-size: 3rem;
}

.benefit-list {
    list-style: none;
    max-width: 800px;
    margin: 2rem auto;
}

.benefit-list li {
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    background: rgba(255, 107, 53, 0.1);
    border-left: 4px solid #ff6b35;
    border-radius: 8px;
    font-size: 1.1rem;
}

/* Use Cases */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.case-card {
    background: linear-gradient(135deg, rgba(45, 24, 16, 0.9) 0%, rgba(26, 15, 8, 0.9) 100%);
    border: 1px solid rgba(255, 107, 53, 0.2);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.case-card:hover {
    transform: scale(1.05);
    border-color: #ff6b35;
}

.case-card h3 {
    color: #f7931e;
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

/* Industry Section */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.industry-item {
    text-align: center;
    padding: 2rem 1rem;
    background: rgba(45, 24, 16, 0.6);
    border-radius: 15px;
    border: 1px solid rgba(255, 107, 53, 0.2);
    transition: all 0.3s ease;
}

.industry-item:hover {
    background: rgba(45, 24, 16, 0.9);
    border-color: #ff6b35;
}

.industry-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 1rem;
    object-fit: cover;
    max-height: 250px;
    /* Increased height to show more content */
    object-position: bottom;
    /* Anchor to bottom to ensure food on table is seen */
}

.industry-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.industry-item h4 {
    color: #ff6b35;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

/* Process Steps */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    margin-top: 3rem;
}

.step {
    text-align: center;
}

.step-number {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 1.5rem;
}

.step h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #f7931e;
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.service-card {
    background: rgba(45, 24, 16, 0.8);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 15px;
    padding: 2rem;
}

.service-card h3 {
    color: #ff6b35;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.service-card ul {
    list-style: none;
}

.service-card li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 107, 53, 0.1);
}

.service-card li:last-child {
    border-bottom: none;
}

/* Target List */
.target-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}

.target-item {
    padding: 1.5rem;
    background: rgba(255, 107, 53, 0.1);
    border-left: 4px solid #ff6b35;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Results Section */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.result-card {
    text-align: center;
    padding: 2rem;
    background: rgba(45, 24, 16, 0.8);
    border: 2px solid rgba(255, 107, 53, 0.3);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.result-card:hover {
    transform: translateY(-5px);
    border-color: #ff6b35;
}

.result-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.result-card h3 {
    color: #f7931e;
    font-size: 1.3rem;
}

.results-quote {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #ff6b35;
    margin-top: 3rem;
    font-style: italic;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.2) 0%, rgba(247, 147, 30, 0.2) 100%);
    text-align: center;
    max-width: 1200px;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 1rem;
    color: #ff6b35;
}

.cta-subtitle {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1rem;
    color: #cccccc;
    margin-bottom: 3rem;
}

/* Contact Form Styles */
.consultation-form-container {
    max-width: 500px;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 2rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 107, 53, 0.3);
}

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

.form-group input[type="text"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 8px;
    font-size: 1.1rem;
    font-family: inherit;
    /* Ensure font matches */
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: #ddd;
    justify-content: flex-start !important;
    width: 100%;
}

.checkbox-group input {
    width: auto !important;
    /* Prevent global input width 100% from affecting checkbox */
    margin: 0;
}

.checkbox-group label {
    white-space: nowrap;
    /* Prevent text wrapping */
    text-align: left;
}

.submit-button {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s;
}

.submit-button:hover {
    transform: scale(1.02);
}

.privacy-link {
    color: #ff6b35;
    text-decoration: underline;
    font-size: 0.9rem;
}

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    background-color: #1a0f08;
    margin: 15% auto;
    padding: 2rem;
    border: 1px solid #ff6b35;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    position: relative;
    color: #fff;
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover,
.close-modal:focus {
    color: white;
    text-decoration: none;
    cursor: pointer;
}

.privacy-text {
    margin-top: 1rem;
    line-height: 1.6;
    font-size: 0.9rem;
    color: #ddd;
}

/* Footer */
.footer {
    background: rgba(26, 15, 8, 0.9);
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255, 107, 53, 0.2);
}

.footer-content h3 {
    color: #ff6b35;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-info {
    color: #cccccc;
    line-height: 2;
}

.footer-info p {
    margin: 0.5rem 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 2.5rem;
    }

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

    .section-title,
    .cta-title {
        font-size: 2rem;
    }

    .features-grid,
    .cases-grid,
    .industry-grid,
    .process-steps,
    .service-grid,
    .results-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-button {
        width: 100%;
        max-width: 300px;
    }
}

@media (max-width: 480px) {
    .hero-subtitle {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    section {
        padding: 2rem 1rem;
    }
}

/* Consultation Form Styling */
.consult-form-container {
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.consult-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-group input {
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 107, 53, 0.3);
    background: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
}

.form-group input:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 10px rgba(255, 107, 53, 0.2);
}

.form-agreement {
    font-size: 0.9rem;
    color: #ccc;
    display: flex;
    align-items: center;
    gap: 5px;
}

.privacy-link {
    color: #ff6b35;
    text-decoration: underline;
    cursor: pointer;
}

.submit-btn {
    width: 100%;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
}

/* Modal Styling */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
}

.modal-content {
    background-color: #1a0f08;
    margin: 15% auto;
    padding: 30px;
    border: 1px solid #ff6b35;
    border-radius: 15px;
    width: 90%;
    max-width: 500px;
    position: relative;
    color: white;
    box-shadow: 0 4px 20px rgba(255, 107, 53, 0.2);
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover {
    color: #ff6b35;
}

.privacy-text {
    margin: 20px 0;
    line-height: 1.6;
    font-size: 0.95rem;
    color: #ddd;
}

.privacy-text p {
    margin-bottom: 15px;
}

.close-btn-bottom {
    display: block;
    width: 100%;
    padding: 10px;
    text-align: center;
    margin-top: 20px;
}

/* Floating Action Buttons */
.floating-buttons {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    /* Full width */
    max-width: 600px;
    /* Slight increase for comfort */
    display: flex;
    gap: 0;
    /* Remove gap if we want them flush, but maybe keep some? User said "attach below to bottom" */
    /* Let's keep them side-by-side but attached to bottom */
    z-index: 1000;
    padding: 0;
    /* Clear padding if any causes spacing */
}

.float-btn {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    /* Reduced from 16px (-30% height approx) */
    border-radius: 0;
    /* Rectangular look since it's attached to bottom? User didn't specify, but "attached to bottom" usually implies flat edge. However, "buttons" implies clickable. 
    Let's keep some border radius on top or make them rectangular for a "bottom bar" feel?
    User said "attach to bottom".
    I will reduce padding to 10px (~30% reduction from 16px height-wise).
    I will remove border-radius to make it flush with bottom, or keep top radius. 
    safest is rectangular bar at bottom. */
    border-radius: 0;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.float-btn .icon {
    margin-right: 8px;
    font-size: 1.2rem;
}

.float-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.consult-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    border: none;
}

.call-btn {
    background: #1a0f08;
    color: #ff6b35;
    border: 2px solid #ff6b35;
}

/* Add padding to footer to prevent buttons from overlapping content at the very bottom */
.footer {
    padding-bottom: 100px;
}