:root {
  --bg-main: #0a0a0a;
  --bg-secondary: #111111;
  --text-main: #e5e5e5;
  --text-muted: #888888;
  --accent-subtle: #2a2a2a;
  --text-secondary: #aaaaaa;

  --font-inter: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-inter);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Selection color */
::selection {
  background: var(--text-main);
  color: var(--bg-main);
}

/* ===== MICRO-INTERACTIONS ===== */

/* Animated underline for links */
a:not([class*="Btn"]) {
  background-image: linear-gradient(to right, var(--text-main), var(--text-main));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s ease;
}

a:not([class*="Btn"]):hover {
  background-size: 100% 1px;
}

/* Button ripple effect */
button,
[class*="Btn"],
[class*="Button"] {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

button::before,
[class*="Btn"]::before,
[class*="Button"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

button:hover::before,
[class*="Btn"]:hover::before,
[class*="Button"]:hover::before {
  width: 300px;
  height: 300px;
}

button:active,
[class*="Btn"]:active,
[class*="Button"]:active {
  transform: scale(0.98);
}

/* Card hover effects */
[class*="card"],
[class*="Card"],
[class*="Block"] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[class*="card"]:hover,
[class*="Card"]:hover,
[class*="Block"]:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(150, 100, 255, 0.1);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 5vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999;
    transition: padding 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease;
    mix-blend-mode: difference;
    color: #fff;
}

.navbar.scrolled {
    padding: 1.5rem 5vw;
    background-color: rgba(10, 10, 10, 0.8);
    backdrop-filter: blur(10px);
    mix-blend-mode: normal;
    color: var(--text-main);
    border-bottom: 1px solid var(--accent-subtle);
}

.logo {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.1rem;
}

.links {
    display: flex;
    gap: 3rem;
}

.nav-link {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 1;
}

.mobileMenu {
    display: none;
}

@media (max-width: 768px) {
    .links {
        display: none;
    }
    .mobileMenu {
        display: block;
        cursor: pointer;
        z-index: 200;
        position: relative;
    }
}

.menuToggleBtn {
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    padding: 0;
    font-weight: 700;
}

/* Main Layout */
.main {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.hero {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 5vw;
  padding-top: 80px;
  background: linear-gradient(to bottom, #000000, #0a0a0f, #050508);
  overflow: hidden;
}

.heroTitle {
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  margin-bottom: 2rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

.highlight {
  color: var(--text-muted);
}

.heroSubtitle {
  font-size: 1.5rem;
  max-width: 600px;
  margin-bottom: 3rem;
  color: var(--text-secondary);
  line-height: 1.5;
  position: relative;
  z-index: 1;
}

.ctaGroup {
  display: flex;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

.primaryBtn {
  padding: 1rem 2rem;
  background: var(--text-main);
  color: var(--bg-main);
  font-weight: 500;
  border: 1px solid var(--text-main);
  transition: all 0.3s ease;
  display: inline-block;
}

.primaryBtn:hover {
  background: transparent;
  color: var(--text-main);
}

.secondaryBtn {
  padding: 1rem 2rem;
  background: transparent;
  color: var(--text-main);
  font-weight: 500;
  border: 1px solid var(--accent-subtle);
  transition: all 0.3s ease;
  display: inline-block;
}

.secondaryBtn:hover {
  border-color: var(--text-main);
}

.vision {
  position: relative;
  padding: 8rem 5vw;
  border-top: 1px solid var(--accent-subtle);
  background: var(--bg-main);
  overflow: hidden;
}

.section-label {
  position: relative;
  display: block;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 2rem;
  border-left: 2px solid var(--text-main);
  padding-left: 1rem;
  z-index: 1;
}

.visionText {
  position: relative;
  font-size: 2.5rem;
  line-height: 1.4;
  max-width: 1200px;
  z-index: 1;
}

/* Services */
.services {
    position: relative;
    padding: 8rem 10vw;
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow: hidden;
}

.services .section-label {
    border-left: 1px solid var(--text-muted);
    margin-bottom: 4rem;
    font-size: 0.8rem;
}

.services-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    border-top: 1px solid var(--accent-subtle);
    z-index: 1;
}

.serviceBlock {
    padding: 2rem 0;
    border-bottom: 1px solid var(--accent-subtle);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: opacity 0.3s ease;
}

.serviceBlock:hover {
    opacity: 0.8;
}

.serviceNumber {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-family: monospace;
}

.serviceTitle {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.serviceDesc {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.5;
    max-width: 90%;
}

/* Philosophy */
.philosophy {
    position: relative;
    padding: 8rem 10vw;
    background-color: var(--bg-secondary);
    color: var(--text-main);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
}

.philosophy .section-label {
    border-left: 1px solid var(--text-muted);
    margin-bottom: 4rem;
    font-size: 0.8rem;
}

.philosophy-list {
    position: relative;
    list-style: none;
    width: 100%;
    z-index: 1;
}

.philosophy-item {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 300;
    border-bottom: 1px solid var(--accent-subtle);
    padding: 2rem 0;
    color: var(--text-muted);
    transition: color 0.3s ease, padding-left 0.3s ease;
    cursor: default;
}

.philosophy-item:hover {
    color: var(--text-main);
    padding-left: 20px;
}

.philosophy-item:first-child {
    border-top: 1px solid var(--accent-subtle);
}

/* Footer */
.footer {
    position: relative;
    padding: 4rem 10vw;
    background-color: var(--bg-main);
    color: var(--text-muted);
    border-top: 1px solid var(--accent-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    overflow: hidden;
}

.footer-left {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
}

.footer-logo {
    margin-bottom: 1rem;
    opacity: 0.8;
    filter: grayscale(100%);
    transition: opacity 0.3s ease;
}

.footer-left:hover .footer-logo {
    opacity: 1;
}

.footer-brand {
    color: var(--text-main);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-email {
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.footer-email:hover {
    color: var(--text-main);
}

.footer-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.footer-link {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-link:hover {
    color: var(--text-main);
}

.footer-separator {
    color: var(--accent-subtle);
}

.footer-copyright {
    position: relative;
    font-size: 0.8rem;
    opacity: 0.5;
    z-index: 1;
}

/* ==========================================================================
   STARFIELD EFFECT
   ========================================================================== */
.starfieldContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.starsSmall {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 90% 60%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 15% 15%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 70% 85%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 45% 25%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 25% 55%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 65% 35%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 85% 45%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 10% 65%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 40% 90%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 75% 20%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 55% 60%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 95% 75%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 12% 48%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 68% 92%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 88% 28%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 42% 12%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 52% 78%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 18% 92%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 78% 38%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 35% 68%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 92% 18%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 8% 82%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 62% 5%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 48% 95%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 22% 62%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 72% 52%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 5% 35%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 98% 88%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(1px 1px at 38% 58%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1px 1px at 58% 32%, rgba(255, 255, 255, 0.5), transparent);
    background-size: 250% 250%;
    animation: twinkle 3s ease-in-out infinite;
}

.starsMedium {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 40% 40%, rgba(150, 120, 255, 0.5), transparent),
        radial-gradient(2px 2px at 75% 25%, rgba(120, 150, 255, 0.4), transparent),
        radial-gradient(2px 2px at 25% 65%, rgba(180, 130, 255, 0.5), transparent),
        radial-gradient(2px 2px at 85% 75%, rgba(140, 140, 255, 0.4), transparent),
        radial-gradient(2px 2px at 55% 90%, rgba(160, 120, 255, 0.5), transparent),
        radial-gradient(2px 2px at 15% 35%, rgba(170, 110, 255, 0.4), transparent),
        radial-gradient(2px 2px at 65% 15%, rgba(130, 160, 255, 0.5), transparent),
        radial-gradient(2px 2px at 35% 50%, rgba(190, 140, 255, 0.4), transparent),
        radial-gradient(2px 2px at 80% 55%, rgba(150, 130, 255, 0.5), transparent),
        radial-gradient(2px 2px at 45% 80%, rgba(140, 150, 255, 0.4), transparent),
        radial-gradient(2px 2px at 70% 45%, rgba(160, 140, 255, 0.5), transparent),
        radial-gradient(2px 2px at 20% 20%, rgba(180, 120, 255, 0.4), transparent),
        radial-gradient(2px 2px at 50% 10%, rgba(150, 140, 255, 0.5), transparent),
        radial-gradient(2px 2px at 90% 30%, rgba(170, 120, 255, 0.4), transparent),
        radial-gradient(2px 2px at 10% 70%, rgba(130, 150, 255, 0.5), transparent),
        radial-gradient(2px 2px at 60% 95%, rgba(190, 130, 255, 0.4), transparent),
        radial-gradient(2px 2px at 30% 85%, rgba(140, 160, 255, 0.5), transparent),
        radial-gradient(2px 2px at 95% 50%, rgba(180, 110, 255, 0.4), transparent),
        radial-gradient(2px 2px at 5% 55%, rgba(150, 170, 255, 0.5), transparent),
        radial-gradient(2px 2px at 48% 62%, rgba(160, 130, 255, 0.4), transparent),
        radial-gradient(2px 2px at 82% 8%, rgba(170, 150, 255, 0.5), transparent),
        radial-gradient(2px 2px at 28% 42%, rgba(130, 140, 255, 0.4), transparent),
        radial-gradient(2px 2px at 68% 78%, rgba(190, 160, 255, 0.5), transparent),
        radial-gradient(2px 2px at 12% 88%, rgba(140, 120, 255, 0.4), transparent);
    background-size: 200% 200%;
    animation: twinkle 4s ease-in-out infinite;
    animation-delay: -1s;
}

.starsLarge {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(3px 3px at 30% 20%, rgba(200, 150, 255, 0.6), transparent),
        radial-gradient(3px 3px at 65% 55%, rgba(180, 170, 255, 0.5), transparent),
        radial-gradient(3px 3px at 10% 75%, rgba(190, 160, 255, 0.6), transparent),
        radial-gradient(3px 3px at 50% 35%, rgba(210, 140, 255, 0.5), transparent),
        radial-gradient(3px 3px at 85% 65%, rgba(170, 180, 255, 0.6), transparent),
        radial-gradient(3px 3px at 40% 85%, rgba(200, 160, 255, 0.5), transparent),
        radial-gradient(3px 3px at 75% 10%, rgba(190, 150, 255, 0.6), transparent),
        radial-gradient(3px 3px at 20% 45%, rgba(180, 165, 255, 0.5), transparent),
        radial-gradient(3px 3px at 90% 80%, rgba(210, 155, 255, 0.6), transparent),
        radial-gradient(3px 3px at 15% 60%, rgba(170, 175, 255, 0.5), transparent),
        radial-gradient(3px 3px at 55% 70%, rgba(200, 145, 255, 0.6), transparent),
        radial-gradient(3px 3px at 70% 25%, rgba(190, 170, 255, 0.5), transparent),
        radial-gradient(3px 3px at 35% 5%, rgba(180, 160, 255, 0.6), transparent),
        radial-gradient(3px 3px at 95% 40%, rgba(210, 150, 255, 0.5), transparent),
        radial-gradient(3px 3px at 5% 90%, rgba(170, 180, 255, 0.6), transparent);
    background-size: 180% 180%;
    animation: twinkle 5s ease-in-out infinite;
    animation-delay: -2s;
}

@keyframes twinkle {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* ==========================================================================
   AURORA BACKGROUND
   ========================================================================== */
.animatedBg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

/* Animated Gradient Orbs */
.orb1 {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
            rgba(150, 100, 255, 0.4) 0%,
            rgba(120, 80, 220, 0.2) 50%,
            transparent 100%);
    filter: blur(60px);
    top: -10%;
    left: 10%;
    animation: float1 12s ease-in-out infinite;
    mix-blend-mode: screen;
}

.orb2 {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
            rgba(200, 80, 255, 0.3) 0%,
            rgba(160, 60, 220, 0.15) 50%,
            transparent 100%);
    filter: blur(70px);
    top: 30%;
    right: 5%;
    animation: float2 15s ease-in-out infinite;
    animation-delay: -3s;
    mix-blend-mode: screen;
}

.orb3 {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 60%,
            rgba(230, 120, 255, 0.35) 0%,
            rgba(190, 100, 240, 0.18) 50%,
            transparent 100%);
    filter: blur(65px);
    bottom: 10%;
    left: 15%;
    animation: float3 13s ease-in-out infinite;
    animation-delay: -6s;
    mix-blend-mode: screen;
}

.orb4 {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    background: radial-gradient(circle at 60% 40%,
            rgba(140, 100, 255, 0.3) 0%,
            rgba(170, 80, 255, 0.15) 50%,
            transparent 100%);
    filter: blur(75px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: float4 18s ease-in-out infinite;
    animation-delay: -9s;
    mix-blend-mode: screen;
}

.orb5 {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
            rgba(100, 150, 255, 0.25) 0%,
            rgba(120, 100, 220, 0.12) 50%,
            transparent 100%);
    filter: blur(55px);
    bottom: 20%;
    right: 20%;
    animation: float5 10s ease-in-out infinite;
    animation-delay: -5s;
    mix-blend-mode: screen;
}

.orb6 {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 55%,
            rgba(180, 90, 255, 0.32) 0%,
            rgba(150, 70, 230, 0.16) 50%,
            transparent 100%);
    filter: blur(62px);
    top: 15%;
    right: 25%;
    animation: float6 11s ease-in-out infinite;
    animation-delay: -4s;
    mix-blend-mode: screen;
}

.orb7 {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 65%,
            rgba(110, 130, 255, 0.28) 0%,
            rgba(130, 110, 240, 0.14) 50%,
            transparent 100%);
    filter: blur(68px);
    bottom: 25%;
    left: 40%;
    animation: float7 14s ease-in-out infinite;
    animation-delay: -7s;
    mix-blend-mode: screen;
}

/* Subtle grid overlay */
.bg-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.3;
    animation: gridMove 20s linear infinite;
}

/* Float Animations - faster, more dynamic movement */
@keyframes float1 {
    0%,
    100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-150px, -120px) scale(1.15); }
    50% { transform: translate(80px, 150px) scale(0.85); }
    75% { transform: translate(-120px, 80px) scale(1.08); }
}

@keyframes float2 {
    0%,
    100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(140px, -100px) scale(1.2); }
    66% { transform: translate(-170px, 120px) scale(0.8); }
}

@keyframes float3 {
    0%,
    100% { transform: translate(0, 0) scale(1); }
    30% { transform: translate(-100px, -140px) scale(1.12); }
    60% { transform: translate(160px, 60px) scale(0.88); }
    90% { transform: translate(-80px, -60px) scale(1.06); }
}

@keyframes float4 {
    0%,
    100% { transform: translate(-50%, -50%) scale(1); }
    25% { transform: translate(calc(-50% + 120px), calc(-50% - 160px)) scale(1.18); }
    50% { transform: translate(calc(-50% - 140px), calc(-50% + 100px)) scale(0.82); }
    75% { transform: translate(calc(-50% + 100px), calc(-50% + 140px)) scale(1.1); }
}

@keyframes float5 {
    0%,
    100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-120px, 100px) scale(1.15); }
    80% { transform: translate(140px, -120px) scale(0.85); }
}

@keyframes float6 {
    0%,
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    33% { transform: translate(100px, -80px) scale(1.1) rotate(5deg); }
    66% { transform: translate(-130px, 110px) scale(0.9) rotate(-5deg); }
}

@keyframes float7 {
    0%,
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
    25% { transform: translate(-110px, -90px) scale(1.12) rotate(-3deg); }
    50% { transform: translate(90px, 130px) scale(0.88) rotate(3deg); }
    75% { transform: translate(120px, -70px) scale(1.05) rotate(-2deg); }
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

/* ==========================================================================
   MESH GRADIENT
   ========================================================================== */
.meshContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

.mesh1 {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
    background: radial-gradient(circle at 30% 40%,
            rgba(120, 80, 200, 0.15) 0%,
            transparent 50%);
    filter: blur(80px);
    animation: morphMesh1 20s ease-in-out infinite;
    mix-blend-mode: screen;
}

.mesh2 {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    right: 10%;
    background: radial-gradient(circle at 70% 60%,
            rgba(80, 120, 180, 0.12) 0%,
            transparent 50%);
    filter: blur(90px);
    animation: morphMesh2 25s ease-in-out infinite;
    animation-delay: -5s;
    mix-blend-mode: screen;
}

.mesh3 {
    position: absolute;
    width: 60%;
    height: 60%;
    bottom: 10%;
    left: 20%;
    background: radial-gradient(circle at 50% 50%,
            rgba(100, 90, 160, 0.1) 0%,
            transparent 50%);
    filter: blur(100px);
    animation: morphMesh3 30s ease-in-out infinite;
    animation-delay: -10s;
    mix-blend-mode: screen;
}

@keyframes morphMesh1 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% {
        transform: translate(-20px, -30px) scale(1.1);
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% {
        transform: translate(30px, 20px) scale(0.9);
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    75% {
        transform: translate(-10px, 30px) scale(1.05);
        border-radius: 70% 30% 50% 50% / 30% 70% 50% 60%;
    }
}

@keyframes morphMesh2 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    }
    33% {
        transform: translate(25px, -20px) scale(1.08);
        border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
    }
    66% {
        transform: translate(-30px, 25px) scale(0.92);
        border-radius: 60% 40% 30% 70% / 40% 70% 40% 70%;
    }
}

@keyframes morphMesh3 {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
    }
    40% {
        transform: translate(-25px, 20px) scale(1.1);
        border-radius: 50% 50% 60% 40% / 50% 50% 40% 60%;
    }
    80% {
        transform: translate(20px, -25px) scale(0.95);
        border-radius: 70% 30% 40% 60% / 30% 70% 60% 40%;
    }
}

/* ==========================================================================
   ABOUT PAGE
   ========================================================================== */
.about-container { min-height: 100vh; padding: 8rem 5vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.about-header { margin-bottom: 6rem; max-width: 900px; }
.about-title { font-size: 4rem; font-weight: 500; margin-bottom: 2rem; line-height: 1.1; letter-spacing: -0.02em; }
.about-subtitle { font-size: 1.5rem; color: var(--text-muted); font-weight: 300; max-width: 600px; line-height: 1.5; }
.about-section { margin-bottom: 8rem; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; border-top: 1px solid var(--accent-subtle); padding-top: 4rem; }
.about-sectionTitle { font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.about-sectionContent { font-size: 1.2rem; line-height: 1.8; color: var(--text-secondary); }
.about-sectionContent p { margin-bottom: 1.5rem; }
.about-statsGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem; }
.about-statItem { border: 1px solid var(--accent-subtle); padding: 2rem; background: var(--bg-secondary); }
.about-statNumber { font-size: 3rem; font-weight: 600; display: block; margin-bottom: 0.5rem; }
.about-statLabel { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }

@media (max-width: 900px) {
    .about-section { grid-template-columns: 1fr; gap: 2rem; }
    .about-title { font-size: 3rem; }
    .about-statsGrid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SERVICES PAGE
   ========================================================================== */
.services-page-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.services-page-header { margin-bottom: 6rem; animation: fadeIn 1s ease-out; }
.services-page-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.services-page-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.services-page-list { display: flex; flex-direction: column; }
.services-page-item { padding: 2rem 0; border-top: 1px solid var(--accent-subtle); cursor: pointer; transition: all 0.3s ease; }
.services-page-item:last-child { border-bottom: 1px solid var(--accent-subtle); }
.services-page-item:hover, .services-page-item.active { background-color: rgba(255, 255, 255, 0.02); padding-left: 1rem; padding-right: 1rem; }
.services-page-category { font-size: 2rem; font-weight: 500; color: var(--text-main); display: flex; align-items: center; gap: 1.5rem; transition: color 0.3s ease; }
.services-page-index { font-size: 1rem; color: var(--accent-color, #9664ff); font-family: monospace; opacity: 0.6; }
.services-page-item.active .services-page-category { color: var(--accent-color, #9664ff); }
.services-page-contentWrapper { overflow: hidden; height: 0; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease; }
.services-page-item.active .services-page-contentWrapper { height: auto; opacity: 1; }
.services-page-details { padding-top: 1.5rem; padding-left: 3rem; display: flex; flex-direction: column; gap: 1.5rem; }
.services-page-description { font-size: 1.1rem; line-height: 1.6; color: var(--text-muted); max-width: 800px; }
.services-page-tags { display: flex; gap: 1rem; flex-wrap: wrap; }
.services-page-tag { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.5rem 1rem; border: 1px solid var(--accent-subtle); border-radius: 20px; color: var(--text-muted); transition: all 0.3s ease; }
.services-page-item.active .services-page-tag { border-color: var(--accent-color, #9664ff); color: var(--accent-color, #9664ff); }

@media (max-width: 768px) {
    .services-page-details { padding-left: 0; }
}

/* ==========================================================================
   WORK PAGE
   ========================================================================== */
.work-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.work-header { margin-bottom: 6rem; animation: fadeIn 1s ease-out; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; }
.work-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.work-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.work-viewToggle { display: flex; gap: 1rem; background: rgba(255, 255, 255, 0.03); padding: 4px; border: 1px solid var(--accent-subtle); border-radius: 4px; }
.work-toggleBtn { background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.2s; border-radius: 2px; }
.work-toggleBtn:hover { color: var(--text-main); }
.work-toggleBtn.active { background: var(--accent-subtle); color: var(--text-main); }
.work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; animation: fadeIn 1s ease-out 0.3s backwards; }
.work-projectCard { border: 1px solid var(--accent-subtle); background-color: rgba(255, 255, 255, 0.01); transition: all 0.3s ease; display: flex; flex-direction: column; cursor: pointer; overflow: hidden; text-decoration: none; color: inherit; }
.work-projectCard:hover { transform: translateY(-5px); border-color: var(--text-muted); }
.work-contentWrapper { padding: 2rem; display: flex; flex-direction: column; flex-grow: 1; }
.work-projectType { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-color, #9664ff); margin-bottom: 0.5rem; }
.work-projectTitle { font-size: 1.8rem; font-weight: 500; margin-bottom: 1rem; color: var(--text-main); }
.work-projectDesc { font-size: 1rem; line-height: 1.5; color: var(--text-muted); margin-bottom: 2rem; flex-grow: 1; }
.work-projectLink { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-main); align-self: flex-start; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.work-projectCard:hover .work-projectLink { border-bottom-color: var(--text-main); }

@media (max-width: 768px) {
    .work-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   JOURNAL PAGE
   ========================================================================== */
.journal-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.journal-header { margin-bottom: 6rem; animation: fadeIn 1s ease-out; }
.journal-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.journal-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 4rem; animation: fadeIn 1s ease-out 0.3s backwards; }

.journal-entryCard { display: flex; flex-direction: column; padding: 0; border: 1px solid var(--accent-subtle); border-radius: 4px; transition: all 0.3s ease; text-decoration: none; height: 100%; background: rgba(255, 255, 255, 0.01); overflow: hidden; color: var(--text-main); }
.journal-entryCard:hover { border-color: var(--accent-color, #9664ff); background: rgba(255, 255, 255, 0.03); transform: translateY(-5px); }
.journal-entryHeader { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-muted); font-family: monospace; text-transform: uppercase; margin: 1.5rem 2rem 0; }
.journal-entryTitle { font-size: 1.8rem; font-weight: 700; color: var(--text-main); line-height: 1.2; margin: 1rem 2rem; }
.journal-entryExcerpt { font-size: 1rem; color: var(--text-muted); line-height: 1.6; flex-grow: 1; margin: 0 2rem 2rem; }
.journal-readMore { font-size: 0.9rem; font-weight: 600; color: var(--accent-color, #9664ff); margin: auto 2rem 2rem; text-transform: uppercase; letter-spacing: 0.05em; }

@media (max-width: 768px) {
    .journal-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.contact-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); display: flex; flex-direction: column; }
.contact-header { margin-bottom: 6rem; animation: fadeIn 1s ease-out; }
.contact-logoWrapper { margin-bottom: 1rem; }
.contact-logo { opacity: 0.8; filter: grayscale(100%); }
.contact-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.contact-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.contact-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; animation: fadeIn 1s ease-out 0.3s backwards; }
.contact-infoSection { display: flex; flex-direction: column; gap: 3rem; }
.contact-infoBlock h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1rem; }
.contact-infoBlock p { font-size: 1.1rem; line-height: 1.5; }
.contact-formSection { background-color: var(--bg-secondary); padding: 3rem; border: 1px solid var(--accent-subtle); }
.contact-formGroup { margin-bottom: 2rem; }
.contact-label { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.5rem; }
.contact-input, .contact-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--text-muted); padding: 1rem 0; color: var(--text-main); font-family: inherit; font-size: 1rem; transition: border-color 0.3s ease; resize: none; }
.contact-input:focus, .contact-textarea:focus { outline: none; border-color: var(--text-main); }
.contact-submitBtn { background: transparent; border: 1px solid var(--text-main); color: var(--text-main); padding: 1rem 3rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: all 0.3s ease; margin-top: 2rem; }
.contact-submitBtn:hover { background: var(--text-main); color: var(--bg-main); }

@media (max-width: 768px) {
    .contact-content { grid-template-columns: 1fr; gap: 4rem; }
    .contact-container { padding: 6rem 5vw 4rem; }
    .contact-formSection { padding: 2rem; }
}


/* ==========================================================================
   JOURNAL PAGE
   ========================================================================== */
.journal-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.journal-header { margin-bottom: 6rem; }
.journal-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.journal-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
.journal-empty { font-size: 1.2rem; color: var(--text-muted); }
.journal-card { display: flex; flex-direction: column; border: 1px solid var(--accent-subtle); padding: 2rem; transition: all 0.3s ease; text-decoration: none; color: inherit; background: rgba(255, 255, 255, 0.01); }
.journal-card:hover { transform: translateY(-5px); border-color: var(--text-muted); }
.journal-meta { display: flex; justify-content: space-between; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 1rem; }
.journal-cardTitle { font-size: 1.5rem; font-weight: 500; margin-bottom: 1rem; color: var(--text-main); }
.journal-excerpt { font-size: 1rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 2rem; flex-grow: 1; }
.journal-readMore { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-color, #9664ff); align-self: flex-start; }

/* ==========================================================================
   CAREERS PAGE
   ========================================================================== */
.careers-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.careers-header { margin-bottom: 6rem; }
.careers-title { font-size: clamp(3rem, 5vw, 5rem); font-weight: 700; margin-bottom: 1rem; }
.careers-subtitle { font-size: 1.2rem; color: var(--text-muted); max-width: 600px; }
.careers-manifesto { margin-bottom: 6rem; max-width: 800px; }
.careers-manifesto h2 { font-size: 2rem; margin-bottom: 1.5rem; font-weight: 500; }
.careers-manifesto p { font-size: 1.2rem; line-height: 1.6; color: var(--text-muted); }
.careers-positionsHeader { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3rem; border-bottom: 1px solid var(--accent-subtle); padding-bottom: 1rem; }
.careers-positionsHeader h2 { font-size: 2rem; font-weight: 500; }
.careers-jobList { display: flex; flex-direction: column; }
.careers-jobItem { display: flex; justify-content: space-between; align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--accent-subtle); transition: all 0.3s ease; text-decoration: none; color: inherit; }
.careers-jobItem:hover { padding-left: 1rem; padding-right: 1rem; background: rgba(255,255,255,0.02); }
.careers-jobTitle { font-size: 1.5rem; font-weight: 500; margin-bottom: 0.5rem; }
.careers-jobMeta { display: flex; gap: 1rem; font-size: 0.9rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.careers-applyLink { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-color, #9664ff); }

@media (max-width: 768px) {
    .careers-jobItem { flex-direction: column; align-items: flex-start; gap: 1rem; }
    .careers-applyLink { align-self: flex-start; }
}

/* ==========================================================================
   LEGAL / PRIVACY PAGE
   ========================================================================== */
.legal-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); }
.legal-title { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 700; margin-bottom: 2rem; }
.legal-content { font-size: 1.1rem; line-height: 1.8; color: var(--text-muted); max-width: 800px; }
.legal-content p { margin-bottom: 1.5rem; }

/* ==========================================================================
   STATUS PAGE
   ========================================================================== */
.status-container { min-height: 100vh; padding: 8rem 10vw 4rem; background-color: var(--bg-main); color: var(--text-main); display: flex; flex-direction: column; align-items: center; }
.status-header { text-align: center; margin-bottom: 6rem; display: flex; flex-direction: column; align-items: center; }
.status-statusDot { width: 12px; height: 12px; background: #00ff00; border-radius: 50%; box-shadow: 0 0 15px #00ff00; margin-bottom: 2rem; animation: pulse 2s infinite; }
.status-title { font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 700; margin-bottom: 1rem; letter-spacing: 0.05em; text-transform: uppercase; }
.status-subtitle { font-size: 1.1rem; color: var(--text-muted); }
.status-metricsGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; width: 100%; max-width: 1000px; margin-bottom: 6rem; }
.status-metricCard { border: 1px solid var(--accent-subtle); background: var(--bg-secondary); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.status-metricLabel { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.status-metricValueLine { display: flex; justify-content: space-between; align-items: center; font-family: monospace; font-size: 1.2rem; }
.status-metricStatus { color: #00ff00; }
.status-logSection { width: 100%; max-width: 1000px; margin-bottom: 4rem; }
.status-sectionTitle { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); border-bottom: 1px solid var(--accent-subtle); padding-bottom: 1rem; margin-bottom: 2rem; }
.status-logList { display: flex; flex-direction: column; gap: 1rem; font-family: monospace; font-size: 0.9rem; color: var(--text-muted); }
.status-logTime { color: var(--text-main); opacity: 0.7; margin-right: 1rem; }
.status-cta { margin-top: auto; }
.status-backLink { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-main); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.status-backLink:hover { border-bottom-color: var(--text-main); }

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 0, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 0, 0); }
}

/* Animations (Fade In) */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Media Queries */
@media (max-width: 768px) {
  .heroTitle {
    font-size: 3.5rem;
  }
  .heroSubtitle {
    font-size: 1.1rem;
  }
  .visionText {
    font-size: 1.8rem;
  }
  .ctaGroup {
    flex-direction: column;
    gap: 1rem;
  }
  .primaryBtn,
  .secondaryBtn {
    width: 100%;
    text-align: center;
  }
  .services {
    padding: 4rem 5vw;
  }
  .philosophy {
    padding: 4rem 5vw;
  }
  .footer {
    padding: 2rem 5vw;
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
}


/* ==========================================================================
   MOBILE MENU & RESPONSIVENESS
   ========================================================================== */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-main);
    z-index: 150;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.mobile-nav-link {
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-main);
    text-decoration: none;
    transition: color 0.3s ease;
}

.mobile-nav-link:hover {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .heroTitle {
        font-size: 3.5rem;
    }
    .heroSubtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    .visionText {
        font-size: 1.8rem;
    }
    .footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
        padding: 3rem 5vw;
    }
    .footer-links {
        flex-wrap: wrap;
        gap: 1rem;
    }
    .footer-separator {
        display: none;
    }
    .ctaGroup {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
    .primaryBtn, .secondaryBtn {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }
    .services, .vision, .philosophy {
        padding: 5rem 5vw;
    }
    .navbar {
        padding: 1.5rem 5vw;
    }
    
    /* PERFORMANCE OPTIMIZATION FOR MOBILE (WITHOUT REMOVING EFFECTS) */
    
    /* 1. Force hardware acceleration & optimize layers */
    .starfieldContainer,
    .animatedBg,
    .meshContainer,
    .starsSmall,
    .starsMedium,
    .starsLarge,
    .orb1,
    .orb2,
    .mesh1 {
        display: block !important;
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform, opacity;
        pointer-events: none !important;
    }

    /* 2. Solve Overdraw: Keep only essential ambient effects, hide the rest */
    .orb3, .orb4, .orb5, .orb6, .orb7,
    .mesh2, .mesh3 {
        display: none !important;
    }

    /* 3. Simplify Starfield Twinkle: Eliminate scale changes to prevent GPU texture refitting */
    .starsSmall, .starsMedium, .starsLarge {
        animation: twinkleMobile 6s ease-in-out infinite !important;
    }
    .starsSmall { animation-delay: 0s !important; }
    .starsMedium { animation-delay: -2s !important; }
    .starsLarge { animation-delay: -4s !important; }

    /* 4. Simplify Floating Orbs: Use compositor-only translate3d with smaller translation bounds */
    .orb1 {
        width: 250px !important;
        height: 250px !important;
        filter: blur(40px) !important;
        animation: floatMobile1 12s ease-in-out infinite !important;
    }
    .orb2 {
        width: 300px !important;
        height: 300px !important;
        filter: blur(45px) !important;
        animation: floatMobile2 15s ease-in-out infinite !important;
    }

    /* 5. Simplify Mesh morphing: Remove complex keyframe morphing, use static or slow 3D shift */
    .mesh1 {
        filter: blur(50px) !important;
        animation: meshMobile 20s ease-in-out infinite !important;
    }
}

/* HIGH-PERFORMANCE MOBILE KEYFRAMES (COMPOSITOR-ONLY) */
@keyframes twinkleMobile {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.65; }
}

@keyframes floatMobile1 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-30px, -20px, 0); }
}

@keyframes floatMobile2 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(30px, 20px, 0); }
}

@keyframes meshMobile {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-15px, 10px, 0) scale(1.03); }
}