/* Global Styles & Variables - Luxury Dark Theme */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Pretendard:wght@300;400;600;700&display=swap');

:root {
    /* Luxury Palette */
    --bg-dark: #0a0a0a;
    --bg-panel: #111111;

    --primary-emerald: #052b26;
    /* Deep Emerald */
    --primary-gold: #d4af37;
    /* Classic Gold */
    --primary-gold-dim: #aa8c2c;

    --accent-navy: #0d1b2a;
    --accent-silver: #e0e0e0;

    /* Text */
    --text-main: #f0f0f0;
    --text-dim: #a0a0a0;
    --text-gold: #f4d03f;

    /* Fonts */
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Pretendard', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-main);
    line-height: 1.7;
    background-color: var(--bg-dark);
    overflow-x: hidden;
    word-break: keep-all;
    /* For animations */
}

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

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.section-padding {
    padding: 100px 0;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    color: var(--text-main);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 3.5rem;
    line-height: 1.2;
}

h2 {
    font-size: 2.8rem;
    color: var(--primary-gold);
}

h3 {
    font-size: 1.8rem;
}

p {
    color: var(--text-dim);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.text-gold {
    color: var(--text-gold);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 0;
    /* Sharp edges for luxury feel */
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.4s ease;
    cursor: pointer;
    border: 1px solid var(--primary-gold);
    background: transparent;
    color: var(--primary-gold);
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--primary-gold);
    transition: left 0.4s ease;
    z-index: -1;
}

.btn:hover {
    color: var(--bg-dark);
}

.btn:hover::before {
    left: 0;
}

.btn-solid {
    background: var(--primary-gold);
    color: var(--bg-dark);
}

.btn-solid:hover {
    background: white;
    border-color: white;
}

/* Glassmorphism Cards */
.glass-panel {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-panel:hover {
    transform: translateY(-5px);
    border-color: var(--primary-gold-dim);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
}

/* Animation Utilities for GSAP */
.gsap-reveal {
    opacity: 0;
    transform: translateY(30px);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-gold-dim);
    border-radius: 4px;
}

/* Main Page Layout */
.main-gateway {
    display: flex;
    /* Default to column for mobile first approach, or row for desktop first? 
       Let's use row for desktop default since we have a specific media query for mobile below, 
       BUT previously we had column. Let's make it responsive. */
    flex-direction: row;
    /* Desktop default: Side by Side */
    height: 85vh;
    /* Leave space for footer */
    width: 100%;
    overflow: hidden;
}

@media (max-width: 900px) {
    .main-gateway {
        flex-direction: column;
        /* Mobile: Stacked */
        height: auto;
        /* Allow content to dictate height or set specific */
        min-height: 100vh;
    }
}

.split-section {
    flex: 1;
    /* Equal height */
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    /* Vertically center */
    justify-content: flex-start;
    /* Align content to the left */
    background-size: cover;
    background-position: center;
    transition: flex 0.5s ease;
}

/* Remove or Minimize Expansion Logic for Static balanced look, 
   or keep it if you want vertical accordion. 
   For now, we'll keep it subtle or remove the huge expansion so it matches the static mock more. */
.split-section.expanded {
    flex: 1;
    /* Disable expansion for now to match the static image request exactly */
}

/* Overlay gradient - Darker for readability */
.split-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
    pointer-events: none;
}

.split-content {
    position: relative;
    z-index: 10;
    text-align: left;
    /* Left align */
    padding: 0 10%;
    /* Left padding */
    max-width: 100%;
    width: 100%;
    opacity: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.split-content h2 {
    font-size: 2.5rem;
    /* Reduced from 3.5rem */
    font-weight: 700;
    margin-bottom: 20px;
    color: white;
    text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.split-content p {
    font-size: 1rem;
    /* Reduced from 1.2rem (approx 0.9-1.0 better for readability) */
    color: #e0e0e0;
    margin-bottom: 30px;
    font-weight: 300;
}

/* Icon Circle */
.icon-circle {
    width: 60px;
    /* Reduced from 80px to match scale */
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.icon-circle svg {
    width: 30px;
    /* Reduced from 40px */
    height: 30px;
    fill: white;
    /* Optional: Drop shadow for icon */
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

/* Rounded Outline Button */
.btn-rounded-outline {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    /* Reduced padding */
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    color: white;
    font-family: var(--font-body);
    /* Use body font for cleaner look */
    font-size: 0.9rem;
    /* Reduced from 1rem */
    font-weight: 600;
    text-transform: none;
    /* Normal case */
    letter-spacing: 0;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

.btn-rounded-outline:hover {
    background: white;
    color: var(--bg-dark);
    border-color: white;
}

.btn-rounded-outline i,
.btn-rounded-outline span {
    margin-left: 10px;
}

@media (max-width: 900px) {
    .split-content h2 {
        font-size: 1.8rem;
        /* Reduced from 2.5rem */
    }


    .icon-circle {
        width: 60px;
        height: 60px;
    }

    .icon-circle svg {
        width: 30px;
        height: 30px;
    }
}

/* Footer Styles */
.main-footer {
    background-color: #b5dcd6;
    /* Pastel Teal from reference */
    padding: 40px 0;
    width: 100%;
    color: #333;
    font-size: 0.9rem;
    height: 15vh;
    /* Remaining height */
    display: flex;
    align-items: center;
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info p {
    color: #333;
    font-size: 0.85rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.footer-info .copyright {
    margin-top: 15px;
    color: #555;
    font-size: 0.8rem;
}

@media (max-width: 900px) {
    .main-footer {
        height: auto;
        padding: 30px 20px;
        text-align: center;
    }

    .footer-content {
        flex-direction: column-reverse;
        gap: 20px;
        padding: 0;
    }
}