body {
  background-color: #1a1a2e;
  color: #f9fafb;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#contact {
  margin-top: auto;
}

.text-outline {
  -webkit-text-stroke: 1px rgba(154, 122, 165, 0.4);
  color: transparent;
}
.text-outline-hover:hover {
  -webkit-text-stroke: 0px;
  color: #9a7aa5;
}

.clip-angle {
  clip-path: none;
}
@media (min-width: 768px) {
  .clip-angle {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
  }
}
.clip-angle-inv {
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
}
@media (min-width: 768px) {
  .clip-angle-inv {
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }
}

.snap-x-mandatory {
  scroll-snap-type: x mandatory;
}
.snap-center {
  scroll-snap-align: center;
}
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.card-sticky {
  position: sticky;
  top: 15vh;
  background: #4a2f53;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}
.card-sticky:nth-child(1) {
  top: 15vh;
  background: #4a2f53;
  transform: rotate(-1deg);
}
.card-sticky:nth-child(2) {
  top: 18vh;
  background: #664570;
  transform: rotate(1deg);
}
.card-sticky:nth-child(3) {
  top: 21vh;
  background: #9a7aa5;
  transform: rotate(-0.5deg);
}

.grain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 50;
}

/* Hide grain on mobile for performance */
@media (max-width: 767px) {
  .grain {
    display: none !important;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

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

.menu-item {
  animation: fadeInUp 0.5s ease-out forwards;
  opacity: 0;
}

/* ============================================
   MOBILE PERFORMANCE OPTIMIZATIONS FOR HERO
   ============================================ */
@media (max-width: 767px) {
  /* Disable expensive effects on mobile */
  header {
    /* Use contain for better performance */
    contain: layout style paint;
    /* Reduce will-change usage */
    will-change: auto;
  }
  
  /* Disable backdrop blur on mobile - very expensive */
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(26, 26, 46, 0.95) !important;
  }
  
  /* Simplify hero image - use transform3d for GPU acceleration */
  header .absolute.inset-0 img {
    transform: translate3d(0, 0, 0);
    /* Reduce opacity complexity */
    opacity: 0.4;
    /* Use will-change only when needed */
    will-change: transform;
  }
  
  /* Disable grain overlay on mobile - expensive */
  .grain {
    display: none;
  }
  
  /* Simplify gradient overlays */
  header .absolute.inset-0 > div {
    /* Reduce backdrop operations */
    transform: translate3d(0, 0, 0);
  }
  
  /* Disable hover transforms on mobile */
  header img[class*="hover:scale"] {
    transform: scale(1) !important;
    transition: none !important;
  }
  
  /* Simplify badge backdrop blur */
  .inline-flex.items-center.backdrop-blur-sm {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
  }
  
  /* Reduce animation complexity */
  .animate-fade-in-up {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  
  /* Disable pulse animation on mobile */
  .animate-pulse {
    animation: none !important;
  }
  
  /* Optimize logo transitions */
  header img[alt*="Vamshio"] {
    transition: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
  
  /* Reduce text rendering complexity */
  h1 {
    /* Use simpler text rendering */
    text-rendering: optimizeSpeed;
    /* Disable font smoothing on mobile for performance */
    -webkit-font-smoothing: auto;
    font-smoothing: auto;
  }
  
  /* Simplify SVG underlines */
  header svg {
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }
  
  /* Reduce container complexity */
  header .container {
    /* Use contain for isolation */
    contain: layout style;
  }
  
  /* Optimize grid layout */
  header .grid {
    /* Use simpler layout on mobile */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  /* Reduce min-height complexity */
  header .min-h-\[80vh\] {
    min-height: auto !important;
  }
  
  /* Simplify button transitions */
  header button,
  header a[class*="transition"] {
    transition: opacity 0.2s ease !important;
    transform: none !important;
  }
  
  /* Disable hover effects on mobile */
  header *:hover {
    transform: none !important;
    transition: none !important;
  }
  
  /* Optimize hero background layers */
  .hero-background {
    /* Use GPU acceleration */
    transform: translate3d(0, 0, 0);
    /* Contain paint */
    contain: paint;
  }
  
  .hero-image {
    /* Use GPU for image */
    transform: translate3d(0, 0, 0);
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    /* Reduce repaints */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .hero-gradient {
    /* Simplify gradient rendering */
    transform: translate3d(0, 0, 0);
  }
  
  /* Disable noise texture on mobile */
  .hero-noise {
    display: none !important;
  }
  
  /* Optimize hero section container */
  .hero-section {
    /* Use contain for better performance */
    contain: layout style paint;
    /* Reduce compositing layers */
    isolation: isolate;
    /* Force GPU acceleration */
    transform: translate3d(0, 0, 0);
    /* Optimize rendering */
    will-change: scroll-position;
  }
  
  /* Simplify stats section backdrop blur on mobile */
  .border-y[style*="backdrop-filter"],
  div[style*="backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(26, 26, 46, 0.95) !important;
  }
  
  /* Disable all backdrop blur on mobile */
  *[class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Disable all transitions on mobile for hero */
  .hero-section * {
    transition: opacity 0.2s ease !important;
  }
  
  .hero-section *:hover {
    transform: none !important;
    transition: opacity 0.2s ease !important;
  }
  
  /* Use CSS containment for better performance */
  .hero-section > * {
    contain: layout style paint;
  }
  
  /* Optimize image loading */
  .hero-image {
    /* Use lazy loading hint */
    content-visibility: auto;
    /* Reduce paint complexity */
    contain-intrinsic-size: 100vw 100vh;
  }
  
  /* Optimize logo rendering */
  .hero-section img[alt*="Vamshio"] {
    /* Use simpler rendering */
    image-rendering: -webkit-optimize-contrast;
    /* Prevent repaints */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  /* Simplify badge animation */
  .hero-section .animate-fade-in-up {
    animation: none !important;
    opacity: 1 !important;
  }
  
  /* Reduce button shadow complexity */
  .hero-section button,
  .hero-section a[class*="shadow"] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
  
  /* Optimize badge rendering */
  .hero-badge {
    /* Disable backdrop blur on mobile */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    /* Simplify animation */
    animation: none !important;
    opacity: 1 !important;
  }
  
  /* Optimize logo on mobile */
  .hero-logo {
    /* Disable hover transform */
    transition: none !important;
    /* Use GPU acceleration */
    transform: translate3d(0, 0, 0) !important;
    will-change: auto !important;
  }
  
  /* Reduce SVG complexity */
  .hero-section svg {
    /* Simplify rendering */
    shape-rendering: optimizeSpeed;
    /* Prevent repaints */
    backface-visibility: hidden;
  }
  
  /* Optimize text rendering */
  .hero-section h1,
  .hero-section p {
    /* Use simpler text rendering */
    text-rendering: optimizeSpeed;
    /* Reduce font smoothing overhead */
    -webkit-font-smoothing: auto;
    font-smoothing: auto;
  }
  
  /* Simplify grid on mobile */
  .hero-section .grid {
    /* Use flexbox instead of grid on mobile */
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  /* Reduce min-height on mobile */
  .hero-section .min-h-\[80vh\] {
    min-height: auto !important;
    padding: 2rem 0 !important;
  }
}

/* Additional optimizations for very small screens */
@media (max-width: 480px) {
  /* Further reduce hero complexity */
  header,
  .hero-section {
    height: auto !important;
    min-height: 100vh;
    padding: 1.5rem 0;
  }
  
  /* Reduce image size further */
  header .absolute.inset-0 img,
  .hero-image {
    object-position: center;
    /* Use smaller image if possible */
    image-rendering: -webkit-optimize-contrast;
    /* Further reduce opacity for performance */
    opacity: 0.3 !important;
  }
  
  /* Simplify text sizes */
  header h1,
  .hero-section h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Reduce padding/margins */
  header .container,
  .hero-section .container {
    padding: 1rem !important;
    padding-top: 4rem !important;
  }
  
  /* Simplify logo on very small screens */
  .hero-logo {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
  }
  
  /* Remove all animations on very small screens */
  .hero-section * {
    animation: none !important;
    transition: none !important;
  }
  
  /* Simplify gradient overlay */
  .hero-gradient {
    opacity: 0.8 !important;
  }
}