/* Hide body by default to prevent flash of content before auth check */
body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #cbd5e1; overflow-x: hidden; display: none; }
.hero-gradient-text { background: linear-gradient(135deg, #2dd4bf, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: #2dd4bf; transition: width 0.3s ease; }
.nav-link:hover, .nav-link.active { color: #2dd4bf; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.glass-card { background: rgba(30, 41, 59, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(51, 65, 85, 0.5); }
.cta-button { background: linear-gradient(135deg, #14b8a6, #0ea5e9); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.cta-button:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 10px 20px rgba(14, 165, 233, 0.2); }
.cta-button:disabled { opacity: 0.7; cursor: not-allowed; }

.flip-card-container { perspective: 1000px; }
.flip-card { position: relative; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); }
.flip-card.is-flipped { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.flip-card-back { transform: rotateY(180deg); }

.tech-hexagon { position: relative; width: 100px; height: 115.47px; background-color: #334155; margin: 28.87px 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); transition: background-color 0.3s ease; }
.tech-hexagon:hover { background-color: #14b8a6; }
.tech-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }

.timeline-item::before { content: ''; position: absolute; top: 20px; left: -29px; width: 18px; height: 18px; background-color: #0f172a; border: 4px solid #14b8a6; border-radius: 50%; z-index: 1; }
#hero-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.modal-overlay { transition: opacity 0.3s ease-in-out; }