.modal-content-area {
    max-height: 38vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #00e5ff #222;
}
.modal-content-area::-webkit-scrollbar {
    width: 8px;
}
.modal-content-area::-webkit-scrollbar-thumb {
    background: #00e5ff;
    border-radius: 6px;
}
.modal-content-area::-webkit-scrollbar-track {
    background: #222;
    border-radius: 6px;
}
/* MOA modal custom size and scrollbar */
.moa-modal-card {
    width: 90vw !important;
    max-width: 700px !important;
    min-height: 80px !important;
    height: 180px !important;
    padding: 1rem 1.2rem !important;
    overflow-y: auto !important;
}
.moa-modal-card::-webkit-scrollbar {
    width: 8px;
}
.moa-modal-card::-webkit-scrollbar-thumb {
    background: #00e5ff;
    border-radius: 6px;
}
.moa-modal-card::-webkit-scrollbar-track {
    background: #222;
    border-radius: 6px;
}
/* Custom scrollbar for chat area */
.chat-scroll-area {
    scrollbar-width: thin;
    scrollbar-color: #00e5ff #222;
    max-height: 12vh;
    min-height: 6vh;
}
/* Chrome, Edge, Safari */
.chat-scroll-area::-webkit-scrollbar {
    width: 8px;
}
.chat-scroll-area::-webkit-scrollbar-thumb {
    background: #00e5ff;
    border-radius: 6px;
}
.chat-scroll-area::-webkit-scrollbar-track {
    background: #222;
    border-radius: 6px;
}
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Rajdhani:wght@300;500;700&display=swap');

body {
    margin: 0;
    overflow: hidden;
    background-color: #050505;
    color: white;
    font-family: 'Rajdhani', sans-serif;
    /* Mobile safe scrolling */
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}
h1, h2, h3, .brand-font {
    font-family: 'Orbitron', sans-serif;
}

#canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(circle at center, #1a1a2e 0%, #000000 100%);
    touch-action: none; /* prevent pinch/drag from interfering */
}

.glass-panel {
    background: rgba(255, 255, 255, 0.05);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

/* Safe viewport height on mobile (iOS/Android) */
.vh-safe {
    min-height: 100svh; /* small viewport height accounting for UI */
}

.nav-link {
    position: relative;
    cursor: pointer;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: #00f3ff;
    transition: width 0.3s;
}

.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-link.active {
    color: #00f3ff;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.5);
}

/* Language menu */
#lang-menu.hidden { display: none; }
#lang-menu { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); will-change: opacity, transform; }
#mobile-lang-menu button { touch-action: manipulation; }

/* Chat message styles */
.chat-message {
    margin-bottom: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    max-width: 90%;
}
.chat-received {
    background: rgba(0, 243, 255, 0.15);
    border: 1px solid rgba(0, 243, 255, 0.3);
    align-self: flex-start;
    border-bottom-left-radius: 2px;
}
.chat-sent {
    background: rgba(138, 43, 226, 0.3);
    border: 1px solid rgba(138, 43, 226, 0.5);
    align-self: flex-end;
    border-bottom-right-radius: 2px;
    text-align: right;
}

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
    opacity: 0;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.hidden-section { display: none; }
.visible-section { display: block; }

/* Mobile: allow vertical scrolling so content isn’t covered */
@media (max-width: 768px) {
    body { overflow-y: scroll; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
    html, body { height: 100%; }
    main { pointer-events: auto; }
}

/* Show a subtle scrollbar on mobile */
@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 6px; }
    ::-webkit-scrollbar-track { background: rgba(255,255,255,0.08); }
}

/* Animation delay helpers for .fade-in */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-700 { animation-delay: 0.7s !important; }

/* About carousel */
.about-carousel { perspective: 1000px; }
.about-viewport { transform-style: preserve-3d; }
.about-track { transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.about-slide { transform-origin: center; }
.about-slide.enter-left > div { animation: aboutEnterLeft 500ms ease-out both; }
.about-slide.enter-right > div { animation: aboutEnterRight 500ms ease-out both; }

/* Depth transition when changing slides programmatically */
.about-viewport.about-depth { animation: aboutDepth 500ms ease-in-out both; }
@keyframes aboutDepth {
    0%   { transform: translateZ(0); filter: none; }
    45%  { transform: translateZ(-60px); filter: blur(0.4px); }
    55%  { transform: translateZ(-60px); filter: blur(0.4px); }
    100% { transform: translateZ(0); filter: none; }
}

@keyframes aboutEnterLeft {
    from { opacity: 0; transform: translateX(-24px) rotateY(8deg) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
}
@keyframes aboutEnterRight {
    from { opacity: 0; transform: translateX(24px) rotateY(-8deg) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) rotateY(0deg) scale(1); }
}

/* Dots active state helper (fallback if JS doesn't add inline styles) */
.about-dot.is-active { background: rgba(255,255,255,0.7) !important; width: 10px; height: 10px; }

/* About icons active state */
.about-icon.active { outline: 2px solid rgba(0,243,255,0.5); box-shadow: 0 0 18px rgba(0,243,255,0.15); }

/* Immersive About overlay */
.immersive { position: fixed; inset: 0; z-index: 10; }
.immersive.hidden { display: none; }
#about-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.about-overlay-content { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.about-overlay-content.is-visible { opacity: 1; }

/* Services modal aesthetic (aligned with WHO IS CUBE) */
.info-modal { position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(0,0,0,0); z-index: 100; display:flex; justify-content:center; align-items:center; opacity:0; pointer-events:none; transition: background 0.5s ease, opacity 0.3s ease; }
.info-modal.active { opacity:1; pointer-events:auto; background: rgba(0,0,0,0.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal-card { background: rgba(5,10,20,0.95); border: 1px solid #00e5ff; box-shadow: 0 0 0 rgba(0,229,255,0); width: 90vw !important; max-width: 900px !important; min-height: 300px !important; height: 420px !important; padding: 3rem 2.5rem !important; border-radius: 8px; color: #d1d5db; overflow: hidden; }
.modal-card.small { width: 76%; max-width: 680px; min-height: 120px; padding: 0.9rem 1rem; border-radius: 10px; }
@keyframes singularityBurst { 0%{ transform: scale(0.01) rotateX(45deg); opacity:0; filter: brightness(300%) contrast(200%); box-shadow: 0 0 100px 50px rgba(0,229,255,1); } 40%{ opacity:1; filter: brightness(200%);} 70%{ transform: scale(1.05) rotateX(0deg); filter: brightness(120%); box-shadow: 0 0 60px 20px rgba(0,229,255,0.6);} 100%{ transform: scale(1) rotateX(0deg); filter: brightness(100%); box-shadow: 0 0 40px rgba(0,229,255,0.2);} }
.info-modal.active .modal-card { animation: singularityBurst 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.modal-scanline { position:absolute; left:0; top:-100%; width:100%; height:20px; background: linear-gradient(to bottom, transparent, rgba(186,85,211,0.55), transparent); z-index:5; pointer-events:none; }
@keyframes scanline { 0%{ top:-100%; opacity:0 } 50%{ opacity:1 } 100%{ top:200%; opacity:0 } }
.info-modal.active .modal-scanline { animation: scanline 2s ease-in-out infinite; animation-delay: 0.4s; }
.close-btn { position:absolute; top:1.5rem; right:2rem; font-size:2rem; color:#00e5ff; cursor:pointer; background:none; border:none; line-height:1; z-index:10; transition: transform 0.3s; }
.close-btn:hover { color:white; text-shadow: 0 0 15px white; transform: rotate(90deg); }
.modal-title { font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: 900; color: #00e5ff; margin-bottom: 1.25rem; border-bottom: 2px solid rgba(0,229,255,0.3); padding-bottom: 0.75rem; text-transform: uppercase; text-shadow: 2px 0 rgba(255,0,0,0.3), -2px 0 rgba(0,0,255,0.3); }
.modal-card.small .modal-title { font-size: 1.4rem; margin-bottom: 0.6rem; padding-bottom: 0.5rem; }
.modal-content-area { font-size: 1.05rem; line-height: 1.6; min-height: 80px; white-space: normal; }
.modal-card.small .modal-content-area { font-size: 0.95rem; }
.modal-content-area p { margin: 0 0 1rem 0; }
.modal-content-area strong { color: #ffd480; }
.content-word { display:inline-block; margin-right:0.25ch; transition: color 0.25s ease, text-shadow 0.25s ease, opacity 0.25s ease, transform 0.25s ease; }
.content-word.lit { color:#fff9e6; text-shadow: 0 0 10px #ffd480, 0 0 22px #ffea99, 0 0 36px rgba(255,212,128,0.9); transform: translateY(-0.5px); }
.modal-card.reading-overlay::before { content:""; position:absolute; top:0; left:-45%; width:45%; height:100%; pointer-events:none; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(186,85,211,0.22) 28%, rgba(216,112,232,0.34) 50%, rgba(186,85,211,0.22) 72%, rgba(0,0,0,0) 100%); filter: blur(7px); mix-blend-mode: screen; animation: sweep 6s ease-out forwards; }
@keyframes sweep { 0%{ left:-45%; opacity:0 } 10%{ opacity:0.7 } 60%{ opacity:0.6 } 100%{ left:110%; opacity:0 } }
@media (max-width: 900px){ .modal-card{ width:88vw; max-width:none; padding:1.5rem } .modal-card.small{ width:94vw; padding:0.85rem } }
@media (max-width: 600px){ .modal-card{ width:92vw; padding:1rem; min-height:auto; max-height:70vh; overflow-y:auto } .modal-title{ font-size:1.6rem; margin-bottom:0.75rem } .modal-content-area{ font-size:0.95rem } .modal-card.small{ width:96vw; max-height:60vh; min-height: 100px } .modal-card.small .modal-title{ font-size:1.3rem } .modal-card.small .modal-content-area{ font-size:0.9rem } }

/* Contact send toast with rocket animation */
.send-toast { position: fixed; left: 50%; bottom: 10%; transform: translateX(-50%) translateY(40px); opacity: 0; z-index: 1000; pointer-events: none; display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.6); border: 1px solid rgba(0,243,255,0.35); padding: 12px 16px; border-radius: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 12px 24px rgba(0,0,0,0.35); }
.send-toast.show { animation: toastIn 700ms cubic-bezier(0.22,1,0.36,1) forwards; }
.send-toast.hide { animation: toastOut 600ms ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(40px) } to { opacity: 1; transform: translateX(-50%) translateY(0) } }
@keyframes toastOut { from { opacity: 1; transform: translateX(-50%) translateY(0) } to { opacity: 0; transform: translateX(-50%) translateY(40px) } }
.send-toast .label { font-family: 'Orbitron', sans-serif; letter-spacing: 0.08em; color: #c9f6ff; text-shadow: 0 0 10px rgba(0,243,255,0.35); }

.rocket { width: 28px; height: 28px; position: relative; }
.rocket .body { width: 10px; height: 18px; background: linear-gradient(180deg, #ffffff, #aeefff); border: 1px solid #66ddff; border-radius: 6px 6px 2px 2px; position: absolute; left: 9px; top: 2px; box-shadow: 0 0 12px rgba(0,243,255,0.6); }
.rocket .nose { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #ffffff; position: absolute; left: 9px; top: -4px; filter: drop-shadow(0 0 4px #66ddff); }
.rocket .fin { width: 6px; height: 6px; background: #66ddff; position: absolute; bottom: 6px; border-radius: 2px; }
.rocket .fin.left { left: 2px; transform: skewX(-20deg); }
.rocket .fin.right { right: 2px; transform: skewX(20deg); }
.rocket .flame { position: absolute; left: 11px; bottom: -4px; width: 6px; height: 10px; background: radial-gradient(ellipse at center, #ffd480 0%, #ff7b00 70%, rgba(255,123,0,0) 100%); filter: blur(0.5px) brightness(1.2); animation: flame 300ms infinite alternate ease-in-out; }
@keyframes flame { from { transform: translateY(0) scaleY(1) } to { transform: translateY(2px) scaleY(1.3) } }
.rocket.launch { animation: launch 1.8s cubic-bezier(0.22,1,0.36,1) forwards; }
@keyframes launch { 0% { transform: translateY(0) } 40% { transform: translateY(-16px) } 70% { transform: translateY(-28px) } 100% { transform: translateY(-40px) } }