@layer base, components, utilities;

@layer base {
    :root {
        --bg-dark: #0f172a;
        --bg-alt: #1e293b;
        --primary: #c5a059; /* Muted Gold for luxury/trust */
        --primary-light: #e2c284;
        --secondary: #334155;
        --accent: #38bdf8;
        --text-main: #94a3b8;
        --text-heading: #f8fafc;
        --white: #ffffff;
        --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.3), 0 8px 10px -6px rgb(0 0 0 / 0.3);
        --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    h1, h2, h3, h4 {
        color: var(--text-heading);
        line-height: 1.2;
    }

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

    section {
        padding: 120px 0;
    }

    .bg-alt {
        background-color: var(--bg-alt);
    }
}

@layer components {
    /* [Visual Hero Section] */
    .visual-hero {
        position: relative;
        height: 100vh;
        min-height: 700px;
        overflow: hidden;
        display: flex;
        align-items: center;
        padding: 0;
        background: #000;
    }

    .hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        min-width: 100%;
        min-height: 100%;
        width: auto;
        height: auto;
        z-index: 0;
        transform: translate(-50%, -50%);
        object-fit: cover;
        opacity: 0.6; /* Moody look */
    }

    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.4) 50%, rgba(15, 23, 42, 0.9) 100%);
        z-index: 1;
    }

    .hero-container {
        position: relative;
        z-index: 2;
    }

    /* Cinematic Animations */
    .fade-up-heavy {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(10px);
        animation: fadeUpHeavy 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    @keyframes fadeUpHeavy {
        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    .delay-1 { animation-delay: 0.4s; }
    .delay-2 { animation-delay: 0.8s; }
    .delay-3 { animation-delay: 1.2s; }

    .hero-title {
        font-size: clamp(2.5rem, 8vw, 4.5rem);
        font-weight: 800;
        margin-bottom: 2rem;
        letter-spacing: -1px;
    }

    .hero-title .line {
        display: block;
    }

    .hero-title .highlight {
        color: var(--primary);
    }

    .hero-description {
        font-size: 1.4rem;
        max-width: 800px;
        line-height: 1.6;
        margin-bottom: 3.5rem;
        color: rgba(255, 255, 255, 0.8);
    }

    /* Badge */
    .badge {
        display: inline-block;
        padding: 0.6rem 1.2rem;
        background: rgba(197, 160, 89, 0.2);
        color: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 99px;
        font-size: 0.9rem;
        font-weight: 700;
        margin-bottom: 2rem;
        backdrop-filter: blur(5px);
    }

    /* Buttons */
    .btn {
        padding: 1rem 2.5rem;
        border-radius: 6px;
        font-weight: 700;
        transition: var(--transition);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .btn-large {
        padding: 1.4rem 3.5rem;
        font-size: 1.2rem;
    }

    .btn-primary {
        background: var(--primary);
        color: var(--bg-dark);
        border: none;
    }

    .btn-primary:hover {
        background: var(--primary-light);
        transform: translateY(-5px);
        box-shadow: 0 15px 30px -10px rgba(197, 160, 89, 0.5);
    }

    .btn-outline {
        border: 2px solid var(--white);
        color: var(--white);
    }

    .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-5px);
    }

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

    .pain-card {
        padding: 3rem 2rem;
        background: var(--bg-alt);
        border-radius: 12px;
        text-align: center;
        transition: var(--transition);
    }

    .pain-icon {
        width: 40px;
        height: 40px;
        color: var(--primary);
        margin-bottom: 1.5rem;
    }

    /* Service Cards (Custom Component Styles) */
    .service-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 2rem;
        margin-top: 4rem;
    }

    /* Process Section */
    .process-steps {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 2rem;
        margin-top: 4rem;
        position: relative;
    }

    .step {
        text-align: center;
        position: relative;
    }

    .step-num {
        font-size: 4rem;
        font-weight: 900;
        color: rgba(255,255,255,0.05);
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
    }

    .step h4 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        position: relative;
    }

    /* CTA Section */
    .cta-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-dark) 100%);
        padding: 5rem;
        border-radius: 20px;
        border: 1px solid rgba(197, 160, 89, 0.2);
    }

    .cta-info h2 {
        font-size: 3rem;
        margin-bottom: 2rem;
    }

    .hotline {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 3rem;
        font-size: 1.25rem;
        color: var(--text-heading);
    }

    .hotline strong {
        color: var(--primary);
        font-size: 1.5rem;
    }

    /* Form */
    .cta-form form {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    input, select, textarea {
        padding: 1rem;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        color: var(--white);
        font-family: inherit;
    }

    input:focus, select:focus, textarea:focus {
        outline: none;
        border-color: var(--primary);
    }

    /* Floating Actions */
    .floating-actions {
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        z-index: 1000;
    }

    .floating-btn {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: var(--shadow-lg);
        transition: var(--transition);
        background: var(--white);
    }

    .phone-btn { background: #2ecc71; color: white; }
    .floating-btn:hover { transform: scale(1.1) rotate(5deg); }
}

/* Utilities */
.text-center { text-align: center; }
.section-title { font-size: 3rem; margin-bottom: 1rem; }
.sub-title { display: block; font-size: 1.25rem; color: var(--primary); margin-top: 1rem; }

/* Mobile */
@media (max-width: 968px) {
    .cta-wrapper { grid-template-columns: 1fr; padding: 2rem; }
    .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
    .form-row { grid-template-columns: 1fr; }
    .section-title { font-size: 2.25rem; }
    .visual-hero { height: auto; min-height: 100vh; padding: 120px 0 60px; }
}