@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --bg-primary: #ECE9E1;
    --bg-dark: #191919;
    --bg-card: #DFD9CE;
    --text-primary: #191919;
    --text-secondary: #4A4A4A;
    --text-white: #FFFFFF;
    --border-color: rgba(25, 25, 25, 0.1);
    --point-color: #ffcad8;
    --point-color-light: #fff0f5;
    --point-glow: rgba(255, 202, 216, 0.5);
    --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: 'Playfair Display', "Georgia", serif;
    --container-max-width: 1440px;
    --padding-x: 60px;
}

html {
    scrollbar-gutter: stable; /* 스크롤바 생성 시 화면 밀림 방지 */
}

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

h1, h2, h3, h4, h5, h6 {
    font-weight: inherit; /* 브라우저 기본 bold 해제 */
    line-height: 1.35;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a:hover {
    opacity: 0.7;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
}

/* Header */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 24px 0;
    transition: background-color 0.4s ease, border-bottom 0.4s ease;
}

header.transparent {
    background-color: transparent !important;
    color: #111111 !important;
    border: none !important;
}

header.transparent a {
    color: #111111;
    text-shadow: none;
}

header.scrolled {
    background-color: #ffffff !important;
    color: var(--text-primary) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1) !important;
    border: none !important;
}

/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    gap: 0;
    margin-right: auto;
    transition: all 0.4s ease;
}

.logo-symbol {
    width: 0;
    height: 32px;
    opacity: 0;
    overflow: hidden;
    background-color: currentColor;
    mask-image: url('logo-white.png');
    -webkit-mask-image: url('logo-white.png');
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.logo-text {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 1;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* 스크롤 시: 텍스트는 사라지고 심볼만 등장 */
.logo.scrolled-mode .logo-symbol {
    width: 32px;
    opacity: 1;
}

.logo.scrolled-mode .logo-text {
    width: 0;
    opacity: 0;
    overflow: hidden;
}

header.scrolled a {
    color: var(--text-primary);
}


/* SpaceX-style Fullscreen Hero */
.hero-fullscreen {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #fff;
}

#why-lola {
    background-color: #000 !important;
}

.security-architecture, .workflow-section {
    background-color: #0d0d0d !important;
}

.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    background: linear-gradient(135deg, #ffb3c6 0%, #ff8dae 50%, #ff6b95 100%);
}

.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* GPU 독립 레이어 분리 기반 100% 튐 제로 60fps 무한 실크 유체 모션 */
.vibe-bg {
    position: absolute;
    inset: -35%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 175, 195, 0.7) 45%, transparent 70%),
                radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 135, 170, 0.65) 50%, transparent 75%),
                radial-gradient(circle at 80% 25%, rgba(255, 80, 140, 0.82) 0%, transparent 65%),
                radial-gradient(circle at 20% 75%, rgba(255, 120, 165, 0.78) 0%, transparent 65%),
                linear-gradient(135deg, #ffb3c6 0%, #ff8dae 50%, #ff6b95 100%);
    filter: blur(90px);
    transform: translateZ(0) scale(1.18);
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    animation: fluidBasePulse 18s infinite linear;
}

.vibe-bg::before {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 65% 35%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 150, 185, 0.58) 40%, transparent 70%),
                radial-gradient(circle at 25% 65%, rgba(255, 255, 255, 0.88) 0%, transparent 65%);
    filter: blur(85px);
    opacity: 0.95;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    animation: fluidSpinClockwise 22s infinite linear;
}

.vibe-bg::after {
    content: '';
    position: absolute;
    inset: -25%;
    background: radial-gradient(circle at 75% 20%, rgba(255, 70, 130, 0.85) 0%, transparent 60%),
                radial-gradient(circle at 35% 80%, rgba(255, 255, 255, 0.95) 0%, transparent 65%);
    filter: blur(95px);
    opacity: 0.92;
    transform: translateZ(0);
    transform-origin: 50% 50%;
    will-change: transform;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    animation: fluidSpinCounter 28s infinite linear;
}

/* 0%와 100% 수치가 100% 일치하는 360° 심리스 튐 제로 키프레임들 */
@keyframes fluidBasePulse {
    0% {
        transform: rotate(0deg) scale(1.18) translate3d(-3%, 2%, 0);
    }
    50% {
        transform: rotate(180deg) scale(1.26) translate3d(4%, -3%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1.18) translate3d(-3%, 2%, 0);
    }
}

@keyframes fluidSpinClockwise {
    0% {
        transform: rotate(0deg) scale(1.12);
    }
    100% {
        transform: rotate(360deg) scale(1.12);
    }
}

@keyframes fluidSpinCounter {
    0% {
        transform: rotate(0deg) scale(1.15);
    }
    100% {
        transform: rotate(-360deg) scale(1.15);
    }
}

.hero-blur-overlay {
    display: none; /* 스포트라이트 효과 시 방해되므로 숨김 */
}

.space-hero {
    background-color: #000 !important;
}

.hero-blur-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2); /* 반투명도 재조정 */
    backdrop-filter: blur(20px); /* 40px -> 20px 절반으로 축소 */
    -webkit-backdrop-filter: blur(20px);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 var(--padding-x);
}

.hero-content.right-align {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
}

/* New Hero Content Styles */
.hero-content-main {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container-max-width);
    margin: -80px auto 0; /* Moved up from center */
    padding: 125px var(--padding-x) 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    pointer-events: none; /* 에너지 구체 클릭 방해 금지 */
}

.hero-content-main > * {
    pointer-events: auto;
}

/* 히어로 그래픽 스타일 삭제됨 */


.hero-main-headline {
    font-family: var(--font-sans);
    font-size: 50px;
    font-weight: 500; /* Medium */
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin-bottom: 32px;
    color: #111111;
    max-width: 800px;
    text-shadow: none;
}

.hero-main-description {
    font-size: 20px;
    line-height: 1.6;
    max-width: 720px;
    color: rgba(20, 20, 20, 0.85);
    margin-bottom: 48px;
    font-weight: 400;
    word-break: keep-all; /* 단어 단위 줄바꿈 유지 */
    text-shadow: none;
}

.lang-ko .hero-main-description {
    font-weight: 400; /* 한글 전용 레귤러 두께 */
    letter-spacing: -0.01em;
}

.hero-actions {
    display: flex;
    gap: 48px;
}

.first-hero .btn-minimal,
.first-hero .btn-minimal.secondary-outline {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    color: #111111 !important;
    text-decoration: none;
    padding-bottom: 10px;
    border-bottom: 1.5px solid rgba(17, 17, 17, 0.45) !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    margin-left: 0 !important;
}

.first-hero .btn-minimal .arrow,
.first-hero .btn-minimal.secondary-outline .arrow {
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
    color: #111111 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.first-hero .btn-minimal:hover,
.first-hero .btn-minimal.secondary-outline:hover {
    border-bottom-color: rgba(17, 17, 17, 1) !important;
}

.btn-minimal:hover .arrow {
    transform: translateX(6px);
}

@media (max-width: 1024px) {
    .hero-content-main {
        padding: 160px 48px 0;
    }
    .hero-main-headline {
        font-size: 44px;
    }
}

@media (max-width: 768px) {
    .hero-main-headline {
        font-size: 36px;
    }
    .hero-main-description {
        font-size: 17px;
    }
    .hero-actions {
        flex-direction: column;
        gap: 24px;
    }
}
/* Standardized Major Headlines Sync */
.reveal-text,
.section-title,
.architecture-main-title {
    font-size: 39px !important; /* 히어로 제외 섹션 타이틀 1px 축소 (40 -> 39) */
    font-weight: 400 !important; /* One level lower: 500 -> 400 */
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    color: inherit;
}

.space-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh; /* Critical: Ensure container height for dots */
    background-color: #000 !important;
}

.tech-scan-background-engine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7; /* Above background, below foreground */
    overflow: hidden;
    pointer-events: none;
}

.hero-foreground {
    position: relative;
    z-index: 10;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Trust Visual Stack Styles */
.trust-visual-stack {
    position: relative;
    width: 100%;
    height: 480px; /* Consistent height for graphics */
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-visual-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%) scale(0.95);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.trust-visual-item.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.trust-image {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.1));
}

#visual-compliance .trust-image { filter: drop-shadow(0 0 40px rgba(255, 215, 0, 0.2)); }
#visual-ai .trust-image { filter: drop-shadow(0 0 40px rgba(0, 255, 255, 0.2)); }
#visual-workflow .trust-image { filter: drop-shadow(0 0 40px rgba(0, 255, 0, 0.15)); }
#visual-flexibility .trust-image { filter: drop-shadow(0 0 40px rgba(255, 255, 255, 0.15)); }

.space-hero-centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
    max-width: 900px;
}

.tile-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tech-dot {
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    background-color: #ffffff; 
    border-radius: 50%;
    opacity: 0; 
    transform: scale(1);
    box-shadow: 0 0 4px #ffffff; /* 성능 최적화: 그림자 반경 대폭 축소 */
    transition: opacity 0.5s ease-out, transform 0.3s ease-out;
    will-change: opacity, transform; /* GPU 가속 활성화 */
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.5px; 
    background: linear-gradient(90deg, transparent, #ffffff, #ffffff, #ffffff, transparent);
    /* Pure White layered glow */
    box-shadow: 
        0 0 30px rgba(255, 255, 255, 0.9),
        0 0 60px rgba(255, 255, 255, 0.5),
        0 0 90px rgba(255, 255, 255, 0.2);
    filter: blur(2px);
    z-index: 8; /* On top of dots */
}

.hero-content.centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.counter-display-box {
    margin-bottom: 30px;
}

.counter-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.counter-value {
    font-family: 'Space Grotesk', sans-serif; /* Main site font unified */
    font-weight: 500; /* Medium weight for elegance */
    font-size: 110px;
    color: var(--point-color); /* Updated to Light Pink */
    line-height: 1;
    transition: transform 0.2s ease-out;
}

.points-label {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300; /* Thin weight as requested */
    font-size: 28px;
    color: #ffffff !important; /* Updated to White */
    margin-left: 20px;
    letter-spacing: 4px;
}

.counter-value.bump {
    transform: scale(1.08);
}

.space-hero .reveal-text {
    margin-bottom: 24px;
    color: #ffffff;
    max-width: 800px;
    text-align: center;
}

.space-hero .reveal-text-sub {
    font-size: 20px;
    max-width: 600px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}

.reveal-text {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1s forwards 0.5s;
}

.reveal-text-sub {
    font-size: 19px;
    letter-spacing: 1px; /* 4px -> 1px 자간 줄임 */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards 0.8s;
    word-break: keep-all;
}

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

.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff; /* 화이트 */
    opacity: 0.8;
}

.mouse {
    width: 22px;
    height: 36px;
    border: 2px solid #ffffff; /* 화이트 */
    border-radius: 12px;
    position: relative;
}

.mouse::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: #ffffff; /* 화이트 */
    border-radius: 50%;
    transform: translateX(-50%);
    animation: scrollMove 2s infinite;
}

@keyframes scrollMove {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 15px); opacity: 0; }
}

header .container {
    display: flex;
    align-items: center;
}

/* Consolidated into Logo Styles section at top */



.main-nav {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 4px; /* Group tightly with download button */
}

.lang-selector {
    position: relative;
}

.lang-btn {
    background: rgba(255, 255, 255, 0.2) !important; /* 20% 투명도 반투명 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: none !important;
    color: #111111 !important;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    height: 44px;
    padding: 0 32px !important; /* 좌우 여백 2배 */
    border-radius: 8px !important; /* 라운드 50% 완화 (16px -> 8px) */
    transition: all 0.3s ease;
    box-sizing: border-box;
    box-shadow: none !important;
}

.lang-btn svg {
    stroke: #111111 !important;
}

header.scrolled .lang-btn {
    color: #111111 !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

header.scrolled .lang-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
}

.lang-btn .arrow-down {
    font-size: 10px;
    opacity: 0.8;
    color: #111111 !important;
    border-left: none !important; /* 세로 획 제거 */
    padding-left: 4px !important;
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 0;
    list-style: none;
    min-width: 110px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.lang-selector:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.lang-dropdown li a {
    display: block;
    padding: 8px 16px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.2s ease;
    text-align: center;
}

.lang-dropdown li a:hover {
    color: white;
    background: rgba(255, 0, 160, 0.1);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 0;
}

.btn-try {
    background: rgba(255, 255, 255, 0.2) !important; /* 20% 투명도 반투명 화이트 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #111111 !important;
    height: 44px;
    padding: 0 40px !important; /* 좌우 여백 2배 */
    min-width: auto;
    box-sizing: border-box;
    text-decoration: none;
    border-radius: 8px !important; /* 라운드 50% 완화 (16px -> 8px) */
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none !important;
    transition: all 0.3s ease;
    box-shadow: none !important;
}

.btn-try:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

.arrow-down {
    padding-left: 4px !important;
    border-left: none !important; /* 내부 세로 획 제거 */
    height: 14px;
    display: flex;
    align-items: center;
    color: #111111 !important;
}

header.scrolled .btn-try {
    background: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    color: #111111 !important;
}

header.scrolled .btn-try .arrow-down {
    border-left: none !important;
}

/* Hero Section */
.hero {
    padding: 100px 0 160px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    align-items: start;
    gap: 40px;
}



.hero-headline {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* Adjusted to 400 as requested */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin: 0;
    color: var(--text-primary);
}

.hero-headline span.underline {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 8px;
}

.hero-description {
    font-size: 20px;
    line-height: 1.5;
    color: var(--text-primary);
    max-width: 480px;
}

/* Glasswing Section */
.glasswing {
    padding: 0 var(--padding-x);
    margin-bottom: 120px;
}

.glasswing-card {
    background-color: var(--bg-dark);
    border-radius: 40px;
    height: 700px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--text-white);
}

.glasswing-content {
    position: relative;
    z-index: 2;
    padding-left: 80px;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}

.glasswing-title {
    font-family: var(--font-serif);
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 24px;
}

.glasswing-subtitle {
    font-size: 19px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.btn-white {
    background-color: var(--text-white);
    color: var(--bg-dark);
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}

.glasswing-img {
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    background-image: url('glasswing-bg.png');
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}

/* Latest Releases */
.releases {
    padding-top: 160px;
    padding-bottom: 200px;
    position: relative;
    overflow: hidden;
}

/* Background blobs to make glass effect visible */
.releases::before {
    content: '';
    position: absolute;
    top: 20%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(43, 89, 255, 0.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.releases::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255, 127, 106, 0.08) 0%, transparent 70%);
    z-index: 1;
    pointer-events: none;
}

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

.section-title {
    margin-bottom: 24px;
    min-height: 1.4em; /* 타이틀 높이 고정으로 언어 전환 시 상하 흔들림 방지 */
}

.section-description {
    font-size: 20px;
    line-height: 32px; /* 고정 픽셀 줄간격으로 폰트 크기 변화에 따른 높이 흔들림 방지 */
    color: var(--text-secondary);
    max-width: 800px;
    margin-bottom: 60px;
    word-break: keep-all;
    min-height: 64px; /* 2줄(32px*2) 공간 고정 */
}

.lang-ko .section-description {
    font-size: 19px;
}

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

.card {
    background-color: rgba(255, 255, 255, 0.3); /* Semi-transparent for Glassmorphism */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 60px 40px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 620px; /* 모든 언어 버전 중 가장 긴 콘텐츠를 기준으로 고정하여 흔들림 방지 */
    border: 1px solid rgba(255, 255, 255, 0.5); /* Glass highlight */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-icon {
    width: 80px; /* 프리미엄 미니멀 스타일 상향 조정 */
    height: 80px;
    object-fit: contain;
    margin-bottom: 48px;
    mix-blend-mode: multiply; /* 흰색 배경 투명 처리, 블랙 심볼 유지 */
}

.card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

.card-title {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 24px;
}

.card-excerpt {
    font-size: 20px;
    line-height: 32px; /* 고정 줄간격 적용 */
    color: var(--text-secondary);
    margin-bottom: 24px;
    flex-grow: 1;
    word-break: keep-all;
}

.lang-ko .card-excerpt {
    font-size: 19px;
    line-height: 32px; /* 높이 유지 */
}

.card-meta {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 24px;
    font-size: 13px;
}

.meta-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.meta-label {
    text-transform: uppercase;
    font-weight: 600;
    color: rgba(0,0,0,0.4);
}

.btn-card {
    background-color: var(--bg-dark);
    color: var(--text-white);
    align-self: flex-start;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 24px;
}

/* List Section */
.list-section {
    padding-bottom: 120px;
}

.list-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
}

.list-headline {
    font-size: 40px;
    font-weight: 400;
    line-height: 1.2;
}

.list-items {
    border-top: 1px solid var(--border-color);
}

.list-item {
    display: flex;
    justify-content: space-between;
    padding: 24px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 16px;
    font-weight: 500;
}

.list-item .category {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Simple Footer */
.simple-footer {
    background-color: #000; /* Pure black as requested */
    padding: 80px 0 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08); /* Very thin, subtle border */
}

.footer-center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.footer-company-info {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.footer-company-info .sep {
    margin: 0 12px;
    opacity: 0.3;
}

.footer-copyright span {
    color: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    letter-spacing: 0.05em;
    font-weight: 400;
}

@media (max-width: 1024px) {
    .container { padding: 0 40px; }
    .hero-headline { font-size: 38px; } /* Exploring... 섹션과 동일하게 38px로 통일 */
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Why Lola Section */
.why-lola {
    background-color: #000; /* 다시 검정 배경으로 변경 */
    color: #fff;
    padding: 160px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.lola-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start; /* Essential: Align columns to top */
    padding-top: 40px; /* Moved up as requested */
}

.lola-left {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 150px; /* Moves only the graphic down as requested */
}

.why-lola-energy-container {
    position: relative;
    width: 600px;
    height: 500px; /* 850px -> 500px: 아이콘 본체 크기에 맞춰 높이 최적화 */
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
    /* isolation 해제: 배경과 직접 혼합 허용 */
    isolation: auto !important;
}

/* 컬러 모드별 광원 변수 정의 */
.gold-mode { --glow-color: rgba(255, 215, 0, 0.4); }
.cyan-mode { --glow-color: rgba(0, 255, 255, 0.4); }
.green-mode { --glow-color: rgba(0, 255, 128, 0.4); }
.pink-mode { --glow-color: rgba(255, 105, 180, 0.4); }
.white-mode { --glow-color: rgba(255, 255, 255, 0.3); }

/* 바닥 반사광 (Floor Glow) 레이어 삭제됨 - 사용자의 요청으로 순수 반사만 유지 */
.why-lola-energy-container::after {
    display: none;
}

.shield-energy {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: screen; 
    filter: drop-shadow(0 0 30px rgba(128, 0, 255, 0.4));
    -webkit-mask-image: radial-gradient(circle, black 40%, transparent 70%); 
    mask-image: radial-gradient(circle, black 40%, transparent 70%);
    animation: shieldEffect 15s infinite linear; 
    transition: filter 1s ease, opacity 1s ease;
}

/* Energy Ball Removal for Trust Section */
.why-lola-energy-container .shield-energy { 
    display: none;
}

/* Premium Floating Icons */
.trust-icon-wrapper {
    position: absolute;
    inset: 0; 
    z-index: 10;
    display: grid; /* 그리드 방식 도입 */
    place-items: center; /* 자식 요소들을 정앙에 강제 정렬 */
    pointer-events: none;
    background-color: #000 !important;
    mix-blend-mode: screen; 
    isolation: auto !important;
}

.trust-icon {
    position: relative; /* grid-item으로서 동작 */
    grid-area: 1 / 1; /* 같은 칸에 겹치기 */
    width: 432px; /* 로고 작업 전 사이즈로 롤백 */
    height: 432px;
    object-fit: contain;
    z-index: 2;
    mix-blend-mode: screen; 
    transform: translateY(-40px); /* Match animation start state */
    animation: 
        trustFloat 4s ease-in-out infinite,
        inner-pulse 4s ease-in-out infinite alternate;
}

/* New Reflection Container: Fixed Mask Boundary */
.trust-reflect-container {
    grid-area: 1 / 1; 
    width: 432px;
    height: 432px;
    transform: translateY(240px); /* 로고 작업 전 거리로 롤백 */
    z-index: 1;
    overflow: visible;
    /* 어두운 영역을 2배로 확장 (소멸 지점 90% -> 45%) */
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0) 45%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 20%, rgba(0,0,0,0) 45%);
    pointer-events: none;
}

.trust-reflect-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.18; /* 투명도를 약 절반으로 감소 (0.35 -> 0.18) */
    mix-blend-mode: screen;
    filter: blur(8px) brightness(0.2); /* 블러 강화 및 밝기 재반감 (0.4 -> 0.2) */
    transform-origin: center;
    transform: translateY(40px) scaleY(-1); /* Match animation start state */
    animation: 
        trustFloatInverse 4s ease-in-out infinite,
        inner-pulse 4s ease-in-out infinite alternate;
}

/* 개별 아이콘의 형태적 특성에 따른 반사 이격 거리 보정 */
#shield-wrapper .trust-reflect-container,
#question-wrapper .trust-reflect-container {
    transform: translateY(280px); /* 로고 작업 전 거리로 롤백 */
}

/* Match delays for reflections inside containers */
#question-wrapper { scale: 0.9; } /* 물음표 사이즈 10% 축소 */
#question-wrapper .trust-reflect-icon { animation-delay: 1s, -0.5s; }
#folder-wrapper .trust-reflect-icon { animation-delay: 0s, -1s; }
#shield-wrapper .trust-reflect-icon { animation-delay: -1.5s, -0.5s; }
#face-wrapper .trust-reflect-icon { animation-delay: -3s, -2s; }
#doc-wrapper .trust-reflect-icon { animation-delay: -4.5s, -3.5s; }
#flexibility-wrapper .trust-reflect-icon { animation-delay: -6s, -1.2s; }

.no-reflect {
    opacity: 0.5; /* display: none 대신 투명도 조정으로 변경 */
}

/* 원본 형태 보전을 위한 정밀 색상 필터 */
.red-filter {
    filter: hue-rotate(-45deg) saturate(1.2) brightness(1.1) contrast(1.05) !important;
    /* 골드를 은은하고 프리미엄한 옅은 레드로 변환 */
}

.pale-yellow-filter {
    filter: brightness(1.2) contrast(1.1) saturate(1.1) !important;
    image-rendering: -webkit-optimize-contrast; /* 선명도 강제 보정 */
    /* 복잡한 sepia 제거하고 밝기와 대비만으로 맑게 처리 */
}

.pink-energy-filter {
    filter: hue-rotate(80deg) saturate(2) brightness(1.2) contrast(1.1) !important;
}

/* 사용자의 롤백 요청에 따라 노란색 필터 영구 삭제 및 핑크 통일 */

/* 모든 트러스트 아이콘 일관 유지 */
.trust-icon {
    max-width: 90%;
    max-height: 90%;
    filter: drop-shadow(0 0 8px rgba(255, 0, 128, 0.3)); /* 15px -> 8px로 축소하여 번짐 제거 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backface-visibility: hidden; /* 애니메이션 중 픽셀 뭉개짐 방지 */
    -webkit-font-smoothing: antialiased;
}

/* 각 아이콘별 유기적인 시간차 적용 */
#question-wrapper .trust-icon { animation-delay: 1s, -0.5s; }
#folder-wrapper .trust-icon { animation-delay: 0s, -1s; }
#shield-wrapper .trust-icon { animation-delay: -1.5s, -0.5s; }
#face-wrapper .trust-icon { animation-delay: -3s, -2s; }
#doc-wrapper .trust-icon { animation-delay: -4.5s, -3.5s; }
#flexibility-wrapper .trust-icon { animation-delay: -6s, -1.2s; }

/* 파티클 제거 (CSS 클래스 삭제) */

/* 아우라 및 가상 별빛 효과 정리 */
.trust-icon-wrapper::before,
.trust-icon-wrapper::after {
    display: none; /* 실시간 파티클 시스템으로 대체 */
}

.visual-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85); /* 0.4에서 0.85로 조정하여 과도한 수축 방지 */
    filter: blur(8px); /* 사라질 때 자연스럽게 녹아드는 효과 */
    pointer-events: none;
    transition: 
        opacity 0.35s cubic-bezier(0.2, 0, 0.2, 1), 
        transform 0.35s cubic-bezier(0.2, 0, 0.2, 1), 
        filter 0.35s ease,
        visibility 0.35s;
}

@keyframes trustFloat {
    0%, 100% {
        transform: translateY(-40px); /* 그리드 중앙 기준 수직 이동만 수행 */
    }
    50% {
        transform: translateY(-60px); 
    }
}

@keyframes trustFloatInverse {
    0%, 100% {
        transform: translateY(40px) scaleY(-1); 
    }
    50% {
        transform: translateY(60px) scaleY(-1); 
    }
}

@keyframes floorPulse {
    0%, 100% {
        transform: translateX(-50%) rotateX(70deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateX(-50%) rotateX(70deg) scale(0.7); /* 아이콘이 올라가면 광원이 작아짐 */
        opacity: 0.4;
    }
}

/* 히어로 전용 애니메이션은 상단에서 2D로 정의됨 */

@keyframes inner-pulse {
    0% {
        filter: brightness(1.1) contrast(1);
        opacity: 1;
    }
    100% {
        filter: brightness(1.2) contrast(1.05);
        opacity: 1;
    }
}

@keyframes shieldEffect {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: scale(1.05) rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}

.lola-right {
    padding-right: 40px;
}

.lola-title {
    font-size: 39px; /* 히어로 제외 전 섹션 타이틀 통일 (40 -> 39) */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}

.lola-subtitle {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 48px;
    max-width: 650px; /* 너비를 넓혀 'safer'가 첫 줄에 올라오도록 조정 */
    word-break: keep-all;
}

.toggle-list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.toggle-header {
    padding: 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.toggle-header:hover {
    opacity: 0.7;
}

.toggle-header h3 {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.toggle-icon {
    font-size: 30px;
    font-weight: 300;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-item.active .toggle-content {
    grid-template-rows: 1fr;
}

.toggle-inner {
    min-height: 0;
}

.toggle-content p {
    font-size: 19px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    padding: 0 0 24px 0;
    max-width: 500px;
    word-break: keep-all;
}

/* --- Section 1: Safety Grid --- */
.safety-grid-section {
    background-color: var(--bg-primary);
    padding: 120px 0;
    border-top: 1px solid var(--border-color);
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
}

.section-main-title {
    font-family: var(--font-sans);
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.btn-minimal-v2 {
    padding: 12px 24px;
    border: 1px solid var(--border-color);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-minimal-v2:hover {
    background: #000;
    color: #fff;
    opacity: 1;
}

.safety-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.safety-card {
    background-color: var(--bg-card);
    padding: 40px;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    min-height: 500px;
    transition: transform 0.3s ease;
}

.safety-card:hover {
    transform: translateY(-8px);
}

.safety-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
}

.safety-visual img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.safety-card-title {
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 600;
}

.safety-card-text {
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1.6;
}

/* --- Section 2: Capabilities Visualization --- */
.capabilities-section {
    background-color: var(--bg-dark);
    color: var(--text-white);
    padding: 120px 0;
}

.cap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.cap-left {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.cap-group {
    max-width: 500px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 32px;
}

.cap-icon {
    font-size: 32px;
    margin-bottom: 16px;
}

.cap-item-title {
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 500;
}

.cap-item-title-large {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
}

.cap-item-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    line-height: 1.6;
}

.cap-right {
    display: flex;
    justify-content: center;
}

.cap-visual-img {
    max-width: 100%;
    border-radius: 24px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5);
}

/* --- Section 3: Research Frontiers --- */
.research-frontiers {
    padding: 120px 0;
    background-color: #fff;
}

.frontier-headline {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 80px;
    color: #000;
    max-width: 900px;
}

.frontier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.frontier-card {
    display: flex;
    flex-direction: column;
}

.frontier-img-wrap {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 24px;
}

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

.frontier-card:hover .frontier-img-wrap img {
    transform: scale(1.05);
}

.frontier-card-title {
    font-size: 20px;
    margin-bottom: 12px;
    line-height: 1.3;
    font-weight: 500;
}

.frontier-card-text {
    font-size: 20px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1;
}

.frontier-btns {
    display: flex;
    gap: 10px;
}

.btn-frontier-dark {
    background: #191919;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
}

.btn-frontier-light {
    background: #f5f5f7;
    color: #191919;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e5e5;
}

/* --- Section 4: Foundational Models --- */
.foundational-models {
    position: relative;
    padding: 160px 0;
    min-height: 700px;
    overflow: hidden;
    color: #fff;
}

.foundational-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

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

.found-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.found-label {
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
    opacity: 0.8;
}

.found-title {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.35;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
}

.btn-outline-white {
    display: inline-block;
    padding: 14px 28px;
    border: 1px solid #fff;
    border-radius: 100px;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-outline-white:hover {
    background: #fff;
    color: #000;
    opacity: 1;
}

.found-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.found-list {
    display: flex;
    flex-direction: column;
}

.found-item {
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    padding: 32px 0;
}

.found-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.found-item h3 {
    font-size: 24px;
    font-weight: 500;
}

.found-arrow {
    font-size: 24px;
}

.found-item p {
    font-size: 20px;
    opacity: 0.7;
    line-height: 1.6;
    max-width: 450px;
}

@media (max-width: 1024px) {
    .lola-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    .lola-right {
        padding-right: 0;
    }
    .toggle-content p {
        margin: 0 auto;
    }
    .safety-cards { grid-template-columns: repeat(2, 1fr); }
    .cap-grid { grid-template-columns: 1fr; gap: 40px; }
    .frontier-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .container { padding: 0 24px; }
    header nav { display: none; }
    .hero-grid { grid-template-columns: 1fr; text-align: left; }
    .hero-headline { font-size: 34px; } /* 48px -> 34px (30% 축소) */
    .glasswing-card { height: 500px; border-radius: 20px; }
    .glasswing-img { display: none; }
    .glasswing-title { font-size: 48px; }
    .cards-grid { grid-template-columns: 1fr; }
    .list-container { grid-template-columns: 1fr; }
    
    /* New Sections Responsiveness */
    .section-main-title { font-size: 36px; }
    .safety-cards { grid-template-columns: 1fr; }
    .cap-item-title-large { font-size: 36px; }
    .frontier-headline { font-size: 36px; }
    .frontier-grid { grid-template-columns: 1fr; }
    .found-container { grid-template-columns: 1fr; gap: 40px; }
    .found-title { font-size: 36px; }
    .hero-headline { font-size: 48px; } /* Distinct Large Hero for Mobile */
}

/* Security Architecture Section */
.security-architecture {
    padding: 160px 0;
    background-color: #0d0d0d; /* Base dark background */
    color: var(--text-white);
    position: relative;
    overflow: hidden;
}

/* 라이브 에너지 배경 엔진 스테이지 */
.energy-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.7; /* Increased opacity for better visibility */
    animation: moveBlobs-trust 22s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

.blob-1 {
    width: 900px;
    height: 900px;
    background: rgba(255, 230, 0, 0.5); /* Vivid Yellow */
    top: -200px;
    left: -200px;
    animation-duration: 25s;
}

.blob-2 {
    width: 850px;
    height: 850px;
    background: rgba(255, 20, 147, 0.5); /* Strong Pink */
    bottom: -150px;
    right: -150px;
    animation-duration: 30s;
    animation-delay: -7s;
}

.blob-3 {
    width: 1000px;
    height: 1000px;
    background: rgba(255, 255, 255, 0.4); /* Pure White */
    top: 20%;
    left: 25%;
    animation-duration: 28s;
    animation-delay: -12s;
}

.blob-4 {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.6;
    animation: moveBlobs-trust 24s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    width: 950px;
    height: 950px;
    background: rgba(0, 191, 255, 0.5); /* Electric Blue */
    bottom: 10%;
    left: 10%;
    animation-delay: -18s;
}

@keyframes moveBlobs-trust {
    0% { transform: translate(0, 0) rotate(0deg) scale(1); }
    50% { transform: translate(100px, 150px) rotate(90deg) scale(1.1); }
    100% { transform: translate(-50px, -80px) rotate(180deg) scale(0.9); }
}

.architecture-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 120px;
    align-items: start;
    position: relative;
    z-index: 10; /* Content above energy background */
}

.architecture-main-title {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}

.architecture-main-sub {
    font-size: 20px;
    color: #FFFFFF; /* Enhanced contrast for energy background */
    margin-bottom: 60px;
    max-width: 500px;
    line-height: 1.6;
    opacity: 0.8;
}

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

.security-item {
    display: flex;
    align-items: center;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    pointer-events: all;
}

.security-item:last-child {
    border-bottom: none;
}

.security-item-num {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    width: 40px;
}

.security-item-text {
    font-size: 22px;
    font-weight: 400;
    flex-grow: 1;
    transition: color 0.3s ease;
}

.security-item-arrow {
    font-size: 24px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.security-item:hover .security-item-text,
.security-item.active .security-item-text {
    color: var(--text-white);
}

.security-item.active .security-item-text {
    font-weight: 500;
}

.security-item.active .security-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Stack Container */
.security-detail-view {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    min-height: 480px; /* Reduced from 520px */
    display: block;
    position: sticky;
    top: 180px; /* Lowered from 120px to align better with the content */
    box-shadow: none;
    z-index: 5;
}

/* Individual Card Styles - Glassmorphism applied */
.security-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.05); /* Very subtle white tint */
    backdrop-filter: blur(24px); /* Premium Glassmorphism blur */
    -webkit-backdrop-filter: blur(24px);
    color: var(--text-white); /* High contrast for glass */
    padding: 60px 50px;
    border-radius: 24px;
    min-height: 450px;
    display: flex;
    align-items: center;
    box-shadow: 0 40px 100px rgba(0,0,0,0.5); /* Stronger shadow for floating effect */
    transition: 
        transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
        z-index 0.45s step-end,
        opacity 0.45s ease,
        filter 0.45s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1); /* Luminous glass border */
}

.security-card:hover {
    filter: brightness(1.02);
}

/* Card Stack States (Diagonal Offset to Bottom-Right) */

/* Front (Active) */
.card-state-0 {
    z-index: 10;
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 1;
    filter: none;
}

/* Second Layer (Hidden) */
.card-state-1 {
    z-index: 9;
    transform: translate(0, 0) scale(0.98);
    opacity: 0;
    pointer-events: none;
}

/* Third Layer (Hidden) */
.card-state-2 {
    z-index: 8;
    transform: translate(0, 0) scale(0.98);
    opacity: 0;
    pointer-events: none;
}

/* Fourth Layer (Hidden) */
.card-state-3 {
    z-index: 7;
    transform: translate(0, 0) scale(0.98);
    opacity: 0;
    pointer-events: none;
}

/* Fifth Layer (Deepest/Hidden) */
.card-state-4 {
    z-index: 6;
    transform: translate(0, 0) scale(0.98);
    opacity: 0;
    pointer-events: none;
}

.detail-title {
    font-size: 40px;
    font-weight: 500;
    margin-bottom: 32px;
    color: var(--text-white);
}

.detail-description {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 48px;
    color: rgba(255, 255, 255, 0.8); /* Refined for glass legibility */
}

.detail-metric {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 40px;
}

.metric-value {
    display: block;
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -2px;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--text-white);
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3); /* Subtle glow */
}

.metric-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.detail-content {
    animation: fadeInScale-sec 0.5s ease forwards;
}

@keyframes fadeInScale-sec {
    from {
        opacity: 0;
        transform: scale(0.98) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .architecture-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .security-detail-view {
        position: static;
        min-height: auto;
        padding: 0;
    }
    .security-card {
        position: relative; /* Stack vertically on mobile */
        top: 0;
        left: 0;
        transform: none !important;
        opacity: 0;
        display: none;
        min-height: auto;
        padding: 40px 30px;
        margin-bottom: 20px;
    }
    .security-card.card-state-0 {
        display: flex;
        opacity: 1;
        animation: fadeInScale-sec 0.5s ease forwards;
    }
    .architecture-main-title,
    .section-title {
        font-size: 32px;
    }
}

/* ============================================================
   Scrollytelling Privacy Section
   ============================================================ */
.scrolly-privacy-section {
    padding: 20vh 0 20vh 0; /* Reduced to 20vh for a tighter layout */
    background-color: #F7F5F0;
    position: relative;
    margin-top: -1px;
}

.scrolly-privacy-section .sticky-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.scrolly-container {
    width: 100%;
}

.scrolly-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding: 0 40px;
}

.scrolly-main-text {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Tightened gap for a more dense look */
    width: 100%;
}

.scrolly-paragraph {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px; /* Space between words */
}

.scrolly-word {
    display: inline-block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 47px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-primary);
    opacity: 0.1;
    filter: blur(8px);
    transform: translateY(10px);
    will-change: opacity, filter, transform;
    /* Elegant blooming transition - 1.0s */
    transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
                filter 1.0s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
    /* Transition Delay is handled by the index assigned in JS */
    transition-delay: 0s;
}

/* Triggered when the container enters the focus zone */
.scrolly-main-text.is-active .scrolly-word {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
    /* Staggered delay for automatic 'one-by-one' random popping */
    transition-delay: calc(var(--word-index, 0) * 0.045s);
}

@media (max-width: 1024px) {
    .scrolly-title { font-size: 60px; }
    .scrolly-body { font-size: 22px; }
}

@media (max-width: 768px) {
    .scrolly-title { font-size: 38px; }
    .scrolly-body { font-size: 18px; }
    .scrolly-privacy-section { height: 300vh; }
}

/* --- Visual High-Density Improvements & New Sections --- */

/* --- New Light Technical Security Section (Reference Based) --- */

.security-architecture.light-theme {
    background-color: #f7f7f7 !important;
    color: #000 !important;
    padding: 160px 0 200px;
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    height: auto !important;
    width: 100%;
    /* 섹션 배경은 깨끗하게 유지 (그리드는 레이아웃에서 확장) */
}

/* 상단 100% 가로선 제거 (사용자 요청: 경계 부분 선 삭제) */
.security-architecture.light-theme::before {
    display: none;
}

/* 하단 100% 가로선 제거 (모눈 정렬을 위해 불필요한 다중 선 정리) */
.security-architecture.light-theme::after {
    display: none;
}

.security-architecture.light-theme .architecture-main-title {
    color: #000;
    text-align: center;
    margin: 0 auto 32px; 
    font-size: 50px;
    min-height: 1.4em;
    width: 100%;
}

.security-architecture.light-theme .architecture-main-sub {
    color: #555;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px; 
    font-size: 20px;
    line-height: 32px;
    min-height: 96px;
    width: 100%;
}


.lang-ko .architecture-main-sub {
    font-size: 19px;
}

#security-architecture {
    position: relative;
    background-color: #fff;
    /* 지저분한 보조선 제거, 깔끔한 40px 대형 격자만 적용 */
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.022) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center top; 
    overflow: hidden;
}

.security-layout-v3 {
    display: grid;
    grid-template-columns: 320px 640px 320px; 
    grid-template-rows: 320px 320px; 
    gap: 0;
    align-items: stretch;
    position: relative;
    z-index: 10;
    margin: 40px auto;
    width: 1280px; 
    height: 640px; 
    box-sizing: border-box;
    border: none;
}

.security-col-v3 {
    display: flex;
    flex-direction: column;
}

.block-v3 {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0 35px; /* 상하 패딩은 자식 선택자에서 별도 관리 */
    box-sizing: border-box;
}

/* 상단 블록: 텍스트를 아래로(가로선 쪽으로) 정렬 */
.block-v3:first-child {
    justify-content: flex-start;
}

/* 하단 블록: 텍스트를 위로(가로선 쪽으로) 정렬 */
.block-v3:last-child {
    justify-content: flex-start;
}

.block-v3 h3 {
    margin-bottom: 12px; /* 타이틀과 본문 사이도 조금 더 밀착 */
    font-size: 23px;
    font-weight: 700;
    color: #000;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.block-v3 p {
    font-size: 16.5px; /* 1px 상향 조정 */
    line-height: 1.6;
    color: #444;
    max-width: 100%;
    word-break: keep-all;
}

/* [영구수리] 그리드 독립 레이어 시스템 - 380/520/380 초정밀 1px형 */
.security-layout-v3 {
    position: relative;
    width: 1280px;
    height: 640px; 
    margin: 40px auto;
    display: grid;
    grid-template-columns: 380px 520px 380px; 
    grid-template-rows: 640px;
    background-color: transparent;
    border: none !important; /* Remove container border to ensure single line consistency with infinity lines */
    box-sizing: border-box;
    z-index: 10;
    /* 렌더링 파이프라인 최적화: 1px 선을 선명하게 유지 */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.center-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
}

.lola-logo-center-img {
    width: 200px;
    max-width: 200px !important;
    height: auto;
    display: block;
    margin: auto;
    transition: transform 0.4s ease;
    z-index: 150;
}

.lola-logo-center-img:hover {
    transform: scale(1.1);
}

/* 수직 구분선들 (380px, 900px 지점으로 이동) */
.grid-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #dcdcdc;
    z-index: 180;
    pointer-events: none;
    opacity: 1; /* 투명도 간섭 방지 */
}
.grid-line-v-edge-left { left: 0; }
.grid-line-v-edge-right { right: 0; }
.grid-line-v-1 { left: 380px; }
.grid-line-v-2 { left: 900px; }

/* 중앙 수평선 (우측 무한 연장) */
.grid-line-h-mid-right {
    position: absolute;
    top: 320px; 
    left: 900px; 
    right: -5000px;
    height: 1px;
    background-color: #dcdcdc;
    z-index: 150;
    pointer-events: none;
}

/* 중앙 수평선 (좌측 무한 연장) */
.grid-line-h-mid-left {
    display: block;
    position: absolute;
    top: 320px; 
    left: -5000px;
    width: 5380px;
    height: 1px;
    background-color: #dcdcdc;
    z-index: 150;
    pointer-events: none;
}

/* 외부 무한 연장 가로선 (상단) */
.security-layout-v3-h-lines-top {
    position: absolute;
    top: -1px;
    left: -5000px;
    right: -5000px;
    height: 1px;
    background-color: #dcdcdc; /* Slightly lighter for thin look */
    z-index: 150;
    pointer-events: none;
}

/* 외부 무한 연장 가로선 (하단) */
.security-layout-v3-h-lines-bottom {
    position: absolute;
    bottom: -1px;
    left: -5000px;
    right: -5000px;
    height: 1px;
    background-color: #dcdcdc;
    z-index: 150;
    pointer-events: none;
    opacity: 1; /* 가로/세로 일관성 확보 */
}

.left-v3, .center-v3, .right-v3 {
    position: relative;
    z-index: 1; 
    display: flex;
    flex-direction: column;
    height: 100%;
}

#security-architecture .center-v3 {
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
}


.orb-interface-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.lola-logo-center {
    width: 216px !important;
    height: 216px !important;
    opacity: 1 !important;
    background-color: #000 !important;
    mask-size: contain;
    -webkit-mask-size: contain;
    display: flex; /* 내부 요소 정렬을 위해 flex 변경 */
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    position: relative;
    z-index: 100;
}
/* Old pieces logic removed to prevent visual interference */

.security-col-v3 {
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}

.left-v3 {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}



.right-v3 {
    position: relative;
    display: grid;
    grid-template-rows: 1fr 1fr;
    height: 100%;
}



.block-v3 {
    padding: 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 320px; /* 8칸 고정 */
    box-sizing: border-box;
}

.block-v3:first-child {
    border-bottom: none;
}

.block-v3 h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0; /* min-height로 공간을 제어하여 본문 위치 고정 */
    color: #000;
    letter-spacing: -0.02em;
    min-height: 55px; /* 사용자 요청: 55px로 다시 조정 */
    line-height: 1.2;
    display: flex;
    align-items: center; /* 한 줄일 때 중앙 정렬하여 시각적 여백 확보 */
}

.block-v3 p {
    font-size: 16px;
    line-height: 26px; /* 고정 줄간격 */
    color: #666;
    margin: 0;
}

/* Center Canvas with Grid */
/* 중복 정의 제거 완료 */

/* Old staggered logo styles removed */

/* Responsive */
@media (max-width: 1100px) {
    .security-layout-v3 {
        grid-template-columns: 1fr;
    }
    .left-v3, .right-v3 {
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .center-v3 {
        height: 350px;
        order: -1;
    }
}

/* Workflow Automation Section (Reference Image 2 Style) */
.workflow-section {
    padding: 160px 0;
    background-color: #0d0d0d;
    color: var(--text-white);
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.workflow-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 120px;
    align-items: start;
    position: relative;
    z-index: 10;
}

.workflow-left h2 {
    font-size: 48px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 32px;
    letter-spacing: -0.03em;
    color: #fff;
}

.workflow-left p {
    font-size: 21px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 520px;
    font-weight: 300;
}

.workflow-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.workflow-item {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    padding: 38px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.3s ease;
}

.workflow-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.workflow-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.workflow-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
}

.icon-blue { 
    background: rgba(0, 122, 255, 0.12); 
    color: #007AFF; 
    border: 1px solid rgba(0, 122, 255, 0.2); 
    filter: drop-shadow(0 0 10px rgba(0, 122, 255, 0.3));
}
.icon-green { 
    background: rgba(52, 199, 89, 0.12); 
    color: #34C759; 
    border: 1px solid rgba(52, 199, 89, 0.2); 
    filter: drop-shadow(0 0 10px rgba(52, 199, 89, 0.3));
}
.icon-amber { 
    background: rgba(255, 159, 10, 0.12); 
    color: #FF9F0A; 
    border: 1px solid rgba(255, 159, 10, 0.2); 
    filter: drop-shadow(0 0 10px rgba(255, 159, 10, 0.3));
}

.workflow-info h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.workflow-info p {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
    .security-grid-revised, .workflow-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .workflow-left h2 { font-size: 36px; }
    .workflow-item:hover { transform: translateY(-5px); }
}

/* --- Anthropic-Style Value Section (Reference Layout) --- */
.lola-value-section {
    background-color: #f0eee9 !important;
    padding: 160px 0;
    color: #1a1a1a;
    border-top: 1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.value-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 80px;
}

.value-title-col {
    flex: 1.2;
}

.value-body-col {
    flex: 0.8;
}

.value-heading {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: #111;
}

.value-description {
    font-size: 20px; /* Unified with hero standard */
    line-height: 1.5;
    color: #333;
}

@media (max-width: 768px) {
    .value-inner {
        flex-direction: column;
        gap: 40px;
    }
    .value-heading { font-size: 36px; } /* Standardized Section Mobile Size */
}

/* ==========================================================================
   Next-Gen Workflow Automation (Unified System Style)
   ========================================================================== */
.workflow-section-v2 {
    background-color: #f0eee9; /* Unified Beige Theme */
    padding: 160px 0 120px 0 !important; /* Added bottom padding for breathing room */
    height: auto !important; /* Allow natural height with padding */
    min-height: 900px;
    margin-bottom: 0 !important;
    overflow: visible; 
    color: var(--text-primary);
    font-family: var(--font-sans);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.workflow-container-v2 {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.workflow-left-v2 {
    flex: 1.2; /* Unified ratio with Value section */
    position: sticky;
    top: 120px;
}

.workflow-title-v2 {
    font-size: 40px; /* Standardized Section Headline */
    font-weight: 400; /* One level lower: 500 -> 400 */
    line-height: 1.35;
    letter-spacing: -0.03em;
    color: #000;
    margin-bottom: 24px;
    word-break: keep-all; 
    overflow-wrap: break-word;
}

.workflow-desc-v2 {
    font-size: 20px; /* Standardized to Hero size */
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 650px;
    word-break: keep-all; 
    overflow-wrap: break-word;
}

.workflow-right-v2 {
    flex: 0.8; /* Unified ratio with Value section */
}

.workflow-list-v2 {
    display: flex;
    flex-direction: column;
    height: 600px !important; /* Slimmer fixed height for list area */
}

.workflow-item-v2 {
    display: flex;
    align-items: center;
    padding: 36px 0;
    min-height: 130px; /* Adjusted for a tighter, more optimized layout */
    border-bottom: 1px solid rgba(0,0,0,0.08);
    cursor: pointer;
    transition: all 0.3s ease;
}

.workflow-item-v2:first-child {
    padding-top: 0;
}

.workflow-item-v2:last-child {
    border-bottom: none;
}

.workflow-item-v2:hover {
    transform: translateX(12px);
}

/* Duplicate definition removed */

.workflow-icon-v2 svg {
    width: 34px;
    height: 34px;
    stroke-width: 1.5;
    z-index: 2;
}

.workflow-item-v2:hover .workflow-icon-v2 {
    transform: translateY(-3px);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: none !important;
}

.workflow-icon-v2 {
    width: 72px !important;
    height: 72px !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 32px !important;
    flex-shrink: 0 !important;
    background: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    color: #1d1d1f !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: none !important;
    transition: all 0.4s ease;
}

.icon-bg-green, .icon-bg-purple, .icon-bg-amber, .icon-bg-blue, .icon-bg-indigo, .icon-bg-red { 
    background: rgba(255, 255, 255, 0.3) !important;
    color: #1d1d1f !important;
}

.workflow-info-v2 { flex: 1; }
.workflow-info-v2 h3 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #000;
}
.workflow-info-v2 p {
    font-size: 17px;
    color: #555;
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.workflow-arrow-v2 {
    margin-left: 24px;
    color: #bbb;
    transition: all 0.3s ease;
}

.workflow-item-v2:hover .workflow-arrow-v2 {
    color: #000;
    transform: translateX(6px);
}

@media (max-width: 768px) {
    .workflow-container-v2 { 
        flex-direction: column; 
        gap: 60px; 
    }
    .workflow-left-v2 { position: static; }
    .workflow-title-v2 { font-size: 36px; } /* Standardized Section Mobile Size */
}

/* --- Final CTA Section V2 (Global Premium Style) --- */
.final-cta-section {
    background-color: #000;
    padding: 196px 0 280px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.cta-container-v2 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.cta-heading-v2 {
    font-size: 48px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.03em;
    margin-bottom: 48px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.cta-link-group {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.cta-link {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
}

.cta-link:hover {
    border-bottom-color: #fff;
    gap: 12px;
}

.cta-link .arrow {
    font-size: 20px;
    transition: transform 0.3s ease;
}

/* --- Brand Logo Interaction Section (Fixed) --- */
.brand-logo-interaction-section {
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    overflow: hidden;
    cursor: default;
}

/* --- NEW AUDIT SECTION (BENTO GRID STYLE) --- */
.audit-bento-section {
    padding: 160px 0;
    background: #000;
}

.bento-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 80px;
}

.bento-title-box {
    flex: 1;
}

.bento-main-title {
    font-size: 40px;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #fff;
    line-height: 1.35;
}

.bento-desc-box {
    flex: 1.2;
}

.bento-main-desc {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

/* Bento Grid System */
.bento-grid-v2 {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: auto auto; /* Allow cards to have their own natural height */
    gap: 12px;
}

.bento-card-v2 {
    border-radius: 40px;
    padding: 48px 48px 56px; /* Reduced top padding from 56px to 48px */
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%; /* Stretch to fill grid cell */
    justify-content: flex-start;
}

.card-span-2 {
    grid-column: span 2;
}

.card-tall {
    grid-row: span 2;
    position: relative; /* Base for absolute positioning of text */
}

/* Colors from Image */
.card-sky-blue { background-color: #c5e9f6; color: #000; }
.card-white { background-color: #ffffff; color: #000; }
.card-green { background-color: #d1e8c1; color: #000; }
.card-pink { background-color: #f7ced4; color: #000; }

.card-tag-v2 {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.4);
}

.card-tag-v2.dark {
    color: rgba(0, 0, 0, 0.6);
}

.card-footer-v2 {
    margin-top: auto; /* Pushes footer to the bottom */
    padding-top: 40px; /* Minimum gap from visual content above */
}

/* Precisely control white card's footer position to be closer to graphic */
.card-white .card-footer-v2 {
    margin-top: auto;
    padding-top: 32px; 
}

.card-footer-v2 p {
    font-size: 1.08rem; /* Reduced by 1px equivalent (1.15rem -> 1.08rem) */
    font-weight: 400;
    line-height: 1.5;
    opacity: 0.85; 
    word-break: keep-all;
}

/* Visual: Timeline (Sky Blue Card) */
.timeline-visual-v2 {
    position: relative;
    height: 120px;
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.timeline-line-v2 {
    position: absolute;
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.timeline-dot-v2 {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 50%;
    transform: translateX(-50%);
}

.timeline-dot-v2::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.dot-label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Visual: Circular Ecosystem (White Card) */
.circular-visual-v2 {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}

.circle-outer-v2 {
    width: 220px;
    height: 220px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(0,0,0,0.02) 0%, transparent 70%);
}

.circle-mid-v2 {
    width: 140px;
    height: 140px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-inner-v2 {
    width: 70px;
    height: 70px;
    background: #000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.circle-point-v2 {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
}

.circle-point-v2::before {
    content: attr(class);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 700;
}

.circle-point-v2.p1 { top: 10%; left: 50%; transform: translateX(-50%); }
.circle-point-v2.p2 { top: 70%; left: 15%; }
.circle-point-v2.p3 { top: 70%; right: 15%; }

/* Visual: Token List (Green/Pink Cards) */
.token-list-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.bento-token {
    padding: 10px 20px;
    background: #fff;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.bento-token.white {
    background: rgba(255, 255, 255, 0.6);
}

.card-tag-v2.bento-title-match {
    font-size: 1.15rem; /* Increased by 2px equivalent as requested */
    font-weight: 700;
    color: #000;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    opacity: 1; /* Full opacity for better clarity */
}

.history-curved-visual {
    margin: 40px 0 0; /* Standardized spacing */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.history-curved-visual svg {
    width: 100%;
}

.relative-card {
    position: relative;
}

.bento-custom-icon-tr {
    position: absolute;
    top: 30px;
    right: 30px;
    opacity: 0.6;
}

.bento-spacer-v2 {
    height: 120px;
}

@media (max-width: 1024px) {
    .bento-grid-v2 {
        grid-template-columns: 1fr;
    }
    .card-span-2, .card-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
    .bento-header-v2 {
        flex-direction: column;
        gap: 24px;
    }
}

/* CTA Form Grid CSS */
.cta-form-wrapper {
    max-width: 1000px;
    margin: 100px auto 0;
}
.cta-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 50px;
}
.cta-form-group {
    position: relative;
}
.cta-input, .cta-select {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 18px;
    padding: 16px 0;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
    box-sizing: border-box;
    border-radius: 0;
}
.cta-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}
.cta-input:focus, .cta-select:focus {
    border-color: rgba(255, 255, 255, 0.8);
}
.cta-input.is-invalid {
    border-bottom-color: #ff4d4f !important;
    color: #ff4d4f;
}
.cta-error-msg {
    color: #ff4d4f;
    font-size: 13px;
    position: absolute;
    bottom: -22px;
    left: 0;
}
.cta-select {
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.cta-select option {
    background: #111;
    color: #fff;
}
.cta-select-wrapper {
    position: relative;
}
.cta-select-wrapper::after {
    content: '▼';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    pointer-events: none;
}
.cta-submit-btn {
    background: #F7F5F0;
    color: #111;
    border: none;
    border-radius: 40px;
    padding: 18px 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    display: inline-block;
}
.cta-submit-btn:hover {
    background: #e5e1d8;
    transform: translateY(-2px);
}
.cta-submit-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #F7F5F0;
}
.cta-submit-btn:disabled:hover {
    transform: none;
    background: #F7F5F0;
}
.cta-submit-wrapper {
    text-align: center;
    margin-top: 100px;
}

@media (max-width: 768px) {
    .cta-form-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* --- FAQ Section --- */
.faq-section {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    padding: 160px 0 200px 0;
    font-family: var(--font-sans);
    position: relative;
    overflow: hidden;
}

.faq-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--padding-x);
    position: relative;
    z-index: 2;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.faq-header h2 {
    font-size: 40px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 24px;
    letter-spacing: -0.02em;
}

.faq-header p {
    font-size: 20px;
    line-height: 32px;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
}

.faq-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 24px;
    align-items: start;
}

/* Base style for all FAQ cards to match Trust Section (.card) */
.faq-support-card, .faq-stat-card, .faq-contact-card, .faq-accordion-item {
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.faq-support-card:hover, .faq-stat-card:hover, .faq-contact-card:hover {
    transform: translateY(-8px);
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
}

/* Sidebar Styling */
.faq-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-support-card {
    padding: 60px 40px;
    text-align: center;
}

.faq-support-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 48px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-support-icon svg {
    width: 100%;
    height: 100%;
    stroke: var(--text-primary);
}

.faq-support-text {
    margin-bottom: 28px;
    word-break: keep-all;
}

.faq-main-text {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.faq-sub-text {
    display: block;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-secondary);
}

.faq-support-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-support-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.5);
    padding: 16px 24px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.faq-support-link:hover {
    background: rgba(0, 0, 0, 0.05);
}

.link-icon {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
}

.faq-stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.faq-stat-card {
    padding: 42px 28px;
    text-align: center;
    min-height: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq-stat-card h4 {
    font-size: clamp(24px, 2.4vw, 44px);
    line-height: 1.08;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 16px;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.faq-stat-card p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 280px;
    margin: 0 auto;
}

.faq-contact-card {
    padding: 60px 40px;
    text-align: center;
    color: var(--text-primary);
}

.faq-contact-card .faq-support-text {
    margin-bottom: 32px;
}

.faq-contact-btn {
    width: 100%;
    background: var(--text-primary);
    color: var(--bg-primary);
    border: none;
    padding: 18px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-contact-btn:hover {
    opacity: 0.8;
}

/* Accordion Styling */
.faq-accordion-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-accordion-item {
    overflow: hidden;
}

.faq-accordion-header {
    display: flex;
    align-items: center;
    padding: 32px 40px;
    cursor: pointer;
    user-select: none;
}

.faq-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    margin-right: 24px;
    transition: all 0.3s ease;
}

.faq-accordion-header h3 {
    flex: 1;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    padding-right: 20px;
    line-height: 1.4;
}

.faq-toggle-btn {
    background: rgba(0, 0, 0, 0.05);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
}

.faq-accordion-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-accordion-inner {
    padding: 0 40px 40px 112px;
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.8;
}

/* Active State */
.faq-accordion-item.active {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    background-color: rgba(255, 255, 255, 0.4);
}

.faq-accordion-item.active .faq-number,
.faq-accordion-item.active .faq-toggle-btn {
    background: var(--text-primary);
    color: var(--bg-primary);
}

.faq-accordion-item.active .faq-toggle-btn svg {
    transform: rotate(180deg);
}

.faq-accordion-item.active .faq-accordion-content {
    max-height: 800px;
    opacity: 1;
}

/* Mobile Responsiveness */
@media screen and (max-width: 900px) {
    .faq-grid {
        grid-template-columns: 1fr;
    }
    .faq-sidebar {
        order: 2;
    }
    .faq-accordion-list {
        order: 1;
    }
    .faq-stats-row {
        grid-template-columns: 1fr;
    }
    .faq-accordion-inner {
        padding: 0 30px 30px 30px;
    }
    .faq-accordion-header {
        padding: 24px 30px;
    }
    .faq-support-card, .faq-stat-card, .faq-contact-card {
        padding: 40px 30px;
    }
    .faq-header h2 {
        font-size: 32px;
    }
}


/* --- Expanded Product / Resources Sections (Original Style Compatible) --- */
.landing-depth-section {
    position: relative;
    padding: 150px 0;
    overflow: hidden;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.landing-depth-section::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 89, 255, 0.06) 0%, transparent 70%);
    top: 8%;
    right: -120px;
    pointer-events: none;
}
.landing-depth-section::after {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 127, 106, 0.06) 0%, transparent 70%);
    bottom: 0;
    left: -100px;
    pointer-events: none;
}
.landing-depth-section .container { position: relative; z-index: 2; }
.depth-header { max-width: 920px; margin-bottom: 70px; }
.depth-header.split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 80px; max-width: none; align-items: end; }
.depth-eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(0,0,0,0.45); margin-bottom: 20px; }
.depth-header h2, .access-path-copy h2 { font-size: 44px; line-height: 1.18; letter-spacing: -0.035em; font-weight: 500; margin: 0 0 24px; }
.depth-header p, .access-path-copy p { font-size: 20px; line-height: 1.65; color: var(--text-secondary); margin: 0; word-break: keep-all; }
.depth-card-grid { display: grid; gap: 24px; }
.depth-card-grid.three { grid-template-columns: repeat(3, 1fr); }
.depth-card {
    border-radius: 32px;
    padding: 46px 38px;
    min-height: 430px;
    background: rgba(255,255,255,0.32);
    border: 1px solid rgba(255,255,255,0.58);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.depth-card:hover, .resource-card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px rgba(0,0,0,0.09); }
.depth-card-label { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0,0,0,0.48); margin-bottom: 24px; }
.depth-card h3 { font-size: 25px; line-height: 1.26; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 20px; }
.depth-card p { color: rgba(0,0,0,0.68); font-size: 17px; line-height: 1.62; margin-bottom: 28px; }
.depth-card ul { margin: 0; padding-left: 18px; color: rgba(0,0,0,0.7); font-size: 15px; line-height: 1.8; }
.soft-green { background: rgba(209,232,193,0.72); }
.soft-blue { background: rgba(197,233,246,0.72); }
.soft-pink { background: rgba(247,206,212,0.72); }
.how-it-works-section { background: #000; color: #fff; }
.how-it-works-section::before { background: radial-gradient(circle, rgba(197,233,246,0.10) 0%, transparent 70%); }
.how-it-works-section::after { background: radial-gradient(circle, rgba(247,206,212,0.10) 0%, transparent 70%); }
.how-it-works-section .depth-eyebrow { color: rgba(255,255,255,0.5); }
.how-it-works-section .depth-header p { color: rgba(255,255,255,0.62); }
.process-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.process-step {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    border-radius: 28px;
    padding: 36px 28px 42px;
    min-height: 310px;
}
.process-step span { color: rgba(255,255,255,0.4); font-size: 13px; font-weight: 700; letter-spacing: 0.16em; }
.process-step h3 { margin: 28px 0 16px; font-size: 22px; line-height: 1.3; font-weight: 600; }
.process-step p { margin: 0; color: rgba(255,255,255,0.66); font-size: 16px; line-height: 1.65; }
.resources-hub-section { background: #f7f7f2; }
.resource-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.resource-card {
    text-decoration: none;
    color: #000;
    border-radius: 28px;
    padding: 38px 30px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.48);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: 0 22px 60px rgba(0,0,0,0.05);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resource-icon { display: inline-flex; width: 54px; height: 54px; align-items: center; justify-content: center; border-radius: 50%; background: #000; color: #fff; font-size: 22px; margin-bottom: 30px; }
.resource-card h3 { font-size: 22px; line-height: 1.32; margin: 0 0 16px; letter-spacing: -0.02em; }
.resource-card p { color: rgba(0,0,0,0.62); line-height: 1.62; font-size: 16px; margin: 0 0 28px; }
.resource-card em { margin-top: auto; font-style: normal; font-weight: 700; font-size: 15px; }
.access-path-section { background: #000; color: #fff; padding: 150px 0 130px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.access-path-section .depth-eyebrow { color: rgba(255,255,255,0.48); }
.access-path-copy p { color: rgba(255,255,255,0.65); }
.access-path-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: start; }
.access-path-panel { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.access-item { border-radius: 24px; padding: 30px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); min-height: 160px; }
.access-item strong { display: block; font-size: 20px; margin-bottom: 14px; }
.access-item span { display: block; color: rgba(255,255,255,0.65); line-height: 1.55; }
.btn-minimal.secondary-outline { margin-left: 0; border-bottom-color: rgba(17,17,17,0.3); color: rgba(17,17,17,0.85); }
/* Resource pages */
.resource-page { background: var(--bg-primary); color: var(--text-primary); padding: 140px 0 160px; }
.resource-page-hero { padding-top: 220px; padding-bottom: 90px; background: #000; color: #fff; }
.resource-page-hero h1 { font-size: 56px; line-height: 1.1; letter-spacing: -0.04em; max-width: 920px; margin: 0 0 28px; }
.resource-page-hero p { font-size: 20px; line-height: 1.65; color: rgba(255,255,255,0.66); max-width: 780px; }
.video-placeholder { border-radius: 36px; background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.04)); border: 1px solid rgba(255,255,255,0.16); min-height: 460px; display: flex; align-items: center; justify-content: center; margin-top: 70px; position: relative; overflow: hidden; }
.video-placeholder::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(197,233,246,0.18), transparent 60%); }
.video-placeholder.video-player-wrap {
    min-height: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    background: #050505;
    align-items: stretch;
}
.video-placeholder.video-player-wrap::before { display: none; }
.official-video-player {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
    border: 0;
    position: relative;
    z-index: 1;
}
.play-circle { width: 110px; height: 110px; border-radius: 50%; background: #fff; color: #000; display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; z-index: 2; }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.guide-card { border-radius: 30px; padding: 36px; min-height: 260px; background: rgba(255,255,255,0.38); border: 1px solid rgba(255,255,255,0.58); box-shadow: 0 22px 60px rgba(0,0,0,0.05); }
.guide-card h3 { font-size: 23px; line-height: 1.3; margin: 0 0 14px; }
.guide-card p { color: rgba(0,0,0,0.62); font-size: 16px; line-height: 1.62; }
.download-list { display: grid; gap: 18px; max-width: 900px; }
.download-row { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 30px 34px; border-radius: 24px; background: rgba(255,255,255,0.48); border: 1px solid rgba(255,255,255,0.7); text-decoration: none; color: #000; }
.download-copy { min-width: 0; }
.download-row strong { font-size: 20px; }
.download-copy span { color: rgba(0,0,0,0.55); line-height: 1.55; display: block; margin-top: 6px; }
.download-row em,
.download-trigger,
.download-lang-btn,
.download-langs-close {
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
    color: #000;
    text-decoration: none;
}
.download-actions { display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; }
.download-trigger,
.download-langs-close {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.download-langs { display: none; align-items: center; gap: 18px; }
.download-row.is-choosing .download-trigger { display: none; }
.download-row.is-choosing .download-langs { display: flex; }
.download-langs-label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(0,0,0,0.45);
    white-space: nowrap;
}
.download-lang-pills { display: flex; align-items: center; gap: 18px; }
.download-langs-close { color: rgba(0,0,0,0.4); font-size: 18px; line-height: 1; }
.download-langs-close::before { content: '×'; }
@media (max-width: 1024px) {
    .depth-card-grid.three, .process-rail, .resource-grid, .guide-grid, .access-path-wrap, .access-path-panel { grid-template-columns: 1fr; }
    .depth-header.split { grid-template-columns: 1fr; gap: 30px; }
    .resource-page-hero h1 { font-size: 42px; }
    .hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
    .btn-minimal.secondary-outline { margin-left: 0; }
}

/* ============================================================
   Responsive header / mobile navigation fixes (2026 update)
   Keeps original visual style while preventing CTA overflow.
   ============================================================ */
.logo { text-decoration: none; color: inherit; flex-shrink: 0; }
header.transparent .logo { color: #111111 !important; }
header.scrolled .logo { color: var(--text-primary); }
/* Keep the wordmark visible after scroll; do not collapse it to an invisible symbol. */
.logo.scrolled-mode .logo-symbol { width: 0 !important; opacity: 0 !important; }
.logo.scrolled-mode .logo-text { width: auto !important; opacity: 1 !important; overflow: visible !important; }

.mobile-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(255,255,255,0.12);
    color: currentColor;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background 0.25s ease, border-color 0.25s ease;
}
.mobile-menu-toggle span {
    display: block;
    width: 19px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
header.scrolled .mobile-menu-toggle {
    border-color: rgba(0,0,0,0.12);
    background: rgba(0,0,0,0.04);
}
.mobile-menu-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
.mobile-menu-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-panel {
    display: none;
    position: absolute;
    left: 16px;
    right: 16px;
    top: calc(100% + 8px);
    border-radius: 20px;
    background: rgba(18,18,18,0.94);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 24px 70px rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    overflow: hidden;
}
header.scrolled .mobile-menu-panel {
    background: rgba(255,255,255,0.96);
    border-color: rgba(0,0,0,0.08);
}
.mobile-menu-open .mobile-menu-panel { display: block; }
.mobile-menu-inner { display: grid; gap: 0; padding: 10px; }
.mobile-menu-inner a,
.mobile-menu-inner button {
    color: #fff;
    text-decoration: none;
    border: 0;
    background: transparent;
    padding: 15px 16px;
    border-radius: 14px;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}
header.scrolled .mobile-menu-inner a,
header.scrolled .mobile-menu-inner button { color: var(--text-primary); }
.mobile-menu-inner a:hover,
.mobile-menu-inner button:hover { background: rgba(255,255,255,0.10); opacity: 1; }
header.scrolled .mobile-menu-inner a:hover,
header.scrolled .mobile-menu-inner button:hover { background: rgba(0,0,0,0.05); }
.mobile-lang-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
header.scrolled .mobile-lang-row { border-top-color: rgba(0,0,0,0.08); }

.video-placeholder-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 24px;
    max-width: 420px;
    color: #fff;
}
.video-placeholder-copy strong { font-size: 22px; line-height: 1.25; }
.video-placeholder-copy span { color: rgba(255,255,255,0.62); line-height: 1.5; }
.rich-guide-grid { grid-template-columns: repeat(3, 1fr); }
.resource-note { margin-top: 34px; color: rgba(0,0,0,0.55); font-size: 15px; line-height: 1.65; max-width: 900px; }

@media (max-width: 1024px) {
    header { padding: 18px 0; }
    header .container { max-width: none; }
    .btn-try { min-width: 178px; padding: 0 16px; }
}

@media (max-width: 768px) {
    header { padding: 14px 0; }
    header .container { padding: 0 18px; gap: 12px; }
    .main-nav, .nav-right { display: none !important; }
    .mobile-menu-toggle { display: flex; margin-left: auto; }
    .logo-text { font-size: 1.05rem; letter-spacing: 0.12em; }
    .hero-fullscreen { min-height: 100svh; height: auto; }
    .hero-content-main {
        margin: 0 auto;
        padding: 158px 24px 80px;
        max-width: none;
    }
    .hero-main-headline {
        font-size: clamp(38px, 11.6vw, 58px);
        line-height: 1.16;
        max-width: 100%;
        margin-bottom: 28px;
    }
    .hero-main-description {
        font-size: 17px;
        line-height: 1.7;
        max-width: 100%;
        margin-bottom: 34px;
    }
    .hero-actions { gap: 16px; align-items: flex-start; }
    .btn-minimal { font-size: 16px; }
    .scroll-indicator { display: none; }
    .video-placeholder { min-height: 320px; flex-direction: column; gap: 22px; text-align: center; padding: 34px 22px; }
    .video-placeholder.video-player-wrap { min-height: 0; padding: 0; flex-direction: row; text-align: inherit; }
    .video-placeholder-copy { margin-left: 0; }
    .play-circle { width: 86px; height: 86px; font-size: 28px; }
    .resource-page-hero { padding-top: 150px; padding-bottom: 70px; }
    .resource-page-hero h1 { font-size: 38px; }
    .resource-page-hero p { font-size: 17px; }
    .download-row { flex-direction: column; align-items: flex-start; }
    .download-actions { width: 100%; min-width: 0; justify-content: flex-start; }
    .download-langs { width: 100%; flex-wrap: wrap; }
    .download-langs-label { width: 100%; }
    .rich-guide-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .logo-text { font-size: 0.95rem; letter-spacing: 0.10em; }
    .hero-content-main { padding-top: 144px; }
    .hero-main-headline { font-size: clamp(34px, 11vw, 48px); }
}


/* Expanded footer with company information */
.site-footer-expanded {
    background: #050505;
    color: rgba(255,255,255,0.72);
    padding: 96px 0 48px;
    border-top: 1px solid rgba(255,255,255,0.10);
}
.footer-action-band {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    padding-bottom: 54px;
    margin-bottom: 54px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}
.footer-eyebrow {
    display: block;
    color: rgba(255,255,255,0.45);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: 18px;
}
.footer-action-band h2 {
    color: #fff;
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.02;
    letter-spacing: -0.045em;
    margin: 0 0 18px;
    font-weight: 500;
}
.footer-action-band p {
    max-width: 680px;
    margin: 0;
    color: rgba(255,255,255,0.62);
    line-height: 1.7;
    font-size: 15px;
}
.footer-action-links {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 220px;
}
.footer-action-links a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.28);
    padding-bottom: 10px;
    font-size: 14px;
}
.footer-grid-expanded {
    display: grid;
    grid-template-columns: 1.25fr repeat(4, minmax(0, 1fr));
    gap: 36px;
    margin-bottom: 48px;
}
.footer-column h3 {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin: 0 0 20px;
}
.footer-column a,
.footer-column span,
.footer-column p {
    display: block;
    color: rgba(255,255,255,0.60);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 12px;
}
.footer-column a:hover { color: #fff; }
.footer-logo {
    display: inline-flex;
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.15em;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 18px;
}
.footer-brand-column p { max-width: 350px; }
.footer-company-box {
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 22px;
    padding: 28px;
    background: rgba(255,255,255,0.035);
    margin-bottom: 34px;
}
.footer-company-heading {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 20px;
}
.footer-company-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
.footer-company-grid strong {
    display: block;
    color: rgba(255,255,255,0.38);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.footer-company-grid span {
    display: block;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.55;
}
.footer-company-grid a {
    color: inherit;
    text-decoration: none;
}
.footer-company-grid a:hover { text-decoration: underline; }
.footer-company-note {
    margin: 24px 0 0;
    color: rgba(255,255,255,0.48);
    font-size: 12px;
    line-height: 1.7;
}
.footer-bottom-expanded {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255,255,255,0.36);
    font-size: 12px;
    line-height: 1.5;
}
.legal-page-hero { padding: 190px 0 92px; min-height: auto; }
.legal-page-content { padding-top: 72px; }
.legal-info-grid { margin-top: 0; }
.legal-info-grid .guide-card p { min-height: 0; }
@media (max-width: 1100px) {
    .footer-action-band { flex-direction: column; align-items: flex-start; }
    .footer-grid-expanded { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .site-footer-expanded { padding: 70px 0 36px; }
    .footer-grid-expanded { grid-template-columns: 1fr; }
    .footer-company-grid { grid-template-columns: 1fr; }
    .footer-bottom-expanded { flex-direction: column; }
    .footer-action-links { width: 100%; }
}

/* ============================================================
   Expanded content density fixes for resource/legal/sub pages
   ============================================================ */
.rich-text-block {
  margin-top: 42px;
  padding: 42px;
  border-radius: 32px;
  background: rgba(255,255,255,0.42);
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow: 0 22px 60px rgba(0,0,0,0.05);
}
.rich-text-block h2,
.rich-text-block h3 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
.rich-text-block p {
  color: rgba(0,0,0,0.68);
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 18px;
}
.rich-bullet-list,
.guide-card ul,
.resource-card ul,
.depth-card ul,
.process-step ul,
.access-item ul {
  margin: 18px 0 0;
  padding-left: 18px;
  color: rgba(0,0,0,0.66);
  font-size: 15px;
  line-height: 1.72;
}
.process-step ul,
.access-item ul {
  color: rgba(255,255,255,0.64);
}
.process-step li,
.access-item li,
.guide-card li { margin-bottom: 8px; }
.guide-card p + p { margin-top: 14px; }
.guide-card .card-subnote {
  display: block;
  margin-top: 18px;
  color: rgba(0,0,0,0.5);
  font-size: 13px;
  line-height: 1.6;
}
.detail-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.detail-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 28px;
}
.info-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.info-pill-row span {
  border-radius: 999px;
  padding: 8px 12px;
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.62);
  font-size: 13px;
  font-weight: 600;
}
.resource-page .cta-link-group { flex-wrap: wrap; }
.legal-page-content .guide-card { min-height: 320px; }
@media (max-width: 860px) {
  .legal-page-content { padding-top: 48px; }
  .detail-grid-2,
  .detail-grid-3 { grid-template-columns: 1fr; }
  .rich-text-block { padding: 28px; }
  .legal-page-content .guide-card { min-height: auto; }
}

/* ============================================================
   Header beta access dropdown refinements (compact sitemap menu)
   ============================================================ */
.nav-action-menu {
    position: relative;
    display: flex;
    align-items: center;
}

.btn-try.nav-action-btn {
    min-width: auto;
    width: auto;
    padding: 0 13px;
    height: 44px;
    gap: 8px;
    white-space: nowrap;
    cursor: pointer;
}

.nav-action-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 260px;
    max-width: min(320px, calc(100vw - 32px));
    padding: 10px;
    border-radius: 18px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    z-index: 2000;
}

.nav-action-menu:hover .nav-action-dropdown,
.nav-action-menu:focus-within .nav-action-dropdown,
.nav-action-menu.open .nav-action-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.nav-action-dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding: 9px 12px;
    color: rgba(255, 255, 255, 0.82);
    border-radius: 12px;
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
    transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.nav-action-dropdown a::after {
    content: '→';
    opacity: 0.38;
    margin-left: 16px;
    font-size: 13px;
}

.nav-action-dropdown a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
    opacity: 1;
}

header.scrolled .nav-action-dropdown {
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
}

header.scrolled .nav-action-dropdown a {
    color: rgba(0, 0, 0, 0.72);
}

header.scrolled .nav-action-dropdown a:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.05);
}

@media (max-width: 1024px) {
    .btn-try.nav-action-btn { padding: 0 12px; min-width: auto; }
}

@media (max-width: 768px) {
    .nav-action-menu { display: none; }
    .mobile-menu-inner a { display: flex; align-items: center; justify-content: space-between; }
    .mobile-menu-inner a::after { content: '→'; opacity: 0.35; font-size: 13px; }
}

/* ============================================================
   Adaptive active section label and surface-aware sitemap dropdown
   ============================================================ */
.nav-action-current-label {
    display: inline-block;
    max-width: 164px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-action-dropdown a.is-current {
    font-weight: 700;
}

.nav-action-menu.dropdown-dark .nav-action-dropdown {
    background: rgba(18, 18, 18, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34) !important;
}

.nav-action-menu.dropdown-dark .nav-action-dropdown a {
    color: rgba(255, 255, 255, 0.82) !important;
}

.nav-action-menu.dropdown-dark .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-dark .nav-action-dropdown a.is-current {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

.nav-action-menu.dropdown-dark .nav-action-dropdown a.is-current::before {
    background: rgba(255, 255, 255, 0.74);
}

.nav-action-menu.dropdown-light .nav-action-dropdown {
    background: rgba(255, 255, 255, 0.96) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16) !important;
}

.nav-action-menu.dropdown-light .nav-action-dropdown a {
    color: rgba(0, 0, 0, 0.74) !important;
}

.nav-action-menu.dropdown-light .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-light .nav-action-dropdown a.is-current {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.055) !important;
}

.nav-action-menu.dropdown-light .nav-action-dropdown a.is-current::before {
    background: rgba(0, 0, 0, 0.72);
}

.nav-action-dropdown a.is-current {
    position: relative;
}

.nav-action-dropdown a.is-current::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    margin-right: 8px;
    flex: 0 0 auto;
}

@media (max-width: 1180px) {
    .nav-action-current-label { max-width: 132px; }
}

/* ============================================================
   Dropdown stability + unified adaptive menu colors
   Fixes hover gap closing and keeps language / sitemap menus visually consistent.
   ============================================================ */
.lang-selector,
.nav-action-menu {
    position: relative;
}

/* Invisible hover bridge between the button and dropdown. */
.lang-selector::before,
.nav-action-menu::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    height: 16px;
    z-index: 1998;
    pointer-events: auto;
}
.lang-selector::before {
    left: 0;
}
.nav-action-menu::before {
    width: max(100%, 290px);
}

/* Make both dropdowns stay open while hovering/focusing or while JS-open. */
.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown,
.lang-selector.open .lang-dropdown,
.nav-action-menu:hover .nav-action-dropdown,
.nav-action-menu:focus-within .nav-action-dropdown,
.nav-action-menu.open .nav-action-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown,
.lang-selector.open .lang-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

/* Unify dropdown surface styling. Theme is applied by JS according to the current header surface. */
.lang-dropdown,
.nav-action-dropdown {
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease !important;
}

.lang-selector.dropdown-dark .lang-dropdown,
.nav-action-menu.dropdown-dark .nav-action-dropdown {
    background: rgba(18, 18, 18, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a,
.nav-action-menu.dropdown-dark .nav-action-dropdown a {
    color: rgba(255, 255, 255, 0.82) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a:hover,
.lang-selector.dropdown-dark .lang-dropdown a.is-current,
.nav-action-menu.dropdown-dark .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-dark .nav-action-dropdown a.is-current {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.10) !important;
}

.lang-selector.dropdown-light .lang-dropdown,
.nav-action-menu.dropdown-light .nav-action-dropdown {
    background: rgba(255, 255, 255, 0.97) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.16) !important;
}
.lang-selector.dropdown-light .lang-dropdown a,
.nav-action-menu.dropdown-light .nav-action-dropdown a {
    color: rgba(0, 0, 0, 0.74) !important;
}
.lang-selector.dropdown-light .lang-dropdown a:hover,
.lang-selector.dropdown-light .lang-dropdown a.is-current,
.nav-action-menu.dropdown-light .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-light .nav-action-dropdown a.is-current {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.055) !important;
}

.lang-dropdown a.is-current {
    font-weight: 700;
}
.lang-dropdown a.is-current::before {
    content: '•';
    margin-right: 7px;
    opacity: 0.72;
}

/* Improve touch/click usability. */
.nav-action-dropdown a,
.lang-dropdown li a {
    -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Stable rollout/dropdown menus: persistent hover bridge +
   adaptive contrast for language and sitemap menus
   ============================================================ */
.lang-selector,
.nav-action-menu {
    --dd-bg: rgba(18, 18, 18, 0.96);
    --dd-border: rgba(255, 255, 255, 0.14);
    --dd-fg: rgba(255, 255, 255, 0.86);
    --dd-fg-strong: #ffffff;
    --dd-hover: rgba(255, 255, 255, 0.11);
    --dd-current: rgba(255, 255, 255, 0.13);
    --dd-dot: rgba(255, 255, 255, 0.78);
    --dd-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
}

.lang-selector.dropdown-light,
.nav-action-menu.dropdown-light {
    --dd-bg: rgba(255, 255, 255, 0.97);
    --dd-border: rgba(0, 0, 0, 0.08);
    --dd-fg: rgba(0, 0, 0, 0.68);
    --dd-fg-strong: #101010;
    --dd-hover: rgba(0, 0, 0, 0.055);
    --dd-current: rgba(0, 0, 0, 0.065);
    --dd-dot: rgba(0, 0, 0, 0.7);
    --dd-shadow: 0 24px 65px rgba(0, 0, 0, 0.16);
}

.lang-selector.dropdown-dark,
.nav-action-menu.dropdown-dark {
    --dd-bg: rgba(18, 18, 18, 0.96);
    --dd-border: rgba(255, 255, 255, 0.14);
    --dd-fg: rgba(255, 255, 255, 0.84);
    --dd-fg-strong: #ffffff;
    --dd-hover: rgba(255, 255, 255, 0.11);
    --dd-current: rgba(255, 255, 255, 0.13);
    --dd-dot: rgba(255, 255, 255, 0.78);
    --dd-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
}

.lang-dropdown,
.nav-action-dropdown {
    background: var(--dd-bg) !important;
    border-color: var(--dd-border) !important;
    box-shadow: var(--dd-shadow) !important;
    color: var(--dd-fg) !important;
    pointer-events: none;
}

/* Invisible hover bridge prevents menus from closing while moving
   from the trigger button into the rollout panel. */
.lang-dropdown::before,
.nav-action-dropdown::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
    background: transparent;
}

.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown,
.lang-selector.open .lang-dropdown,
.lang-selector.is-open .lang-dropdown,
.nav-action-menu:hover .nav-action-dropdown,
.nav-action-menu:focus-within .nav-action-dropdown,
.nav-action-menu.open .nav-action-dropdown,
.nav-action-menu.is-open .nav-action-dropdown {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.lang-selector:hover .lang-dropdown,
.lang-selector:focus-within .lang-dropdown,
.lang-selector.open .lang-dropdown,
.lang-selector.is-open .lang-dropdown {
    transform: translateX(-50%) translateY(0) !important;
}

.nav-action-menu:hover .nav-action-dropdown,
.nav-action-menu:focus-within .nav-action-dropdown,
.nav-action-menu.open .nav-action-dropdown,
.nav-action-menu.is-open .nav-action-dropdown {
    transform: translateY(0) !important;
}

.lang-dropdown li a,
.nav-action-dropdown a {
    color: var(--dd-fg) !important;
}

.lang-dropdown li a:hover,
.lang-dropdown li a:focus,
.lang-dropdown li a.is-current,
.nav-action-dropdown a:hover,
.nav-action-dropdown a:focus,
.nav-action-dropdown a.is-current {
    color: var(--dd-fg-strong) !important;
    background: var(--dd-current) !important;
    opacity: 1 !important;
}

.nav-action-dropdown a.is-current::before {
    background: var(--dd-dot) !important;
}

.lang-dropdown li a.is-current {
    font-weight: 700;
}

.lang-dropdown li a.is-current::before {
    content: '•';
    display: inline-block;
    margin-right: 8px;
    color: var(--dd-dot);
}

.lang-dropdown {
    z-index: 2100;
}

.nav-action-dropdown {
    z-index: 2100;
}

.lang-btn:focus,
.nav-action-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: 3px;
}

header.scrolled .lang-btn:focus,
header.scrolled .nav-action-btn:focus,
.lang-selector.dropdown-light .lang-btn:focus,
.nav-action-menu.dropdown-light .nav-action-btn:focus {
    outline-color: rgba(0, 0, 0, 0.22);
}

/* ============================================================
   Final dropdown layer + scroll routing fix
   - Rollout menus must always render above every page section.
   - Hash navigation must not trap scroll at the target section.
   ============================================================ */
html {
    scroll-padding-top: 104px;
    overscroll-behavior-y: auto;
}
body {
    overscroll-behavior-y: auto;
}

header,
header.transparent,
header.scrolled {
    z-index: 2147483000 !important;
    overflow: visible !important;
    isolation: isolate;
}

header .container,
header .nav-right,
header .main-nav,
.lang-selector,
.nav-action-menu {
    overflow: visible !important;
}

.lang-selector,
.nav-action-menu {
    position: relative !important;
    z-index: 2147483100 !important;
}

.lang-dropdown,
.nav-action-dropdown,
.lang-selector.open .lang-dropdown,
.lang-selector.is-open .lang-dropdown,
.nav-action-menu.open .nav-action-dropdown,
.nav-action-menu.is-open .nav-action-dropdown {
    z-index: 2147483200 !important;
    isolation: isolate;
    will-change: opacity, transform;
}

/* When any rollout is open, lift the entire navigation layer above all transformed sections. */
body.dropdown-layer-active header {
    z-index: 2147483300 !important;
}
body.dropdown-layer-active .lang-selector,
body.dropdown-layer-active .nav-action-menu,
body.dropdown-layer-active .lang-dropdown,
body.dropdown-layer-active .nav-action-dropdown {
    z-index: 2147483400 !important;
}

/* Avoid hidden, closed menus catching wheel / pointer events after link navigation. */
.lang-selector:not(.open):not(.is-open):not(:hover):not(:focus-within) .lang-dropdown,
.nav-action-menu:not(.open):not(.is-open):not(:hover):not(:focus-within) .nav-action-dropdown {
    pointer-events: none !important;
}

/* Keep open menus scrollable only if content grows, without locking page scroll. */
.lang-dropdown,
.nav-action-dropdown {
    max-height: min(78vh, 560px);
    overflow-y: auto;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
}

/* Ensure visible dropdown text always has contrast regardless of underlying background. */
.lang-selector.dropdown-light .lang-dropdown,
.nav-action-menu.dropdown-light .nav-action-dropdown {
    background: rgba(255,255,255,0.985) !important;
    color: rgba(17,17,17,0.74) !important;
}
.lang-selector.dropdown-light .lang-dropdown a,
.nav-action-menu.dropdown-light .nav-action-dropdown a {
    color: rgba(17,17,17,0.72) !important;
}
.lang-selector.dropdown-light .lang-dropdown a:hover,
.lang-selector.dropdown-light .lang-dropdown a:focus,
.lang-selector.dropdown-light .lang-dropdown a.is-current,
.nav-action-menu.dropdown-light .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-light .nav-action-dropdown a:focus,
.nav-action-menu.dropdown-light .nav-action-dropdown a.is-current {
    color: #111 !important;
    background: rgba(0,0,0,0.065) !important;
}

.lang-selector.dropdown-dark .lang-dropdown,
.nav-action-menu.dropdown-dark .nav-action-dropdown {
    background: rgba(18,15,14,0.965) !important;
    color: rgba(255,255,255,0.82) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a,
.nav-action-menu.dropdown-dark .nav-action-dropdown a {
    color: rgba(255,255,255,0.80) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a:hover,
.lang-selector.dropdown-dark .lang-dropdown a:focus,
.lang-selector.dropdown-dark .lang-dropdown a.is-current,
.nav-action-menu.dropdown-dark .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-dark .nav-action-dropdown a:focus,
.nav-action-menu.dropdown-dark .nav-action-dropdown a.is-current {
    color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
}

/* ==========================================================
   FINAL FIX 2026-06-02: rollout layer priority + wheel scroll
   ----------------------------------------------------------
   Keeps dropdowns above all page layers and prevents page
   scroll from being trapped after menu navigation.
   ========================================================== */
html, body {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

header {
    z-index: 2147483000 !important;
    overflow: visible !important;
    isolation: isolate;
}

header .container,
header .main-nav,
header .nav-right,
header .lang-selector,
header .nav-action-menu {
    overflow: visible !important;
    position: relative;
    z-index: 2147483001 !important;
}

.lang-dropdown,
.nav-action-dropdown {
    z-index: 2147483647 !important;
    overflow: visible !important;
    pointer-events: auto !important;
    will-change: top, left, opacity, transform;
    isolation: isolate;
}

.lang-selector.dropdown-layer-active,
.nav-action-menu.dropdown-layer-active {
    z-index: 2147483647 !important;
}

/* Use a single high-priority visual contract for every rollout. */
.lang-selector.dropdown-dark .lang-dropdown,
.nav-action-menu.dropdown-dark .nav-action-dropdown {
    background: rgba(18, 15, 13, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a,
.nav-action-menu.dropdown-dark .nav-action-dropdown a {
    color: rgba(255, 255, 255, 0.88) !important;
}
.lang-selector.dropdown-dark .lang-dropdown a:hover,
.lang-selector.dropdown-dark .lang-dropdown a:focus,
.lang-selector.dropdown-dark .lang-dropdown a.is-current,
.nav-action-menu.dropdown-dark .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-dark .nav-action-dropdown a:focus,
.nav-action-menu.dropdown-dark .nav-action-dropdown a.is-current {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
}

.lang-selector.dropdown-light .lang-dropdown,
.nav-action-menu.dropdown-light .nav-action-dropdown {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(20, 20, 20, 0.08) !important;
    color: #191919 !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.14) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}
.lang-selector.dropdown-light .lang-dropdown a,
.nav-action-menu.dropdown-light .nav-action-dropdown a {
    color: rgba(25, 25, 25, 0.72) !important;
}
.lang-selector.dropdown-light .lang-dropdown a:hover,
.lang-selector.dropdown-light .lang-dropdown a:focus,
.lang-selector.dropdown-light .lang-dropdown a.is-current,
.nav-action-menu.dropdown-light .nav-action-dropdown a:hover,
.nav-action-menu.dropdown-light .nav-action-dropdown a:focus,
.nav-action-menu.dropdown-light .nav-action-dropdown a.is-current {
    background: rgba(25, 25, 25, 0.06) !important;
    color: #191919 !important;
}

/* JS converts open menus to fixed-position overlays; these rules
   make the conversion clean and consistent across all pages. */
.lang-dropdown.dropdown-fixed-layer,
.nav-action-dropdown.dropdown-fixed-layer {
    position: fixed !important;
    top: var(--dropdown-fixed-top, 76px) !important;
    left: var(--dropdown-fixed-left, auto) !important;
    right: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    max-height: min(72vh, 560px);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.nav-action-dropdown.dropdown-fixed-layer {
    width: var(--dropdown-fixed-width, 260px) !important;
    min-width: var(--dropdown-fixed-width, 260px) !important;
}

.lang-dropdown.dropdown-fixed-layer {
    width: var(--dropdown-fixed-width, 118px) !important;
    min-width: var(--dropdown-fixed-width, 118px) !important;
}

/* Prevent fixed dropdowns from creating an invisible page scroll trap. */
.lang-dropdown.dropdown-fixed-layer,
.nav-action-dropdown.dropdown-fixed-layer,
.lang-dropdown.dropdown-fixed-layer *,
.nav-action-dropdown.dropdown-fixed-layer * {
    overscroll-behavior: contain;
}

/* Keep dropdown legible when it appears above white/cream pages. */
.lang-selector.dropdown-light .lang-dropdown.dropdown-fixed-layer,
.nav-action-menu.dropdown-light .nav-action-dropdown.dropdown-fixed-layer {
    background: rgba(255, 255, 255, 0.985) !important;
}

/* Keep dropdown legible when it appears above orange/black hero pages. */
.lang-selector.dropdown-dark .lang-dropdown.dropdown-fixed-layer,
.nav-action-menu.dropdown-dark .nav-action-dropdown.dropdown-fixed-layer {
    background: rgba(18, 15, 13, 0.965) !important;
}

/* ==========================================================
   FINAL PORTAL DROPDOWN FIX 2026-06-02
   - Moves rollout menus into a fixed body-layer via script.
   - The currently hovered/open menu is always the highest layer.
   - Prevents dropdowns from appearing behind each other or jumping.
   ========================================================== */
body.portal-menu-open header,
body.portal-menu-open .site-header,
body.portal-menu-open .main-header {
    z-index: 2147483000 !important;
    overflow: visible !important;
}

.dropdown-portal {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
    isolation: isolate !important;
    pointer-events: auto !important;
    will-change: top, left, opacity !important;
}

.dropdown-portal:not(.portal-open) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.dropdown-portal.portal-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dropdown-portal.portal-light {
    background: rgba(255, 255, 255, 0.985) !important;
    border: 1px solid rgba(20, 20, 20, 0.08) !important;
    color: #191919 !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.16) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}

.dropdown-portal.portal-light a,
.dropdown-portal.portal-light li a {
    color: rgba(25, 25, 25, 0.76) !important;
}

.dropdown-portal.portal-light a:hover,
.dropdown-portal.portal-light a:focus,
.dropdown-portal.portal-light a.is-current,
.dropdown-portal.portal-light li a:hover,
.dropdown-portal.portal-light li a:focus,
.dropdown-portal.portal-light li a.is-current {
    background: rgba(25, 25, 25, 0.065) !important;
    color: #111 !important;
}

.dropdown-portal.portal-dark {
    background: rgba(18, 15, 13, 0.965) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}

.dropdown-portal.portal-dark a,
.dropdown-portal.portal-dark li a {
    color: rgba(255, 255, 255, 0.88) !important;
}

.dropdown-portal.portal-dark a:hover,
.dropdown-portal.portal-dark a:focus,
.dropdown-portal.portal-dark a.is-current,
.dropdown-portal.portal-dark li a:hover,
.dropdown-portal.portal-dark li a:focus,
.dropdown-portal.portal-dark li a.is-current {
    background: rgba(255, 255, 255, 0.095) !important;
    color: #fff !important;
}

.dropdown-portal.lang-dropdown {
    min-width: 118px !important;
    width: 118px !important;
    padding: 12px 0 !important;
    border-radius: 10px !important;
    list-style: none !important;
}

.dropdown-portal.nav-action-dropdown {
    min-width: 230px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
}

.dropdown-portal.nav-action-dropdown a,
.dropdown-portal.lang-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
}

.dropdown-portal.nav-action-dropdown a {
    justify-content: space-between !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
}

.dropdown-portal.lang-dropdown li a {
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
}

.dropdown-portal.nav-action-dropdown a.is-current::before,
.dropdown-portal.lang-dropdown li a.is-current::before {
    content: '•' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    opacity: 0.78 !important;
    margin-right: 4px !important;
}

.dropdown-portal.nav-action-dropdown a::after {
    content: '→' !important;
    opacity: 0.34 !important;
    font-size: 13px !important;
}

.dropdown-portal.portal-topmost {
    z-index: 2147483647 !important;
}


/* ==========================================================
   LANGUAGE DROPDOWN PADDING FIX 2026-06-02
   ----------------------------------------------------------
   Adds horizontal breathing room so the active/hover highlight
   does not touch the left/right edge of the rollout panel.
   Applies to both normal and portal-rendered language menus.
   ========================================================== */
.lang-dropdown,
.dropdown-portal.lang-dropdown {
    box-sizing: border-box !important;
    padding: 10px 8px !important;
}

.lang-dropdown li,
.dropdown-portal.lang-dropdown li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.lang-dropdown li + li,
.dropdown-portal.lang-dropdown li + li {
    margin-top: 2px !important;
}

.lang-dropdown li a,
.dropdown-portal.lang-dropdown li a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

.dropdown-portal.lang-dropdown {
    min-width: 132px !important;
    width: 132px !important;
}

.dropdown-portal.lang-dropdown li a.is-current::before,
.lang-dropdown li a.is-current::before {
    margin-right: 8px !important;
}

/* ==========================================================
   FINAL SCROLL UNLOCK PATCH 2026-06-02
   Closed rollout menus must never catch pointer/wheel events.
   ========================================================== */
.dropdown-portal:not(.portal-open),
.nav-action-dropdown:not(.portal-open):not(.dropdown-fixed-layer),
.lang-dropdown:not(.portal-open):not(.dropdown-fixed-layer) {
    pointer-events: none !important;
}

.dropdown-portal.portal-open,
.nav-action-menu.open .nav-action-dropdown,
.nav-action-menu.is-open .nav-action-dropdown,
.lang-selector.open .lang-dropdown,
.lang-selector.is-open .lang-dropdown {
    pointer-events: auto !important;
}

html,
body {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

/* ==========================================================
   CLEAN FINAL DROPDOWN SYSTEM 2026-06-02
   ----------------------------------------------------------
   Replaces accumulated rollout overrides with one predictable
   body-level portal surface. Closed menus never receive wheel
   or pointer events, and native anchors handle page scrolling.
   ========================================================== */
html, body {
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
}

header,
header.transparent,
header.scrolled {
    z-index: 2147483000 !important;
    overflow: visible !important;
}

header .container,
header .main-nav,
header .nav-right,
.lang-selector,
.nav-action-menu {
    overflow: visible !important;
}

.dropdown-portal {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    z-index: 2147483647 !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    isolation: isolate !important;
    box-sizing: border-box !important;
    max-height: min(72vh, 560px) !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    overscroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.dropdown-portal.portal-open {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dropdown-portal.portal-light {
    background: rgba(255, 255, 255, 0.985) !important;
    border: 1px solid rgba(20, 20, 20, 0.08) !important;
    color: #191919 !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.16) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}

.dropdown-portal.portal-dark {
    background: rgba(18, 15, 13, 0.965) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #fff !important;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
}

.dropdown-portal.lang-dropdown {
    width: 132px !important;
    min-width: 132px !important;
    padding: 10px 8px !important;
    border-radius: 10px !important;
    list-style: none !important;
}

.dropdown-portal.nav-action-dropdown {
    min-width: 230px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 10px !important;
    border-radius: 18px !important;
}

.dropdown-portal li,
.dropdown-portal ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.dropdown-portal.lang-dropdown li + li {
    margin-top: 2px !important;
}

.dropdown-portal a,
.dropdown-portal li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    color: inherit !important;
}

.dropdown-portal.lang-dropdown li a {
    justify-content: center !important;
    width: 100% !important;
    min-height: 40px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
}

.dropdown-portal.nav-action-dropdown a {
    justify-content: space-between !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
}

.dropdown-portal.portal-light a,
.dropdown-portal.portal-light li a {
    color: rgba(25, 25, 25, 0.74) !important;
}

.dropdown-portal.portal-light a:hover,
.dropdown-portal.portal-light a:focus,
.dropdown-portal.portal-light a.is-current,
.dropdown-portal.portal-light li a:hover,
.dropdown-portal.portal-light li a:focus,
.dropdown-portal.portal-light li a.is-current {
    background: rgba(25, 25, 25, 0.065) !important;
    color: #111 !important;
}

.dropdown-portal.portal-dark a,
.dropdown-portal.portal-dark li a {
    color: rgba(255, 255, 255, 0.88) !important;
}

.dropdown-portal.portal-dark a:hover,
.dropdown-portal.portal-dark a:focus,
.dropdown-portal.portal-dark a.is-current,
.dropdown-portal.portal-dark li a:hover,
.dropdown-portal.portal-dark li a:focus,
.dropdown-portal.portal-dark li a.is-current {
    background: rgba(255, 255, 255, 0.095) !important;
    color: #fff !important;
}

.dropdown-portal.lang-dropdown li a.is-current::before,
.dropdown-portal.nav-action-dropdown a.is-current::before {
    content: '•' !important;
    font-size: 18px !important;
    line-height: 1 !important;
    opacity: 0.78 !important;
    margin-right: 8px !important;
}

.dropdown-portal.nav-action-dropdown a::after {
    content: '→' !important;
    opacity: 0.34 !important;
    font-size: 13px !important;
    margin-left: auto !important;
}

body.portal-menu-open {
    overflow-y: auto !important;
}


/* ==========================================================
   DROPDOWN WHEEL PASS-THROUGH SAFETY PATCH 2026-06-02
   ----------------------------------------------------------
   Ensures open rollout menus never lock page scrolling after
   navigation and closed menus are fully removed from interaction.
   ========================================================== */
.dropdown-portal {
    overscroll-behavior: auto !important;
    touch-action: auto !important;
}
.dropdown-portal:not(.portal-open) {
    pointer-events: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
body.portal-menu-open {
    overflow-y: auto !important;
}
html {
    scroll-padding-top: 112px !important;
}

/* ==========================================================
   NAV TREE MENU DEPTH + DIRECT BETA FORM LINK 2026-06-03
   ----------------------------------------------------------
   Organizes the action dropdown into a tree-like sitemap and
   makes the beta application form visible as a direct target.
   ========================================================== */
.dropdown-portal.nav-action-dropdown {
    min-width: 300px !important;
    width: 320px !important;
    max-width: calc(100vw - 28px) !important;
    padding: 12px !important;
    border-radius: 22px !important;
}

.dropdown-portal.nav-action-dropdown .nav-menu-section {
    padding: 8px 0 10px !important;
    border-top: 1px solid rgba(128, 128, 128, 0.16) !important;
}

.dropdown-portal.nav-action-dropdown .nav-menu-section:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
}

.dropdown-portal.nav-action-dropdown .nav-menu-section-title {
    display: block !important;
    padding: 7px 14px 5px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    user-select: none !important;
}

.dropdown-portal.portal-light .nav-menu-section-title {
    color: rgba(20, 20, 20, 0.38) !important;
}

.dropdown-portal.portal-dark .nav-menu-section-title {
    color: rgba(255, 255, 255, 0.42) !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-primary,
.dropdown-portal.nav-action-dropdown a.nav-menu-child {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 1px 0 !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-primary {
    font-weight: 700 !important;
    padding-left: 14px !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-child {
    padding-left: 28px !important;
    min-height: 34px !important;
    font-size: 14px !important;
    opacity: 0.98 !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-direct {
    font-weight: 700 !important;
    border: 1px solid rgba(128, 128, 128, 0.16) !important;
}

.dropdown-portal.portal-light a.nav-menu-direct {
    background: rgba(0, 0, 0, 0.035) !important;
}

.dropdown-portal.portal-dark a.nav-menu-direct {
    background: rgba(255, 255, 255, 0.07) !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-child::before {
    content: '↳' !important;
    font-size: 12px !important;
    opacity: 0.34 !important;
    margin-right: 2px !important;
}

.dropdown-portal.nav-action-dropdown a.is-current::before {
    content: '•' !important;
    opacity: 0.78 !important;
}

.dropdown-portal.nav-action-dropdown .nav-menu-section-legal {
    padding-bottom: 2px !important;
}

.mobile-menu-group {
    margin: 18px 0 6px !important;
    padding: 0 4px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.44) !important;
}

.mobile-menu-panel .mobile-menu-child {
    padding-left: 18px !important;
    opacity: 0.88 !important;
}

.mobile-menu-panel .mobile-menu-direct {
    font-weight: 700 !important;
    opacity: 1 !important;
}

@media (max-width: 640px) {
    .dropdown-portal.nav-action-dropdown {
        width: min(320px, calc(100vw - 28px)) !important;
        min-width: min(300px, calc(100vw - 28px)) !important;
    }
}

/* ==========================================================
   DROPDOWN PORTAL SCROLLBAR CLIPPED INSIDE ROUNDED PANEL
   ----------------------------------------------------------
   Native Windows scrollbars sit in a rectangular gutter and
   can paint as a black strip outside the menu radius. Scroll
   inside .dropdown-scroll, clip the portal, and show only a
   gray thumb on a transparent track.
   ========================================================== */
.dropdown-portal,
.dropdown-portal.portal-open,
.dropdown-portal.nav-action-dropdown,
.dropdown-portal.lang-dropdown {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

.dropdown-portal.nav-action-dropdown {
    padding: 24px 4px 24px 10px !important;
    border-radius: 22px !important;
}

.dropdown-portal.lang-dropdown {
    padding: 10px 8px !important;
    border-radius: 12px !important;
}

.dropdown-scroll {
    box-sizing: border-box !important;
    max-height: inherit;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(168, 168, 168, 0.78) transparent !important;
}

.dropdown-portal.nav-action-dropdown .dropdown-scroll,
.dropdown-portal.lang-dropdown .dropdown-scroll {
    padding: 0 !important;
}

.dropdown-portal.portal-dark .dropdown-scroll {
    scrollbar-color: rgba(176, 176, 176, 0.78) transparent !important;
}

.dropdown-portal.portal-light .dropdown-scroll {
    scrollbar-color: rgba(120, 120, 120, 0.55) transparent !important;
}

.dropdown-scroll::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

.dropdown-scroll::-webkit-scrollbar-button,
.dropdown-scroll::-webkit-scrollbar-corner,
.dropdown-portal::-webkit-scrollbar-button,
.dropdown-portal::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.dropdown-scroll::-webkit-scrollbar-track,
.dropdown-portal::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.dropdown-scroll::-webkit-scrollbar-thumb {
    background: rgba(168, 168, 168, 0.72) !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    background-clip: padding-box !important;
}

.dropdown-portal.portal-dark .dropdown-scroll::-webkit-scrollbar-thumb {
    background: rgba(176, 176, 176, 0.72) !important;
    background-clip: padding-box !important;
}

.dropdown-portal.portal-dark .dropdown-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 196, 196, 0.9) !important;
    background-clip: padding-box !important;
}

.dropdown-portal.portal-light .dropdown-scroll::-webkit-scrollbar-thumb {
    background: rgba(120, 120, 120, 0.5) !important;
    background-clip: padding-box !important;
}

.dropdown-portal.portal-light .dropdown-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(90, 90, 90, 0.7) !important;
    background-clip: padding-box !important;
}


/* Final navigation target alignment + hover-only dropdown behavior */
#guide-page-start,
#beta-page-start,
#nas-page-start,
#beta-access,
#product-brief,
#video-player {
  scroll-margin-top: 104px;
}
#video-player {
  scroll-margin-top: 28vh;
}
.nav-action-btn,
.lang-btn {
  cursor: default;
}
.nav-action-dropdown a,
.lang-dropdown a {
  cursor: pointer;
}


/* ==========================================================
   FINAL NAV UX PATCH 2026-06-03
   - Hover-only tabs: no click-toggle UX.
   - Stable tree dropdown appearance.
   - Correct scroll target spacing for requested sections/pages.
   ========================================================== */
.nav-action-btn,
.lang-btn {
    cursor: default !important;
}
.dropdown-portal.nav-action-dropdown {
    width: min(336px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
}
.dropdown-portal.nav-action-dropdown a.nav-menu-child {
    padding-left: 30px !important;
}
.dropdown-portal.nav-action-dropdown a.nav-menu-direct {
    font-weight: 800 !important;
}
.dropdown-portal.nav-action-dropdown a.nav-menu-direct[data-i18n="nav_menu_beta_form"] {
    border-color: rgba(128,128,128,0.22) !important;
}
#video-player {
    scroll-margin-top: 42vh !important;
}
#guide-page-start,
#beta-page-start,
#nas-page-start {
    scroll-margin-top: 90px !important;
}
#beta-access,
#beta-access-form {
    scroll-margin-top: 96px !important;
}
@media (max-width: 640px) {
    .dropdown-portal.nav-action-dropdown {
        width: min(336px, calc(100vw - 28px)) !important;
        min-width: min(300px, calc(100vw - 28px)) !important;
    }
}


#product-brief {
    scroll-margin-top: 96px !important;
}


/* Korean footer headline size refinement: keep English untouched */
.lang-ko .footer-action-band h2 {
    font-size: clamp(30px, 3.4vw, 52px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    max-width: 920px;
}
@media (max-width: 768px) {
    .lang-ko .footer-action-band h2 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.15 !important;
    }
}

/* ==========================================================
   DROPDOWN CORNER CLIP — last-wins override
   Earlier rules set overflow:visible, will-change:transform,
   padding:0, and backdrop-filter on the same panel. Those
   prevent border-radius from clipping the inner list and
   scrollbar at the top and bottom corners.
   ========================================================== */
.dropdown-portal.nav-action-dropdown,
.dropdown-portal.lang-dropdown {
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    will-change: auto !important;
    transform: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-clip: padding-box !important;
    -webkit-mask-image: linear-gradient(#000, #000) !important;
    mask-image: linear-gradient(#000, #000) !important;
}

.dropdown-portal.nav-action-dropdown {
    padding: 24px 4px 24px 10px !important;
    border-radius: 22px !important;
}

.dropdown-portal.lang-dropdown {
    padding: 10px 8px !important;
    border-radius: 12px !important;
}

.dropdown-portal.portal-dark {
    background: rgba(18, 15, 13, 0.98) !important;
}

.dropdown-portal.portal-light {
    background: rgba(255, 255, 255, 0.98) !important;
}

.dropdown-portal.nav-action-dropdown::before,
.dropdown-portal.lang-dropdown::before {
    content: none !important;
    display: none !important;
}

.dropdown-portal.nav-action-dropdown a {
    padding-right: 22px !important;
}

.dropdown-portal.nav-action-dropdown a::after {
    margin-right: 2px !important;
}

.dropdown-portal.nav-action-dropdown a.is-current {
    display: flex !important;
    align-items: center !important;
}

.dropdown-portal.nav-action-dropdown a.is-current::before {
    content: '' !important;
    display: block !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    position: static !important;
    top: 0 !important;
    transform: none !important;
}

/* ==========================================================
   Top-of-page header on dark hero: white logo + outline buttons
   header.transparent is the at-top state; scrolled stays dark.
   ========================================================== */
header.transparent {
    color: #ffffff !important;
}

header.transparent .logo,
header.transparent .logo-text,
header.transparent a.logo {
    color: #ffffff !important;
    background: transparent !important;
    text-shadow: none !important;
}

header.transparent .lang-btn,
header.transparent .btn-try,
header.transparent .btn-try.nav-action-btn {
    background: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

header.transparent .lang-btn svg {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

header.transparent .lang-btn .arrow-down,
header.transparent .btn-try .arrow-down,
header.transparent .nav-action-btn .arrow-down {
    color: #ffffff !important;
}

header.transparent .lang-btn:hover,
header.transparent .btn-try:hover,
header.transparent .btn-try.nav-action-btn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

header.transparent .mobile-menu-toggle {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background: transparent !important;
}

header.transparent .mobile-menu-toggle span {
    background: #ffffff !important;
}

/* ==========================================================
   Mobile menu: readable on dark overlay + rounded clip
   header.transparent a { color:#111 } was painting links black
   on the dark panel. Keep the sheet inside the viewport with
   rounded corners and an inner scroller.
   ========================================================== */
.mobile-menu-panel {
    overflow: hidden !important;
    border-radius: 20px !important;
    max-height: calc(100svh - 84px) !important;
}

.mobile-menu-open .mobile-menu-panel {
    display: flex !important;
    flex-direction: column !important;
}

.mobile-menu-inner {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: calc(100svh - 84px) !important;
    padding: 12px 8px 20px 10px !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(176, 176, 176, 0.7) transparent !important;
}

.mobile-menu-inner::-webkit-scrollbar {
    width: 6px !important;
}

.mobile-menu-inner::-webkit-scrollbar-track {
    background: transparent !important;
    margin: 12px 0 18px !important;
}

.mobile-menu-inner::-webkit-scrollbar-thumb {
    background: rgba(176, 176, 176, 0.7) !important;
    border-radius: 999px !important;
}

.mobile-menu-inner::-webkit-scrollbar-button {
    display: none !important;
    height: 0 !important;
}

header.transparent .mobile-menu-panel,
header.transparent .mobile-menu-panel .mobile-menu-group,
header.transparent .mobile-menu-inner a,
header.transparent .mobile-menu-inner button {
    color: #ffffff !important;
}

header.transparent .mobile-menu-panel .mobile-menu-group {
    color: rgba(255, 255, 255, 0.5) !important;
}

header.transparent .mobile-menu-inner a,
header.transparent .mobile-menu-inner button {
    opacity: 1 !important;
}

header.transparent .mobile-menu-inner a::after {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* ==========================================================
   Scrollbar stays on the straight sides only.
   Portal radius is 22px, so 24px padding keeps .dropdown-scroll
   (and its scrollbar) out of the top and bottom curves.
   ========================================================== */
.dropdown-portal.nav-action-dropdown {
    box-sizing: border-box !important;
    width: min(336px, calc(100vw - 24px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    max-height: min(72vh, calc(100dvh - 88px));
    padding: 24px 4px 24px 10px !important;
    border-radius: 22px !important;
}

.dropdown-portal.nav-action-dropdown .dropdown-scroll {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 2px 0 0 !important;
    scrollbar-gutter: stable;
}

.dropdown-portal.nav-action-dropdown .dropdown-scroll::-webkit-scrollbar {
    width: 6px !important;
}

.dropdown-portal.nav-action-dropdown .dropdown-scroll::-webkit-scrollbar-track {
    margin: 0 !important;
}

.dropdown-portal.nav-action-dropdown a {
    padding-right: clamp(20px, 5vw, 28px) !important;
}

.dropdown-portal.nav-action-dropdown a.nav-menu-primary.is-current {
    align-items: center !important;
}

.dropdown-portal.nav-action-dropdown a.is-current::before {
    position: relative !important;
    top: 0.5px !important;
}

@media (max-width: 1024px) {
    header.transparent .lang-btn,
    header.transparent .btn-try,
    header.transparent .btn-try.nav-action-btn {
        height: 40px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 768px) {
    .dropdown-portal.nav-action-dropdown,
    .dropdown-portal.lang-dropdown {
        display: none !important;
        pointer-events: none !important;
    }
}

/* ==========================================================
   Home pink hero: original black header
   White-on-dark belongs on black resource heroes only.
   ========================================================== */
body:has(.first-hero) header.transparent {
    color: #111111 !important;
}

body:has(.first-hero) header.transparent .logo,
body:has(.first-hero) header.transparent .logo-text,
body:has(.first-hero) header.transparent a.logo {
    color: #111111 !important;
    background: transparent !important;
    text-shadow: none !important;
}

body:has(.first-hero) header.transparent .lang-btn,
body:has(.first-hero) header.transparent .btn-try,
body:has(.first-hero) header.transparent .btn-try.nav-action-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #111111 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

body:has(.first-hero) header.transparent .lang-btn svg {
    stroke: #111111 !important;
    color: #111111 !important;
}

body:has(.first-hero) header.transparent .lang-btn .arrow-down,
body:has(.first-hero) header.transparent .btn-try .arrow-down,
body:has(.first-hero) header.transparent .nav-action-btn .arrow-down {
    color: #111111 !important;
}

body:has(.first-hero) header.transparent .lang-btn:hover,
body:has(.first-hero) header.transparent .btn-try:hover,
body:has(.first-hero) header.transparent .btn-try.nav-action-btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
    color: #111111 !important;
}

body:has(.first-hero) header.transparent .mobile-menu-toggle {
    color: #111111 !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

body:has(.first-hero) header.transparent .mobile-menu-toggle span {
    background: #111111 !important;
}

.beta-success-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.beta-success-modal[hidden] { display: none !important; }
.beta-success-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
}
.beta-success-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(520px, 100%);
    padding: 36px 32px 28px;
    border-radius: 24px;
    background: #f7f5f0;
    color: #111;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
    text-align: center;
}
.beta-success-modal-dialog h3 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.03em;
}
.beta-success-modal-dialog p {
    margin: 0 0 26px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(17, 17, 17, 0.72);
}
.beta-success-modal-close {
    appearance: none;
    border: none;
    background: #111;
    color: #fff;
    border-radius: 40px;
    padding: 12px 32px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.beta-success-modal-close:hover { background: #2a2a2a; }
body.beta-success-open { overflow: hidden; }

/* Client copy review (Oct 2026): styling for the revised home page copy */
.first-hero .hero-main-description .hero-desc-line-1 {
    display: block;
    letter-spacing: -0.2px;
}
.first-hero .hero-main-description .hero-tech-line {
    display: block;
    margin-top: 8px;
    letter-spacing: -0.2px;
}
.first-hero .hero-main-headline,
.why-lola .lola-title,
.releases .section-title,
.security-architecture .architecture-main-title,
.deployment-options-section .depth-header h2,
.how-it-works-section .depth-header h2,
.access-path-section .access-path-copy h2 {
    font-weight: 700;
}
.releases .section-title { color: rgb(25, 25, 25); }
/* Base .section-title / .architecture-main-title weight is forced to 400 with !important. */
.releases .section-title,
.security-architecture .architecture-main-title { font-weight: 700 !important; }
.security-architecture .architecture-main-title {
    width: 1280px;
    max-width: 100%;
}
.how-title-line-1,
.how-title-line-2,
.access-title-line-1,
.access-title-line-2 { display: block; }
.how-title-line-2 { color: rgb(111, 251, 249); }
.access-title-line-2 { color: rgb(243, 95, 57); }
.mesh-lang-list { font-weight: 700; }

/* Keep the product-overview section from clipping expanded accordion content. */
#why-lola.hero-fullscreen {
    height: auto;
    min-height: 100vh;
    overflow: visible;
    padding-bottom: 150px;
}
#why-lola .lola-grid { align-items: start; }

/* Align label/title/body/footer blocks across the deployment and workflow cards. */
.deployment-options-section .depth-card-grid.three,
.how-it-works-section .process-rail { align-items: stretch; }
.deployment-options-section .depth-card,
.how-it-works-section .process-step {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.deployment-options-section .depth-card p {
    flex: 1 1 auto;
    margin-bottom: 28px;
}
.deployment-options-section .depth-card ul { margin-top: auto; }
.how-it-works-section .process-step p { flex: 1 1 auto; }
.how-it-works-section .process-step ul { margin-top: 28px; }

@media (min-width: 901px) {
    body:not(.lang-ko) .deployment-options-section .depth-card h3 { min-height: 76px; }
    body:not(.lang-ko) .deployment-options-section .depth-card ul { min-height: 112px; }
    body:not(.lang-ko) .how-it-works-section .process-step h3 { min-height: 76px; }
    body:not(.lang-ko) .how-it-works-section .process-step ul { min-height: 148px; }
    body.lang-ko .deployment-options-section .depth-card h3 { min-height: 64px; }
    body.lang-ko .deployment-options-section .depth-card ul { min-height: 96px; }
    body.lang-ko .how-it-works-section .process-step h3 { min-height: 58px; }
    body.lang-ko .how-it-works-section .process-step ul { min-height: 132px; }
}

@media (min-width: 1025px) {
    .first-hero .hero-main-headline { font-size: 45px; }
    .first-hero .hero-main-description .hero-desc-line-1 { font-size: 19px; }
    .first-hero .hero-main-description .hero-tech-line { font-size: 15px; }
    .why-lola .lola-title { font-size: 35px; }
    .why-lola .toggle-header h3 { font-size: 20px; }
    body:not(.lang-ko) .first-hero .hero-main-headline { line-height: 1.12; }
    body:not(.lang-ko) .first-hero .hero-main-description { max-width: 920px; }
    body:not(.lang-ko) .why-lola .lola-title { line-height: 1.12; }
}

/* English security architecture: wider side columns so longer copy stays clear of the dividers. */
@media (min-width: 1101px) {
    body:not(.lang-ko) #security-architecture .security-layout-v3 {
        width: 1280px;
        max-width: calc(100vw - 80px);
        height: 720px;
        grid-template-columns: 400px 480px 400px;
        grid-template-rows: 720px;
    }
    body:not(.lang-ko) #security-architecture .security-col-v3,
    body:not(.lang-ko) #security-architecture .left-v3,
    body:not(.lang-ko) #security-architecture .right-v3 {
        grid-template-rows: 360px 360px;
    }
    body:not(.lang-ko) #security-architecture .block-v3 {
        height: 360px;
        padding: 16px 34px;
        overflow: hidden;
    }
    body:not(.lang-ko) #security-architecture .block-v3 h3 {
        font-size: 21px;
        line-height: 1.18;
        min-height: 50px;
        margin: 0 0 6px;
    }
    body:not(.lang-ko) #security-architecture .block-v3 p {
        font-size: 15.5px;
        line-height: 23px;
        margin: 0;
    }
    body:not(.lang-ko) #security-architecture .grid-line-v-1 { left: 400px; }
    body:not(.lang-ko) #security-architecture .grid-line-v-2 { left: 880px; }
    body:not(.lang-ko) #security-architecture .grid-line-h-mid-left,
    body:not(.lang-ko) #security-architecture .grid-line-h-mid-right { top: 360px; }
    body:not(.lang-ko) #security-architecture .grid-line-h-mid-right { left: 880px; }
    body:not(.lang-ko) #security-architecture .grid-line-h-mid-left { width: 5400px; }
}