@keyframes barGrow {
  0% { height: 0%; opacity: 0; }
  100% { opacity: 1; }
}
@keyframes pulseGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); opacity: 1; }
  50% { filter: drop-shadow(0 0 15px rgba(255,255,255,0.4)); opacity: 0.9; }
}
@keyframes loading {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}
.animate-bar {
  animation: barGrow 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  transform-origin: bottom;
}
.pulse-live {
  animation: pulseGlow 2s ease-in-out infinite;
}
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 1s cubic-bezier(0.2, 1, 0.3, 1);
}
.reveal-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
.mesh-gradient {
  background-color: #0a0a0a;
  background-image:
    radial-gradient(at 0% 0%, hsla(0,0%,10%,1) 0, transparent 50%),
    radial-gradient(at 100% 0%, hsla(0,0%,15%,1) 0, transparent 50%),
    radial-gradient(at 100% 100%, hsla(0,0%,8%,1) 0, transparent 50%),
    radial-gradient(at 0% 100%, hsla(0,0%,12%,1) 0, transparent 50%);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* Floating stars */
.stars-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: floatStar linear infinite;
}
.star.sm { width: 1px; height: 1px; }
.star.lg { width: 3px; height: 3px; }
@keyframes floatStar {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.6; }
  100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

.nav-link {
  position: relative;
}
.nav-link.is-active {
  color: #ffffff !important;
}
.nav-link.is-active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: white;
}

/* === Premium Portfolio Card Animations === */
.portfolio-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #111;
  transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);
  cursor: pointer;
}
.portfolio-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-4px);
}
.portfolio-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 2;
  pointer-events: none;
}
.portfolio-card:hover::before {
  opacity: 1;
}
.portfolio-thumb {
  position: relative;
  overflow: hidden;
}
.portfolio-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.6s ease;
}
.portfolio-card:hover .portfolio-thumb img {
  transform: scale(1.05);
}
.portfolio-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
  z-index: 3;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
  pointer-events: none;
}
.portfolio-card:hover .portfolio-overlay {
  opacity: 1;
  transform: translateY(0);
}
.portfolio-overlay span {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 4px;
}
.portfolio-overlay p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.portfolio-info {
  padding: 24px 28px;
  position: relative;
  z-index: 3;
}
.portfolio-info .category {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 6px;
  display: block;
}
.portfolio-info h3 {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: white;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.portfolio-info p {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 16px;
}
.portfolio-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Geist', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.4s cubic-bezier(0.2, 1, 0.3, 1);
}
.portfolio-card:hover .portfolio-cta {
  opacity: 1;
  transform: translateX(0);
}
.portfolio-cta .arrow {
  transition: transform 0.3s ease;
}
.portfolio-card:hover .portfolio-cta .arrow {
  transform: translateX(4px);
}
.portfolio-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.portfolio-tags span {
  font-family: 'Geist', sans-serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.35);
}
.portfolio-glow {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 1;
  filter: blur(60px);
}
.portfolio-card:hover .portfolio-glow {
  opacity: 0.12;
}
@media (max-width: 768px) {
  .portfolio-overlay {
    opacity: 1;
    transform: translateY(0);
  }
  .portfolio-cta {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background: #0a0a0a;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding: 100px 32px 32px;
  transition: right 0.4s cubic-bezier(0.2, 1, 0.3, 1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-menu.open {
  right: 0;
}
.mobile-menu a {
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s ease;
  text-decoration: none;
}
.mobile-menu a:hover,
.mobile-menu a.is-active {
  color: white;
}
.mobile-menu .mobile-cta {
  margin-top: 16px;
  padding: 14px 0;
  text-align: center;
  background: white;
  color: black !important;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 2px;
}
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  z-index: 110;
  background: none;
  border: none;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: white;
  transition: all 0.3s ease;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
}
.hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .nav-desktop { display: none !important; }

  /* ===== HEADER ===== */
  header .px-margin-mobile { padding-left: 16px !important; padding-right: 16px !important; }
  .header-logo { font-size: 15px !important; gap: 8px !important; }
  .header-logo img { height: 20px !important; width: auto !important; }

  /* ===== HERO ===== */
  .hero-section { padding-top: 88px !important; padding-bottom: 32px !important; }
  .hero-section h1 { font-size: 26px !important; word-break: break-word !important; hyphens: auto !important; }
  .hero-section p { font-size: 14px !important; }
  .hero-buttons { flex-direction: column !important; align-items: stretch !important; margin-top: 32px !important; }
  .hero-buttons a { text-align: center; padding: 14px 20px !important; font-size: 11px !important; }
  .hero-section .max-w-4xl { width: 100% !important; }
  .hero-section .mb-8 { margin-bottom: 20px !important; }
  .hero-section .mt-12 { margin-top: 28px !important; }

  /* ===== VALUE PROPS ===== */
  .value-props-container { padding: 20px !important; }
  .value-props-container .gap-8 { gap: 16px !important; }
  .value-card span { font-size: 24px !important; }
  .value-card .font-label-caps { font-size: 10px !important; }
  .value-card .text-xs { font-size: 9px !important; }

  /* ===== BRANDING VISUAL ===== */
  .branding-visual { height: 240px !important; gap: 12px !important; }
  .branding-visual .p-8 { padding: 16px !important; }
  .branding-visual .text-4xl { font-size: 24px !important; }

  /* ===== WHY CHOOSE ===== */
  .why-grid { grid-template-columns: 1fr !important; }
  .why-card { padding: 20px !important; }
  .why-card .text-4xl { font-size: 28px !important; margin-bottom: 16px !important; }

  /* ===== FEATURED WORK ===== */
  .portfolio-info { padding: 16px 20px !important; }
  .portfolio-info h3 { font-size: 16px !important; }

  /* ===== CTA ===== */
  .cta-section { padding: 32px 16px !important; }
  .cta-section .cta-inner { padding: 32px 20px !important; border-radius: 24px !important; }
  .cta-section h2 { font-size: 24px !important; }
  .cta-section .mb-14 { margin-bottom: 24px !important; }
  .cta-buttons { flex-direction: column !important; align-items: stretch !important; }
  .cta-buttons a { text-align: center; padding: 14px 20px !important; font-size: 11px !important; white-space: normal !important; }

  /* ===== FOOTER ===== */
  footer { padding-top: 40px !important; padding-bottom: 40px !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-grid > div:first-child { grid-column: span 2 !important; }
  .footer-grid h4 { margin-bottom: 16px !important; }
  .footer-grid .space-y-4 { margin-top: 0 !important; }
  .footer-grid .space-y-4 li { margin-top: 10px !important; }
  .footer-grid .mt-24 { margin-top: 32px !important; }

  /* ===== SERVICES PAGE ===== */
  .service-section { padding-top: 48px !important; padding-bottom: 48px !important; }
  .service-section .section-gap { gap: 28px !important; }
  .service-section h2 { font-size: 22px !important; }
  .service-section .mb-6 { margin-bottom: 12px !important; }
  .service-section .mb-10 { margin-bottom: 20px !important; }
  .service-section p { font-size: 14px !important; }
  .service-section .grid-cols-2.gap-x-8 { gap: 12px !important; }
  .service-section .space-y-4 { margin-top: 0 !important; }
  .service-section .space-y-4 li { margin-top: 12px !important; }
  .service-icon-grid { height: auto !important; }
  .service-icon-grid .gap-3 { gap: 10px !important; }
  .sm-card { min-height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
  .hero-section .mt-20 { margin-top: 24px !important; }

  /* ===== ABOUT PAGE ===== */
  .about-cards { padding: 20px !important; }
  .about-cards + .about-cards { margin-top: 20px !important; }

  /* ===== PRICING PAGE ===== */
  .pricing-card { padding: 24px 20px !important; }
  .pricing-card .text-5xl { font-size: 32px !important; }
  .pricing-card .mb-8 { margin-bottom: 20px !important; }
  .pricing-card .mb-10 { margin-bottom: 24px !important; }
  .pricing-card .space-y-4 li { margin-top: 12px !important; }
  .pricing-faq-card { padding: 20px !important; }
  .pricing-faq-card h3 { font-size: 15px !important; }

  /* ===== CONTACT PAGE ===== */
  .contact-form { padding: 0 !important; }
  .contact-form .space-y-6 > div { margin-top: 16px !important; }
  .contact-form button { width: 100% !important; }
  .contact-info-card { padding: 12px !important; gap: 14px !important; }
  .contact-info-card .w-14 { width: 44px !important; height: 44px !important; }
  .contact-grid { gap: 32px !important; }
  .contact-grid .space-y-10 > div { margin-top: 20px !important; }

  /* ===== SECTION SPACING ===== */
  .space-y-40 > * + * { margin-top: 48px !important; }
  img { max-width: 100% !important; height: auto !important; }
  .section-title { font-size: 24px !important; }
  .section-desc { font-size: 14px !important; }
  .mb-20 { margin-bottom: 32px !important; }
  .py-32 { padding-top: 48px !important; padding-bottom: 48px !important; }
  .pb-32 { padding-bottom: 48px !important; }

  /* ===== WORK PAGE ===== */
  .portfolio-card { border-radius: 16px !important; }
  .portfolio-tags { gap: 4px !important; }
  .portfolio-tags span { font-size: 8px !important; padding: 2px 8px !important; }

  /* ===== SERVICES GRID WRAPPER ===== */
  .pb-section-gap { padding-bottom: 32px !important; }

  /* ===== GENERAL OVERFLOW ===== */
  h1, h2, h3 { word-break: break-word !important; hyphens: auto !important; }
  .overflow-x-hidden { overflow-x: hidden !important; }
}