/* Extracted from inline <style> in index.html for CSP compliance */

:root {
    --turquoise-primary: #25D0B3;
    --turquoise-light: #3CDCBE;
    --turquoise-medium: #41D4BA;
    --turquoise-dark: #30A794;
    --auburn-primary: #A0522D;
    --auburn-light: #CD853F;
    --auburn-dark: #8B4513;
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #cccccc;
}

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

html, body {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%) !important;
    color: #fff;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.container { background: none !important; }
.main-card, .landing-card {
    background: rgba(20, 20, 20, 0.97) !important;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px rgba(37,208,179,0.2);
}

.container {
    position: relative;
    height: 100vh;
    height: 100dvh;
    height: calc(var(--vh, 1vh) * 100);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 2rem;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Floating particles background - enhanced */
.particles { position: absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:hidden; clip-path: inset(0); }
.particle { position:absolute; border-radius:50%; opacity:0; animation: float 8s infinite linear; bottom:-10px; max-width:6px; max-height:6px; will-change: transform; backface-visibility: hidden; }
.particle.small { width:2px; height:2px; background: var(--turquoise-primary); }
.particle.medium { width:4px; height:4px; background: var(--turquoise-light); }
.particle.large { width:6px; height:6px; background: var(--turquoise-medium); }

@keyframes float {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity:0; }
    5% { opacity:0.7; }
    95% { opacity:0.7; }
    100% { transform: translateY(-110vh) translateX(0) rotate(360deg); opacity:0; }
}

/* Enhanced animated background with connected nodes */
.background-orbs { position: fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; overflow:visible; }
.orb { position:absolute; border-radius:50%; filter: blur(1px); opacity:0.4; transform: translate(0,0) scale(1); will-change: transform, opacity; backface-visibility: hidden; }

/* Left side orbs */
.orb-left-1 { width:8px; height:8px; background:var(--turquoise-primary); left:2%; top:15%; animation: floatOrbLeft1 8s infinite ease-in-out; animation-delay:.5s; }
.orb-left-2 { width:6px; height:6px; background:var(--turquoise-light); left:4%; top:45%; animation: floatOrbLeft2 10s infinite ease-in-out; animation-delay:1.5s; }
.orb-left-3 { width:10px; height:10px; background:var(--turquoise-dark); left:1%; top:75%; animation: floatOrbLeft3 7s infinite ease-in-out; animation-delay:2.5s; }
.orb-left-4 { width:5px; height:5px; background:var(--turquoise-medium); left:6%; top:85%; animation: floatOrbLeft4 12s infinite ease-in-out; animation-delay:3.5s; }

/* Right side orbs */
.orb-right-1 { width:7px; height:7px; background:var(--turquoise-light); right:2%; top:25%; animation: floatOrbRight1 9s infinite ease-in-out; animation-delay:1s; }
.orb-right-2 { width:9px; height:9px; background:var(--turquoise-primary); right:4%; top:55%; animation: floatOrbRight2 8s infinite ease-in-out; animation-delay:2s; }
.orb-right-3 { width:6px; height:6px; background:var(--turquoise-medium); right:6%; top:80%; animation: floatOrbRight3 11s infinite ease-in-out; animation-delay:3s; }
.orb-right-4 { width:8px; height:8px; background:var(--turquoise-dark); right:1%; top:90%; animation: floatOrbRight4 10s infinite ease-in-out; animation-delay:4s; }

/* Top area orbs */
.orb-top-1 { width:5px; height:5px; background:var(--turquoise-primary); left:15%; top:2%; animation: floatOrbTop1 9s infinite ease-in-out; animation-delay:.8s; }
.orb-top-2 { width:7px; height:7px; background:var(--turquoise-light); right:15%; top:3%; animation: floatOrbTop2 11s infinite ease-in-out; animation-delay:1.8s; }

/* Bottom area orbs */
.orb-bottom-1 { width:6px; height:6px; background:var(--turquoise-medium); left:25%; bottom:2%; animation: floatOrbBottom1 13s infinite ease-in-out; animation-delay:2.8s; }
.orb-bottom-2 { width:8px; height:8px; background:var(--turquoise-dark); right:25%; bottom:3%; animation: floatOrbBottom2 8s infinite ease-in-out; animation-delay:3.8s; }

/* Keyframes for orb motion */
@keyframes floatOrbLeft1 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 16%{transform:translate(15px,20px) scale(1.1); opacity:.6;} 33%{transform:translate(30px,0) scale(.9); opacity:.3;} 50%{transform:translate(15px,-20px) scale(1.2); opacity:.5;} 66%{transform:translate(0,-40px) scale(.8); opacity:.2;} 83%{transform:translate(-15px,-20px) scale(1.1); opacity:.4;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbLeft2 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 20%{transform:translate(-20px,25px) scale(.8); opacity:.2;} 40%{transform:translate(-40px,0) scale(1.3); opacity:.7;} 60%{transform:translate(-20px,-25px) scale(.9); opacity:.4;} 80%{transform:translate(0,-50px) scale(1.1); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbLeft3 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 25%{transform:translate(25px,0) scale(1.1); opacity:.6;} 50%{transform:translate(0,30px) scale(.8); opacity:.2;} 75%{transform:translate(-25px,0) scale(1.2); opacity:.5;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbLeft4 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 14%{transform:translate(-30px,15px) scale(.9); opacity:.3;} 28%{transform:translate(-15px,35px) scale(1.4); opacity:.8;} 42%{transform:translate(15px,35px) scale(.7); opacity:.2;} 56%{transform:translate(30px,15px) scale(1.1); opacity:.5;} 70%{transform:translate(30px,-15px) scale(.8); opacity:.3;} 84%{transform:translate(15px,-35px) scale(1.2); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbRight1 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 17%{transform:translate(-15px,20px) scale(1.2); opacity:.7;} 34%{transform:translate(-30px,0) scale(.8); opacity:.2;} 51%{transform:translate(-15px,-20px) scale(1.1); opacity:.5;} 68%{transform:translate(0,-40px) scale(.9); opacity:.3;} 85%{transform:translate(15px,-20px) scale(1.3); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbRight2 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 22%{transform:translate(20px,25px) scale(.9); opacity:.3;} 44%{transform:translate(40px,0) scale(1.3); opacity:.8;} 66%{transform:translate(20px,-25px) scale(.7); opacity:.2;} 88%{transform:translate(0,-50px) scale(1.1); opacity:.5;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbRight3 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 18%{transform:translate(-25px,0) scale(1.1); opacity:.6;} 36%{transform:translate(0,30px) scale(.8); opacity:.2;} 54%{transform:translate(25px,0) scale(1.2); opacity:.5;} 72%{transform:translate(0,-30px) scale(.9); opacity:.3;} 90%{transform:translate(-25px,0) scale(1.1); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbRight4 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 15%{transform:translate(30px,-15px) scale(.9); opacity:.3;} 30%{transform:translate(15px,-35px) scale(1.4); opacity:.8;} 45%{transform:translate(-15px,-35px) scale(.7); opacity:.2;} 60%{transform:translate(-30px,-15px) scale(1.1); opacity:.5;} 75%{transform:translate(-30px,15px) scale(.8); opacity:.3;} 90%{transform:translate(-15px,35px) scale(1.2); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbTop1 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 19%{transform:translate(30px,15px) scale(1.1); opacity:.6;} 38%{transform:translate(0,30px) scale(.8); opacity:.2;} 57%{transform:translate(-30px,15px) scale(1.2); opacity:.5;} 76%{transform:translate(-30px,-15px) scale(.9); opacity:.3;} 95%{transform:translate(0,-30px) scale(1.1); opacity:.6;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbTop2 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 21%{transform:translate(-25px,20px) scale(.9); opacity:.3;} 42%{transform:translate(0,40px) scale(1.3); opacity:.8;} 63%{transform:translate(25px,20px) scale(.7); opacity:.2;} 84%{transform:translate(25px,-20px) scale(1.1); opacity:.5;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbBottom1 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 16%{transform:translate(-30px,-25px) scale(1.1); opacity:.6;} 32%{transform:translate(0,-50px) scale(.8); opacity:.2;} 48%{transform:translate(30px,-25px) scale(1.2); opacity:.5;} 64%{transform:translate(30px,25px) scale(.9); opacity:.3;} 80%{transform:translate(0,50px) scale(1.1); opacity:.6;} 96%{transform:translate(-30px,25px) scale(.8); opacity:.2;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }
@keyframes floatOrbBottom2 { 0%{transform:translate(0,0) scale(1); opacity:.4;} 23%{transform:translate(25px,-30px) scale(.9); opacity:.3;} 46%{transform:translate(50px,0) scale(1.4); opacity:.8;} 69%{transform:translate(25px,30px) scale(.7); opacity:.2;} 92%{transform:translate(-25px,30px) scale(1.1); opacity:.5;} 100%{transform:translate(0,0) scale(1); opacity:.4;} }

.logo-container { position:relative; z-index:10; margin:2rem 0 1.5rem 0; opacity:0; animation: fadeInUp 1.2s ease-out .2s forwards; text-align:center; }
.site-title { font-family:'Space Grotesk', sans-serif; font-size:2.5rem; font-weight:600; color:var(--turquoise-primary); margin:1rem 0 .5rem 0; letter-spacing:.05em; opacity:0; animation: fadeInUp 1.2s ease-out .4s forwards; }
.site-subtitle { font-family:'IBM Plex Sans', sans-serif; font-size:1.1rem; font-weight:400; color:var(--text-secondary); margin:0 0 1.25rem 0; letter-spacing:.1em; text-transform:uppercase; opacity:0; animation: fadeInUp 1.2s ease-out .6s forwards; }

.logo { max-width:400px; width:90vw; height:auto; border-radius:12px; box-shadow:0 0 20px rgba(37,208,179,.2); transition: box-shadow .2s ease; transform: scale(.95) translateY(0) rotateX(0) rotateY(0) translateZ(0); position:relative; cursor:pointer; transform-style:preserve-3d; will-change:transform, box-shadow; backface-visibility:hidden; animation: logoFloat 3s ease-in-out infinite; animation-delay:.1s; }
.logo:hover { animation: logoShake .15s ease-in-out infinite; box-shadow:0 0 40px rgba(37,208,179,.4), 0 0 80px rgba(37,208,179,.2); animation-fill-mode:both; }
.logo::before { content:''; position:absolute; top:-10px; left:-10px; right:-10px; bottom:-10px; background:linear-gradient(45deg, rgba(37,208,179,.1), rgba(60,220,190,.1), rgba(37,208,179,.1)); border-radius:16px; z-index:-1; opacity:0; transition: all .1s ease; transform: scale(.8) rotateX(0) rotateY(0); will-change: transform, opacity; backface-visibility:hidden; }
.logo:hover::before { opacity:1; transform: scale(1.15) rotateX(3deg) rotateY(-2deg); }
.logo::after { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle at center, rgba(37,208,179,.1) 0%, transparent 70%); border-radius:12px; opacity:0; transition: opacity .1s ease; pointer-events:none; will-change:opacity; }
.logo:hover::after { opacity:1; }

@keyframes fadeInUp { from{ opacity:0; transform: translateY(30px) scale(.9);} to{ opacity:1; transform: translateY(0) scale(1);} }
@keyframes glowSweep { 0%{ transform:translateX(-100%); opacity:0;} 50%{ opacity:1;} 100%{ transform:translateX(100%); opacity:0;} }
@keyframes logoFloat { 0%{ transform: scale(.95) translateY(0) rotateX(0) rotateY(0);} 25%{ transform: scale(.97) translateY(-6px) rotateX(1deg) rotateY(-1deg);} 50%{ transform: scale(.95) translateY(-8px) rotateX(0) rotateY(0);} 75%{ transform: scale(.97) translateY(-4px) rotateX(-1deg) rotateY(1deg);} 100%{ transform: scale(.95) translateY(0) rotateX(0) rotateY(0);} }
@keyframes logoShake { 0%{ transform: scale(1.08) rotateX(5deg) rotateY(-8deg) rotate(3deg) translateX(0);} 25%{ transform: scale(1.08) rotateX(3deg) rotateY(-6deg) rotate(1deg) translateX(-2px);} 50%{ transform: scale(1.08) rotateX(7deg) rotateY(-10deg) rotate(5deg) translateX(2px);} 75%{ transform: scale(1.08) rotateX(4deg) rotateY(-7deg) rotate(2deg) translateX(-1px);} 100%{ transform: scale(1.08) rotateX(5deg) rotateY(-8deg) rotate(3deg) translateX(0);} }

/* Mobile-optimized animations */
@keyframes logoFloatMobile { 0%,100%{ transform: scale(.95) translateY(0);} 50%{ transform: scale(.95) translateY(-6px);} }
@keyframes logoShakeMobile { 0%{ transform: scale(1.08) rotateY(-5deg) translateX(0);} 33%{ transform: scale(1.08) rotateY(-8deg) translateX(2px);} 66%{ transform: scale(1.08) rotateY(-6deg) translateX(-1px);} 100%{ transform: scale(1.08) rotateY(-5deg) translateX(0);} }
@keyframes logoShakeSimple { 0%{ transform: scale(1.05) rotateY(-3deg);} 33%{ transform: scale(1.05) rotateY(-6deg);} 66%{ transform: scale(1.05) rotateY(-4deg);} 100%{ transform: scale(1.05) rotateY(-3deg);} }
@keyframes logoFloatSimple { 0%,100%{ transform: scale(.95) translateY(0);} 50%{ transform: scale(.95) translateY(-4px);} }

.enter-btn { background: linear-gradient(45deg, var(--turquoise-dark), var(--turquoise-primary)); color:#000; padding:16px 40px; border:none; border-radius:8px; font-family:'Space Grotesk', sans-serif; font-size:1.1rem; font-weight:600; text-decoration:none; text-transform:uppercase; letter-spacing:.1em; cursor:pointer; transition: all .5s ease; box-shadow:0 4px 20px rgba(37,208,179,.3); position:relative; z-index:10; border:2px solid transparent; opacity:0; animation: fadeInUp 1.2s ease-out .8s forwards; overflow:hidden; will-change: transform, box-shadow; margin:.5rem 0; }
.enter-btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition:left .5s; }
.enter-btn::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, transparent 0%, rgba(37,208,179,.1) 20%, rgba(37,208,179,.3) 50%, rgba(37,208,179,.1) 80%, transparent 100%); animation: glowSweep 3s ease-in-out infinite; animation-delay:1s; pointer-events:none; }
.enter-btn:hover::before { left:100%; }
.enter-btn:hover { transform: translateY(-4px) scale(1.05); box-shadow:0 12px 40px rgba(37,208,179,.6); border-color: var(--turquoise-light); background: linear-gradient(45deg, var(--turquoise-primary), var(--turquoise-light)); }
.enter-btn:active { transform: translateY(-2px) scale(1.02); }

/* Hidden security markers for bot detection */
.security-marker { position:absolute; left:-9999px; opacity:0; pointer-events:none; }

@media (max-width: 768px) {
    .logo { max-width:300px; width:85vw; }
    .site-title { font-size:2rem; margin:.8rem 0 .4rem 0; }
    .site-subtitle { font-size:1rem; margin:0 0 1.2rem 0; }
    .enter-btn { padding:14px 30px; font-size:1rem; }
    .container { padding:1rem; }
    .footer-separator { bottom:2rem; }
    .copyright-line { bottom:.5rem; font-size:.85rem; }
    .particle { display:none; }
    .connections { display:none; }
}

@media (max-width: 480px) {
    .logo { max-width:250px; width:80vw; }
    .site-title { font-size:1.8rem; margin:.6rem 0 .3rem 0; }
    .site-subtitle { font-size:.9rem; margin:0 0 1rem 0; }
    .enter-btn { padding:12px 25px; font-size:.95rem; }
    .container { padding:.5rem; }
    .logo-container { margin-bottom:1.5rem; }
}

/* Prevent pull-to-refresh whitespace on mobile */
@media (max-width: 1024px) {
    html, body { overscroll-behavior:none; -webkit-overflow-scrolling: touch; }
    .container { overscroll-behavior:none; }
    .logo { animation: logoFloatMobile 4s ease-in-out infinite; }
    .logo:hover { animation: logoShakeMobile .15s ease-in-out infinite; }
    .particle { animation-duration: 10s; }
}

/* Further reduce animations on low-end devices */
@media (max-width: 768px) {
    .logo { animation: logoFloatSimple 5s ease-in-out infinite; }
    .logo:hover { animation: logoShakeSimple .15s ease-in-out infinite; }
    .orb { animation-duration: 1.5s; }
}

/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .particle, .connections { display:none !important; }
    .logo { animation: none !important; transform: none !important; }
    .logo:hover { animation: none !important; transform: scale(1.02) !important; }
    .site-title, .site-subtitle { animation: none !important; opacity: 1 !important; }
}

.footer-dark-separator { border:none; border-top:1px solid rgba(255,255,255,0.08); height:0; max-width:800px; margin:2.5rem auto 0 auto; width:100%; }
.footer-separator { border:none; height:4px; max-width:800px; margin:3rem auto 1.25rem auto; width:100%; background: linear-gradient(90deg, #25e4e0 0%, #25D0B3 100%); box-shadow: 0 0 20px 4px #25e4e0, 0 4px 12px 0 rgba(37, 208, 179, 0.3); opacity: 1; z-index:10; border-radius:2px; }
.copyright-line { text-align:center; color:var(--text-muted); font-size:.95rem; margin:0; width:100%; z-index:10; }

/* Audio player */
.audio-player-container { margin:.5rem 0 .75rem 0; opacity:0; animation: fadeInUp 1.2s ease-out .4s forwards; z-index:10; position:relative; }
#landing-audio { display:none !important; }
.audio-toggle-btn { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.5rem; background: rgba(37,208,179,.1); border:2px solid var(--turquoise-primary); border-radius:25px; color:var(--turquoise-primary); font-family:inherit; font-size:.95rem; font-weight:600; cursor:pointer; transition: all .3s ease; backdrop-filter: blur(10px); position:relative; overflow:hidden; }
.audio-toggle-btn:hover { background: var(--turquoise-primary); color:#000; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(37,208,179,.3); }
.audio-toggle-btn:active { transform: translateY(0); }
.audio-toggle-btn.playing { background: var(--turquoise-primary); color:#000; animation: audioPulse 2s ease-in-out infinite; }
.audio-icon { width:20px; height:20px; transition: transform .3s ease; }
.audio-toggle-btn:hover .audio-icon { transform: scale(1.1); }
.audio-toggle-btn.playing .audio-icon { animation: iconPulse 1s ease-in-out infinite; }
.audio-text { font-weight:600; letter-spacing:.5px; }
@keyframes audioPulse { 0%,100%{ box-shadow: 0 8px 25px rgba(37,208,179,.3);} 50%{ box-shadow:0 8px 35px rgba(37,208,179,.5);} }
@keyframes iconPulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.15);} }
@media (max-width:768px){ .audio-toggle-btn{ padding:.6rem 1.2rem; font-size:.9rem;} .audio-icon{ width:18px; height:18px; } }