/* ── UPDATED: Cinematic Loading Screen from A.html ── */

/* Loading screen variables - không conflict với :root của trang */
:root {
  --ls-bg:      #06050f;
  --ls-grad:    linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  --ls-accent:  #7c3aed;
  --ls-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  /* ── Standardized easing curves ── */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ntxv-font-main: 'Inter', sans-serif;
}

/* ===== NTXV performance polish 2026-05-14 ===== */
html,
body,
section,
#home,
.hero-bg-vip,
.app-wrapper {
  background-attachment: scroll !important;
}

#hero-title,
#hero-subtitle,
#hero-description,
.hero-badge,
.hero-social-row,
.project-card,
.card-glow,
.dl-card,
.stat-card,
.contact-card-new {
  text-rendering: optimizeLegibility;
}

.free-nav-btn::before,
.free-nav-btn::after,
#freeMenuDropdown .nav-dropdown-item::before,
#freeMenuDropdown .nav-dropdown-item::after,
#dichvuNavDropdown .nav-dropdown-item::before,
#dichvuNavDropdown .nav-dropdown-item::after {
  display: none !important;
  animation: none !important;
}

.free-nav-btn:hover,
.free-menu-btn:hover,
#dichvuNavBtn:hover,
#freeMenuDropdown .nav-dropdown-item:hover,
#dichvuNavDropdown .nav-dropdown-item:hover {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

.btn-primary:hover,
.btn-outline:hover,
.liquid-btn:hover,
.dl-btn:hover,
.nav-pay-btn:hover {
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.16) !important;
  filter: none !important;
}

.hero-social-row .zalo-brand-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

.contact-zalo-icon,
.contact-card-icon .contact-zalo-logo {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
}

/* ===== Projects horizontal scroll + startup avatar dock 2026-05-15 ===== */
body.smooth-scroll-enabled .app-wrapper {
  transform-style: flat !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  filter: none !important;
}

body.smooth-scroll-enabled .project-card,
body.smooth-scroll-enabled .card-glow,
body.smooth-scroll-enabled img,
body.smooth-scroll-enabled canvas {
  backface-visibility: hidden;
  transform-style: flat;
}

.scroll-avatar-scrim {
  --avatar-bg-blur: 34px;
  position: fixed;
  inset: 0;
  z-index: 899999;
  pointer-events: none;
  opacity: 0;
  background: rgba(5, 5, 16, 0.68);
  backdrop-filter: blur(var(--avatar-bg-blur)) saturate(105%) brightness(0.74);
  -webkit-backdrop-filter: blur(var(--avatar-bg-blur)) saturate(105%) brightness(0.74);
  will-change: opacity;
  transform: translateZ(0);
}

.scroll-avatar-zoom {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 900000;
  width: var(--avatar-zoom-base-size, 420px);
  height: var(--avatar-zoom-base-size, 420px);
  padding: 4px;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  box-shadow: 0 24px 80px rgba(99, 102, 241, 0.34), 0 0 0 1px rgba(255,255,255,0.16) inset;
  transform: translate3d(-50%, -50%, 0);
  transform-origin: center;
  will-change: transform, opacity;
  contain: layout paint;
}

.scroll-avatar-zoom img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #0a0a0f;
}

body.avatar-zoom-ready .hero-avatar-orbit {
  transition: opacity 0.18s ease;
}

body.avatar-zoom-active .hero-avatar-orbit {
  opacity: 0 !important;
}

body.reduced-fx .scroll-avatar-zoom,
body.reduced-fx .scroll-avatar-scrim {
  display: none !important;
}

body.startup-lite .scroll-avatar-zoom,
body.startup-lite .scroll-avatar-scrim,
body.startup-lite #vipMusicPlayer {
  display: none !important;
}

body.startup-lite .hero-bg-vip .vip-orb,
body.startup-lite .animate-float,
body.startup-lite .hero-badge,
body.startup-lite .hero-badge-dot,
body.startup-lite .vmp-wave-bar,
body.startup-lite .vmp-art.is-playing {
  animation: none !important;
}

body.startup-lite .marquee-track,
body.startup-lite #featuredProjectsGrid {
  will-change: auto !important;
}

@media (min-width: 901px) {
  body #projects.projects-horizontal {
    min-height: calc(100vh + var(--projects-pin-scroll, 1200px)) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body #projects.projects-horizontal.reveal-section {
    opacity: 1 !important;
    transform: none !important;
  }

  body #projects.projects-horizontal .projects-sticky {
    position: sticky;
    top: 0;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;
    padding-top: clamp(76px, 10vh, 112px);
    padding-bottom: clamp(34px, 7vh, 76px);
    will-change: transform;
  }

  body.smooth-scroll-enabled #projects.projects-horizontal .projects-sticky {
    position: relative;
    top: auto;
  }

  body #projects.projects-horizontal .text-center.mb-16 {
    flex: 0 0 auto;
    margin-bottom: clamp(22px, 4vh, 42px) !important;
  }

  body #projects.projects-horizontal #featuredProjectsGrid {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: stretch;
    gap: clamp(18px, 2.2vw, 30px) !important;
    width: max-content;
    max-width: none;
    transform: translate3d(0, 0, 0);
    will-change: transform;
  }

  body #projects.projects-horizontal #featuredProjectsGrid .project-card {
    flex: 0 0 clamp(320px, 31vw, 392px);
    width: clamp(320px, 31vw, 392px);
    min-height: clamp(430px, 58vh, 520px);
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateZ(0);
  }

  body #projects.projects-horizontal #featuredProjectsGrid .project-card.reveal-section,
  body #projects.projects-horizontal #featuredProjectsGrid .project-card[data-animate] {
    opacity: 1 !important;
    transform: translateZ(0) !important;
  }

  body #projects.projects-horizontal #featuredProjectsGrid .project-card .h-48,
  body #projects.projects-horizontal #featuredProjectsGrid .project-card [style*='height:200px'] {
    height: clamp(190px, 22vh, 232px) !important;
  }
}

@media (max-width: 900px) {
  #projects.projects-horizontal {
    min-height: auto !important;
  }

  #projects.projects-horizontal .projects-sticky {
    position: relative;
    height: auto;
    overflow: visible;
  }

  #projects.projects-horizontal #featuredProjectsGrid {
    transform: none !important;
    will-change: auto !important;
  }
}

@media (max-width: 900px) {
  body.reduced-fx #projects.projects-horizontal {
    min-height: auto !important;
  }

  body.reduced-fx #projects.projects-horizontal .projects-sticky {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.reduced-fx #projects.projects-horizontal #featuredProjectsGrid {
    transform: none !important;
    will-change: auto !important;
  }
}

/* ── SMOOTH SCROLLING ── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-overflow-scrolling: touch;
}

/* ── OPTIONAL REDUCED MOTION (site-controlled only) ── */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}
body.reduce-motion #faq .faq-item {
  animation: none !important;
  transform: none !important;
}

/* ── MOBILE: DISABLE HEAVY PC-ONLY EFFECTS ── */
@media (hover: none) and (pointer: coarse) {
  .cursor-trail-dot { display: none !important; }
  /* Hide floating action menu (duplicates nav) */
  #floatActionMenu { display: none !important; }
  /* Simpler card hover - no 3D tilt */
  .tilt-card { transform: none !important; }
  #faq .faq-item {
    animation: none !important;
    transform: none !important;
  }
  /* Better mobile touch targets */
  button, a, [onclick] { min-height: 44px; }
  /* Safe area for notched phones */
  body { padding-bottom: env(safe-area-inset-bottom); }
  /* Improve mobile menu transition */
  #mobileMenu {
    transition: transform 0.3s var(--ease-smooth), opacity 0.3s var(--ease-smooth);
  }
  #mobileMenu.hidden {
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
  }
  #mobileMenu:not(.hidden) {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── ENHANCED VISUAL: Gradient text shimmer ── */
@keyframes shimmerText {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.gradient-text {
  background-size: 200% auto;
  animation: shimmerText 4s linear infinite;
}

/* ── ENHANCED VISUAL: Better scroll progress glow ── */
#scrollProgress.near-end {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.6), 0 0 40px rgba(99, 102, 241, 0.3);
}

/* ── ENHANCED VISUAL: Smoother card transitions ── */
.dl-card, .project-card, .stat-card {
  transition: transform 0.35s var(--ease-smooth), box-shadow 0.35s var(--ease-smooth), border-color 0.35s ease;
}
.dl-card:hover, .project-card:hover, .stat-card:hover {
  box-shadow: 0 16px 48px rgba(99, 102, 241, 0.15), 0 0 0 1px rgba(99, 102, 241, 0.1);
}

/* ── ENHANCED VISUAL: Better nav backdrop ── */
nav, .sp-nav {
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

/* ── MAIN TOP BANNER ── */
.main-top-banner {
  width: min(1180px, calc(100vw - 32px));
  margin: 18px auto 0;
  padding-top: 0;
  position: relative;
  overflow: visible;
  border-radius: 0;
  z-index: 1;
  border: 0;
  box-shadow: none;
  line-height: 0;
}

.main-top-banner-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 768px) {
  .main-top-banner {
    padding-top: 0;
  }
}

/* NTXV decor showcase */
.decor-showcase {
  padding-top: 24px;
  padding-bottom: 22px;
  background: transparent;
}

.decor-showcase-primary {
  padding-top: 10px;
  padding-bottom: 22px;
}

.decor-showcase-secondary {
  padding-top: 30px;
  padding-bottom: 34px;
}

.decor-showcase-secondary .decor-showcase-inner {
  max-width: 1740px;
}

.decor-showcase-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.decor-showcase-primary .decor-showcase-inner {
  max-width: 1380px;
}

.decor-hero-grid {
  display: grid;
  grid-template-columns: minmax(118px, 0.72fr) minmax(0, 2.65fr) minmax(188px, 0.92fr);
  gap: 14px;
  align-items: start;
}

.decor-showcase-primary .decor-hero-grid {
  grid-template-columns: minmax(170px, 0.9fr) minmax(0, 3.05fr) minmax(250px, 1.15fr);
  gap: 18px;
}

.decor-banner-credit {
  margin: 16px auto 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(12px, 1.45vw, 15px);
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: 0 0 16px rgba(139, 92, 246, 0.32);
}

.decor-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.decor-card-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 18px;
}

.decor-showcase a {
  display: block;
  text-decoration: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
}

.decor-showcase img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 12px;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
  transition: filter .24s ease, transform .24s ease;
}

.decor-side {
  max-width: 180px;
}

.decor-stack {
  max-width: 270px;
  justify-self: end;
}

.decor-showcase-primary .decor-side {
  max-width: 230px;
}

.decor-showcase-primary .decor-stack {
  max-width: 320px;
}

.decor-showcase-primary .decor-showcase img {
  border-radius: 16px;
}

.decor-showcase-primary .decor-carousel-btn {
  width: 48px;
  height: 82px;
}

.decor-showcase-primary .decor-carousel-btn-prev {
  left: 18px;
}

.decor-showcase-primary .decor-carousel-btn-next {
  right: 18px;
}

.decor-showcase-secondary .decor-card-row {
  grid-template-columns: repeat(5, minmax(262px, 334px));
  justify-content: center;
  align-items: stretch;
  gap: 24px;
}

.decor-showcase-secondary .decor-card-row a {
  display: flex;
  align-items: stretch;
}

.decor-showcase-secondary .decor-card-row img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1122 / 1402;
  object-fit: cover;
  object-position: center top;
  border-radius: 20px;
}

.decor-carousel {
  position: relative;
  min-width: 0;
}

.decor-carousel-viewport {
  overflow: hidden;
  border-radius: 18px;
}

.decor-carousel-track {
  display: flex;
  transition: transform .38s ease;
  will-change: transform;
}

.decor-slide {
  flex: 0 0 100%;
}

.decor-slide img {
  border-radius: 18px;
}

.decor-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 42px;
  height: 74px;
  border: 0;
  border-radius: 999px;
  background: rgba(26, 18, 44, 0.74);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background .22s ease, transform .22s ease;
}

.decor-carousel-btn span {
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}

.decor-carousel-btn:hover,
.decor-carousel-btn:focus-visible {
  background: rgba(255, 184, 77, 0.22);
  transform: translateY(-50%) scale(1.03);
  outline: none;
}

.decor-carousel-btn-prev {
  left: 14px;
}

.decor-carousel-btn-next {
  right: 14px;
}

.decor-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.decor-carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.3);
  padding: 0;
  cursor: pointer;
  transition: background .22s ease, transform .22s ease;
}

.decor-carousel-dot.is-active {
  width: 24px;
  background: rgba(255, 184, 77, 0.92);
}

.decor-card-row a:nth-child(2),
.decor-card-row a:nth-child(4) {
  margin-top: 22px;
}

.decor-card-row a:nth-child(3) {
  margin-top: 8px;
}

.decor-showcase a:hover img,
.decor-showcase a:focus-visible img {
  transform: translateY(-2px);
  filter: saturate(1.08) contrast(1.03);
}

.decor-showcase a:focus-visible {
  outline: 2px solid rgba(255,184,77,0.82);
  outline-offset: 3px;
}

@media (max-width: 900px) {
  .decor-hero-grid {
    grid-template-columns: 1fr;
  }

  .decor-side {
    max-width: 220px;
  }

  .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .decor-stack {
    max-width: none;
    justify-self: stretch;
  }

  .decor-carousel-btn {
    width: 38px;
    height: 64px;
  }

  .decor-card-row a:nth-child(2),
  .decor-card-row a:nth-child(3),
  .decor-card-row a:nth-child(4) {
    margin-top: 0;
  }
}

/* ===== NTXV hero polish 2026-05-07 ===== */
body:not(.light-mode) {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.15) 18%, transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.07) 20%, transparent 44%),
    linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(180deg, #06050d 0%, #110b23 52%, #05040b 100%) !important;
}

@media (min-width: 901px) {
  #home {
    padding-top: clamp(104px, 12vh, 150px) !important;
    padding-bottom: 64px !important;
  }

  #hero-title {
    font-size: clamp(78px, 8.6vw, 116px) !important;
    line-height: 0.95 !important;
    margin-bottom: 22px !important;
  }

  #hero-subtitle {
    font-size: clamp(25px, 2.35vw, 30px) !important;
    line-height: 1.35 !important;
    max-width: 760px !important;
  }

  #hero-description {
    max-width: 710px !important;
    margin-top: 24px !important;
    font-size: 18px !important;
    line-height: 1.82 !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 54px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 34px !important;
    gap: 18px !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    width: clamp(340px, 32vw, 430px) !important;
    height: clamp(340px, 32vw, 430px) !important;
    align-self: center !important;
    outline-offset: 22px !important;
    z-index: 2 !important;
  }

  .hero-availability-card {
    position: absolute !important;
    top: clamp(500px, 68%, 575px) !important;
    right: clamp(8px, 3vw, 42px) !important;
    z-index: 4 !important;
    width: min(360px, 86%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    gap: 12px !important;
    background: rgba(13, 12, 31, 0.76) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
  }

  .hero-availability-card div {
    min-width: 0;
    flex: 1 1 auto;
  }

  .hero-availability-card div > span,
  .hero-availability-sub {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .hero-availability-card strong {
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .hero-availability-arrow {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid !important;
    place-items: center;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 20px !important;
  }

  .hero-social-row {
    grid-column: 1 !important;
    grid-row: 6 !important;
    gap: 24px !important;
    margin-top: 34px !important;
  }

  .hero-social-row .social-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    margin-top: 34px !important;
    gap: 18px !important;
  }
}

#vmpPanel .vmp-control-row {
  gap: 26px !important;
}

#vmpPanel .vmp-btn {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

#vmpPanel .vmp-play-btn {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

#vmpPanel .vmp-waves {
  transform: scale(0.86) !important;
}

@media (max-width: 900px) {
  body:not(.light-mode) {
    background-image:
      radial-gradient(circle at 72% 12%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.11) 18%, transparent 42%),
      linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(180deg, #06050d 0%, #100a22 56%, #05040b 100%) !important;
  }

  .hero-availability-card {
    display: none !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 1 !important;
    margin: 18px 0 20px !important;
  }

  .hero-right-cluster {
    order: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(10px);
  }

  .hero-right-cluster .hero-avatar-orbit {
    order: unset !important;
    width: 184px !important;
    height: 184px !important;
    margin: 0 0 26px !important;
    outline-offset: 12px !important;
  }

  #hero-title {
    order: 3 !important;
    font-size: clamp(50px, 15vw, 72px) !important;
    line-height: 0.95 !important;
    margin-bottom: 18px !important;
  }

  #home .typewriter-container {
    order: 4 !important;
  }

  #hero-subtitle {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  #hero-description {
    order: 5 !important;
    max-width: 33ch !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-top: 22px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 6 !important;
    margin-top: 30px !important;
  }

  #home .hero-marquee-bleed {
    order: 7 !important;
  }

  .hero-social-row {
    order: 8 !important;
    gap: 18px !important;
  }

  #vmpPanel .vmp-control-row {
    gap: 24px !important;
  }

  #vmpPanel .vmp-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  #vmpPanel .vmp-play-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ===== NTXV final requested home/music pass - must stay last ===== */
body:not(.light-mode) {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.15) 18%, transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.07) 20%, transparent 44%),
    linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(180deg, #06050d 0%, #110b23 52%, #05040b 100%) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
}

.hero-stats-grid {
  display: none !important;
}

#hero-title .gradient-text,
#hero-title .hero-name-line {
  display: block !important;
  background: none !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#vmpPanel .vmp-control-row {
  gap: 26px !important;
}

#vmpPanel .vmp-btn {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

#vmpPanel .vmp-play-btn {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

#vmpPanel .vmp-waves {
  transform: scale(0.86) !important;
  transform-origin: center !important;
  margin-left: 0 !important;
}

@media (min-width: 901px) {
  #hero-title {
    font-size: clamp(78px, 8.6vw, 116px) !important;
    line-height: 0.95 !important;
    margin-bottom: 22px !important;
  }

  #hero-subtitle {
    font-size: clamp(25px, 2.35vw, 30px) !important;
    max-width: 760px !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    max-width: 710px !important;
    margin-top: 24px !important;
    font-size: 18px !important;
    line-height: 1.82 !important;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 54px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    width: clamp(340px, 32vw, 430px) !important;
    height: clamp(340px, 32vw, 430px) !important;
    z-index: 2 !important;
  }

  .hero-availability-card {
    position: absolute !important;
    top: clamp(380px, 52%, 430px) !important;
    right: clamp(8px, 3vw, 42px) !important;
    z-index: 4 !important;
    width: min(360px, 86%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(13, 12, 31, 0.76) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
  }

  .hero-availability-card div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .hero-availability-card div > span,
  .hero-availability-sub {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .hero-availability-arrow {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    font-size: 20px !important;
  }

  .hero-social-row {
    grid-column: 1 !important;
    grid-row: 6 !important;
    gap: 24px !important;
    margin-top: 24px !important;
  }

  .hero-social-row .social-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  #home .hero-marquee-bleed {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 38px !important;
  }
}

@media (max-width: 900px) {
  body:not(.light-mode) {
    background-image:
      radial-gradient(circle at 72% 12%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.11) 18%, transparent 42%),
      linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(180deg, #06050d 0%, #100a22 56%, #05040b 100%) !important;
    background-size: auto, 44px 44px, 44px 44px, auto !important;
  }

  .hero-availability-card {
    display: none !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 1 !important;
    margin: 18px 0 20px !important;
  }

  .hero-right-cluster {
    order: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(10px);
  }

  .hero-right-cluster .hero-avatar-orbit {
    order: unset !important;
    width: 184px !important;
    height: 184px !important;
    margin: 0 0 26px !important;
    outline-offset: 12px !important;
  }

  #hero-title {
    order: 3 !important;
    font-size: clamp(50px, 15vw, 72px) !important;
    line-height: 0.95 !important;
    margin-bottom: 18px !important;
  }

  #home .typewriter-container {
    order: 4 !important;
  }

  #hero-subtitle {
    font-size: 20px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    order: 5 !important;
    max-width: 33ch !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-top: 22px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 6 !important;
    margin-top: 30px !important;
  }

  #home .hero-marquee-bleed {
    order: 7 !important;
  }

  .hero-social-row {
    order: 8 !important;
    gap: 18px !important;
  }

  #vmpPanel .vmp-control-row {
    gap: 24px !important;
  }

  #vmpPanel .vmp-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  #vmpPanel .vmp-play-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ===== NTXV final requested home/music pass ===== */
body:not(.light-mode) {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.15) 18%, transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.07) 20%, transparent 44%),
    linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(180deg, #06050d 0%, #110b23 52%, #05040b 100%) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
}

#hero-title .gradient-text,
#hero-title .hero-name-line {
  display: block !important;
  background: none !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.hero-stats-grid {
  display: none !important;
}

#vmpPanel .vmp-control-row {
  gap: 26px !important;
}

#vmpPanel .vmp-btn {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

#vmpPanel .vmp-play-btn {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

#vmpPanel .vmp-waves {
  transform: scale(0.86) !important;
  transform-origin: center !important;
  margin-left: 0 !important;
}

@media (min-width: 901px) {
  #hero-title {
    font-size: clamp(78px, 8.6vw, 116px) !important;
    line-height: 0.95 !important;
    margin-bottom: 22px !important;
  }

  #hero-subtitle {
    font-size: clamp(25px, 2.35vw, 30px) !important;
    max-width: 760px !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    max-width: 710px !important;
    margin-top: 24px !important;
    font-size: 18px !important;
    line-height: 1.82 !important;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 54px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    width: clamp(340px, 32vw, 430px) !important;
    height: clamp(340px, 32vw, 430px) !important;
    z-index: 2 !important;
  }

  .hero-availability-card {
    position: absolute !important;
    top: clamp(380px, 52%, 430px) !important;
    right: clamp(8px, 3vw, 42px) !important;
    z-index: 4 !important;
    width: min(360px, 86%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(13, 12, 31, 0.76) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
  }

  .hero-availability-card div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .hero-availability-card div > span,
  .hero-availability-sub {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .hero-availability-arrow {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    font-size: 20px !important;
  }

  .hero-social-row {
    gap: 24px !important;
    margin-top: 34px !important;
  }

  .hero-social-row .social-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  #home .hero-marquee-bleed {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 38px !important;
  }
}

@media (max-width: 900px) {
  body:not(.light-mode) {
    background-image:
      radial-gradient(circle at 72% 12%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.11) 18%, transparent 42%),
      linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(180deg, #06050d 0%, #100a22 56%, #05040b 100%) !important;
    background-size: auto, 44px 44px, 44px 44px, auto !important;
  }

  .hero-availability-card {
    display: none !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 1 !important;
    margin: 18px 0 20px !important;
  }

  .hero-right-cluster {
    order: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(10px);
  }

  .hero-right-cluster .hero-avatar-orbit {
    order: unset !important;
    width: 184px !important;
    height: 184px !important;
    margin: 0 0 26px !important;
    outline-offset: 12px !important;
  }

  #hero-title {
    order: 3 !important;
    font-size: clamp(50px, 15vw, 72px) !important;
    line-height: 0.95 !important;
    margin-bottom: 18px !important;
  }

  #home .typewriter-container {
    order: 4 !important;
  }

  #hero-subtitle {
    font-size: 20px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    order: 5 !important;
    max-width: 33ch !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-top: 22px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 6 !important;
    margin-top: 30px !important;
  }

  #home .hero-marquee-bleed {
    order: 7 !important;
  }

  .hero-social-row {
    order: 8 !important;
    gap: 18px !important;
  }

  #vmpPanel .vmp-control-row {
    gap: 24px !important;
  }

  #vmpPanel .vmp-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  #vmpPanel .vmp-play-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

@media (max-width: 520px) {
  .decor-showcase {
    padding-left: 16px;
    padding-right: 16px;
  }

  .decor-card-row {
    gap: 10px;
  }

  .decor-carousel-btn-prev {
    left: 8px;
  }

  .decor-carousel-btn-next {
    right: 8px;
  }
}

/* ── #loadingScreen container ── */
#loadingScreen {
  position: fixed; inset: 0; z-index: 999999;
  background: #06050f;
  /* Grid pattern */
  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: 60px 60px;
  /* Always fully opaque (no mask fade) */
  -webkit-mask-image: none;
          mask-image: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  /* Exit transition */
  transition: opacity 0.36s var(--ls-bounce), transform 0.36s var(--ls-bounce), filter 0.36s var(--ls-bounce);
}
#loadingScreen.exit {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.08);
  filter: blur(10px);
}

/* ── Orb tím phải ── */
#loadingScreen::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,0.18) 0%, transparent 70%);
  top: -120px; right: -80px;
  filter: blur(65px);
  animation: lsOrbFloat 7s ease-in-out infinite;
  pointer-events: none;
}
/* ── Orb hồng trái ── */
#loadingScreen::after {
  content: '';
  position: absolute;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,0.14) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  filter: blur(65px);
  animation: lsOrbFloat 9s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes lsOrbFloat {
  0%, 100% { transform: translate(0, 0) scale(1);      }
  33%       { transform: translate(24px, -18px) scale(1.05); }
  66%       { transform: translate(-16px, 24px) scale(0.96); }
}

/* ── Logo chữ NTXV ── */
.ls-logo {
  font-family: 'Inter', sans-serif;
  font-size: clamp(52px, 10vw, 90px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -3px;
  line-height: 1;
  background: var(--ls-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 100%;
  opacity: 0;
  /* Animate-in + shimmer chạy sau khi in xong */
  animation:
    lsLogoIn      0.8s var(--ls-bounce) 0s    forwards,
    lsLogoShimmer 3s   linear          0.85s  infinite;
}
@keyframes lsLogoIn {
  from { opacity: 0; transform: translateY(22px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes lsLogoShimmer {
  0%   { background-position:  120% 0; }
  100% { background-position: -120% 0; }
}

/* ── Subtitle "Đang khởi động..." ── */
.ls-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 400;
  color: rgba(240,238,255,0.35);
  letter-spacing: 4px; text-transform: uppercase;
  margin-top: 10px;
  opacity: 0;
  animation: lsFadeUp 0.7s var(--ls-bounce) 0.2s forwards;
}

/* ── Progress bar wrap ── */
.ls-bar-wrap {
  position: relative;
  width: clamp(160px, 30vw, 220px); height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px; margin-top: 46px;
  overflow: hidden;
  opacity: 0;
  animation: lsFadeUp 0.7s var(--ls-bounce) 0.4s forwards;
}

/* ── Progress fill + glow ── */
.ls-bar-fill {
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0%;
  background: var(--ls-grad);
  border-radius: 2px;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px #7c3aed, 0 0 20px rgba(168,85,247,0.45);
}
/* ── Travelling light dot ── */
.ls-bar-fill::after {
  content: '';
  position: absolute; right: -4px; top: -2px;
  width: 8px; height: 6px; border-radius: 50%;
  background: white;
  box-shadow: 0 0 12px 4px rgba(168,85,247,0.9);
  opacity: 0.85;
}

/* ── Percent text ── */
.ls-percent {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: rgba(240,238,255,0.4);
  margin-top: 14px; letter-spacing: 1px;
  opacity: 0;
  animation: lsFadeUp 0.7s var(--ls-bounce) 0.4s forwards;
}
/* ── Blinking cursor _ ── */
.ls-percent::after {
  content: ' _';
  color: #a855f7;
  animation: lsBlink 0.9s step-end infinite;
}
@keyframes lsBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Shared fade-up keyframe ── */
@keyframes lsFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Corner bracket decorations ── */
.ls-corner {
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(124,58,237,0.5);
  border-style: solid;
  opacity: 0;
  animation: lsFadeUp 0.6s var(--ls-bounce) 0.6s forwards;
}
.ls-corner.tl { top: calc(50% - 82px); left: calc(50% - 140px); border-width: 2px 0 0 2px; }
.ls-corner.tr { top: calc(50% - 82px); right: calc(50% - 140px); border-width: 2px 2px 0 0; }
.ls-corner.bl { bottom: calc(50% - 82px); left: calc(50% - 140px); border-width: 0 0 2px 2px; }
.ls-corner.br { bottom: calc(50% - 82px); right: calc(50% - 140px); border-width: 0 2px 2px 0; }
@media (max-width: 480px) { .ls-corner { display: none; } }

/* ── END UPDATED ── */

    /* ========== RESET & BASE ========== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { height: 100%; width: 100%; overflow-y: auto; scroll-behavior: smooth; }
    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }
    body { min-height: 100%; width: 100%; }
    /* ========== DISABLE TEXT SELECTION & BLUE HIGHLIGHT ========== */
    * {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
    }
    input, textarea, [contenteditable] {
      -webkit-user-select: text !important;
      -moz-user-select: text !important;
      -ms-user-select: text !important;
      user-select: text !important;
    }
    ::selection { background: transparent !important; color: inherit !important; }
    ::-moz-selection { background: transparent !important; color: inherit !important; }
    html {
      scrollbar-gutter: stable;
    }
    body {
      font-family: 'Inter', sans-serif;
      background: #050510;
      color: #e0e0e0;
      overflow-x: hidden;
      overflow-y: scroll;
      /* ── UPDATED: body KHÔNG opacity:0 nữa - dùng .app-wrapper thay thế ── */
      /* opacity:0 trên body sẽ ẩn cả loading screen (fixed child bị ảnh hưởng) */
    }
    /* Nội dung trang fade-in qua .app-wrapper, không qua body */
    .app-wrapper {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    body.loaded .app-wrapper { opacity: 1; }
    body.smooth-scroll-enabled {
      overflow: hidden;
      overscroll-behavior: none;
    }
    body.smooth-scroll-enabled .app-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
    }
    /* ========== SCROLLBAR ========== */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #1a1a2e; }
    ::-webkit-scrollbar-thumb { background: #4a4a6a; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #6a6a8a; }

    /* ========== SCROLL PROGRESS BAR ========== */
    #scrollProgress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
      z-index: 9999;
      transition: width 0.1s linear;
      box-shadow: 0 0 8px rgba(99,102,241,0.7);
    }

    /* old loading CSS removed - using cinematic version above */

    /* ========== BACK TO TOP ========== */
    #backToTop {
      position: fixed;
      right: 20px; bottom: 100px;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,0.18);
      color: white; font-size: 18px;
      cursor: pointer; z-index: 9998;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(99,102,241,0.3), inset 0 1px 1px rgba(255,255,255,0.2);
      opacity: 0; transform: translateY(20px);
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    #backToTop.show { opacity: 1; transform: translateY(0); }
    #backToTop:hover {
      background: rgba(99,102,241,0.25);
      box-shadow: 0 0 20px rgba(99,102,241,0.6);
      transform: translateY(-3px) scale(1.1);
    }

    /* ========== TOAST NOTIFICATIONS ========== */
    #toastContainer {
      position: fixed; bottom: 24px; right: 24px;
      z-index: 999999;
      display: flex; flex-direction: column; gap: 10px;
    }
    .toast {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 18px;
      border-radius: 14px;
      backdrop-filter: blur(20px);
      border: 1px solid;
      color: white;
      font-size: 14px;
      max-width: 340px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      animation: toastIn 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
      cursor: pointer;
    }
    .toast.success {
      background: rgba(16,185,129,0.15);
      border-color: rgba(16,185,129,0.4);
      box-shadow: 0 8px 32px rgba(16,185,129,0.2);
    }
    .toast.error {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.4);
      box-shadow: 0 8px 32px rgba(239,68,68,0.2);
    }
    .toast.info {
      background: rgba(99,102,241,0.15);
      border-color: rgba(99,102,241,0.4);
    }
    .toast-icon { font-size: 18px; flex-shrink: 0; }
    .toast-dismiss { margin-left: auto; opacity: 0.5; font-size: 12px; flex-shrink: 0; }
    .toast.hide { animation: toastOut 0.3s ease forwards; }
    @keyframes toastIn {
      from { opacity: 0; transform: translateX(60px) scale(0.9); }
      to   { opacity: 1; transform: translateX(0) scale(1); }
    }
    @keyframes toastOut {
      to { opacity: 0; transform: translateX(60px) scale(0.9); max-height: 0; padding: 0; margin: 0; }
    }

    /* ========== CURSOR ========== */
    @media (hover: hover) and (pointer: fine) {
      html, body,
      a, button, input, textarea, select, summary,
      [role="button"], [onclick],
      .nav-link, .social-icon, .social-icon-hover,
      .marquee-pill, .project-card, .card-glow,
      .btn-primary, .btn-outline, .btn-scale {
        cursor: auto !important;
      }

      body.overlay-cursor-visible,
      body.overlay-cursor-visible *,
      body.overlay-cursor-visible a,
      body.overlay-cursor-visible button,
      body.overlay-cursor-visible input,
      body.overlay-cursor-visible textarea,
      body.overlay-cursor-visible select,
      body.overlay-cursor-visible summary,
      body.overlay-cursor-visible [role="button"],
      body.overlay-cursor-visible [onclick] {
        cursor: auto !important;
      }
    }
    @media (hover: none), (pointer: coarse) {
      html, body,
      a, button, input, textarea, select, summary,
      [role="button"], [onclick] {
        cursor: auto !important;
      }
    }
    .cursor-glow {
      position: fixed;
      width: 280px; height: 280px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
      pointer-events: none; z-index: 10000020;
      transform: translate(-50%, -50%);
    }
    .cursor-dot {
      position: fixed;
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.6);
      pointer-events: none; z-index: 10000021;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 15px rgba(255,255,255,0.3);
      transition: transform 0.1s ease, background 0.3s ease, box-shadow 0.3s ease;
    }
    body.light-mode .cursor-dot {
      background: rgba(30,27,75,0.8) !important;
      box-shadow: 0 0 12px rgba(99,102,241,0.5) !important;
    }
    body.overlay-cursor-visible .cursor-glow,
    body.overlay-cursor-visible .cursor-dot,
    body.overlay-cursor-visible #vipCursorOuter {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    body.intro-loading,
    body.intro-loading * {
      cursor: default !important;
    }
    body.intro-loading .cursor-glow,
    body.intro-loading .cursor-dot,
    body.intro-loading #vipCursorOuter {
      opacity: 0 !important;
      visibility: hidden !important;
    }

    /* ========== GLOW EFFECTS ========== */
    .glow-element { position: relative; transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
    .glow-element::before {
      content: ''; position: absolute; inset: -2px; border-radius: inherit;
      background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
      opacity: 0; transition: opacity 0.4s; pointer-events: none; z-index: -1;
    }
    .glow-element.active::before { opacity: 1; }
    .glow-element.active { box-shadow: 0 0 20px rgba(255,255,255,0.05); }
    .text-glow,
    .light-reactive {
      transition: color 0.35s ease, text-shadow 0.35s ease, opacity 0.35s ease;
    }
    .text-glow.active,
    .light-reactive.active {
      text-shadow: 0 0 10px rgba(255,255,255,0.12);
      color: #fff !important;
    }
    .card-glow {
      position: relative; transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); overflow: hidden;
    }
    .card-glow:hover {
      transform: scale(1.04);
    }
    .card-glow::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 50%);
      opacity: 0; transition: opacity 0.4s; pointer-events: none;
    }
    .card-glow.active::after { opacity: 1; }
    .card-glow.active { border-color: rgba(255,255,255,0.15) !important; }

    /* ========== ANIMATIONS ========== */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeInLeft {
      from { opacity: 0; transform: translateX(-30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeInRight {
      from { opacity: 0; transform: translateX(30px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    @keyframes typewriter { to { width: 100%; } }
    @keyframes blink {
      0%, 100% { border-color: #6366f1; }
      50% { border-color: transparent; }
    }
    .animate-fade-in-up { animation: fadeInUp 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
    .animate-fade-in-left { animation: fadeInLeft 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
    .animate-fade-in-right { animation: fadeInRight 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
    .animate-scale-in { animation: scaleIn 0.7s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
    .animate-slide-down { animation: slideDown 0.6s cubic-bezier(0.34,1.56,0.64,1) forwards; opacity: 0; }
    .animate-float { animation: float 3.8s ease-in-out infinite; }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    .delay-400 { animation-delay: 0.4s; }
    .delay-500 { animation-delay: 0.5s; }
    .delay-600 { animation-delay: 0.6s; }
    .delay-700 { animation-delay: 0.7s; }
    .delay-800 { animation-delay: 0.8s; }
    .delay-1000 { animation-delay: 1s; }

    /* ========== TYPOGRAPHY ========== */
    .gradient-text {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .typewriter-container { display: inline-block; overflow: hidden; }
    .typewriter-text {
      display: inline-block; overflow: hidden; white-space: nowrap;
      border-right: 2px solid #6366f1;
      animation: typewriter 2.2s steps(40) 0.5s forwards, blink 0.7s step-end infinite;
      width: 0;
    }
    .section-title { position: relative; display: inline-block; }
    .section-title::after {
      content: ''; position: absolute; bottom: -8px; left: 0;
      width: 60px; height: 3px;
      background: linear-gradient(90deg, #6366f1, #a855f7); border-radius: 2px;
    }

    /* ========== BUTTONS ========== */
    .btn-primary { 
      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); 
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .btn-primary:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 35px rgba(99,102,241,0.4); }
    .btn-primary:active { transform: scale(0.96); }
    .btn-outline { 
      border: 1px solid rgba(99,102,241,0.5); 
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .btn-outline:hover { 
      background: rgba(99,102,241,0.12); 
      border-color: #6366f1; 
      transform: scale(1.04); 
    }
    .btn-outline:active { transform: scale(0.96); }
    .btn-scale { transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); }
    .btn-scale:hover { transform: scale(1.06); }
    .btn-scale:active { transform: scale(0.95); }

    /* ========== SKILLS ========== */
    .skill-bar {
      position: relative;
      height: 8px;
      background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
      border: 1px solid rgba(155, 126, 255, 0.12);
      border-radius: 999px;
      overflow: visible;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }
    .skill-progress {
      position: absolute; left: 0; top: 0; width: 100%; height: 100%;
      background: linear-gradient(90deg, #585ef6 0%, #875df4 52%, #c655ce 100%);
      border-radius: 999px;
      box-shadow: 0 0 12px rgba(127, 101, 233, 0.28);
      transform: scaleX(0); transform-origin: left; transition: transform 1.2s cubic-bezier(0.34,1.56,0.64,1);
    }
    .skill-progress::after {
      content: "";
      position: absolute;
      right: -5px;
      top: 50%;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      transform: translateY(-50%);
      background: radial-gradient(circle at 35% 35%, #ffffff 0%, #d7c8ff 35%, #8f74ff 100%);
      box-shadow: 0 0 10px rgba(146, 118, 255, 0.5);
    }
    .skill-item { 
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .skill-item:hover { 
      transform: translateX(10px) scale(1.03); 
    }
    .tool-badge { 
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      line-height: 1.2;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .tool-badge:hover { 
      transform: scale(1.15); 
    }
    .tool-badge-accent {
      background: rgba(139, 92, 246, 0.14) !important;
      border: 1px solid rgba(139, 92, 246, 0.28) !important;
      color: #c4b5fd !important;
    }
    .skill-percent {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 50px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(104, 89, 211, 0.16);
      border: 1px solid rgba(155, 126, 255, 0.18);
      color: #b7a6ff !important;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1;
    }

    /* ========== NAV ========== */
    .nav-link { 
      position: relative; 
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      background: none !important;
      border: none !important;
      padding: 0 !important;
      font-size: inherit !important;
      font-family: 'Inter', sans-serif !important;
      cursor: pointer !important;
    }
    .nav-link:hover {
      transform: scale(1.05);
    }
    .nav-link::after {
      content: ''; position: absolute; bottom: -4px; left: 0;
      width: 0; height: 2px;
      background: linear-gradient(90deg, #6366f1, #a855f7); transition: width 0.3s ease;
    }
    .nav-link:hover::after, .nav-link.active::after { width: 100%; }

    /* ========== CARDS ========== */
    .project-card { 
      transition: all 0.45s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .project-card:hover { 
      transform: scale(1.07) translateY(-12px); 
    }
    .project-card:hover .project-image { 
      transform: scale(1.12); 
    }
    .project-image { 
      transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .stat-card { 
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .stat-card:hover { 
      transform: scale(1.1); 
    }
    .card-hover { 
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .card-hover:hover { 
      transform: scale(1.08); 
    }
    .social-icon { 
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .social-icon:hover { 
      transform: translateY(-4px) scale(1.15); 
      color: #6366f1; 
    }
    .social-icon-hover { 
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); 
    }
    .social-icon-hover:hover { 
      transform: scale(1.2) translateY(-6px); 
    }

    /* ========== FORM ========== */
    .form-input {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    .form-input:focus {
      border-color: #6366f1;
      box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
      outline: none; 
      transform: scale(1.02);
    }

    /* ========== TIMELINE ========== */
    .timeline-item { 
      position: relative; 
      padding-left: 30px; 
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    .timeline-item::before {
      content: ''; position: absolute; left: 0; top: 8px;
      width: 12px; height: 12px; border-radius: 50%;
      background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,0.25);
    }
    .timeline-item::after {
      content: ''; position: absolute; left: 5px; top: 24px;
      width: 2px; height: calc(100% - 16px); background: rgba(99,102,241,0.3);
    }
    .timeline-item:last-child::after { display: none; }
    .timeline-item:hover { 
      transform: translateX(10px) scale(1.03); 
    }

    /* ========== MUSIC CONTROL ========== */
    #volumeSlider { width: 120px; accent-color: #6366f1; cursor: pointer; }

    /* ========== PAY NOW BUTTON (RIGHT) ========== */
    #payNowContainer { position: fixed; right: 20px; bottom: 30px; z-index: 999999; }
    #payNowBtn {
      position: relative; width: 56px; height: 56px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
      color: #fff; font-size: 22px; cursor: pointer; overflow: hidden;
      display: flex; align-items: center; justify-content: center; white-space: nowrap;
      transition: width 0.4s cubic-bezier(.34,1.3,.64,1), border-radius 0.4s cubic-bezier(.34,1.3,.64,1), background 0.3s, box-shadow 0.3s, transform 0.3s;
      box-shadow: 0 8px 32px rgba(99,102,241,0.3), inset 0 1.5px 1px rgba(255,255,255,0.4);
    }
    #payNowBtn:hover {
      transform: scale(1.08);
    }
    #payNowBtn::before {
      content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 42%;
      border-radius: 0 0 50% 50%;
      background: linear-gradient(to bottom, rgba(255,255,255,0.28), transparent);
      pointer-events: none;
    }
    #payNowBtn::after {
      content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      animation: payShimmer 2.8s infinite; pointer-events: none;
    }
    @keyframes payShimmer { 0% { left: -100%; } 100% { left: 160%; } }
    #payNowBtn.expanded {
      width: 190px; border-radius: 28px;
      background: rgba(99,102,241,0.22);
      box-shadow: 0 0 28px rgba(99,102,241,0.6), 0 8px 32px rgba(99,102,241,0.3), inset 0 1.5px 1px rgba(255,255,255,0.45);
      border-color: rgba(99,102,241,0.5);
    }
    #payNowBtn .pn-icon { font-size: 22px; flex-shrink: 0; line-height: 1; transition: transform 0.3s; }
    #payNowBtn.expanded .pn-icon { transform: scale(0.85); }
    #payNowBtn .pn-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; max-width: 0; opacity: 0; overflow: hidden; transition: max-width 0.4s cubic-bezier(.34,1.3,.64,1), opacity 0.25s, margin 0.3s; margin-left: 0; }
    #payNowBtn.expanded .pn-label { max-width: 140px; opacity: 1; margin-left: 7px; }
    #payNowBtn .pulse-ring { position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(99,102,241,0.55); animation: pulseRing 2.2s ease-out infinite; pointer-events: none; transition: border-radius 0.4s; }
    #payNowBtn.expanded .pulse-ring { border-radius: 32px; }
    @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.22); opacity: 0; } }

    /* ========== PAY NOW POPUP ========== */
    #payNowPopup { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 9999999; }
    #payNowPopup.show { display: flex; }
    .pnBox {
      position: relative; width: 320px; padding: 30px 28px 24px; border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(15,15,35,0.8); backdrop-filter: blur(40px) saturate(200%);
      box-shadow: 0 0 60px rgba(99,102,241,0.3), 0 20px 60px rgba(0,0,0,0.6), inset 0 1.5px 1px rgba(255,255,255,0.25);
      color: #fff; text-align: center;
      animation: pnPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    .pnBox::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 45%; border-radius: 0 0 50% 50%; background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent); pointer-events: none; }
    @keyframes pnPop { from { transform: scale(0.75) translateY(30px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
    .pnBox h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; background: linear-gradient(135deg, #a78bfa, #818cf8, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .pnBox .pnSub { font-size: 12px; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
    .pnQrWrap { display: flex; flex-direction: column; align-items: center; border-radius: 16px; background: #fff; box-shadow: 0 4px 20px rgba(99,102,241,0.4); overflow: hidden; }

    /* ===== CONTACT MODAL ===== */
    #contactModal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 9999999; }
    #contactModal.show { display: flex; }
    .cmbBox {
      position: relative; width: 320px; padding: 30px 24px 24px; border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.22);
      background: rgba(15,15,35,0.95); backdrop-filter: blur(40px);
      box-shadow: 0 0 60px rgba(99,102,241,0.3), 0 20px 60px rgba(0,0,0,0.6);
      color: #fff; text-align: center;
      animation: pnPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
    }
    .cmbBox h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; background: linear-gradient(135deg, #a78bfa, #818cf8, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .cmbBox .cmbSub { font-size: 12px; color: rgba(255,255,255,0.45); margin-bottom: 20px; }
    .cmbClose { position: absolute; top: 12px; right: 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 28px; height: 28px; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
    .cmbClose:hover { background: rgba(255,60,60,0.35); transform: scale(1.1); }
    .cmb-btn-wrap { display: flex; flex-direction: column; gap: 10px; }
    .cmb-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 13px 18px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: #fff; text-decoration: none;
      font-size: 14px; font-weight: 700;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      cursor: pointer;
    }
    .cmb-btn:hover { transform: scale(1.03); }
    .cmb-btn-zalo { border-color: rgba(0,104,255,0.4); background: rgba(0,104,255,0.12); }
    .cmb-btn-zalo:hover { background: rgba(0,104,255,0.22); box-shadow: 0 4px 20px rgba(0,104,255,0.3); }
    .cmb-btn-fb { border-color: rgba(24,119,242,0.4); background: rgba(24,119,242,0.12); }
    .cmb-btn-fb:hover { background: rgba(24,119,242,0.22); box-shadow: 0 4px 20px rgba(24,119,242,0.3); }
    .cmb-btn-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
    .pnQrWrap img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 0; }
    .pnQrInfo { width: 100%; padding: 8px 10px; text-align: center; background: #fff; }
    .pnQrName { font-size: 13px; font-weight: 800; color: #1a1a3e; letter-spacing: 0.5px; }
    .pnQrAcct { font-size: 12px; color: #4338ca; font-weight: 700; margin-top: 2px; letter-spacing: 0.5px; }
    .pnNote { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.3); font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; text-align: left; }
    .pnClose { position: absolute; top: 12px; right: 14px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 50%; width: 28px; height: 28px; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
    .pnClose:hover { background: rgba(255,60,60,0.35); transform: scale(1.1); }

    /* ══════════ THEME PICKER DROPDOWN ══════════ */
    #themePicker {
      position: fixed;
      top: 68px;
      right: 16px;
      z-index: 9999998;
      width: 280px;
      background: rgba(8,8,22,0.97);
      backdrop-filter: blur(28px) saturate(200%);
      -webkit-backdrop-filter: blur(28px) saturate(200%);
      border: 1px solid rgba(99,102,241,0.4);
      border-radius: 20px;
      padding: 14px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 30px rgba(99,102,241,0.2);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-12px) scale(0.94);
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    #themePicker.tp-open {
      opacity: 1; pointer-events: all;
      transform: translateY(0) scale(1);
    }
    .tp-label {
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 800;
      letter-spacing: 2px; text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      padding: 4px 6px 10px;
      display: block;
    }
    .tp-option {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 12px; border-radius: 13px;
      cursor: pointer;
      transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
      border: 1px solid transparent;
      position: relative;
      overflow: hidden;
    }
    .tp-option:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); }
    .tp-option.tp-active {
      background: rgba(99,102,241,0.12);
      border-color: rgba(99,102,241,0.3);
    }
    .tp-icon {
      width: 42px; height: 42px; border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
    }
    .tp-icon-dark  { background: linear-gradient(135deg,#0a0a1e,#1a1a3e); border: 1px solid rgba(99,102,241,0.3); }
    .tp-icon-light { background: linear-gradient(135deg,#e8e8ff,#f0f0ff); border: 1px solid rgba(99,102,241,0.25); }
    .tp-info { flex: 1; }
    .tp-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.9); margin-bottom: 2px; }
    .tp-desc { font-size: 11px; color: rgba(255,255,255,0.4); }
    .tp-check { font-size: 14px; opacity: 0; transition: opacity 0.2s; }
    .tp-option.tp-active .tp-check { opacity: 1; }
    /* Preview swatch inside icon */
    .tp-swatch {
      width: 100%; height: 100%; border-radius: 10px;
      display: flex; align-items: center; justify-content: center; font-size: 18px;
    }
    .tp-swatch-dark  { background: linear-gradient(135deg,#0d0d20,#1e1e40); }
    .tp-swatch-light { background: linear-gradient(135deg,#dde0ff,#f5f0ff); }
    /* Separator */
    .tp-sep { height: 1px; background: rgba(255,255,255,0.07); margin: 8px 0; }

    /* ========== THEME TOGGLE ========== */
    body.light-mode {
      background: linear-gradient(135deg, #eef0ff 0%, #e4e6f7 40%, #eff1ff 100%) !important;
      color: #0f0f2e !important;
    }
    /* Nav & layout */
    body.light-mode nav {
      background: rgba(255,255,255,0.96) !important;
      border-bottom: 1px solid rgba(99,102,241,0.25) !important;
      box-shadow: 0 2px 16px rgba(99,102,241,0.1) !important;
    }
    body.light-mode #mobileMenu { background: rgba(248,248,255,0.99) !important; }
    /* Text contrast */
    body.light-mode .text-white    { color: #0f0f2e !important; }
    body.light-mode .text-gray-300 { color: #2a2a50 !important; }
    body.light-mode .text-gray-400 { color: #3d3d68 !important; }
    body.light-mode .text-gray-500 { color: #555580 !important; }
    body.light-mode .text-indigo-400 { color: #3730a3 !important; }
    body.light-mode .text-indigo-300 { color: #4338ca !important; }
    body.light-mode .text-purple-400 { color: #6d28d9 !important; }
    body.light-mode .text-indigo-600 { color: #3730a3 !important; }
    body.light-mode .glow-element.active { box-shadow: 0 0 20px rgba(30,27,75,0.12) !important; }
    body.light-mode .text-glow.active { text-shadow: 0 0 10px rgba(30,27,75,0.18) !important; color: #0f0f2e !important; }
    body.light-mode .card-glow.active { border-color: rgba(99,102,241,0.4) !important; }
    body.light-mode .nav-link { color: #2a2a50 !important; }
    body.light-mode .nav-link:hover { color: #4338ca !important; }
    body.light-mode #mobileMenuBtn { color: #1e1e40 !important; }
    /* Cards - white with clear border + shadow */
    body.light-mode .card-glow {
      background: rgba(255,255,255,0.92) !important;
      border-color: rgba(99,102,241,0.28) !important;
      box-shadow: 0 4px 24px rgba(99,102,241,0.12), 0 1px 4px rgba(0,0,0,0.06) !important;
    }
    body.light-mode .project-card {
      background: rgba(255,255,255,0.95) !important;
      border-color: rgba(99,102,241,0.25) !important;
      box-shadow: 0 6px 28px rgba(99,102,241,0.14) !important;
    }
    /* Skill bars */
    body.light-mode .skill-bar { background: rgba(99,102,241,0.15) !important; }
    body.light-mode .skill-item { background: rgba(255,255,255,0.8) !important; border-color: rgba(99,102,241,0.2) !important; }
    /* Timeline */
    body.light-mode .timeline-item { color: #1a1a3e !important; }
    /* Stat cards */
    body.light-mode .stat-card {
      background: rgba(255,255,255,0.9) !important;
      border-color: rgba(99,102,241,0.25) !important;
      box-shadow: 0 4px 18px rgba(99,102,241,0.1) !important;
    }
    /* Form inputs */
    body.light-mode .form-input {
      background: rgba(255,255,255,0.95) !important;
      border-color: rgba(99,102,241,0.3) !important;
      color: #0f0f2e !important;
      box-shadow: 0 2px 8px rgba(99,102,241,0.08) !important;
    }
    body.light-mode .form-input:focus {
      border-color: #4338ca !important;
      box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
    }
    body.light-mode .form-input::placeholder { color: #8888aa !important; }
    /* Sections bg contrast */
    body.light-mode section { color: #0f0f2e; }
    /* Badges, tool badges */
    body.light-mode .tool-badge {
      background: rgba(255,255,255,0.9) !important;
      border-color: rgba(99,102,241,0.25) !important;
      color: #2a2a50 !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    }
    /* Link bio */
    body.light-mode .lb-btn {
      background: rgba(255,255,255,0.92) !important;
      border-color: rgba(99,102,241,0.2) !important;
      color: #0f0f2e !important;
      box-shadow: 0 4px 16px rgba(99,102,241,0.1) !important;
    }
    body.light-mode .linkbio-handle, body.light-mode .linkbio-bio { color: rgba(15,15,46,0.6) !important; }
    body.light-mode .lb-link {
      background: rgba(255,255,255,0.88) !important;
      border-color: rgba(99,102,241,0.2) !important;
      color: #1a1a3e !important;
      box-shadow: 0 2px 10px rgba(99,102,241,0.08) !important;
    }
    /* Scrollbar */
    body.light-mode ::-webkit-scrollbar-track { background: #e4e6f4; }
    body.light-mode ::-webkit-scrollbar-thumb { background: #8080b0; border-radius: 3px; }
    body.light-mode ::-webkit-scrollbar-thumb:hover { background: #5555a0; }
    /* Settings panel */
    body.light-mode #settingsPanel {
      background: rgba(255,255,255,0.98) !important;
      border-color: rgba(99,102,241,0.25) !important;
      box-shadow: 0 12px 40px rgba(99,102,241,0.15), 0 4px 16px rgba(0,0,0,0.08) !important;
      color: #0f0f2e !important;
    }
    body.light-mode .settings-label { color: #2a2a50 !important; }
    body.light-mode .settings-title { color: #555580 !important; }
    body.light-mode .settings-row { border-color: rgba(99,102,241,0.12) !important; }
    /* Toast */
    body.light-mode .toast { color: #0f0f2e !important; }
    /* Reaction widget */
    body.light-mode .reaction-btns {
      background: rgba(255,255,255,0.9) !important;
      border-color: rgba(99,102,241,0.2) !important;
    }
    body.light-mode .reaction-count { color: rgba(15,15,46,0.6) !important; }
    #themeToggle {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.28);
      color: white; font-size: 14px; cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); flex-shrink: 0;
    }
    #themeToggle:hover { transform: scale(1.15); background: rgba(255,255,255,0.2); box-shadow: 0 0 16px rgba(99,102,241,0.65); }
    #themeToggle.spinning .theme-icon { animation: spinIconNav 0.42s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes spinIconNav { from { transform: rotate(-160deg) scale(0.4); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
    body {
      background: linear-gradient(180deg, #06060d 0%, #0b0a19 48%, #05050b 100%) !important;
      color: #ede9ff;
    }
    body nav,
    body .sp-nav {
      background: rgba(8, 8, 18, 0.9) !important;
      border-color: rgba(136, 120, 255, 0.1) !important;
    }
    body .card-glow,
    body .project-card,
    body .stat-card,
    body .boost-order-panel,
    body .dl-card,
    body .tool-badge,
    body .skill-item,
    body .welcome-card,
    body .pnBox,
    body .liquid-panel,
    body #settingsPanel,
    body #themePicker,
    body #searchInput,
    body .search-result-item,
    body .boost-dropdown,
    body #freeMenuDropdown,
    body #dichvuNavDropdown,
    body #subpagePanel,
    body #optimizePanel,
    body #dichVuPanel,
    body #blogSubpage,
    body #projectDetailPage {
      background-color: #0b0a16 !important;
      color: #ece8ff !important;
      border-color: rgba(136, 120, 255, 0.1) !important;
    }
    body:not(.light-mode) p,
    body:not(.light-mode) .text-gray-400,
    body:not(.light-mode) .text-gray-500,
    body:not(.light-mode) .settings-title,
    body:not(.light-mode) .tp-desc,
    body:not(.light-mode) .search-result-desc,
    body:not(.light-mode) .contact-social-handle,
    body:not(.light-mode) footer,
    body:not(.light-mode) h1,
    body:not(.light-mode) h2,
    body:not(.light-mode) h3,
    body:not(.light-mode) h4,
    body:not(.light-mode) .text-white,
    body:not(.light-mode) .text-gray-300,
    body:not(.light-mode) .tp-name,
    body:not(.light-mode) .settings-label,
    body:not(.light-mode) .text-glow,
    body:not(.light-mode) .light-reactive {
      color: #ddd9eb !important;
    }

    body:not(.light-mode) .light-reactive.active,
    body:not(.light-mode) .text-glow.active,
    body:not(.light-mode) .text-white.light-reactive.active,
    body:not(.light-mode) .text-gray-300.light-reactive.active,
    body:not(.light-mode) .text-gray-400.light-reactive.active {
      color: #ffffff !important;
      text-shadow: 0 0 14px rgba(255,255,255,0.18) !important;
    }
    

    /* ─── LIGHT MODE: fix all white-text-on-white issues ─── */
    body.light-mode section { color: #0f0f2e !important; }
    body.light-mode .text-white { color: #0f0f2e !important; }
    body.light-mode h1, body.light-mode h2, body.light-mode h3,
    body.light-mode h4, body.light-mode h5 { color: #0f0f2e !important; }
    body.light-mode p { color: #2a2a50 !important; }
    body.light-mode span:not(.gradient-text):not([class*="gradient"]) { color: inherit !important; }
    body.light-mode .text-glow { color: #1a1a3e !important; }
    /* Hero section */
    body.light-mode #hero { color: #0f0f2e; }
    body.light-mode .typewriter-text { color: #0f0f2e !important; border-right-color: #6366f1 !important; }
    /* Cards font colors */
    body.light-mode .card-glow, body.light-mode .project-card { color: #1a1a3e !important; }
    body.light-mode .stat-card { color: #1a1a3e !important; }
    /* FreeFireSection prices */
    body.light-mode .text-indigo-400 { color: #3730a3 !important; }
    /* Sections with bg-white/5 */
    body.light-mode [class*="bg-white"] { background: rgba(255,255,255,0.75) !important; }
    body.light-mode .border-white\/10 { border-color: rgba(99,102,241,0.2) !important; }
    /* Subpage panel in light mode */
    body.light-mode .dl-card { background: rgba(255,255,255,0.8) !important; color: #1a1a3e !important; }
    body.light-mode .dl-card h3, body.light-mode .dl-card p, body.light-mode .dl-card span { color: #1a1a3e !important; }
    /* Contact links */
    body.light-mode .contact-social-link { background: rgba(255,255,255,0.6) !important; color: #1a1a3e !important; border-color: rgba(99,102,241,0.15) !important; }
    body.light-mode .contact-social-handle { color: #555580 !important; }
    /* Search */
    body.light-mode #searchInput { color: #0f0f2e !important; }
    body.light-mode .search-result-desc { color: rgba(30,30,80,0.6) !important; }
    /* Mobile menu text */
    body.light-mode #mobileMenu a { color: #1a1a3e !important; }
    /* Pay popup light */
    body.light-mode .pnBox { background: rgba(245,245,255,0.95) !important; color: #0f0f2e !important; }
    body.light-mode .pnBox h3 { background: linear-gradient(135deg, #3730a3, #6d28d9) !important; -webkit-background-clip: text !important; background-clip: text !important; }
    body.light-mode .pnNote { background: rgba(99,102,241,0.08) !important; color: #1a1a3e !important; }
    /* Welcome modal */
    body.light-mode .welcome-card { background: rgba(255,255,255,0.95) !important; color: #0f0f2e !important; }
    body.light-mode .welcome-title { color: #0f0f2e !important; }
    body.light-mode .welcome-sub { color: rgba(30,30,80,0.6) !important; }
    /* Typewriter & hero text */
    body.light-mode .hero-name { color: #0f0f2e !important; }
    /* Footer */
    body.light-mode footer { color: #555580 !important; }
    body.light-mode footer a { color: #4338ca !important; }
    /* SP nav in light */
    body.light-mode .sp-nav { color: #0f0f2e !important; }
    body.light-mode .sp-nav span { color: #1a1a3e !important; }
    /* FPS counter */
    body.light-mode #fpsCounter { color: #3730a3 !important; }
    /* Boost section cards */
    body.light-mode .boost-card { background: rgba(255,255,255,0.88) !important; color: #0f0f2e !important; }
    /* Gradient text stays gradient */
    body.light-mode .gradient-text {
      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #be185d 100%) !important;
      -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
    }
    /* Section title underline light */
    body.light-mode .section-title::after { background: linear-gradient(90deg, #4338ca, #6d28d9) !important; }
    /* Nav link underline light */
    body.light-mode .nav-link::after { background: linear-gradient(90deg, #4338ca, #6d28d9) !important; }
    /* Music control btn */
    body.light-mode .liquid-btn { color: #1a1a3e !important; background: rgba(255,255,255,0.6) !important; border-color: rgba(99,102,241,0.3) !important; }
    /* Back to top */
    body.light-mode #backToTop { color: #1a1a3e !important; background: rgba(255,255,255,0.7) !important; }
    /* Theme picker in light */
    body.light-mode #themePicker { background: rgba(245,245,255,0.98) !important; border-color: rgba(99,102,241,0.3) !important; }
    body.light-mode .tp-name { color: #1a1a3e !important; }
    body.light-mode .tp-desc { color: #555580 !important; }
    body.light-mode .tp-label { color: rgba(30,30,80,0.4) !important; }
    body.light-mode .tp-option:hover { background: rgba(99,102,241,0.08) !important; }
    body.light-mode .tp-sep { background: rgba(99,102,241,0.1) !important; }
    body.light-mode #freeMenuDropdown { background: white !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
    body.light-mode #freeMenuDropdown button { color: rgba(0,0,0,0.75) !important; }
    /* Dịch vụ dropdown - đồng bộ theme */
    body.light-mode #dichvuNavDropdown { background: white !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.12) !important; }
    body.light-mode #dichvuNavDropdown a { color: rgba(0,0,0,0.75) !important; }
    body.light-mode #dichvuNavBtn { color: #2a2a50 !important; }
    body.light-mode #freeMenuDropdown button:hover,
    body.light-mode #freeMenuDropdown button:focus { background: rgba(99,102,241,0.1) !important; color: #0f0f2e !important; }
    body.light-mode #dichvuNavDropdown a:hover,
    body.light-mode #dichvuNavDropdown a:focus { background: rgba(99,102,241,0.1) !important; color: #0f0f2e !important; }
    .nav-dropdown-item:hover { background: rgba(99,102,241,0.15) !important; }

    /* ── Subpage: show background animations ── */
    #subpagePanel #spFallingCanvas { z-index: 1 !important; }
    #subpagePanel .sp-scroll-reveal,
    #subpagePanel > div,
    #subpagePanel > nav { position: relative; z-index: 2; }
    /* Subpage floating orbs */
    .sp-orb {
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      filter: blur(60px);
      opacity: 0;
      transition: opacity 0.8s ease;
      animation: spOrbFloat var(--d, 12s) ease-in-out infinite;
    }
    #subpagePanel.sp-open ~ .sp-orb,
    #subpagePanel.sp-open .sp-orb { opacity: 1; }
    @keyframes spOrbFloat {
      0%, 100% { transform: translateY(0) translateX(0) scale(1); }
      33% { transform: translateY(-30px) translateX(15px) scale(1.05); }
      66% { transform: translateY(20px) translateX(-10px) scale(0.96); }
    }

    /* ══════════ OCEAN WAVE THEME TRANSITION ══════════ */
    #oceanWave {
      position: fixed;
      inset: 0;
      z-index: 9999998;
      pointer-events: none;
      overflow: hidden;
    }
    /* Clip-path wave sweeps diagonally left→right */
    .ow-layer {
      position: absolute;
      inset: 0;
      opacity: 0;
      pointer-events: none;
    }
    /* Layer 1: main color wave */
    .ow-layer-1 {
      background: linear-gradient(112deg,
        rgba(30,30,80,0.98) 0%,
        rgba(50,20,100,0.96) 25%,
        rgba(99,102,241,0.95) 55%,
        rgba(80,20,120,0.93) 80%,
        rgba(20,10,50,0.97) 100%);
    }
    /* Layer 2: nebula shimmer */
    .ow-layer-2 {
      background: linear-gradient(112deg,
        rgba(120,80,255,0.35) 0%,
        rgba(80,40,200,0.28) 40%,
        rgba(150,100,255,0.22) 70%,
        transparent 100%);
    }
    /* Layer 3: star dust crest */
    .ow-layer-3 {
      background: linear-gradient(112deg,
        rgba(200,180,255,0.18) 0%,
        rgba(150,130,255,0.1) 40%,
        transparent 70%);
    }
    /* clip-path trick: diagonal sweep - wave front is a skewed vertical edge */
    #oceanWave.wave-enter .ow-layer-1 {
      animation: owSweep1 0.72s cubic-bezier(0.76,0,0.24,1) forwards;
    }
    #oceanWave.wave-enter .ow-layer-2 {
      animation: owSweep2 0.78s cubic-bezier(0.76,0,0.24,1) 0.04s forwards;
    }
    #oceanWave.wave-enter .ow-layer-3 {
      animation: owSweep3 0.68s cubic-bezier(0.76,0,0.24,1) 0.08s forwards;
    }
    #oceanWave.wave-exit .ow-layer-1 {
      opacity: 1;
      animation: owRecede1 0.65s cubic-bezier(0.76,0,0.24,1) forwards;
    }
    #oceanWave.wave-exit .ow-layer-2 {
      opacity: 0.55;
      animation: owRecede2 0.6s cubic-bezier(0.76,0,0.24,1) 0.04s forwards;
    }
    #oceanWave.wave-exit .ow-layer-3 {
      opacity: 0.22;
      animation: owRecede3 0.55s cubic-bezier(0.76,0,0.24,1) 0.08s forwards;
    }
    /* Sweep: clip-path diagonal stripe moves left→right across full screen */
    @keyframes owSweep1 {
      0%   { opacity:1; clip-path: polygon(-30% 0%, -10% 0%, -25% 100%, -45% 100%); }
      50%  { clip-path: polygon(-5% 0%, 55% 0%, 40% 100%, -20% 100%); }
      100% { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); opacity:1; }
    }
    @keyframes owSweep2 {
      0%   { opacity:0.55; clip-path: polygon(-35% 0%, -8% 0%, -22% 100%, -50% 100%); }
      100% { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); opacity:0.55; }
    }
    @keyframes owSweep3 {
      0%   { opacity:0.22; clip-path: polygon(-40% 0%, -5% 0%, -20% 100%, -55% 100%); }
      100% { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); opacity:0.22; }
    }
    /* Recede: stripe exits to the right */
    @keyframes owRecede1 {
      0%   { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); opacity:1; }
      50%  { clip-path: polygon(45% 0%, 115% 0%, 115% 100%, 30% 100%); }
      100% { clip-path: polygon(110% 0%, 130% 0%, 130% 100%, 115% 100%); opacity:0; }
    }
    @keyframes owRecede2 {
      0%   { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); }
      100% { clip-path: polygon(115% 0%, 135% 0%, 135% 100%, 120% 100%); opacity:0; }
    }
    @keyframes owRecede3 {
      0%   { clip-path: polygon(0% 0%, 110% 0%, 110% 100%, 0% 100%); }
      100% { clip-path: polygon(120% 0%, 140% 0%, 140% 100%, 125% 100%); opacity:0; }
    }
    /* Bubbles */
    .ow-bubble {
      position: absolute;
      border-radius: 50%;
      background: rgba(255,255,255,0.65);
      pointer-events: none;
      animation: owBubble 0.9s ease-out forwards;
    }
    @keyframes owBubble {
      0%   { transform: translate(0,0) scale(1); opacity:0.7; }
      100% { transform: translate(var(--bx,10px), var(--by,-60px)) scale(0.2); opacity:0; }
    }


    /* ========== FREE NAV BUTTON ========== */
    .free-nav-btn {
      position: relative !important;
      padding: 7px 18px !important;
      border-radius: 999px !important;
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 60%, #ec4899 100%) !important;
      color: #fff !important;
      font-size: 13px !important;
      font-weight: 800 !important;
      letter-spacing: 0.5px !important;
      border: none !important;
      cursor: pointer !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      -webkit-text-fill-color: #fff !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      opacity: 1 !important;
      visibility: visible !important;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease !important;
      box-shadow: 0 4px 18px rgba(99,102,241,0.55) !important;
      animation: freeGlowPulse 2s ease-in-out infinite !important;
    }
    @keyframes freeGlowPulse {
      0%,100% { box-shadow: 0 4px 18px rgba(99,102,241,0.55); }
      50% { box-shadow: 0 4px 30px rgba(168,85,247,0.8), 0 0 18px rgba(168,85,247,0.35); }
    }
    .free-nav-btn::after {
      content: '' !important;
      position: absolute !important;
      top: 0 !important; left: -100% !important; width: 60% !important; height: 100% !important;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent) !important;
      animation: freeShimmer 2s infinite !important;
      pointer-events: none !important;
    }
    @keyframes freeShimmer { 0%{left:-100%} 100%{left:160%} }
    .free-nav-btn:hover {
      transform: scale(1.1) translateY(-2px) !important;
      box-shadow: 0 8px 32px rgba(168,85,247,0.7) !important;
    }
    .free-nav-btn:active { transform: scale(0.95) !important; }
    .free-mobile-btn {
      font-size: 1.5rem !important;
      padding: 10px 28px !important;
    }
    body.light-mode .free-nav-btn {
      box-shadow: 0 4px 18px rgba(99,102,241,0.4) !important;
    }

    /* ========== LANG TOGGLE ========== */
    #langToggle {
      height: 32px; padding: 0 10px; border-radius: 20px;
      background: rgba(255,255,255,0.1); backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: 0 2px 10px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.28);
      color: white; font-size: 11px; font-weight: 800; letter-spacing: 1px;
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1); flex-shrink: 0; min-width: 44px;
    }
    #langToggle:hover { transform: scale(1.12); background: rgba(255,255,255,0.2); box-shadow: 0 0 16px rgba(99,102,241,0.65); }
    #langToggle.switching .lang-label { animation: langFlip 0.4s cubic-bezier(0.34,1.56,0.64,1); }
    @keyframes langFlip { from { transform: rotateY(-90deg) scale(0.5); opacity:0; } to { transform: rotateY(0deg) scale(1); opacity:1; } }
    


    /* ── NAV PAY BUTTON ── */
    .nav-pay-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 7px 16px; border-radius: 999px;
      background: linear-gradient(135deg,#6366f1,#a855f7);
      border: none; color: white; font-size: 12px; font-weight: 700;
      cursor: pointer; letter-spacing: 0.4px;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      font-family: 'Inter', sans-serif;
    }
    .nav-pay-btn:hover { transform: scale(1.07); box-shadow: 0 0 20px rgba(99,102,241,0.6); }
    body.light-mode .nav-pay-btn { box-shadow: 0 2px 12px rgba(99,102,241,0.25); }


    /* ========== CHEAT PRICE GRID ========== */
    .cheat-price-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .cheat-price-cell {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 11px 13px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
    }
    .cheat-price-cell:hover {
      background: rgba(99,102,241,0.12);
      border-color: rgba(99,102,241,0.35);
      transform: scale(1.02);
    }
    .cheat-key-label {
      font-size: 11px;
      color: rgba(255,255,255,0.42);
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .cheat-price-num {
      font-family: 'Inter', sans-serif;
      font-size: 19px;
      font-weight: 800;
      color: #a78bfa;
      line-height: 1.1;
    }
    .cheat-vnd {
      font-size: 9px;
      font-weight: 700;
      color: rgba(167,139,250,0.5);
      letter-spacing: 1.2px;
    }
    /* Optimizer single price */
    .cheat-optimizer-price {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(6,182,212,0.08);
      border: 1px solid rgba(6,182,212,0.2);
      border-radius: 16px;
      padding: 18px 20px;
    }
    .cheat-price-big {
      font-family: 'Inter', sans-serif;
      font-size: 30px;
      font-weight: 800;
      color: #06b6d4;
      line-height: 1.1;
    }
    .cheat-vnd-big {
      font-size: 10px;
      font-weight: 700;
      color: rgba(6,182,212,0.55);
      letter-spacing: 0.5px;
      margin-top: 2px;
    }
    /* Theme variants */
    body.light-mode .cheat-price-cell { background: rgba(99,102,241,0.05); border-color: rgba(99,102,241,0.15); }
    body.light-mode .cheat-price-cell:hover { background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.35); }
    body.light-mode .cheat-price-num { color: #4f46e5; }
    body.light-mode .cheat-vnd { color: rgba(79,70,229,0.5); }
    body.light-mode .cheat-key-label { color: rgba(30,27,75,0.5); }

    /* Selectable price cells */
    .selectable-price { cursor: pointer; user-select: none; position: relative; }
    .selectable-price.selected {
      background: rgba(99,102,241,0.22) !important;
      border-color: rgba(99,102,241,0.7) !important;
      transform: scale(1.03);
      box-shadow: 0 0 0 2px rgba(99,102,241,0.35), 0 4px 14px rgba(99,102,241,0.2);
    }
    .selectable-price.selected::after {
      content: '✓';
      position: absolute;
      top: 4px; right: 7px;
      font-size: 10px; font-weight: 900;
      color: #a78bfa;
    }
    body.light-mode .selectable-price.selected { background: rgba(99,102,241,0.15) !important; }

    /* Image Lightbox */
    #imgLightbox {
      display: none;
      position: fixed; inset: 0; z-index: 9999;
      background: rgba(0,0,0,0.92);
      backdrop-filter: blur(12px);
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 16px;
      cursor: zoom-out;
    }
    #imgLightbox.active { display: flex; }
    #imgLightbox img {
      max-width: 90vw; max-height: 80vh;
      object-fit: contain;
      border-radius: 16px;
      box-shadow: 0 20px 80px rgba(0,0,0,0.8);
      animation: lbPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    #imgLightbox .lb-title {
      color: rgba(255,255,255,0.85);
      font-family: 'Inter', sans-serif;
      font-weight: 700; font-size: 16px;
    }
    #imgLightbox .lb-close {
      position: absolute; top: 20px; right: 24px;
      font-size: 28px; color: rgba(255,255,255,0.6);
      cursor: pointer; line-height: 1;
      background: rgba(255,255,255,0.08); border-radius: 50%;
      width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
      transition: all 0.2s;
    }
    #imgLightbox .lb-close:hover { background: rgba(255,255,255,0.18); color: white; }
    @keyframes lbPop {
      from { opacity: 0; transform: scale(0.85); }
      to   { opacity: 1; transform: scale(1); }
    }

    /* Project section image lightbox trigger */
    .project-image-wrap { cursor: zoom-in; }

    /* ========== BOOST ORDER PANEL ========== */
    .boost-order-panel {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 20px;
      padding: 28px 32px;
      backdrop-filter: blur(20px);
      box-shadow: 0 8px 40px rgba(0,0,0,0.3);
    }
    body.light-mode .boost-order-panel {
      background: rgba(255,255,255,0.9);
      border-color: rgba(0,0,0,0.08);
      box-shadow: 0 4px 30px rgba(0,0,0,0.08);
    }
    .boost-row-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    @media(max-width:600px){ .boost-row-2col { grid-template-columns: 1fr; } }
    .boost-field-group { display: flex; flex-direction: column; gap: 8px; }
    .boost-label {
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.55);
      letter-spacing: 0.3px;
    }
    body.light-mode .boost-label { color: rgba(0,0,0,0.45); }
    .boost-select-wrap { position: relative; }
    .boost-select-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 16px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 12px;
      color: rgba(255,255,255,0.9);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
    }
    .boost-select-btn:hover {
      background: inherit;
      border-color: inherit;
    }
    body.light-mode .boost-select-btn {
      background: white;
      border-color: rgba(0,0,0,0.12);
      color: #1a1a2e;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    body.light-mode .boost-select-btn:hover { border-color: #6366f1; }
    .boost-select-icon { display:flex; align-items:center; flex-shrink:0; }
    .boost-select-text { flex: 1; }
    .boost-chevron {
      flex-shrink: 0;
      color: rgba(255,255,255,0.4);
      transition: transform 0.25s;
    }
    body.light-mode .boost-chevron { color: rgba(0,0,0,0.35); }
    .boost-chevron.open { transform: rotate(180deg); }
    .boost-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      left: 0; right: 0;
      background: #1a1a2e;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      overflow: hidden;
      z-index: 200;
      max-height: 0;
      opacity: 0;
      pointer-events: none;
      transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
      box-shadow: 0 8px 32px rgba(0,0,0,0.5);
    }
    .boost-dropdown.open {
      max-height: 380px;
      opacity: 1;
      pointer-events: all;
    }
    body.light-mode .boost-dropdown {
      background: white;
      border-color: rgba(0,0,0,0.1);
      box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    }
    .boost-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.8);
      cursor: pointer;
      transition: background 0.15s;
    }
    .boost-dropdown-item:hover { background: transparent; }
    .boost-dropdown-item.active { background: rgba(99,102,241,0.2); color: #a5b4fc; font-weight: 700; }
    body.light-mode .boost-dropdown-item { color: #1a1a2e; }
    body.light-mode .boost-dropdown-item:hover { background: rgba(99,102,241,0.08); }
    body.light-mode .boost-dropdown-item.active { background: rgba(99,102,241,0.1); color: #4338ca; }

    /* Service list rows */
    .boost-service-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
    }
    .boost-service-item:hover {
      background: rgba(99,102,241,0.1);
      border-color: rgba(99,102,241,0.3);
    }
    .boost-service-item.selected {
      background: rgba(99,102,241,0.15);
      border-color: rgba(99,102,241,0.55);
      box-shadow: 0 0 0 2px rgba(99,102,241,0.2);
    }
    body.light-mode .boost-service-item {
      background: rgba(240,242,255,0.7);
      border-color: rgba(0,0,0,0.07);
    }
    body.light-mode .boost-service-item:hover {
      background: rgba(99,102,241,0.06);
      border-color: rgba(99,102,241,0.25);
    }
    body.light-mode .boost-service-item.selected {
      background: rgba(99,102,241,0.08);
      border-color: rgba(99,102,241,0.22);
    }
    .boost-service-icon { display:flex; align-items:center; flex-shrink:0; }
    .boost-service-meta { flex: 1; min-width: 0; }
    .boost-service-name {
      font-size: 13.5px;
      font-weight: 600;
      color: rgba(255,255,255,0.88);
      line-height: 1.3;
    }
    body.light-mode .boost-service-name { color: #1a1a2e; }
    .boost-service-badges { display: flex; gap: 6px; margin-top: 3px; flex-wrap: wrap; }
    .boost-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 20px;
      letter-spacing: 0.3px;
    }
    .boost-badge-warranty { background: rgba(34,197,94,0.15); color: #4ade80; border: 1px solid rgba(34,197,94,0.3); }
    .boost-badge-nowarranty { background: rgba(239,68,68,0.12); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }
    body.light-mode .boost-badge-warranty { background: rgba(34,197,94,0.1); color: #15803d; }
    body.light-mode .boost-badge-nowarranty { background: rgba(239,68,68,0.08); color: #dc2626; }
    .boost-service-price {
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 800;
      color: #6366f1;
      white-space: nowrap;
      flex-shrink: 0;
    }
    body.light-mode .boost-service-price { color: #4338ca; }
    .boost-service-price .price-vnd {
      font-size: 10px;
      font-weight: 700;
      color: rgba(99,102,241,0.65);
      margin-left: 1px;
    }
    .boost-service-check {
      width: 18px; height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.2);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: all 0.2s;
    }
    .boost-service-item.selected .boost-service-check {
      background: #6366f1;
      border-color: #6366f1;
    }
    .boost-service-check svg { display: none; }
    .boost-service-item.selected .boost-service-check svg { display: block; }
    body.light-mode .boost-service-check { border-color: rgba(0,0,0,0.15); }
    #boostServiceList::-webkit-scrollbar { width: 4px; }
    #boostServiceList::-webkit-scrollbar-track { background: transparent; }
    #boostServiceList::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 2px; }
    #boostServiceList::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.7); }


    /* ========== SKILL CARD ANIMATED BACKGROUND ========== */
    .skill-card-anim {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      overflow: hidden;
    }
    .sca-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0;
      animation: scaOrbPulse 6s ease-in-out infinite;
    }
    .sca-orb-1 { width: 180px; height: 180px; top: -40px; left: -30px; background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%); animation-delay: 0s; }
    .sca-orb-2 { width: 140px; height: 140px; bottom: -20px; right: -20px; background: radial-gradient(circle, rgba(168,85,247,0.3), transparent 70%); animation-delay: 2s; }
    .sca-orb-3 { width: 100px; height: 100px; top: 40%; left: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(236,72,153,0.2), transparent 70%); animation-delay: 4s; }
    .sca-it .sca-orb-1 { background: radial-gradient(circle, rgba(168,85,247,0.32), transparent 70%); }
    .sca-it .sca-orb-2 { background: radial-gradient(circle, rgba(236,72,153,0.28), transparent 70%); }
    .sca-it .sca-orb-3 { background: radial-gradient(circle, rgba(6,182,212,0.22), transparent 70%); }
    @keyframes scaOrbPulse {
      0%,100% { opacity: 0; transform: scale(0.8); }
      50% { opacity: 1; transform: scale(1.15); }
    }
    .sca-spark {
      position: absolute;
      width: 2px; height: 2px;
      border-radius: 50%;
      background: white;
      opacity: 0;
      animation: scaSparkFloat 4s ease-in-out infinite;
    }
    .sca-spark-1 { top: 20%; left: 15%; animation-delay: 0s; width:3px;height:3px; background: rgba(167,139,250,0.9); }
    .sca-spark-2 { top: 60%; left: 75%; animation-delay: 0.8s; background: rgba(236,72,153,0.8); }
    .sca-spark-3 { top: 80%; left: 30%; animation-delay: 1.6s; width:2px;height:2px; background: rgba(99,102,241,0.9); }
    .sca-spark-4 { top: 35%; left: 85%; animation-delay: 2.4s; width:3px;height:3px; background: rgba(255,255,255,0.7); }
    .sca-spark-5 { top: 10%; left: 60%; animation-delay: 3.2s; background: rgba(167,139,250,0.8); }
    @keyframes scaSparkFloat {
      0%,100% { opacity: 0; transform: translateY(0) scale(1); }
      20% { opacity: 1; }
      50% { opacity: 0.7; transform: translateY(-18px) scale(1.4); }
      80% { opacity: 0.3; }
    }
    .sca-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(99,102,241,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.05) 1px, transparent 1px);
      background-size: 40px 40px;
      animation: scaGridDrift 12s linear infinite;
      opacity: 0.6;
    }
    @keyframes scaGridDrift {
      0% { background-position: 0 0; }
      100% { background-position: 40px 40px; }
    }
    body.light-mode .sca-grid { background-image: linear-gradient(rgba(99,102,241,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,0.04) 1px,transparent 1px); }
    body.light-mode .sca-orb-1 { background: radial-gradient(circle,rgba(99,102,241,0.15),transparent 70%); }
    body.light-mode .sca-orb-2 { background: radial-gradient(circle,rgba(168,85,247,0.12),transparent 70%); }
    body.light-mode .sca-orb-3 { background: radial-gradient(circle,rgba(236,72,153,0.1),transparent 70%); }

    /* ── SKILL CARD - animated border glow + shimmer sweep ── */
    .skill-card-border-anim {
      position: absolute; inset: 0; border-radius: inherit;
      pointer-events: none; z-index: 0; overflow: hidden;
    }
    /* Rotating conic gradient border */
    .skill-card-border-anim::before {
      content: '';
      position: absolute; inset: -2px; border-radius: inherit;
      background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0deg,
        #6366f1 60deg,
        #a855f7 120deg,
        #ec4899 180deg,
        transparent 240deg
      );
      animation: skillBorderSpin 4s linear infinite;
      opacity: 0.28;
    }
    /* Inner mask to show only the border */
    .skill-card-border-anim::after {
      content: '';
      position: absolute; inset: 2px; border-radius: calc(1rem - 2px);
      background: #0d0d1a;
    }
    body.light-mode .skill-card-border-anim::before { opacity: 0.5; }
    body.light-mode .skill-card-border-anim::after { background: #f0eeff; }
    /* Shimmer sweep - slow, 5s gap */
    .sca-shimmer {
      position: absolute; inset: 0; border-radius: inherit;
      background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.055) 50%, transparent 80%);
      background-size: 300% 100%;
      animation: skillShimmer 8s ease-in-out infinite;
      pointer-events: none; z-index: 3;
    }
    .sca-it .sca-shimmer { animation-delay: 4s; }
    body.light-mode .sca-shimmer {
      background: linear-gradient(105deg, transparent 20%, rgba(99,102,241,0.06) 50%, transparent 80%);
      background-size: 300% 100%;
    }
    @keyframes skillBorderSpin {
      0%   { --angle: 0deg; }
      100% { --angle: 360deg; }
    }
    @keyframes skillShimmer {
      0%,40%  { background-position: 200% 0; opacity: 0; }
      50%     { opacity: 1; }
      60%,100%{ background-position: -200% 0; opacity: 0; }
    }
    /* Orb opacity - giảm bớt trên dark */
    .sca-orb { opacity: 0; }
    @keyframes scaOrbPulseDark {
      0%,100% { opacity: 0; transform: scale(0.85); }
      50%     { opacity: 0.55; transform: scale(1.1); }
    }
    body:not(.light-mode) .sca-orb { animation-name: scaOrbPulseDark; }
    /* Add extra sparks for IT card */
    .sca-it .sca-spark-1 { background: rgba(236,72,153,0.9); }
    .sca-it .sca-spark-2 { background: rgba(6,182,212,0.9); }
    .sca-it .sca-spark-4 { background: rgba(168,85,247,0.8); }
    .sca-it .sca-spark-5 { background: rgba(236,72,153,0.7); }

    /* ========== NAV BUTTONS - RIGHT SIDE PADDING + LIGHT MODE CONTRAST ========== */
    /* Push right-side nav group away from edge */
    nav .flex.items-center.gap-3 {
      padding-right: 16px;
    }
    /* Stronger contrast for search, lang, theme buttons on light mode */
    body.light-mode #searchBtn {
      background: rgba(67,56,202,0.12) !important;
      border: 1.5px solid rgba(67,56,202,0.35) !important;
      color: #3730a3 !important;
      box-shadow: 0 1px 6px rgba(67,56,202,0.15) !important;
    }
    body.light-mode #searchBtn:hover {
      background: rgba(67,56,202,0.22) !important;
      border-color: rgba(67,56,202,0.6) !important;
      box-shadow: 0 2px 12px rgba(67,56,202,0.25) !important;
    }
    body.light-mode #langToggle {
      background: rgba(67,56,202,0.1) !important;
      border: 1.5px solid rgba(67,56,202,0.35) !important;
      color: #3730a3 !important;
      font-weight: 800 !important;
      box-shadow: 0 1px 6px rgba(67,56,202,0.12) !important;
    }
    body.light-mode #langToggle:hover {
      background: rgba(67,56,202,0.2) !important;
      border-color: rgba(67,56,202,0.6) !important;
    }
    body.light-mode #themeToggle {
      background: rgba(251,191,36,0.15) !important;
      border: 1.5px solid rgba(217,119,6,0.4) !important;
      color: #92400e !important;
      box-shadow: 0 1px 6px rgba(251,191,36,0.2) !important;
    }
    body.light-mode #themeToggle:hover {
      background: rgba(251,191,36,0.28) !important;
      border-color: rgba(217,119,6,0.65) !important;
    }
    body.light-mode #settingsBtn {
      background: rgba(67,56,202,0.1) !important;
      border: 1.5px solid rgba(67,56,202,0.3) !important;
      color: #3730a3 !important;
    }
    body.light-mode #settingsBtn:hover {
      background: rgba(67,56,202,0.2) !important;
    }

    /* ========== LINK BIO SECTION ========== */
    #linkbio {
      min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 100px 24px 60px;
      position: relative;
    }
    .linkbio-wrapper {
      max-width: 480px; width: 100%; margin: 0 auto; text-align: center;
    }
    .linkbio-avatar {
      width: 110px; height: 110px; margin: 0 auto 20px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      padding: 3px;
      animation: float 4s ease-in-out infinite;
    }
    .linkbio-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #0a0a0f; }
    .linkbio-name {
      font-family: 'Inter', sans-serif;
      font-size: 26px; font-weight: 800;
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 6px;
    }
    .linkbio-handle {
      font-size: 14px; color: rgba(255,255,255,0.45); margin-bottom: 6px; letter-spacing: 1px;
    }
    .linkbio-bio {
      font-size: 14px; color: rgba(255,255,255,0.55); margin-bottom: 28px; line-height: 1.6;
    }
    /* Social buttons */
    .linkbio-socials {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 28px;
    }
    .lb-btn {
      display: flex; align-items: center; gap: 12px;
      padding: 14px 20px; border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      color: white; text-decoration: none; font-size: 14px; font-weight: 600;
      cursor: pointer; position: relative; overflow: hidden;
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.15);
    }
    .lb-btn::before {
      content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
      transition: left 0.5s ease;
    }
    .lb-btn:hover::before { left: 160%; }
    .lb-btn:hover { transform: translateY(-5px) scale(1.04); border-color: rgba(255,255,255,0.28); }
    .lb-btn:active { transform: scale(0.97); }
    .lb-btn-icon {
      width: 36px; height: 36px; border-radius: 12px;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .lb-btn-text { text-align: left; }
    .lb-btn-title { font-size: 14px; font-weight: 700; display: block; }
    .lb-btn-sub { font-size: 11px; opacity: 0.55; display: block; margin-top: 1px; }
    /* Individual colors */
    .lb-facebook { border-color: rgba(24,119,242,0.35); }
    .lb-facebook:hover { background: rgba(24,119,242,0.18); box-shadow: 0 8px 30px rgba(24,119,242,0.35); border-color: rgba(24,119,242,0.6); }
    .lb-facebook .lb-btn-icon { background: linear-gradient(135deg, #1877f2, #0a5dc2); }
    .lb-zalo { border-color: rgba(0,104,255,0.35); }
    .lb-zalo:hover { background: rgba(0,104,255,0.18); box-shadow: 0 8px 30px rgba(0,104,255,0.35); border-color: rgba(0,104,255,0.6); }
    .lb-zalo .lb-btn-icon { background: linear-gradient(135deg, #0068ff, #004acc); }
    .lb-discord { border-color: rgba(88,101,242,0.35); }
    .lb-discord:hover { background: rgba(88,101,242,0.18); box-shadow: 0 8px 30px rgba(88,101,242,0.35); border-color: rgba(88,101,242,0.6); }
    .lb-discord .lb-btn-icon { background: linear-gradient(135deg, #5865f2, #3c46cc); }
    .lb-instagram { border-color: rgba(225,48,108,0.35); }
    .lb-instagram:hover { background: rgba(225,48,108,0.15); box-shadow: 0 8px 30px rgba(225,48,108,0.35); border-color: rgba(225,48,108,0.6); }
    .lb-instagram .lb-btn-icon { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
    /* More links */
    .linkbio-links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px; }
    .lb-link {
      display: flex; align-items: center; justify-content: space-between;
      padding: 13px 20px; border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.75); text-decoration: none; font-size: 14px;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    .lb-link:hover { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.4); color: white; transform: translateX(6px); }
    .lb-link svg { opacity: 0.4; transition: opacity 0.3s, transform 0.3s; }
    .lb-link:hover svg { opacity: 1; transform: translateX(4px); }
    /* Scroll down hint */
    .linkbio-scroll {
      position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
      color: rgba(255,255,255,0.3); font-size: 12px; letter-spacing: 2px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    /* Light mode overrides */
    body.light-mode .lb-btn { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.1); color: #1a1a2e; }
    body.light-mode .linkbio-handle, body.light-mode .linkbio-bio { color: rgba(0,0,0,0.5); }
    body.light-mode .lb-link { background: rgba(255,255,255,0.5); color: #333; }
    body.light-mode .linkbio-name {
      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #be185d 100%) !important;
      -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
    }

    /* ========== FPS COUNTER - PILL TOP RIGHT ========== */

    /* ========== ENHANCED ANIMATIONS ========== */
    @keyframes shimmerSlide {
      0% { transform: translateX(-100%) skewX(-15deg); }
      100% { transform: translateX(300%) skewX(-15deg); }
    }
    @keyframes glowPulse {
      0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.3); }
      50% { box-shadow: 0 0 40px rgba(99,102,241,0.6), 0 0 80px rgba(168,85,247,0.3); }
    }
    @keyframes textShimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @keyframes magneticPop {
      0% { transform: scale(1); }
      40% { transform: scale(1.08); }
      70% { transform: scale(0.97); }
      100% { transform: scale(1); }
    }
    @keyframes slideUpStagger {
      from { opacity: 0; transform: translateY(40px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes borderGlow {
      0%, 100% { border-color: rgba(99,102,241,0.3); }
      50% { border-color: rgba(168,85,247,0.7); }
    }
    /* Page transition overlay */
    #pageTransition {
      position: fixed;
      inset: 0;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      z-index: 999999;
      transform: translateY(-100%);
      pointer-events: none;
    }
    #pageTransition.active {
      animation: pageWipe 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards;
    }
    @keyframes pageWipe {
      0% { transform: translateY(-100%); }
      50% { transform: translateY(0); }
      100% { transform: translateY(100%); }
    }

    /* Section reveal animation */
    .reveal-section {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.8s cubic-bezier(0.34, 1.2, 0.64, 1), transform 0.8s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    .reveal-section.revealed {
      opacity: 1;
      transform: translateY(0);
    }

    /* Magnetic hover effect enhanced */
    .magnetic {
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Glow border animation on section titles */
    .section-title-enhanced {
      position: relative;
    }
    .section-title-enhanced::after {
      content: '';
      position: absolute;
      bottom: -8px; left: 0;
      width: 60px; height: 3px;
      background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
      background-size: 200% auto;
      border-radius: 2px;
      animation: textShimmer 3s linear infinite;
    }

    /* Enhanced toast */
    .toast { animation: toastIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards; }

    /* Scroll to section smooth indicator */
    .nav-link.active {
      color: white !important;
    }
    .nav-link.active::before {
      content: '';
      position: absolute;
      inset: -4px -8px;
      border-radius: 8px;
      background: rgba(99,102,241,0.15);
      z-index: -1;
    }

    body.light-mode #fpsValue { color: #0284c7; }
    body.light-mode #fpsCounter { background: rgba(255,255,255,0.6); border-color: rgba(99,102,241,0.25); }

    body.light-mode #fpsValue { color: #0284c7; }
    body.light-mode #fpsCounter { background: rgba(255,255,255,0.6); border-color: rgba(99,102,241,0.25); }

    /* ── Light mode: ripple + progress bar đen/tím đậm ── */
    body.light-mode #scrollProgress { background: linear-gradient(90deg,#1e1b4b,#3730a3,#6d28d9) !important; box-shadow: 0 0 8px rgba(30,27,75,0.5) !important; }
    body.light-mode .nav-link.active { color: #1e1b4b !important; }
    body.light-mode .nav-link.active::before { background: rgba(99,102,241,0.1) !important; }

    /* ========== SCALE-IN SCROLL ANIMATION ========== */
    .scale-reveal {
      opacity: 0;
      transform: scale(0.88) translateY(20px);
      transition: opacity 0.7s cubic-bezier(0.34,1.2,0.64,1), transform 0.7s cubic-bezier(0.34,1.56,0.64,1);
    }
    .scale-reveal.scale-revealed {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .scale-reveal:nth-child(2) { transition-delay: 0.08s; }
    .scale-reveal:nth-child(3) { transition-delay: 0.16s; }
    .scale-reveal:nth-child(4) { transition-delay: 0.24s; }

    /* ========== HOVER SCALE EFFECT - all specified cards ========== */
    .hov-scale {
      transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.38s cubic-bezier(0.34,1.56,0.64,1),
                  border-color 0.38s ease !important;
      cursor: default;
      will-change: transform;
    }
    .hov-scale:hover {
      transform: scale(1.055) translateY(-6px) !important;
      box-shadow: 0 20px 60px rgba(99,102,241,0.22), 0 4px 24px rgba(168,85,247,0.15) !important;
      border-color: rgba(99,102,241,0.4) !important;
    }
    .hov-scale:active { transform: scale(0.98) !important; }

    /* reaction widget removed */

    /* ========== RIGHT TAB ARROW ========== */
    /* ══ PILL TAB - expandable vertical ══ */
    #subpageTab {
      position: fixed;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 9996;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .spt-pill {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
      border-radius: 999px;
      background: rgba(15,15,35,0.75);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 4px 24px rgba(99,102,241,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
      overflow: hidden;
      transition: box-shadow 0.3s ease;
    }
    .spt-pill:hover {
      box-shadow: 0 4px 32px rgba(99,102,241,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
    }
    /* Each icon row */
    .spt-item {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      position: relative;
      transition: background 0.25s ease, transform 0.2s ease;
    }
    .spt-item:hover { background: rgba(99,102,241,0.25); transform: scale(1.1); }
    .spt-item:active { transform: scale(0.93); }
    /* Divider between items */
    .spt-divider {
      width: 28px; height: 1px;
      background: rgba(255,255,255,0.1);
      margin: 0 auto;
    }
    /* Collapsed items - hidden by default */
    .spt-extra {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.42s cubic-bezier(0.34,1.56,0.64,1);
    }
    #subpageTab.spt-open .spt-extra {
      max-height: 120px;
    }
    /* Pulse dot on first item */
    .spt-dot {
      position: absolute;
      top: 7px; right: 7px;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #a855f7;
      box-shadow: 0 0 5px #a855f7;
      animation: dotBlink 1.5s ease-in-out infinite;
    }
    /* Tooltip label on hover */
    .spt-item[data-tip]:hover::after {
      content: attr(data-tip);
      position: absolute;
      right: 52px;
      background: rgba(15,15,35,0.95);
      color: white;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      padding: 5px 10px;
      border-radius: 8px;
      white-space: nowrap;
      border: 1px solid rgba(99,102,241,0.35);
      pointer-events: none;
    }
    body.light-mode .spt-pill {
      background: rgba(255,255,255,0.92);
      border-color: rgba(99,102,241,0.25);
      box-shadow: 0 4px 24px rgba(99,102,241,0.15);
    }
    body.light-mode .spt-item:hover { background: rgba(99,102,241,0.12); }

    /* ========== SUB-PAGE PANEL ========== */
    #subpagePanel {
      position: fixed;
      inset: 0;
      z-index: 99993;
      transform: translateX(100%);
      transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
      overflow-y: auto;
      background: linear-gradient(145deg, #070711 0%, #12112d 36%, #181235 66%, #0b0a1a 100%) !important;
      isolation: isolate;
    }
    #subpagePanel.sp-open {
      transform: translateX(0);
    }
    /* ====== OPTIMIZE & DICH VU PANELS - same system as subpagePanel ====== */
    #optimizePanel, #dichVuPanel {
      position: fixed; inset: 0; z-index: 99993;
      transform: translateX(100%);
      transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
      overflow-y: auto;
      background: linear-gradient(145deg, #070711 0%, #12112d 36%, #181235 66%, #0b0a1a 100%) !important;
      isolation: isolate;
    }
    #optimizePanel.sp-open, #dichVuPanel.sp-open { transform: translateX(0); }
    /* Legacy op-open still works */
    #optimizePanel.op-open { transform: translateX(0); }
    #blogSubpage,
    #projectDetailPage {
      background: linear-gradient(145deg, #070711 0%, #12112d 36%, #181235 66%, #0b0a1a 100%) !important;
      isolation: isolate;
    }
    #subpagePanel::before,
    #optimizePanel::before,
    #dichVuPanel::before,
    #blogSubpage::before,
    #projectDetailPage::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(rgba(113, 95, 213, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(113, 95, 213, 0.045) 1px, transparent 1px);
      background-size: 52px 52px;
      opacity: 0.5;
      mask-image: radial-gradient(circle at center, black 18%, transparent 92%);
    }
    #subpagePanel::after,
    #optimizePanel::after,
    #dichVuPanel::after,
    #blogSubpage::after,
    #projectDetailPage::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(circle at 14% 18%, rgba(97, 86, 255, 0.16), transparent 28%),
        radial-gradient(circle at 82% 12%, rgba(164, 88, 247, 0.14), transparent 26%),
        radial-gradient(circle at 68% 74%, rgba(236, 72, 153, 0.09), transparent 24%),
        radial-gradient(circle at 12% 84%, rgba(88, 82, 212, 0.1), transparent 24%);
    }
    #subpagePanel > *,
    #optimizePanel > *,
    #dichVuPanel > *,
    #blogSubpage > *,
    #projectDetailPage > * {
      position: relative;
      z-index: 1;
    }
    body.light-mode #optimizePanel, body.light-mode #dichVuPanel {
      background: linear-gradient(135deg, #eef0ff 0%, #e4e6f7 100%) !important;
    }
    /* Blog + Project Detail panels - đồng bộ theme */
    body.light-mode #blogSubpage, body.light-mode #projectDetailPage {
      background: linear-gradient(135deg, #f0f0ff 0%, #eaeaf8 50%, #f5f0ff 100%) !important;
    }
    body.light-mode #blogSubpage .sp-nav,
    body.light-mode #projectDetailPage .sp-nav {
      background: rgba(240,240,255,0.95) !important;
      border-color: rgba(0,0,0,0.08) !important;
    }
    body.light-mode #blogSubpage,
    body.light-mode #projectDetailPage { color: #1a1a3e !important; }
    /* Dich vu panel: service selector tabs */
    .dv-tab {
      padding: 10px 22px; border-radius: 999px; font-size: 13px; font-weight: 700;
      cursor: pointer; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05);
      color: rgba(255,255,255,0.6); transition: all 0.3s; white-space: nowrap;
    }
    .dv-tab.active {
      background: linear-gradient(135deg,#6366f1,#a855f7); border-color: transparent;
      color: white; box-shadow: 0 4px 18px rgba(99,102,241,0.35);
    }
    .dv-pane { display: none; }
    .dv-pane.active { display: block; }
    body.light-mode .dv-tab {
      border-color: rgba(0,0,0,0.12); background: rgba(255,255,255,0.6); color: rgba(0,0,0,0.5);
    }
    body.light-mode .dv-tab.active { color: white; }
    /* Dich vu boost platform buttons */
    .dv-platform-btn {
      padding: 7px 14px; border-radius: 10px; font-size: 12px; font-weight: 700;
      cursor: pointer; border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.55);
      transition: all 0.25s; white-space: nowrap;
    }
    .dv-platform-btn.active {
      background: linear-gradient(135deg,#6366f1,#a855f7); border-color: transparent;
      color: white; box-shadow: 0 3px 12px rgba(99,102,241,0.35);
    }
    .dv-platform-btn:hover { color: white; border-color: rgba(255,255,255,0.3); }
    body.light-mode .dv-platform-btn { background: rgba(255,255,255,0.6); border-color: rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); }
    body.light-mode .dv-platform-btn.active { color: white; }
    /* DV service list scrollbar */
    #dvServiceList::-webkit-scrollbar, #dvCategoryDropdown::-webkit-scrollbar { width: 4px; }
    #dvServiceList::-webkit-scrollbar-thumb, #dvCategoryDropdown::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.4); border-radius: 2px; }
    body.light-mode #opThemeToggle, body.light-mode #dvThemeToggle { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.12) !important; color: #333 !important; }
    #subpageCloseBtn {
      position: fixed;
      top: 20px;
      left: 20px;
      z-index: 99999;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,0.2);
      color: white;
      font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
      pointer-events: none;
    }
    #subpageCloseBtn.show {
      opacity: 1;
      pointer-events: all;
    }
    #subpageCloseBtn:hover {
      background: rgba(239,68,68,0.25);
      border-color: rgba(239,68,68,0.5);
      transform: scale(1.1) rotate(90deg);
    }
    /* Download card styles */
    .dl-card {
      position: relative;
      background: linear-gradient(180deg, rgba(26, 22, 58, 0.78), rgba(11, 12, 34, 0.86));
      border: 1px solid rgba(158, 136, 255, 0.12);
      border-radius: 20px;
      padding: 22px;
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      overflow: hidden;
      box-shadow: 0 20px 44px rgba(7, 5, 24, 0.3);
      backdrop-filter: blur(12px);
    }
    .dl-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.055) 0%, transparent 58%),
        radial-gradient(circle at top right, rgba(116, 101, 255, 0.1), transparent 34%);
      pointer-events: none;
    }
    .dl-card:hover {
      transform: scale(1.03) translateY(-4px);
      border-color: rgba(140, 122, 255, 0.26);
      box-shadow: 0 16px 46px rgba(76, 64, 176, 0.22);
    }
    .dl-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 18px;
      border-radius: 12px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      color: white;
      font-size: 13px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      cursor: pointer;
      border: none;
    }
    .dl-btn:hover { transform: scale(1.06) translateY(-2px); box-shadow: 0 8px 24px rgba(99,102,241,0.4); }
    .dl-icon-box {
      width: 50px; height: 50px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 24px;
      flex-shrink: 0;
    }
    .dl-tag {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }
    .sp-nav {
      position: sticky;
      top: 0;
      z-index: 10;
      background: rgba(12, 10, 30, 0.78);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(150, 130, 255, 0.1);
      box-shadow: 0 10px 28px rgba(5, 4, 20, 0.28);
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .sp-nav-close {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.92);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 17px;
      line-height: 1;
      transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
      backdrop-filter: blur(14px);
    }
    .sp-nav-close:hover {
      transform: scale(1.06);
      background: rgba(255,255,255,0.14);
      border-color: rgba(255,255,255,0.26);
    }
    body.light-mode #subpagePanel {
      background: linear-gradient(135deg, #f0f0ff 0%, #eaeaf8 50%, #f5f0ff 100%);
    }
    body.light-mode .sp-nav {
      background: rgba(240,240,255,0.92);
      border-color: rgba(0,0,0,0.08);
    }
    body.light-mode .dl-card {
      background: rgba(255,255,255,0.65);
      border-color: rgba(99,102,241,0.2);
    }
    body.light-mode .subpage-tab-inner {
      background: rgba(255,255,255,0.55);
      border-color: rgba(99,102,241,0.25);
    }
    /* SP scroll animations */
    .sp-scroll-reveal {
      opacity: 0;
      transform: translateY(30px) scale(0.96);
      transition: all 0.6s cubic-bezier(0.34,1.2,0.64,1);
    }
    .sp-scroll-reveal.revealed {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    /* ========== INTRO SPLASH SCREEN ========== */
    #introSplash {
      position: fixed;
      inset: 0;
      z-index: 9999999;
      background: #0a0a0f;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
      overflow: hidden;
    }
    #introSplash.hiding { pointer-events: none; }
    .intro-logo-wrap {
      position: relative;
      width: 130px;
      height: 130px;
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .intro-logo-wrap:hover { transform: scale(1.06); }
    .intro-logo-wrap::before {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      animation: introRingRotate 3s linear infinite;
      z-index: 0;
    }
    @keyframes introRingRotate { to { transform: rotate(360deg); } }
    .intro-logo-img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #0a0a0f;
      transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1);
    }
    /* expanding avt animation */
    #introSplash.expanding .intro-logo-img {
      width: 300vmax;
      height: 300vmax;
      border-radius: 0;
      border: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
      opacity: 0;
      transition: width 0.8s cubic-bezier(0.4,0,0.2,1),
                  height 0.8s cubic-bezier(0.4,0,0.2,1),
                  border-radius 0.6s ease,
                  opacity 0.7s ease 0.4s;
    }
    #introSplash.expanding .intro-logo-wrap::before { display: none; }
    #introSplash.expanding .intro-logo-wrap { pointer-events: none; }
    #introSplash.expanding .intro-texts,
    #introSplash.expanding .intro-hint { opacity: 0; transition: opacity 0.3s; }
    #introSplash.fade-out {
      opacity: 0;
      transition: opacity 0.5s ease 0.9s;
    }
    .intro-texts { text-align: center; }
    .intro-title {
      font-family: 'Inter', sans-serif;
      font-size: clamp(22px, 5vw, 38px);
      font-weight: 800;
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 8px;
      animation: fadeInUp 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s forwards;
      opacity: 0;
    }
    .intro-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.4);
      letter-spacing: 2px;
      animation: fadeInUp 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.5s forwards;
      opacity: 0;
    }
    .intro-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      animation: fadeInUp 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.7s forwards;
      opacity: 0;
    }
    .intro-hint-text {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }
    .intro-hint-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      box-shadow: 0 0 12px rgba(99,102,241,0.7);
      animation: introDotPulse 1.4s ease-in-out infinite;
    }
    @keyframes introDotPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.5; }
    }

    /* ========== WELCOME POPUP ========== */
    #welcomePopup {
      position: fixed;
      inset: 0;
      z-index: 9999998;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(12px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }
    #welcomePopup.show {
      opacity: 1;
      pointer-events: all;
    }
    .welcome-card {
      background: linear-gradient(135deg, rgba(15,15,30,0.98) 0%, rgba(26,26,46,0.98) 100%);
      border: 1px solid rgba(99,102,241,0.35);
      border-radius: 24px;
      padding: 40px 36px;
      max-width: 440px;
      width: 90%;
      text-align: center;
      box-shadow: 0 0 60px rgba(99,102,241,0.3), 0 20px 60px rgba(0,0,0,0.6);
      animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
      position: relative;
      overflow: hidden;
    }
    .welcome-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
    }
    .welcome-avatar {
      width: 72px; height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(99,102,241,0.5);
      margin: 0 auto 16px;
      display: block;
      box-shadow: 0 0 20px rgba(99,102,241,0.4);
    }
    .welcome-greeting {
      font-size: 13px;
      color: #a78bfa;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 10px;
      font-weight: 600;
    }
    .welcome-title {
      font-family: 'Inter', sans-serif;
      font-size: clamp(18px,4vw,26px);
      font-weight: 800;
      background: linear-gradient(135deg,#6366f1,#a855f7,#ec4899);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 10px;
      line-height: 1.2;
    }
    .welcome-sub {
      color: rgba(255,255,255,0.45);
      font-size: 13px;
      line-height: 1.6;
      margin-bottom: 28px;
    }
    .welcome-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 32px;
      border-radius: 999px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border: none;
      color: white;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      letter-spacing: 0.5px;
    }
    .welcome-btn:hover { transform: scale(1.05); box-shadow: 0 8px 30px rgba(99,102,241,0.5); }
    .welcome-btn:active { transform: scale(0.97); }
    .welcome-sparkles {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .w-spark {
      position: absolute;
      font-size: 14px;
      animation: wSparkFloat var(--d, 3s) ease-in-out infinite var(--delay, 0s);
      opacity: 0.6;
    }
    @keyframes wSparkFloat {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
      50% { transform: translateY(-14px) rotate(20deg); opacity: 0.9; }
    }

  
    /* ========== INTRO SPLASH SCREEN ========== */
    #introSplash {
      position: fixed;
      inset: 0;
      z-index: 9999999;
      background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      transition: opacity 0.8s ease;
    }
    #introSplash.splash-exit {
      pointer-events: none;
    }
    .splash-logo-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }
    #splashAvt {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid rgba(99,102,241,0.7);
      box-shadow: 0 0 40px rgba(99,102,241,0.5), 0 0 80px rgba(168,85,247,0.3);
      animation: splashPulse 2.5s ease-in-out infinite;
      transition: transform 0.8s cubic-bezier(0.4,0,0.2,1), border-radius 0.8s ease, opacity 0.8s ease;
    }
    @keyframes splashPulse {
      0%, 100% { box-shadow: 0 0 40px rgba(99,102,241,0.5), 0 0 80px rgba(168,85,247,0.3); }
      50%       { box-shadow: 0 0 60px rgba(99,102,241,0.8), 0 0 120px rgba(168,85,247,0.5); }
    }
    #splashAvt.avt-expand {
      transform: scale(30);
      border-radius: 0;
      opacity: 0;
      box-shadow: none;
    }
    .splash-title {
      font-family: 'Inter', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 2px;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      animation: fadeInUp 0.8s 0.3s both;
      text-align: center;
    }
    .splash-sub {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      color: rgba(255,255,255,0.35);
      letter-spacing: 3px;
      text-transform: uppercase;
      animation: fadeInUp 0.8s 0.5s both;
      text-align: center;
    }
    .splash-click-hint {
      position: absolute;
      bottom: 48px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      animation: fadeInUp 1s 0.8s both;
    }
    .splash-click-text {
      font-size: 12px;
      color: rgba(255,255,255,0.3);
      letter-spacing: 3px;
      text-transform: uppercase;
    }
    .splash-click-dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: rgba(99,102,241,0.7);
      animation: dotBlink 1.2s ease-in-out infinite;
    }

    /* ========== WELCOME MODAL ========== */
    #welcomeModal {
      position: fixed;
      inset: 0;
      z-index: 9999998;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.7);
      backdrop-filter: blur(12px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.5s ease;
    }
    #welcomeModal.modal-show {
      opacity: 1;
      pointer-events: all;
    }
    .welcome-card {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(99,102,241,0.4);
      border-radius: 24px;
      padding: 40px 44px;
      max-width: 420px;
      width: 90%;
      text-align: center;
      box-shadow: 0 0 60px rgba(99,102,241,0.25), 0 20px 60px rgba(0,0,0,0.5);
      backdrop-filter: blur(20px);
      animation: scaleIn 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .welcome-avt {
      width: 72px; height: 72px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(99,102,241,0.6);
      box-shadow: 0 0 20px rgba(99,102,241,0.4);
      margin: 0 auto 20px;
      display: block;
    }
    .welcome-title {
      font-family: 'Inter', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: white;
      margin-bottom: 10px;
      line-height: 1.4;
    }
    .welcome-title span {
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .welcome-sub {
      font-size: 14px;
      color: rgba(255,255,255,0.45);
      line-height: 1.6;
      margin-bottom: 28px;
    }
    .welcome-btn {
      display: inline-block;
      padding: 12px 36px;
      border-radius: 999px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border: none;
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      letter-spacing: 0.5px;
    }
    .welcome-btn:hover {
      transform: scale(1.06);
      box-shadow: 0 10px 30px rgba(99,102,241,0.5);
    }
    .welcome-btn:active { transform: scale(0.96); }

  
    /* ========== SPLASH CLICK BUTTON (centered) ========== */
    .splash-click-btn-wrap {
      position: absolute;
      bottom: 60px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      animation: fadeInUp 1s 0.8s both;
    }
    .splash-click-btn {
      position: relative;
      overflow: hidden;
      padding: 14px 40px;
      border-radius: 999px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border: none;
      color: white;
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 1px;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 8px 32px rgba(99,102,241,0.5);
    }
    .splash-click-btn:hover {
      transform: scale(1.08);
      box-shadow: 0 12px 40px rgba(99,102,241,0.7);
    }
    .splash-click-btn:active { transform: scale(0.96); }
    .splash-btn-ripple {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.15);
      animation: splashBtnPulse 2s ease-in-out infinite;
    }
    @keyframes splashBtnPulse {
      0%,100% { opacity: 0.4; transform: scale(1); }
      50% { opacity: 0; transform: scale(1.3); }
    }

    /* ── SPLASH SCREEN THEME VARIANTS ── */
    body.light-mode #introSplash {
      background: linear-gradient(135deg, #eef0ff 0%, #e4e6f7 40%, #eff1ff 100%) !important;
    }
    body.light-mode .splash-title {
      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #be185d 100%) !important;
      -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important;
    }
    body.light-mode .splash-sub { color: rgba(15,15,46,0.45) !important; }
    body.light-mode .splash-click-btn {
      background: linear-gradient(135deg, #4338ca, #6d28d9) !important;
      box-shadow: 0 8px 32px rgba(67,56,202,0.5) !important;
    }
    body.light-mode #splashAvt { border-color: rgba(67,56,202,0.7) !important; }


    /* ========== MODERN UI/UX IMPROVEMENTS ========== */

    /* Hero section improvements */
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 16px;
      border-radius: 999px;
      background: rgba(16,185,129,0.12);
      border: 1px solid rgba(16,185,129,0.35);
      font-size: 12px;
      font-weight: 700;
      color: #34d399;
      letter-spacing: 0.5px;
      backdrop-filter: blur(8px);
      animation: heroBadgePulse 2.5s ease-in-out infinite;
    }
    .hero-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #10b981;
      box-shadow: 0 0 8px rgba(16,185,129,0.8);
      animation: heroBadgeDot 1.5s ease-in-out infinite;
    }
    @keyframes heroBadgePulse {
      0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
      50% { box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
    }
    @keyframes heroBadgeDot {
      0%,100% { opacity:1; transform: scale(1); }
      50% { opacity:0.5; transform: scale(1.3); }
    }

    /* Improved project card hover */
    .project-card {
      transition: transform 0.38s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.38s ease,
                  border-color 0.38s ease !important;
      will-change: transform;
    }
    .project-card:hover {
      transform: translateY(-8px) scale(1.02) !important;
      box-shadow: 0 24px 60px rgba(99,102,241,0.25), 0 4px 20px rgba(168,85,247,0.15) !important;
      border-color: rgba(99,102,241,0.4) !important;
    }
    .project-image {
      transition: transform 0.5s cubic-bezier(0.34,1.2,0.64,1);
    }
    .project-card:hover .project-image {
      transform: scale(1.06);
    }

    /* Improved button styles */
    .btn-primary {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 60%, #ec4899 100%);
      border: none;
      color: white;
      font-weight: 700;
      letter-spacing: 0.3px;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      position: relative;
      overflow: hidden;
    }
    .btn-primary::before {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }
    .btn-primary:hover::before { left: 160%; }
    .btn-primary:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 12px 36px rgba(99,102,241,0.5);
    }
    .btn-outline {
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.25);
      color: rgba(255,255,255,0.8);
      font-weight: 600;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      backdrop-filter: blur(8px);
    }
    .btn-outline:hover {
      border-color: rgba(99,102,241,0.7);
      color: white;
      background: rgba(99,102,241,0.12);
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 8px 24px rgba(99,102,241,0.25);
    }
    body.light-mode .btn-primary:hover { box-shadow: 0 12px 36px rgba(99,102,241,0.35); }

    /* Section title underline enhancement */
    .section-title {
      position: relative;
      display: inline-block;
    }
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -10px; left: 0;
      width: 50px; height: 3px;
      background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
      background-size: 200% auto;
      border-radius: 2px;
      animation: sectionTitleShimmer 3s linear infinite;
    }
    @keyframes sectionTitleShimmer { to { background-position: 200% center; } }

    .section-title,
    .section-title span,
    #about-title,
    #skills-title,
    #projects-title,
    #boost-title,
    #contact-title {
      background: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      border-radius: 0 !important;
      padding: 0 !important;
    }

    /* Smooth nav transitions */
    .nav-link {
      position: relative;
      padding: 4px 2px;
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.2px;
      transition: color 0.25s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -2px; left: 0;
      width: 0; height: 2px;
      background: linear-gradient(90deg, #6366f1, #a855f7);
      border-radius: 1px;
      transition: width 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .nav-link:hover::after,
    .nav-link.active::after { width: 100%; }

    /* Improved social icons */
    .social-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      display: inline-flex; align-items: center; justify-content: center;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      backdrop-filter: blur(8px);
    }
    .social-icon:hover {
      transform: translateY(-4px) scale(1.12);
      background: rgba(99,102,241,0.18);
      border-color: rgba(99,102,241,0.5);
      box-shadow: 0 8px 24px rgba(99,102,241,0.3);
    }
    .hero-social-row {
      margin-top: 52px !important;
    }
    .hero-social-row .social-icon {
      transform: translateY(8px);
    }
    .hero-social-row .social-icon:hover {
      transform: translateY(4px) scale(1.12);
    }
    body.light-mode .social-icon {
      background: rgba(255,255,255,0.8);
      border-color: rgba(99,102,241,0.2);
      color: #1a1a3e;
      box-shadow: 0 2px 8px rgba(99,102,241,0.1);
    }
    body.light-mode .social-icon:hover {
      background: rgba(255,255,255,0.98);
      box-shadow: 0 8px 24px rgba(99,102,241,0.2);
    }

    /* Gradient text */
    .gradient-text {
      background: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    body.light-mode .gradient-text {
      background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #be185d 100%) !important;
      -webkit-background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
      background-clip: text !important;
    }

    /* ========== RESPONSIVE IMPROVEMENTS ========== */
    @media (max-width: 768px) {
      /* Floating notification widget - move to bottom right on mobile */
      /* floatNotif removed */
      /* Back to top repositioned away from widget */
      #backToTop { right: 16px !important; bottom: 160px !important; }
      /* Hero section padding */
      section#home { padding-top: 80px !important; }
      /* Project grid single col */
      .project-card { margin-bottom: 0; }
    }
    @media (max-width: 480px) {
      h1.text-5xl { font-size: 2.4rem !important; }
    }
    @media (max-width: 640px) {
      /* Make projects grid responsive */
      #projects .grid { grid-template-columns: 1fr !important; }
    }

    /* ========== PERFORMANCE: will-change only on animated elements ========== */
    .animate-float { will-change: transform; }
    #scrollProgress { will-change: width; }

    /* ══════════════════════════════════════════════
       NEW VIP FEATURES - NTXV DZAII v5.0
    ══════════════════════════════════════════════ */

    /* ── ENHANCED SCROLL PROGRESS BAR ── */
    #scrollProgress {
      position: fixed; top: 0; left: 0;
      height: 3px; width: 0%;
      background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #a855f7, #6366f1);
      background-size: 200% 100%;
      z-index: 99999;
      transition: width 0.1s linear;
      box-shadow: 0 0 8px rgba(99,102,241,0.8), 0 0 20px rgba(168,85,247,0.4);
    }
    #scrollProgress.near-end {
      animation: progressGlow 1s ease-in-out infinite alternate;
    }
    @keyframes progressGlow {
      from { box-shadow: 0 0 8px rgba(99,102,241,0.8); }
      to   { box-shadow: 0 0 20px rgba(236,72,153,1), 0 0 40px rgba(168,85,247,0.6); }
    }

    /* ── INFINITE MARQUEE ── */
    #vipMarquee {
      position: relative;
      overflow: hidden;
      padding: 12px 0;
      border-top: 1px solid rgba(99,102,241,0.12);
      border-bottom: 1px solid rgba(99,102,241,0.12);
      background: rgba(99,102,241,0.03);
      z-index: 10;
      cursor: grab;
    }
    /* Mobile: tighter + smoother */
    @media (max-width: 640px){
      #vipMarquee { padding: 10px 0; }
      .marquee-pill { padding: 6px 14px; font-size: 11px; margin: 0 5px; }
    }

/* Tighter + cleaner spacing on mobile */
@media (max-width: 640px){
  section { padding-top: 72px !important; padding-bottom: 72px !important; }
  #home { padding-left: 18px !important; padding-right: 18px !important; }
  #hero-title { font-size: clamp(36px, 10vw, 54px) !important; }
  #hero-subtitle { font-size: 16px !important; }
  #hero-description { font-size: 14px !important; }
}
    #vipMarquee.dragging { cursor: grabbing; }
    /* Gradient blur masks on sides */
    #vipMarquee::before, #vipMarquee::after {
      content: '';
      position: absolute; top: 0; width: 56px; height: 100%;
      z-index: 2; pointer-events: none;
    }
    #vipMarquee::before {
      left: 0;
      background: linear-gradient(90deg, #050510 0%, transparent 100%);
    }
    #vipMarquee::after {
      right: 0;
      background: linear-gradient(270deg, #050510 0%, transparent 100%);
    }
    body.light-mode #vipMarquee::before { background: linear-gradient(90deg, #eef0ff 0%, transparent 100%); }
    body.light-mode #vipMarquee::after  { background: linear-gradient(270deg, #eef0ff 0%, transparent 100%); }

    /* marquee controlled purely by JS physics - no CSS animation */
    .marquee-track {
      display: flex;
      width: max-content;
      will-change: transform;
      cursor: grab;
      user-select: none;
      -webkit-user-select: none;
    }
    .marquee-track.dragging { cursor: grabbing; }
    .marquee-pill {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 8px 16px 8px 14px;
      margin: 0 7px;
      border-radius: 999px;
      background:
        linear-gradient(135deg, rgba(88,92,210,0.11), rgba(141,92,242,0.08));
      border: 1px solid rgba(120,118,255,0.14);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 8px 22px rgba(16,10,40,0.18);
      backdrop-filter: blur(16px);
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 700;
      color: rgba(224,224,255,0.88);
      white-space: nowrap;
      cursor: pointer;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
                  box-shadow 0.3s ease,
                  background 0.3s ease,
                  border-color 0.3s ease;
      letter-spacing: 0.2px;
      position: relative;
      overflow: hidden;
    }
    .marquee-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex: 0 0 auto;
      background: linear-gradient(135deg, #7c6cff, #cf57d8);
      box-shadow: 0 0 0 4px rgba(124,108,255,0.08);
    }
    .marquee-pill::after {
      content: "";
      position: absolute;
      inset: 1px auto 1px 1px;
      width: 42%;
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);
      pointer-events: none;
      opacity: 0.85;
    }
    .marquee-pill:hover {
      transform: translateY(-4px) scale(1.04);
      background:
        linear-gradient(135deg, rgba(103,109,245,0.18), rgba(196,93,231,0.13));
      border-color: rgba(168,85,247,0.34);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 14px 30px rgba(76,60,172,0.24),
        0 0 14px rgba(168,85,247,0.12);
      color: white;
      z-index: 3; position: relative;
    }
    .ui-icon {
      width: 18px;
      height: 18px;
      display: inline-block;
      flex-shrink: 0;
      vertical-align: middle;
    }
    .ui-icon-sm { width: 16px; height: 16px; }
    .ui-icon-md { width: 20px; height: 20px; }
    .ui-icon-lg { width: 22px; height: 22px; }
    .ui-icon-xl { width: 26px; height: 26px; }
    .ui-icon-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .marquee-pill-icon { display: none !important; }
    body.light-mode .marquee-pill {
      background: rgba(99,102,241,0.08); color: #2a2a50;
      border-color: rgba(99,102,241,0.2);
    }

    /* ── AI CHATBOT ── */
    /* ── ENHANCED MUSIC PLAYER ── */
    /* ── VIP MUSIC PLAYER: collapsed icon → hover expands ── */
    #vipMusicPlayer {
      position: fixed; bottom: 24px; left: 20px; z-index: 9996;
      display: flex; flex-direction: column; gap: 0;
      /* start hidden until boot done */
      opacity: 0; pointer-events: none;
      transform: translate3d(0,0,0) scale(1);
      transform-origin: bottom left;
      will-change: transform, opacity;
      transition: transform 0.34s cubic-bezier(0.22,1,0.36,1), opacity 0.34s ease;
    }
    #vipMusicPlayer.vmp-visible {
      opacity: 1; pointer-events: all;
    }
    #vipMusicPlayer.vmp-compact {
      transform: translate3d(0,0,0) scale(0.5);
      opacity: 0.72;
    }
    #vipMusicPlayer.vmp-awake {
      transform: translate3d(0,0,0) scale(0.7);
      opacity: 0.92;
    }
    /* The collapsed icon bubble */
    #vmpIconBubble {
      width: 52px; height: 52px; border-radius: 50%;
      background: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.16), transparent 38%), linear-gradient(145deg, rgba(18,16,42,0.96), rgba(8,8,24,0.98));
      backdrop-filter: blur(20px) saturate(180%);
      border: 1px solid rgba(132,116,255,0.3);
      box-shadow: 0 10px 26px rgba(50, 30, 120, 0.32);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; cursor: pointer;
      will-change: transform, opacity;
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1),
                  opacity 0.28s ease;
      position: relative;
      overflow: hidden;
    }
    #vmpIconBubble:hover {
      transform: translate3d(0,0,0) scale(1.08);
    }
    #vmpIconBubble::after {
      content: '';
      position: absolute;
      inset: -12px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(153,128,255,0.28) 0%, rgba(153,128,255,0.12) 32%, transparent 66%);
      opacity: 0.34;
      transform: scale(0.9);
      transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.28s ease;
      pointer-events: none;
    }
    #vipMusicPlayer.is-playing #vmpIconBubble::after {
      opacity: 0.46;
    }
    #vmpIconBubble:hover::after {
      opacity: 0.72;
      transform: scale(1.08);
    }
    /* Playing pulse ring */
    #vmpIconBubble.playing::before {
      content: '';
      position: absolute; inset: -5px; border-radius: 50%;
      border: 1px solid rgba(128,116,255,0.52);
      animation: vmpPulseRing 2.2s ease-out infinite;
    }
    @keyframes vmpPulseRing {
      0%   { transform: scale(1); opacity: 0.7; }
      100% { transform: scale(1.4); opacity: 0; }
    }
    #vmpIconBubble.vmp-burst::before {
      animation: none;
      opacity: 0.82;
      transform: scale(1);
    }
    #vmpIconBubble.vmp-burst::after {
      opacity: 0.9;
      transform: scale(1.28);
    }
    /* The expanded panel */
    #vmpPanel {
      position: absolute; bottom: 56px; left: 0;
      background: rgba(8,8,24,0.97);
      backdrop-filter: blur(24px) saturate(200%);
      border: 1px solid rgba(99,102,241,0.22);
      border-radius: 18px;
      padding: 14px 15px;
      width: 248px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 20px rgba(99,102,241,0.1);
      display: flex; flex-direction: column; gap: 11px;
      /* Collapse state */
      transform: translateY(8px) scale(0.94);
      opacity: 0; pointer-events: none;
      transform-origin: bottom left;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
                  opacity 0.3s ease;
      will-change: transform, opacity;
    }
    #vmpPanel.vmp-expanded {
      transform: translateY(0) scale(1);
      opacity: 1; pointer-events: all;
    }
    .vmp-top { display: flex; align-items: center; gap: 12px; }
    .vmp-art {
      width: 44px; height: 44px; border-radius: 12px;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; flex-shrink: 0;
      box-shadow: 0 4px 14px rgba(99,102,241,0.4);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .vmp-art.spinning {
      animation: vmpSpin 4s linear infinite;
    }
    @keyframes vmpSpin { to { transform: rotate(360deg); } }
    .vmp-info { flex: 1; min-width: 0; }
    .vmp-title {
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 800; color: white;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .vmp-artist { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
    .vmp-controls { display: flex; align-items: center; gap: 8px; }
    .vmp-btn {
      width: 28px; height: 28px; border-radius: 50%;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.8); font-size: 11px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.25s ease;
    }
    .vmp-btn:hover { background: rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.5); color: white; }
    .vmp-play-btn {
      width: 34px; height: 34px;
      background: linear-gradient(135deg, #6366f1, #a855f7); border: none;
      box-shadow: 0 4px 14px rgba(99,102,241,0.4);
    }
    .vmp-volume-row {
      display: flex; align-items: center; gap: 10px;
    }
    .vmp-vol-icon { font-size: 13px; color: rgba(255,255,255,0.4); }
    .vmp-vol-slider {
      flex: 1; -webkit-appearance: none; height: 3px;
      background: rgba(255,255,255,0.12); border-radius: 3px; outline: none; cursor: pointer;
    }
    .vmp-vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      cursor: pointer; box-shadow: 0 2px 8px rgba(99,102,241,0.5);
    }
    .vmp-music-checkbox-wrap {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      background: rgba(99,102,241,0.07);
      border: 1px solid rgba(99,102,241,0.15);
      border-radius: 14px; cursor: pointer;
      transition: all 0.3s ease;
    }
    .vmp-music-checkbox-wrap:hover {
      background: rgba(99,102,241,0.14);
      border-color: rgba(99,102,241,0.35);
    }
    /* Custom checkbox toggle */
    .vmp-toggle-track {
      width: 44px; height: 24px; border-radius: 24px;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.15);
      position: relative; cursor: pointer;
      transition: all 0.3s ease; flex-shrink: 0;
    }
    .vmp-toggle-track.on {
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border-color: transparent;
      box-shadow: 0 0 14px rgba(99,102,241,0.5);
    }
    .vmp-toggle-thumb {
      position: absolute; top: 3px; left: 3px;
      width: 16px; height: 16px; border-radius: 50%;
      background: white;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }
    .vmp-toggle-track.on .vmp-toggle-thumb { transform: translateX(20px); }
    .vmp-waves {
      display: flex; align-items: flex-end; gap: 2px; height: 16px;
    }
    .vmp-wave-bar {
      width: 3px; border-radius: 3px;
      background: linear-gradient(to top, #6366f1, #a855f7);
      animation: vmpWave 0.8s ease-in-out infinite;
      transform-origin: bottom;
    }
    .vmp-wave-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
    .vmp-wave-bar:nth-child(2) { height: 16px; animation-delay: 0.1s; }
    .vmp-wave-bar:nth-child(3) { height: 12px; animation-delay: 0.2s; }
    .vmp-wave-bar:nth-child(4) { height: 16px; animation-delay: 0.15s; }
    .vmp-wave-bar:nth-child(5) { height: 8px; animation-delay: 0.05s; }
    .vmp-waves.paused .vmp-wave-bar { animation-play-state: paused; }
    @keyframes vmpWave {
      0%,100% { transform: scaleY(0.4); }
      50% { transform: scaleY(1); }
    }

    /* ── SCROLL REVEAL ── */
    .vip-reveal {
      opacity: 0; transform: translateY(35px);
      transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.34,1.56,0.64,1);
    }
    .vip-reveal.vip-reveal-left  { transform: translateX(-35px); }
    .vip-reveal.vip-reveal-right { transform: translateX(35px); }
    .vip-reveal.vip-reveal-scale { transform: scale(0.9); }
    .vip-reveal.vip-visible {
      opacity: 1 !important; transform: none !important;
    }

    /* ── CUSTOM CURSOR (ntxv style) ── */
    #vipCursorOuter {
      position: fixed; pointer-events: none; z-index: 10000022;
      width: 24px; height: 24px;
      border: 1.5px solid rgba(99,102,241,0.55);
      border-radius: 50%;
      transform: translate(-50%,-50%);
      transition: all 0.12s ease;
      mix-blend-mode: difference;
    }
    #vipCursorOuter.hovered {
      width: 39px; height: 39px;
      border-color: rgba(168,85,247,0.8);
      background: rgba(99,102,241,0.08);
    }
    @media (hover: none) { #vipCursorOuter { display: none; } }

    /* ── CLICK RIPPLE ── */
    /* ── HERO ORB ANIMATIONS (from ntxv) ── */
    .vip-orb {
      position: absolute; border-radius: 50%;
      filter: blur(90px); pointer-events: none;
      animation: vipOrbFloat 9s ease-in-out infinite;
    }
    @keyframes vipOrbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      33% { transform: translate(28px,-18px) scale(1.06); }
      66% { transform: translate(-18px,28px) scale(0.95); }
    }

    /* ── GRADIENT BORDER CARD ── */
    .grad-border-card {
      position: relative;
      border-radius: 20px; overflow: hidden;
    }
    .grad-border-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899, #a855f7, #6366f1);
      background-size: 300% 300%;
      border-radius: 20px;
      animation: gradBorderAnim 4s linear infinite;
      padding: 1.5px;
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
    }
    @keyframes gradBorderAnim {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    /* ── GLASS EFFECT UPGRADE ── */
    .vip-glass {
      background: rgba(255,255,255,0.04);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 18px;
    }

    /* ── SMOOTH HOVER LIFT ── */
    .vip-hover-lift {
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
    }
    .vip-hover-lift:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 50px rgba(99,102,241,0.2);
    }


    /* ── VIP HERO BACKGROUND ── */
    .hero-bg-vip {
      position: absolute; inset: 0;
      overflow: hidden; pointer-events: none; z-index: 0;
    }
    .hero-grid-vip {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 60px 60px;
      -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 0%, transparent 100%);
    }
    body.light-mode .hero-grid-vip {
      background-image:
        linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
    }
    #home > .hero-bg-vip { z-index: 0; }
    #home > .max-w-4xl   { position: relative; z-index: 1; }


    /* ── VMP collapsed bubble wave positioning ── */
    #vmpIconBubble .vmp-waves {
      display: none; /* hidden in icon mode, only shown in panel */
    }
    /* Keep waves visible inside the panel */
    #vmpPanel .vmp-waves {
      display: flex !important;
    }
    /* vmpPanel theme overrides */
    body.light-mode #vmpPanel {
      background: rgba(248,248,255,0.98) !important;
      border-color: rgba(99,102,241,0.22) !important;
      box-shadow: 0 16px 48px rgba(99,102,241,0.12) !important;
    }
    body.light-mode #vmpIconBubble {
      background: rgba(248,248,255,0.96) !important;
      border-color: rgba(99,102,241,0.28) !important;
    }
    body.light-mode .vmp-title  { color: #0f0f2e !important; }
    body.light-mode .vmp-artist { color: rgba(15,15,46,0.45) !important; }

    /* (handled by element removal) */

    
body.light-mode #loadingScreen { background: #06050f !important; }
    body.light-mode .ls-logo       { background: linear-gradient(135deg, #4338ca, #7c3aed, #be185d) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
    body.light-mode .ls-sub        { color: rgba(15,15,46,0.4) !important; }
    body.light-mode .ls-percent    { color: rgba(15,15,46,0.4) !important; }

    /* ── NEON GLOW TEXT ── */
    .vip-neon {
      color: #a78bfa;
      text-shadow: 0 0 10px rgba(167,139,250,0.6), 0 0 30px rgba(99,102,241,0.3);
    }


    /* ========== IMPROVED FORM INPUTS ========== */
    .form-input {
      background: rgba(255,255,255,0.05);
      border: 1.5px solid rgba(255,255,255,0.12);
      border-radius: 12px;
      color: white;
      padding: 12px 16px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      width: 100%;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      outline: none;
      backdrop-filter: blur(8px);
    }
    .form-input:focus {
      border-color: rgba(99,102,241,0.6);
      background: rgba(99,102,241,0.06);
      box-shadow: 0 0 0 3px rgba(99,102,241,0.15), 0 4px 16px rgba(99,102,241,0.1);
    }
    .form-input::placeholder { color: rgba(255,255,255,0.3); }

    /* ========== IMPROVED MOBILE MENU ========== */
    #mobileMenu {
      transition: opacity 0.3s ease, transform 0.3s ease !important;
    }
    #mobileMenu.visible {
      opacity: 1 !important;
      transform: none !important;
    }
    @media (max-width: 768px) {
      #mobileMenu a, #mobileMenu button {
        font-size: 1.3rem !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        width: 100%;
        text-align: center;
        display: block;
      }
    }

    /* ========== NAV DROPDOWN HOVER STYLE ========== */
    .nav-dropdown-item:hover {
      background: rgba(99,102,241,0.12) !important;
      color: white !important;
    }

    /* ========== SMOOTH SECTION SPACING ========== */
    section { scroll-margin-top: 80px; }

    /* ========== BETTER SCROLLBAR ========== */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #6366f1, #a855f7);
      border-radius: 3px;
    }
    body.light-mode ::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #4338ca, #6d28d9) !important;
    }


    .contact-social-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      text-decoration: none;
      color: rgba(255,255,255,0.7);
      font-size: 13px;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .contact-social-link:hover {
      background: rgba(99,102,241,0.12);
      border-color: rgba(99,102,241,0.35);
      color: white;
      transform: translateX(5px);
    }
    .contact-social-icon {
      width: 28px; height: 28px; border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .contact-social-name {
      font-weight: 600;
      font-size: 13px;
      flex-shrink: 0;
      min-width: 70px;
    }
    .contact-social-handle {
      font-size: 12px;
      color: rgba(255,255,255,0.4);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .contact-social-arrow {
      opacity: 0.3;
      flex-shrink: 0;
      transition: opacity 0.3s, transform 0.3s;
    }
    .contact-social-link:hover .contact-social-arrow {
      opacity: 0.8;
      transform: translateX(3px);
    }

    /* ===== NEW CONTACT CARDS ===== */
    .contact-card-new {
      display: flex; align-items: center; gap: 14px;
      padding: 16px 18px; border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      text-decoration: none; color: rgba(255,255,255,0.85);
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      position: relative; overflow: hidden;
    }
    .contact-card-new::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.3s;
      pointer-events: none;
    }
    .contact-card-new:hover {
      background: rgba(99,102,241,0.1);
      border-color: rgba(99,102,241,0.3);
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 10px 30px rgba(99,102,241,0.2);
      color: white;
    }
    .contact-card-new:hover::before { opacity: 1; }
    .contact-card-icon {
      width: 46px; height: 46px; border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    .contact-card-body { flex: 1; }
    .contact-card-name { font-weight: 700; font-size: 14px; color: white; }
    .contact-card-val { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 1px; }
    .contact-card-note { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }
    .contact-card-arrow {
      opacity: 0.3; flex-shrink: 0;
      transition: opacity 0.3s, transform 0.3s;
    }
    .contact-card-new:hover .contact-card-arrow { opacity: 0.9; transform: translateX(4px); }

    /* Light mode contact cards */
    body.light-mode .contact-card-new {
      background: rgba(255,255,255,0.85) !important;
      border-color: rgba(99,102,241,0.18) !important;
      color: #1a1a3e !important;
      box-shadow: 0 2px 12px rgba(99,102,241,0.08) !important;
    }
    body.light-mode .contact-card-new:hover {
      background: rgba(255,255,255,0.98) !important;
      border-color: rgba(99,102,241,0.4) !important;
      box-shadow: 0 10px 30px rgba(99,102,241,0.15) !important;
    }
    body.light-mode .contact-card-name { color: #0f0f2e !important; }
    body.light-mode .contact-card-val { color: #555580 !important; }
    body.light-mode .contact-card-note { color: #8888aa !important; }

    
    body.light-mode .cmbBox {
      background: rgba(245,245,255,0.98) !important;
      border-color: rgba(99,102,241,0.25) !important;
      color: #0f0f2e !important;
    }
    body.light-mode .cmbBox .cmbSub { color: rgba(30,30,80,0.5) !important; }
    body.light-mode .cmb-btn { color: #1a1a3e !important; background: rgba(255,255,255,0.7) !important; border-color: rgba(99,102,241,0.2) !important; }
    body.light-mode .cmb-btn:hover { background: rgba(255,255,255,0.95) !important; }

    /* ========== SETTINGS PANEL ========== */
    /* settingsBtn - circular, above fps/like layers */
    #settingsBtn {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,0.18);
      color: white; font-size: 16px;
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    #settingsBtn:hover {
      background: rgba(99,102,241,0.25);
      box-shadow: 0 0 16px rgba(99,102,241,0.65);
      transform: rotate(60deg) scale(1.12);
    }
    #settingsPanel {
      position: fixed;
      top: 68px;
      right: 16px;
      z-index: 999999;
      width: 250px;
      background: rgba(8,8,20,0.97);
      backdrop-filter: blur(28px) saturate(200%);
      -webkit-backdrop-filter: blur(28px) saturate(200%);
      border: 1px solid rgba(99,102,241,0.4);
      border-radius: 18px;
      padding: 18px;
      box-shadow: 0 12px 50px rgba(0,0,0,0.6), 0 0 24px rgba(99,102,241,0.2);
      opacity: 0;
      pointer-events: none;
      transform: translateY(-10px) scale(0.94);
      transition: all 0.28s cubic-bezier(0.34,1.56,0.64,1);
    }
    #settingsPanel.sp-visible {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0) scale(1);
    }
    .settings-title {
      font-family: 'Inter', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .settings-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .settings-row:last-child { border-bottom: none; }
    .settings-label {
      font-size: 13px;
      color: rgba(255,255,255,0.75);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    /* Toggle switch */
    .toggle-switch {
      position: relative;
      width: 40px; height: 22px;
      cursor: pointer;
    }
    .toggle-switch input { display: none; }
    .toggle-track {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      transition: background 0.3s;
    }
    .toggle-thumb {
      position: absolute;
      top: 3px; left: 3px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: rgba(255,255,255,0.4);
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .toggle-switch input:checked + .toggle-track { background: linear-gradient(135deg, #6366f1, #a855f7); }
    .toggle-switch input:checked + .toggle-track .toggle-thumb {
      left: 21px;
      background: white;
    }

    /* ========== body.no-animation ========== */
    body.no-animation *, body.no-animation *::before, body.no-animation *::after {
      animation: none !important;
      transition: none !important;
    }
    /* ========== body.no-particles canvas ========== */
    body.no-particles #spFallingCanvas {
      display: none !important;
    }
    body.no-particles .sp-bg-orb {
      display: none !important;
    }

  
    /* ========== SEARCH BUTTON (nav) ========== */
    #searchBtn {
      display: flex; align-items: center; justify-content: center;
      width: 38px; height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(255,255,255,0.75);
      cursor: pointer;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    #searchBtn:hover {
      background: rgba(99,102,241,0.25);
      color: white;
      box-shadow: 0 0 16px rgba(99,102,241,0.65);
      transform: scale(1.12);
    }

    /* ========== SEARCH OVERLAY ========== */
    #searchOverlay {
      position: fixed;
      inset: 0;
      z-index: 9999999;
      background: rgba(0,0,0,0.75);
      backdrop-filter: blur(16px);
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 120px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    #searchOverlay.search-open {
      opacity: 1;
      pointer-events: all;
    }
    .search-box {
      width: 90%;
      max-width: 580px;
      position: relative;
      animation: scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    #searchInput {
      width: 100%;
      padding: 18px 24px 18px 56px;
      border-radius: 999px;
      background: rgba(15,15,30,0.95);
      border: 1px solid rgba(99,102,241,0.4);
      color: white;
      font-size: 16px;
      font-family: 'Inter', sans-serif;
      outline: none;
      box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 30px rgba(99,102,241,0.2);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    #searchInput:focus {
      border-color: rgba(99,102,241,0.7);
      box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 40px rgba(99,102,241,0.35);
    }
    #searchInput::placeholder { color: rgba(255,255,255,0.3); }
    .search-icon {
      position: absolute;
      left: 20px; top: 50%;
      transform: translateY(-50%);
      color: rgba(99,102,241,0.7);
      pointer-events: none;
    }
    .search-close-btn {
      position: absolute;
      right: 16px; top: 50%;
      transform: translateY(-50%);
      background: none; border: none;
      color: rgba(255,255,255,0.35);
      font-size: 20px; cursor: pointer;
      transition: color 0.2s;
      padding: 4px;
    }
    .search-close-btn:hover { color: white; }
    #searchResults {
      width: 90%;
      max-width: 580px;
      margin-top: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: 50vh;
      overflow-y: auto;
    }
    .search-result-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 20px;
      background: rgba(15,15,30,0.9);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 14px;
      text-decoration: none;
      color: rgba(255,255,255,0.8);
      font-size: 14px;
      cursor: pointer;
      transition: all 0.25s ease;
    }
    .search-result-item:hover {
      background: rgba(99,102,241,0.15);
      border-color: rgba(99,102,241,0.4);
      color: white;
      transform: translateX(4px);
    }
    .search-result-icon { font-size: 18px; flex-shrink: 0; }
    .search-result-text { flex: 1; }
    .search-result-title { font-weight: 600; font-size: 14px; }
    .search-result-desc { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
    .search-hint {
      margin-top: 20px;
      font-size: 12px;
      color: rgba(255,255,255,0.25);
      letter-spacing: 1px;
    }
    body.light-mode #searchInput {
      background: rgba(240,240,255,0.95);
      color: #1a1a2e;
      border-color: rgba(99,102,241,0.3);
    }
    body.light-mode .search-result-item {
      background: rgba(240,240,255,0.9);
      color: #1a1a2e;
    }

    /* ========== AURORA BACKGROUND ========== */
    #auroraCanvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.35;
      mix-blend-mode: screen;
    }
    body.light-mode #auroraCanvas { opacity: 0.12; mix-blend-mode: multiply; }

    /* ========== CURSOR TRAIL ========== */
    .cursor-trail-dot {
      position: fixed;
      width: 6px; height: 6px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9997;
      transform: translate(-50%,-50%);
      transition: opacity 0.5s ease;
    }

    /* ========== MORPHING BLOB ========== */
    .morphing-blob {
      position: fixed;
      pointer-events: none;
      z-index: 0;
      opacity: 0.06;
      animation: blobMorph 12s ease-in-out infinite alternate;
      filter: blur(60px);
    }
    .morphing-blob-1 {
      width: 500px; height: 500px;
      background: radial-gradient(circle, #6366f1 0%, #a855f7 50%, transparent 70%);
      top: -100px; right: -100px;
      animation-duration: 11s;
    }
    .morphing-blob-2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, #ec4899 0%, #f59e0b 50%, transparent 70%);
      bottom: 20%; left: -80px;
      animation-duration: 14s;
      animation-delay: -5s;
    }
    .morphing-blob-3 {
      width: 350px; height: 350px;
      background: radial-gradient(circle, #06b6d4 0%, #6366f1 50%, transparent 70%);
      top: 40%; left: 30%;
      animation-duration: 9s;
      animation-delay: -2s;
    }
    @keyframes blobMorph {
      0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: scale(1) rotate(0deg); }
      33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: scale(1.1) rotate(10deg); }
      66%  { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; transform: scale(0.95) rotate(-5deg); }
      100% { border-radius: 60% 40% 70% 30% / 50% 40% 60% 50%; transform: scale(1.05) rotate(8deg); }
    }

    /* ========== MUSIC VISUALIZER ========== */
    #musicVisualizer {
      display: flex;
      align-items: flex-end;
      gap: 2px;
      height: 20px;
      opacity: 0;
      transition: opacity 0.4s ease;
    }
    #musicVisualizer.playing { opacity: 1; }
    .viz-bar {
      width: 3px;
      border-radius: 2px 2px 0 0;
      background: linear-gradient(to top, #6366f1, #a855f7, #ec4899);
      animation: vizBounce var(--d, 0.5s) ease-in-out infinite alternate;
    }
    @keyframes vizBounce {
      from { height: 4px; }
      to { height: var(--h, 16px); }
    }


    /* ========== 3D TILT CARDS ========== */
    .tilt-card {
      transform-style: preserve-3d;
      transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
      transition: transform 0.1s ease;
    }

    /* ========== NEON GLOW TEXT ANIMATION ========== */
    @keyframes neonPulse {
      0%, 100% { text-shadow: 0 0 5px rgba(99,102,241,0.5), 0 0 10px rgba(99,102,241,0.3), 0 0 20px rgba(99,102,241,0.2); }
      50% { text-shadow: 0 0 10px rgba(168,85,247,0.8), 0 0 20px rgba(168,85,247,0.5), 0 0 40px rgba(168,85,247,0.3); }
    }

    /* ========== CONFETTI ========== */
    .confetti-piece {
      position: fixed;
      width: 8px; height: 8px;
      pointer-events: none;
      z-index: 999998;
      animation: confettiFall var(--dur, 2s) var(--delay, 0s) ease-in forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(-10px) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }

    /* ========== TYPEWRITER EFFECT ENHANCED ========== */
    .typewriter-loop {
      display: inline-block;
      border-right: 2px solid #a855f7;
      animation: blinkCursor 0.75s step-end infinite;
      min-width: 2px;
    }
    @keyframes blinkCursor {
      0%, 100% { border-color: #a855f7; }
      50% { border-color: transparent; }
    }

    /* ========== GLITCH TEXT EFFECT ========== */
    .glitch-text {
      position: relative;
      display: inline-block;
    }
    .glitch-text:hover::before,
    .glitch-text:hover::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
    }
    .glitch-text:hover::before {
      color: #ec4899;
      animation: glitch1 0.3s infinite;
      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    }
    .glitch-text:hover::after {
      color: #06b6d4;
      animation: glitch2 0.3s infinite 0.1s;
      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }
    @keyframes glitch1 {
      0%, 100% { transform: translate(0); }
      33% { transform: translate(-3px, 1px); }
      66% { transform: translate(3px, -1px); }
    }
    @keyframes glitch2 {
      0%, 100% { transform: translate(0); }
      33% { transform: translate(3px, -1px); }
      66% { transform: translate(-3px, 1px); }
    }

    /* ========== ANIMATED GRADIENT BORDER ========== */
    .gradient-border-animated {
      position: relative;
      border-radius: 16px;
      background: rgba(255,255,255,0.05);
    }
    .gradient-border-animated::before {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 18px;
      background: linear-gradient(45deg, #6366f1, #a855f7, #ec4899, #f59e0b, #6366f1);
      background-size: 300%;
      animation: borderRotate 4s linear infinite;
      z-index: -1;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .gradient-border-animated:hover::before { opacity: 1; }
    @keyframes borderRotate { to { background-position: 300% 0; } }

    /* ========== LIQUID FILL BUTTON (NEW) ========== */
    .liquid-fill-btn {
      position: relative;
      overflow: hidden;
      transition: color 0.4s ease;
    }
    .liquid-fill-btn::before {
      content: '';
      position: absolute;
      bottom: -100%; left: -10%;
      width: 120%; height: 200%;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      border-radius: 50% 50% 0 0;
      transition: bottom 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
      z-index: 0;
    }
    .liquid-fill-btn:hover::before { bottom: -20%; }
    .liquid-fill-btn span { position: relative; z-index: 1; }

    /* ========== SCROLL REVEAL ENHANCED ========== */
    .scroll-reveal-left {
      opacity: 0;
      transform: translateX(-40px);
      transition: all 0.8s cubic-bezier(0.34,1.2,0.64,1);
    }
    .scroll-reveal-right {
      opacity: 0;
      transform: translateX(40px);
      transition: all 0.8s cubic-bezier(0.34,1.2,0.64,1);
    }
    .scroll-reveal-scale {
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.8s cubic-bezier(0.34,1.56,0.64,1);
    }
    .scroll-reveal-left.revealed,
    .scroll-reveal-right.revealed,
    .scroll-reveal-scale.revealed {
      opacity: 1;
      transform: none;
    }

    /* ========== SPOTLIGHT EFFECT ========== */
    .spotlight-card {
      position: relative;
      overflow: hidden;
    }
    .spotlight-card::before {
      content: '';
      position: absolute;
      width: 200px; height: 200px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
      pointer-events: none;
      transform: translate(var(--sx, -200px), var(--sy, -200px)) translate(-50%, -50%);
      transition: transform 0.15s ease;
      z-index: 0;
    }

    /* ========== NEW TYPING INDICATOR ========== */
    #typingIndicator {
      position: fixed;
      bottom: 70px;
      right: 24px;
      z-index: 9997;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      background: rgba(10,10,20,0.8);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(99,102,241,0.3);
      border-radius: 999px;
      font-size: 11px;
      color: rgba(255,255,255,0.5);
      font-family: 'Inter', sans-serif;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #typingIndicator.show { opacity: 1; }
    .typing-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: #a855f7;
      animation: typingAnim 1.2s ease-in-out infinite;
    }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typingAnim {
      0%, 100% { transform: translateY(0); opacity: 0.4; }
      50% { transform: translateY(-4px); opacity: 1; }
    }

    /* ========== HOLOGRAPHIC CARD SHIMMER ========== */
    .holo-card {
      position: relative;
      overflow: hidden;
    }
    .holo-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        125deg,
        transparent 0%,
        rgba(255,255,255,0.04) 30%,
        rgba(99,102,241,0.08) 50%,
        rgba(168,85,247,0.06) 70%,
        transparent 100%
      );
      background-size: 250% 250%;
      animation: holoShimmer 6s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    @keyframes holoShimmer {
      0% { background-position: 0% 0%; }
      50% { background-position: 100% 100%; }
      100% { background-position: 0% 0%; }
    }

    /* ========== FLOATING ACTION MENU ========== */
    #floatActionMenu {
      position: fixed;
      bottom: 150px;
      left: 20px;
      z-index: 9996;
      display: flex;
      flex-direction: column;
      gap: 8px;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      pointer-events: none;
    }
    #floatActionMenu.show { opacity: 1; transform: translateY(0); pointer-events: all; }
    .fam-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(10,10,20,0.85);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.15);
      color: white;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 4px 15px rgba(0,0,0,0.4);
      position: relative;
    }
    .fam-btn:hover { transform: scale(1.15); background: rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.6); }
    .fam-btn[data-tip]:hover::after {
      content: attr(data-tip);
      position: absolute;
      left: 48px; top: 50%;
      transform: translateY(-50%);
      background: rgba(10,10,20,0.95);
      color: white; font-size: 11px; font-weight: 700;
      padding: 5px 10px; border-radius: 8px; white-space: nowrap;
      border: 1px solid rgba(99,102,241,0.35); pointer-events: none;
      font-family: 'Inter', sans-serif;
    }
    @media(max-width: 768px) { #floatActionMenu { display: none; } }

    /* ========== PROGRESS RINGS ========== */
    .skill-ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
    .skill-ring-svg { transform: rotate(-90deg); }
    .skill-ring-circle {
      fill: none;
      stroke-width: 4;
      stroke-linecap: round;
      transition: stroke-dashoffset 1.5s cubic-bezier(0.34,1.2,0.64,1);
    }
    .skill-ring-circle.bg { stroke: rgba(255,255,255,0.08); }
    .skill-ring-circle.fg { stroke: url(#ringGradient); }
    .skill-ring-label {
      position: absolute;
      font-family: 'Inter', sans-serif;
      font-size: 12px; font-weight: 800;
      color: white;
    }

    /* ========== THEME STARS (dark mode) ========== */
    #starsCanvas {
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.4;
      transition: opacity 0.5s ease;
    }
    body.light-mode #starsCanvas { opacity: 0; }

    /* ========== ENHANCED HOVER BADGES ========== */
    .hover-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      border-radius: 999px;
      background: rgba(99,102,241,0.12);
      border: 1px solid rgba(99,102,241,0.25);
      font-size: 12px;
      font-weight: 600;
      color: #a78bfa;
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
      cursor: default;
    }
    .hover-badge:hover {
      background: rgba(99,102,241,0.25);
      border-color: rgba(99,102,241,0.5);
      transform: translateY(-2px) scale(1.05);
      box-shadow: 0 4px 12px rgba(99,102,241,0.3);
    }

    /* notification bell removed */

    /* ========== WEATHER MINI WIDGET ========== */
    #weatherWidget {
      position: fixed;
      top: 120px; right: 16px;
      z-index: 9997;
      padding: 8px 14px;
      border-radius: 14px;
      background: rgba(10,10,20,0.75);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255,255,255,0.12);
      font-size: 12px;
      font-family: 'Inter', sans-serif;
      color: rgba(255,255,255,0.7);
      display: flex; align-items: center; gap: 6px;
      cursor: default;
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0; pointer-events: none;
    }
    #weatherWidget.show { opacity: 1; pointer-events: all; }
    #weatherWidget:hover { background: rgba(99,102,241,0.2); border-color: rgba(99,102,241,0.4); transform: translateY(-3px) scale(1.04); }
    .weather-temp { font-weight: 800; color: #fbbf24; }
    body.light-mode #weatherWidget { background: rgba(255,255,255,0.85); color: #333; }

    /* clock widget removed */

    /* ========== WEATHER WIDGET (top-right, below clock) ========== */
    #weatherWidget {
      position: fixed;
      top: 112px;
      right: 16px;
      z-index: 99998;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px 4px 7px;
      border-radius: 999px;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 2px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
      font-family: 'Inter', sans-serif;
      font-size: 11px; font-weight: 700;
      color: rgba(255,255,255,0.65);
      cursor: default;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
      transform: translateY(-8px) scale(0.9);
    }
    #weatherWidget.show { opacity: 1; transform: translateY(0) scale(1); }
    #weatherWidget:hover {
      background: rgba(255,255,255,0.13);
      border-color: rgba(251,191,36,0.45);
      box-shadow: 0 0 14px rgba(251,191,36,0.25), 0 4px 16px rgba(0,0,0,0.35);
      transform: translateY(2px) scale(1.04);
    }
    #weatherCity { color: rgba(255,255,255,0.4); font-size: 9px; letter-spacing: 0.5px; }
    .weather-temp { color: #fbbf24; font-weight: 900; }
    body.light-mode #weatherWidget { background: rgba(255,255,255,0.6); border-color: rgba(251,191,36,0.3); color: #555; }

    /* ========== MUSIC MOOD WIDGET (top-left) ========== */
    #moodWidget {
      position: fixed;
      top: 70px;
      left: 16px;
      z-index: 99998;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 12px 5px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.15);
      box-shadow: 0 2px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
      font-family: 'Inter', sans-serif;
      font-size: 10px; font-weight: 700;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.5px;
      cursor: default;
      overflow: hidden;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
      transform: translateY(-8px) scale(0.9);
    }
    #moodWidget.show { opacity: 1; transform: translateY(0) scale(1); }
    #moodWidget:hover {
      background: rgba(168,85,247,0.15);
      border-color: rgba(168,85,247,0.45);
      box-shadow: 0 0 14px rgba(168,85,247,0.3), 0 4px 16px rgba(0,0,0,0.35);
      transform: translateY(2px) scale(1.04);
    }
    .mood-wave-wrap { position: relative; z-index: 1; }
    #moodCanvas { display: block; }
    #moodLabel { position: relative; z-index: 1; }
    body.light-mode #moodWidget { background: rgba(255,255,255,0.6); border-color: rgba(168,85,247,0.25); color: rgba(0,0,0,0.45); }

    /* ========== MINI STATS PILL (top-left, below mood) ========== */
    #miniStatsPill {
      position: fixed;
      top: 112px;
      left: 16px;
      z-index: 99997;
      display: flex;
      align-items: center;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 2px 14px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
      font-family: 'Inter', sans-serif;
      cursor: default;
      transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
      transform: translateY(-8px) scale(0.9);
    }
    #miniStatsPill.show { opacity: 1; transform: translateY(0) scale(1); }
    #miniStatsPill:hover {
      background: rgba(99,102,241,0.14);
      border-color: rgba(99,102,241,0.35);
      box-shadow: 0 0 14px rgba(99,102,241,0.25), 0 4px 16px rgba(0,0,0,0.35);
      transform: translateY(2px) scale(1.04);
    }
    .msp-item { display: flex; flex-direction: column; align-items: center; padding: 0 8px; }
    .msp-num {
      font-size: 11px; font-weight: 900; line-height: 1;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .msp-lbl { font-size: 7px; font-weight: 600; color: rgba(255,255,255,0.3); letter-spacing: 0.5px; margin-top: 1px; text-transform: uppercase; }
    .msp-sep { width: 1px; height: 22px; background: rgba(255,255,255,0.1); }
    body.light-mode #miniStatsPill { background: rgba(255,255,255,0.6); border-color: rgba(99,102,241,0.2); }
    body.light-mode .msp-lbl { color: rgba(0,0,0,0.35); }

    /* ========== HIDE ON MOBILE (top widgets) ========== */
    @media(max-width:640px) {
      #moodWidget, #miniStatsPill, #weatherWidget { display: none !important; }
    }

    /* ====== ENHANCED NAV BORDER ====== */
    nav {
      border-bottom: 1px solid rgba(99,102,241,0.12) !important;
      box-shadow: 0 1px 30px rgba(99,102,241,0.08) !important;
    }

    /* ====== HERO BADGE ====== */
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 16px; border-radius: 999px;
      background: rgba(99,102,241,0.12);
      border: 1px solid rgba(99,102,241,0.3);
      font-size: 12px; font-weight: 700;
      color: #a78bfa; letter-spacing: 1.5px;
      text-transform: uppercase;
      margin-bottom: 20px;
      animation: fadeInUp 0.7s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
    }
    .hero-badge-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: #6366f1;
      box-shadow: 0 0 8px #6366f1;
      animation: pulseDot 1.5s ease-in-out infinite;
    }
    @keyframes pulseDot {
      0%,100%{ transform:scale(1); opacity:1; }
      50%{ transform:scale(1.6); opacity:0.6; }
    }

    /* ====== TESTIMONIALS SECTION ====== */
    #testimonials { padding: 100px 24px; }
    .testimonial-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: 32px 28px;
      position: relative;
      transition: all 0.4s cubic-bezier(0.34,1.56,0.64,1);
      overflow: hidden;
    }
    .testimonial-card::before {
      content: '\201C';
      position: absolute; top: 16px; right: 24px;
      font-size: 80px; line-height: 1;
      color: rgba(99,102,241,0.15);
      font-family: 'Inter', sans-serif; font-weight: 900;
      pointer-events: none;
    }
    .testimonial-card:hover {
      border-color: rgba(99,102,241,0.35);
      background: rgba(99,102,241,0.06);
      transform: translateY(-6px) scale(1.02);
      box-shadow: 0 20px 50px rgba(99,102,241,0.15);
    }
    .testimonial-stars { color: #fbbf24; letter-spacing: 2px; margin-bottom: 12px; }
    .testimonial-text {
      color: rgba(255,255,255,0.75); font-size: 14px; line-height: 1.8;
      margin-bottom: 20px; font-style: italic;
    }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .testimonial-avatar {
      width: 42px; height: 42px; border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #a855f7);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 800; color: white; flex-shrink: 0;
      border: 2px solid rgba(99,102,241,0.4);
    }
    .testimonial-name { font-weight: 700; font-size: 14px; color: white; }
    .testimonial-role { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 2px; }
    body.light-mode .testimonial-card { background: rgba(255,255,255,0.7) !important; border-color: rgba(99,102,241,0.15) !important; }
    body.light-mode .testimonial-text { color: #2a2a50 !important; }
    body.light-mode .testimonial-name { color: #0f0f2e !important; }

    /* ====== FAQ SECTION ====== */
    #faq { padding: 100px 24px; }
    .faq-item {
      position: relative;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 12px;
      background: linear-gradient(180deg, rgba(25,18,54,0.76), rgba(19,15,39,0.88));
      transition: border-color 0.28s ease, transform 0.28s ease, background 0.28s ease;
      will-change: transform;
    }
    .faq-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(124,58,237,0.08), transparent 34%, rgba(236,72,153,0.05));
      opacity: 0.7;
      pointer-events: none;
    }
    .faq-item:hover {
      border-color: rgba(99,102,241,0.3);
      transform: translate3d(8px, -2px, 0);
    }
    .faq-item.open {
      border-color: rgba(99,102,241,0.4);
      transform: translate3d(0, 0, 0);
      animation-play-state: paused;
      background: linear-gradient(180deg, rgba(30,22,62,0.82), rgba(20,16,42,0.94));
    }
    .faq-question {
      position: relative;
      z-index: 1;
      width: 100%; padding: 20px 24px;
      display: flex; align-items: center; justify-content: space-between;
      background: rgba(255,255,255,0.03);
      cursor: pointer; text-align: left;
      font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.9);
      border: none; transition: background 0.3s ease;
      font-family: 'Inter', sans-serif;
    }
    .faq-question:hover { background: rgba(99,102,241,0.08); }
    .faq-item.open .faq-question { background: rgba(99,102,241,0.1); color: white; }
    .faq-icon {
      width: 24px; height: 24px; border-radius: 50%;
      background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.4);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; font-size: 14px; font-weight: 700;
      color: #a78bfa; transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1);
    }
    .faq-item.open .faq-icon { background: rgba(99,102,241,0.4); transform: rotate(45deg); }
    .faq-answer {
      position: relative;
      z-index: 1;
      max-height: 0; overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.34,1.2,0.64,1), padding 0.3s ease;
      padding: 0 24px;
      font-size: 14px; line-height: 1.8; color: rgba(255,255,255,0.6);
    }
    .faq-item.open .faq-answer { max-height: 300px; padding: 0 24px 20px; }
    body.light-mode .faq-question { color: #0f0f2e !important; background: rgba(255,255,255,0.6) !important; }
    body.light-mode .faq-answer { color: #2a2a50 !important; }
    body.light-mode .faq-item { border-color: rgba(99,102,241,0.15) !important; }

    /* ====== ENHANCED FOOTER ====== */
    footer {
      background: linear-gradient(to top, rgba(99,102,241,0.05) 0%, transparent 100%) !important;
    }
    .footer-brand {
      font-family: 'Inter', sans-serif;
      font-size: 20px; font-weight: 800;
      background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .footer-tagline { font-size: 13px; color: rgba(255,255,255,0.35); margin-top: 4px; }
    .footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
    .footer-link {
      font-size: 13px; color: rgba(255,255,255,0.45);
      text-decoration: none; transition: color 0.25s ease;
    }
    .footer-link:hover { color: #a78bfa; }
    .footer-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(99,102,241,0.2), transparent);
      margin: 28px 0;
    }
    .footer-social { display: flex; gap: 12px; }
    .footer-social-btn {
      width: 36px; height: 36px; border-radius: 10px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; text-decoration: none; color: rgba(255,255,255,0.5);
      transition: all 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .footer-social-btn:hover {
      background: rgba(99,102,241,0.25); border-color: rgba(99,102,241,0.5);
      color: white; transform: translateY(-3px) scale(1.1);
    }
    body.light-mode .footer-tagline { color: #555580 !important; }
    body.light-mode .footer-link { color: #555580 !important; }
    body.light-mode .footer-link:hover { color: #4338ca !important; }
    body.light-mode .footer-social-btn { background: rgba(255,255,255,0.6) !important; border-color: rgba(99,102,241,0.2) !important; color: #1a1a3e !important; }

    /* ====== STAT BAR IMPROVEMENTS ====== */
    .stat-bar-wrap {
      display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    }
    .stat-bar-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.7); min-width: 100px; }
    .stat-bar-track { flex: 1; height: 5px; background: rgba(255,255,255,0.08); border-radius: 99px; overflow: hidden; }
    .stat-bar-fill {
      height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7);
      border-radius: 99px; transform: scaleX(0); transform-origin: left;
      transition: transform 1.4s cubic-bezier(0.34,1.2,0.64,1);
    }
    .stat-bar-fill.animated { transform: scaleX(1); }
    .stat-bar-pct { font-size: 12px; font-weight: 700; color: #a78bfa; min-width: 36px; text-align: right; }

    /* ====== SECTION BADGE ====== */
    .section-badge {
      display: inline-block;
      background: none; border: none; border-radius: 0;
      padding: 0; margin-bottom: 14px;
      font-size: 11px; font-weight: 700; letter-spacing: 3px;
      color: rgba(167,139,250,0.75); text-transform: uppercase;
      position: relative;
    }
    .section-badge::before {
      content: '';
    }
    body.light-mode .section-badge { color: rgba(67,56,202,0.65) !important; }

    /* ====== ENHANCED SECTION TITLE ====== */
    .section-title { font-family: 'Inter', sans-serif !important; }
    
    /* ====== SCROLL INDICATORS ====== */
    .scroll-line {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: 40px;
      display: flex; flex-direction: column; align-items: center; gap: 6px;
    }
    .scroll-line-bar {
      width: 1px; height: 50px;
      background: linear-gradient(to bottom, rgba(99,102,241,0.7), transparent);
      animation: scrollLine 1.8s ease-in-out infinite;
    }
    @keyframes scrollLine {
      0%,100%{ opacity: 0.3; transform: scaleY(0.5) translateY(-10px); }
      50%{ opacity: 1; transform: scaleY(1) translateY(0); }
    }

    /* ====== SERVICE HIGHLIGHT ICONS ====== */
    .service-icon-wrap {
      width: 60px; height: 60px; border-radius: 18px; margin-bottom: 16px;
      display: flex; align-items: center; justify-content: center; font-size: 28px;
      position: relative; overflow: hidden;
    }
    .service-icon-wrap::before {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 60%);
    }

    
    /* ── LIGHT MODE: VIP elements ── */
    body.light-mode #vipMusicPlayer {
      background: rgba(245,245,255,0.98) !important;
      border-color: rgba(99,102,241,0.25) !important;
      box-shadow: 0 12px 40px rgba(99,102,241,0.12) !important;
    }
    body.light-mode .vmp-title { color: #0f0f2e !important; }
    body.light-mode .vmp-artist { color: rgba(15,15,46,0.5) !important; }
    body.light-mode .vmp-btn { color: #2a2a50 !important; background: rgba(99,102,241,0.08) !important; }
    body.light-mode .vmp-music-checkbox-wrap { background: rgba(99,102,241,0.06) !important; border-color: rgba(99,102,241,0.18) !important; }
    body.light-mode #vmpStatus { color: rgba(15,15,46,0.45) !important; }
    body.light-mode .marquee-pill { background: rgba(99,102,241,0.07) !important; color: #2a2a50 !important; border-color: rgba(99,102,241,0.2) !important; }
    body.light-mode #vipMarquee { border-color: rgba(99,102,241,0.12) !important; background: rgba(99,102,241,0.02) !important; }

    /* ── RESPONSIVE ── */
    @media(max-width:600px){
      #vipMusicPlayer { min-width: 200px; left: 12px; bottom: 80px; }
    }

/* ── EASING TOKENS (v3) ── */
:root {
  --v3-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --v3-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --v3-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --v3-dur: 0.45s;
}

/* ========== ANNOUNCEMENT POPUP ========== */
#v3AnnounceModal {
  position: fixed; inset: 0;
  z-index: 9999999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#v3AnnounceModal.v3-show {
  opacity: 1; pointer-events: all;
}
.v3-announce {
  position: relative;
  width: 440px; max-width: calc(100vw - 32px);
  border-radius: 24px;
  background: rgba(8,8,22,0.97);
  border: 1px solid rgba(99,102,241,0.35);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 60px rgba(99,102,241,0.18), inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  transform: scale(0.88) translateY(24px);
  transition: transform 0.5s var(--v3-spring), opacity 0.4s ease;
  opacity: 0;
}
#v3AnnounceModal.v3-show .v3-announce {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.v3-announce::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 200% auto;
  animation: v3GradientShift 2.5s linear infinite;
}
@keyframes v3GradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
body.light-mode .v3-announce { background: rgba(245,245,255,0.98) !important; border-color: rgba(99,102,241,0.3) !important; }
body.light-mode .v3-announce::before { background: linear-gradient(90deg, #4338ca, #6d28d9, #be185d, #4338ca) !important; background-size: 200% auto !important; }
.v3-announce-inner { padding: 32px 28px 28px; }
.v3-announce-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.v3-announce-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px; font-weight: 800; line-height: 1.2;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
body.light-mode .v3-announce-title { background: linear-gradient(135deg, #3730a3, #6d28d9, #be185d) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; }
.v3-announce-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; flex-shrink: 0;
  transition: all 0.25s var(--v3-spring);
}
.v3-announce-close:hover { background: rgba(255,60,60,0.3); border-color: rgba(255,60,60,0.5); color: #fff; transform: rotate(90deg) scale(1.12); }
body.light-mode .v3-announce-close { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.1) !important; color: rgba(15,15,46,0.5) !important; }
.v3-announce-img {
  width: 100%; aspect-ratio: 4/2; border-radius: 16px; overflow: hidden; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; font-size: 56px;
}
body.light-mode .v3-announce-img { background: linear-gradient(135deg, rgba(99,102,241,0.07), rgba(109,40,217,0.05)) !important; border-color: rgba(99,102,241,0.15) !important; }
/* Hover: zoom img + show overlay */
#v3AnnImg:hover img { transform: scale(1.06); }
#v3AnnImg:hover .v3-img-overlay { opacity: 1 !important; }
.v3-announce-items { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.v3-announce-badge {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(236,72,153,0.12));
  border: 1px solid rgba(99,102,241,0.3);
  color: #a5b4fc; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
body.light-mode .v3-announce-badge { background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(109,40,217,0.08)) !important; border-color: rgba(99,102,241,0.25) !important; color: #4338ca !important; }
.v3-announce-badge-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.v3-announce-footer { display: flex; gap: 10px; }
.v3-announce-btn-primary {
  flex: 1; padding: 12px; border-radius: 12px;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; transition: all 0.35s var(--v3-spring);
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 20px rgba(99,102,241,0.35);
}
.v3-announce-btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 32px rgba(99,102,241,0.55); }
body.light-mode .v3-announce-btn-primary { background: linear-gradient(135deg, #4338ca, #6d28d9) !important; }
.v3-announce-btn-secondary {
  padding: 12px 18px; border-radius: 12px;
  background: transparent; border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.5); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.3s ease; font-family: 'Inter', sans-serif;
}
.v3-announce-btn-secondary:hover { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); }
body.light-mode .v3-announce-btn-secondary { border-color: rgba(0,0,0,0.12) !important; color: rgba(15,15,46,0.5) !important; }
body.light-mode .v3-announce-btn-secondary:hover { border-color: rgba(99,102,241,0.35) !important; color: #1a1a3e !important; }
.v3-dontshow { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.38); cursor: pointer; }
.v3-dontshow input { accent-color: #6366f1; cursor: pointer; }
.product-img-glow-1, .product-img-glow-2, .product-img-glow-3 { /* glow removed */ }
body.light-mode .v3-dontshow { color: rgba(15,15,46,0.4) !important; }
@media (max-width: 640px) {
  #v3AnnounceModal .v3-announce { padding: 0; }
  .v3-announce-inner { padding: 24px 18px 20px; }
  .v3-announce-title { font-size: 18px; }
}
@media (max-width: 480px) {
  .v3-announce-footer { flex-direction: column; }
}

/* Desktop Header Alignment */
    .desktop-nav-center { position: absolute; left: 50%; transform: translateX(-50%); }
    
    /* Mobile Menu Slide Animation */
    #mobileMenu {
      position: fixed; top: 0; right: 0; bottom: 0; left: auto !important;
      width: min(360px, 88vw) !important;
      transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
      background:
        radial-gradient(circle at top right, rgba(99, 102, 241, 0.2), transparent 34%),
        linear-gradient(180deg, rgba(12, 12, 26, 0.98), rgba(7, 7, 18, 0.98)) !important;
      backdrop-filter: blur(24px) !important;
      border-left: 1px solid rgba(255, 255, 255, 0.12);
      box-shadow: -16px 0 44px rgba(0, 0, 0, 0.42);
      z-index: 10001; padding: 28px 20px calc(28px + env(safe-area-inset-bottom)); visibility: hidden;
      display: block !important; /* Disable Tailwind `hidden` class effect */
      overflow-y: auto;
    }
    #mobileMenu.menu-open { transform: translateX(0); visibility: visible; }
    #mobileOverlay {
      position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
      opacity: 0; pointer-events: none; transition: opacity 0.3s;
    }
    #mobileOverlay.menu-open { opacity: 1; pointer-events: all; }
    
    /* Nav Link Hover Animation */
    .nav-link { position: relative; }
    .nav-link::after {
      content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
      width: 0; height: 2px; background: linear-gradient(90deg, #6366f1, #ec4899);
      transition: width 0.3s ease; border-radius: 2px;
    }
    .nav-link:hover::after { width: 100%; }
    
    @media (max-width: 768px) {
      :root {
        --m-surface: linear-gradient(180deg, rgba(22, 14, 52, 0.9), rgba(10, 9, 34, 0.92));
        --m-surface-soft: linear-gradient(180deg, rgba(28, 18, 66, 0.84), rgba(14, 12, 44, 0.88));
        --m-border: rgba(155, 126, 255, 0.12);
        --m-shadow: 0 18px 36px rgba(8, 3, 28, 0.28);
      }

      /* Mobile header fixes */
      .nav-right-icons { gap: 0 !important; flex: 0 0 auto !important; }
      .mobile-nav-brand { flex: 1 1 auto !important; min-width: 0; }
      nav .nav-logo { font-size: 20px !important; display: inline-flex !important; align-items: center !important; }

      html, body {
        overflow-x: clip;
      }

      body {
        text-size-adjust: 100%;
      }

      nav {
        background: linear-gradient(180deg, rgba(16, 11, 40, 0.9), rgba(9, 8, 28, 0.88)) !important;
        border-bottom-color: var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      nav > div.w-full {
        padding: 10px 14px !important;
        min-height: 68px;
      }

      nav .nav-logo img {
        height: 28px !important;
        width: auto !important;
        max-width: 124px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

      #searchBtn,
      #langToggle,
      #themeToggle,
      #settingsBtn,
      .nav-pay-btn {
        display: none !important;
      }

      #mobileMenuBtn {
        width: 44px;
        height: 44px;
        padding: 0 !important;
        border-radius: 16px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 0 !important;
        flex-shrink: 0;
        background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.04)) !important;
        border: 1px solid rgba(255,255,255,0.09) !important;
        box-shadow: none !important;
      }

      #mobileMenuBtn svg {
        width: 21px !important;
        height: 21px !important;
        display: block !important;
        flex-shrink: 0;
        stroke-width: 2.2 !important;
      }

      #mobileMenu {
        width: min(320px, calc(100vw - 18px)) !important;
        border-top-left-radius: 24px;
        border-bottom-left-radius: 24px;
      }

      #mobileMenu > div:first-child {
        position: sticky;
        top: 0;
        margin: -24px -16px 18px !important;
        padding: calc(16px + env(safe-area-inset-top)) 16px 14px;
        background: linear-gradient(180deg, rgba(16, 11, 40, 0.98), rgba(10, 9, 34, 0.92));
        backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--m-border);
        z-index: 2;
      }

      .mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .mobile-menu-logo {
        display: inline-flex;
        align-items: center;
        min-height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
      }

      .mobile-menu-logo img {
        height: 28px;
        width: auto;
        max-width: 124px;
        display: block;
      }

      .mobile-menu-close {
        width: 44px;
        height: 44px;
        min-height: 44px !important;
        border-radius: 16px !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0 !important;
        flex-shrink: 0;
        background: rgba(255,255,255,0.06) !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
      }

      .mobile-menu-body {
        gap: 14px !important;
      }

      .mobile-menu-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .mobile-menu-action {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        min-height: 48px !important;
        padding: 12px 14px !important;
        border-radius: 16px !important;
        text-align: left;
        background: var(--m-surface-soft) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      .mobile-menu-action-value {
        margin-left: auto;
        font-size: 10px;
        font-weight: 700;
        color: rgba(255,255,255,0.42);
        letter-spacing: 0.06em;
      }

      .mobile-menu-links {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      #mobileMenu .flex-col {
        gap: 8px !important;
      }

      #mobileMenu a,
      #mobileMenu button {
        min-height: 50px;
        padding: 12px 14px !important;
        border-radius: 16px;
        font-size: 15px !important;
        line-height: 1.25;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      #mobileMenu .pt-4 {
        padding-top: 14px !important;
      }

      #mobileMenu .w-full {
        min-height: 48px;
        border-radius: 16px !important;
      }

      #home {
        min-height: auto !important;
        padding: calc(86px + env(safe-area-inset-top)) 16px 34px !important;
      }

      #home .max-w-4xl {
        max-width: 332px !important;
      }

      #home .w-28,
      #home .md\:w-32 {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 16px !important;
      }

      .hero-badge {
        padding: 7px 12px !important;
        border-radius: 999px !important;
        max-width: min(100%, 250px);
        font-size: 10px !important;
        letter-spacing: 0.3px;
      }

      #hero-greeting {
        font-size: 14px !important;
        margin-bottom: 10px !important;
      }

      #hero-title {
        font-size: clamp(2rem, 9.2vw, 3rem) !important;
        line-height: 1.02 !important;
        letter-spacing: -0.04em;
        margin-bottom: 12px !important;
        padding: 0 !important;
      }

      .typewriter-container {
        width: 100%;
        padding: 0 !important;
      }

      .typewriter-text,
      #hero-subtitle {
        width: 100%;
        max-width: 286px;
        margin: 0 auto;
        font-size: 14px !important;
        line-height: 1.45 !important;
        text-wrap: balance;
      }

      #hero-description {
        max-width: 31ch !important;
        margin-top: 16px !important;
        font-size: 13px !important;
        line-height: 1.72 !important;
        color: rgba(255,255,255,0.72) !important;
        padding: 0 2px !important;
      }

      #home .flex.flex-col.sm\:flex-row {
        gap: 10px !important;
        margin-top: 22px !important;
      }

      #hero-btn1,
      #hero-btn2 {
        width: 100%;
        justify-content: center;
        min-height: 48px;
        padding: 13px 16px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
      }

      #hero-btn2 {
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      #vipMarquee {
        margin-top: 4px;
      }

      #home .flex.items-center.justify-center.gap-6.mt-12 {
        gap: 10px !important;
        margin-top: 24px !important;
        flex-wrap: wrap;
      }

      .social-icon {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border-radius: 14px !important;
      }

      #home .absolute.bottom-10.left-1\/2 {
        display: none !important;
      }

      .marquee-pill {
        margin: 0 4px !important;
        padding: 8px 14px !important;
        font-size: 11px !important;
        border-radius: 999px !important;
      }

      #about,
      #skills,
      #projects,
      #boost,
      #freefire,
      #faq,
      #contact {
        padding: 72px 16px !important;
      }

      #about .max-w-6xl,
      #skills .max-w-6xl,
      #projects .max-w-6xl,
      #boost .max-w-4xl,
      #freefire .max-w-6xl,
      #faq .max-w-3xl,
      #contact .max-w-3xl {
        max-width: 100% !important;
      }

      .section-title,
      #projects-title,
      #boost-title,
      #contact-title {
        font-size: 28px !important;
        line-height: 1.15 !important;
        text-wrap: balance;
      }

      #projects-sub,
      #boost-sub,
      #contact-sub,
      #faq .text-gray-400 {
        font-size: 14px !important;
        line-height: 1.75 !important;
        max-width: 34ch !important;
      }

      #projects .grid,
      #freefire .grid,
      #contact .grid {
        gap: 16px !important;
      }

      #about .grid.md\:grid-cols-2,
      #skills .grid.md\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
      }

      #about p,
      #skills p {
        font-size: 14px !important;
        line-height: 1.75 !important;
      }

      #about .grid.grid-cols-2.gap-6 {
        gap: 12px !important;
      }

      #about .grid.grid-cols-2.gap-6 > div {
        padding: 14px !important;
        border-radius: 18px !important;
        background: var(--m-surface-soft) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      #about .counter {
        font-size: 28px !important;
        line-height: 1 !important;
      }

      #about [data-about-stat] {
        font-size: 12px !important;
        line-height: 1.5 !important;
      }

      #about .card-glow.hov-scale.rounded-2xl {
        padding: 18px !important;
        border-radius: 24px !important;
        background: var(--m-surface) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      #about .space-y-6 {
        gap: 14px !important;
      }

      #about .timeline-item {
        padding: 14px 14px 14px 16px;
        border-radius: 18px;
        background: var(--m-surface-soft) !important;
        border: 1px solid var(--m-border) !important;
        box-shadow: var(--m-shadow) !important;
      }

      #about .timeline-item h4 {
        font-size: 15px !important;
        line-height: 1.45 !important;
      }

      #about .timeline-item p {
        font-size: 12px !important;
      }

      #skills .card-glow.rounded-2xl {
        background: var(--pc-surface-soft) !important;
        padding: 18px !important;
        border-radius: 24px !important;
      }

      #skills .w-12.h-12 {
        width: 42px !important;
        height: 42px !important;
        border-radius: 14px !important;
      }

      #skills h3.text-xl {
        font-size: 18px !important;
      }

      #skills .space-y-5 {
        gap: 14px !important;
      }

      #skills .skill-item span {
        font-size: 13px !important;
      }

      #skills .skill-bar {
        height: 9px !important;
        border-radius: 999px !important;
      }

      .project-card,
      .contact-card-new,
      .boost-order-panel,
      .faq-item,
      .dl-card {
        border-radius: 22px !important;
      }

      .project-card {
        overflow: hidden;
      }

      .project-card .h-48,
      .project-card [style*='height:200px'] {
        height: 190px !important;
      }

      .project-card .p-6,
      .project-card .p-5 {
        padding: 18px !important;
      }

      .project-card h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
      }

      .project-card p {
        font-size: 13px !important;
        line-height: 1.7 !important;
      }

      .project-card .flex.gap-3 {
        flex-wrap: wrap;
        gap: 10px !important;
      }

      .project-card .flex.gap-3 > * {
        min-height: 42px;
        align-items: center;
      }

      #projects .project-card .flex.gap-3 > *,
      #freefire .project-card .flex.gap-3 > * {
        flex: 1 1 100%;
        justify-content: center;
      }

      .boost-order-panel {
        padding: 18px !important;
        background: linear-gradient(180deg, rgba(18,18,36,0.96), rgba(10,10,22,0.94)) !important;
        box-shadow: 0 18px 40px rgba(0,0,0,0.24);
      }

      .boost-row-2col {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      .boost-select-btn,
      #boostServiceList,
      .boost-qty-btn,
      .boost-submit-btn,
      #boostLink,
      #boostQuantity,
      #boostNote {
        min-height: 50px !important;
        border-radius: 16px !important;
      }

      .boost-label {
        margin-bottom: 8px !important;
        font-size: 13px !important;
      }

      .cheat-price-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
      }

      .cheat-price-cell {
        min-height: 78px !important;
        padding: 12px 10px !important;
        border-radius: 16px !important;
      }

      .faq-question {
        padding: 16px 18px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
        align-items: flex-start !important;
        gap: 12px;
      }

      .faq-answer {
        padding: 0 18px 18px !important;
        font-size: 14px !important;
        line-height: 1.75 !important;
      }

      .contact-card-new {
        padding: 16px !important;
        align-items: flex-start !important;
        gap: 14px !important;
      }

      .contact-card-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 16px !important;
        flex-shrink: 0;
      }

      .contact-card-name {
        font-size: 15px !important;
      }

      .contact-card-val {
        font-size: 14px !important;
        line-height: 1.45 !important;
        word-break: break-word;
      }

      .contact-card-note {
        font-size: 12px !important;
        line-height: 1.55 !important;
      }

      #searchOverlay {
        padding: 18px 14px 24px !important;
      }

      #payNowPopup,
      #contactModal {
        align-items: flex-start !important;
        padding: 12px !important;
        overflow-y: auto;
      }

      .pnBox,
      .cmbBox {
        width: min(100%, calc(100vw - 24px)) !important;
        max-width: none !important;
        margin-top: max(8px, env(safe-area-inset-top)) !important;
        padding: 22px 18px 18px !important;
        border-radius: 24px !important;
        max-height: calc(100dvh - 24px) !important;
        overflow-y: auto !important;
      }

      .pnQrWrap {
        width: 100%;
      }

      .search-box {
        width: 100% !important;
        padding: 12px 14px !important;
        border-radius: 20px !important;
      }

      #searchInput {
        font-size: 15px !important;
      }

      #vipMusicPlayer {
        left: 12px !important;
        right: auto !important;
        bottom: calc(18px + env(safe-area-inset-bottom)) !important;
      }

      #vmpIconBubble {
        width: 44px !important;
        height: 44px !important;
      }

      #vmpPanel {
        width: min(300px, calc(100vw - 24px)) !important;
        left: 0 !important;
        right: auto !important;
        bottom: 60px !important;
        transform-origin: bottom left !important;
      }

      #backToTop {
        right: 12px !important;
        bottom: calc(118px + env(safe-area-inset-bottom)) !important;
      }

      #toastContainer {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
      }

      .toast {
        max-width: none !important;
      }

      #subpageCloseBtn {
        top: calc(12px + env(safe-area-inset-top)) !important;
        left: 12px !important;
      }

      .sp-nav {
        padding: calc(12px + env(safe-area-inset-top)) 14px 12px !important;
        gap: 10px;
      }

      .sp-nav > a {
        font-size: 15px !important;
        max-width: 42vw;
        line-height: 1.3;
      }

      .sp-nav > div {
        gap: 6px !important;
      }

      .sp-nav button {
        min-height: 38px;
      }

      #subpagePanel > div[style*='padding:80px 24px 40px'] {
        padding: 92px 16px 28px !important;
      }

      #subpagePanel > div[style*='max-width:1100px'] {
        padding: 0 16px 88px !important;
      }

      #subpagePanel div[style*='grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-bottom:60px;'] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
      }

      .dl-card {
        padding: 16px !important;
      }

      .dl-icon-box {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
      }

      .dl-btn {
        width: 100%;
        justify-content: center;
        min-height: 46px;
        border-radius: 14px !important;
      }
    }

    @media (max-width: 480px) {
      nav > div.w-full {
        padding-inline: 12px !important;
      }

      nav .nav-logo img {
        height: 26px !important;
        max-width: 116px !important;
      }

      #mobileMenu {
        width: min(304px, calc(100vw - 14px)) !important;
      }

      .mobile-menu-actions {
        grid-template-columns: 1fr 1fr;
      }

      .mobile-menu-action {
        min-height: 46px !important;
        padding: 11px 12px !important;
      }

      .mobile-menu-action .ui-icon {
        width: 16px !important;
        height: 16px !important;
      }

      #home,
      #about,
      #skills,
      #projects,
      #boost,
      #freefire,
      #faq,
      #contact {
        padding-inline: 14px !important;
      }

      #hero-title {
        font-size: clamp(1.9rem, 10vw, 2.8rem) !important;
      }

      #hero-subtitle {
        max-width: 268px;
      }

      #hero-description {
        max-width: 29ch !important;
      }

      .section-title,
      #projects-title,
      #boost-title,
      #contact-title {
        font-size: 24px !important;
      }

      .project-card .p-6,
      .project-card .p-5,
      .boost-order-panel,
      .faq-item,
      .contact-card-new {
        padding: 16px !important;
      }

      .cheat-price-grid {
        grid-template-columns: 1fr !important;
      }

      .project-card .h-48,
      .project-card [style*='height:200px'] {
        height: 180px !important;
      }

      #about .grid.grid-cols-2.gap-6 {
        grid-template-columns: 1fr 1fr !important;
      }

      #vmpPanel {
        width: min(286px, calc(100vw - 24px)) !important;
      }
    }

    @media (max-width: 380px) {
      .mobile-menu-actions {
        grid-template-columns: 1fr;
      }

      #mobileMenu {
        width: min(292px, calc(100vw - 12px)) !important;
      }
    }

    @media (min-width: 1024px) {
      .typewriter-container {
        width: auto !important;
        display: inline-flex !important;
        justify-content: center;
        overflow: visible !important;
      }

      .typewriter-text,
      #hero-subtitle {
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        font-size: clamp(1.55rem, 1.45vw, 1.9rem) !important;
        line-height: 1.25 !important;
        border-right: 2px solid #7c72ff !important;
        padding-right: 1px !important;
        display: inline-block !important;
        animation: blink 0.72s step-end infinite !important;
      }

      #hero-description {
        width: min(100%, 56rem) !important;
        max-width: 56rem !important;
        margin-top: 22px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: clamp(1.18rem, 1.08vw, 1.34rem) !important;
        line-height: 1.62 !important;
        text-wrap: pretty !important;
      }

      :root {
        --pc-section-gap: clamp(74px, 5.4vw, 96px);
        --pc-shell: min(1280px, calc(100vw - 88px));
        --pc-surface: linear-gradient(180deg, rgba(22, 14, 52, 0.88), rgba(10, 9, 34, 0.9));
        --pc-surface-soft: linear-gradient(180deg, rgba(28, 18, 66, 0.82), rgba(14, 12, 44, 0.84));
        --pc-border: rgba(155, 126, 255, 0.12);
        --pc-shadow: 0 18px 40px rgba(8, 3, 28, 0.34);
      }

      #about,
      #skills,
      #projects,
      #boost,
      #freefire,
      #faq,
      #contact {
        position: relative;
        isolation: isolate;
        padding: var(--pc-section-gap) 40px !important;
      }

      #about::before,
      #skills::before,
      #projects::before,
      #boost::before,
      #freefire::before,
      #faq::before,
      #contact::before {
        content: "";
        position: absolute;
        inset: 22px 18px;
        border-radius: 40px;
        background:
          radial-gradient(circle at top right, rgba(124, 58, 237, 0.14), transparent 34%),
          radial-gradient(circle at bottom left, rgba(168, 85, 247, 0.08), transparent 32%);
        border: 1px solid rgba(155, 126, 255, 0.06);
        pointer-events: none;
        z-index: 0;
      }

      #about > .max-w-6xl,
      #skills > .max-w-6xl,
      #projects > .max-w-6xl,
      #boost > .max-w-4xl,
      #freefire > .max-w-6xl,
      #faq > .max-w-3xl,
      #contact > .max-w-3xl {
        width: var(--pc-shell) !important;
        max-width: var(--pc-shell) !important;
        position: relative;
        z-index: 1;
      }

      #about .section-title,
      #skills .section-title,
      #projects .section-title,
      #boost .section-title,
      #freefire .section-title,
      #faq .section-title,
      #contact .section-title {
        font-size: clamp(1.9rem, 2.2vw, 2.65rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.05em;
        margin-bottom: 12px !important;
        text-wrap: balance;
        background: none !important;
        -webkit-background-clip: initial !important;
        background-clip: initial !important;
        -webkit-text-fill-color: #f5f7ff !important;
      }

      #about p,
      #skills p,
      #projects p,
      #boost p,
      #freefire p,
      #faq p,
      #contact p {
        line-height: 1.8;
      }

      #about .grid.md\:grid-cols-2 {
        grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr) !important;
        gap: 40px !important;
        align-items: start !important;
      }

      #about .animate-fade-in-left {
        position: sticky;
        top: 118px;
        padding: 22px 24px;
        border-radius: 24px;
        background: var(--pc-surface);
        border: 1px solid var(--pc-border);
        box-shadow: var(--pc-shadow);
      }

      #about .animate-fade-in-right .card-glow {
        padding: 21px !important;
        border-radius: 24px !important;
        background: var(--pc-surface) !important;
        box-shadow: var(--pc-shadow);
      }

      #about .animate-fade-in-right .card-glow:hover,
      #about .animate-fade-in-right .card-glow:focus,
      #about .animate-fade-in-right .card-glow:active {
        transform: none !important;
        box-shadow: var(--pc-shadow) !important;
      }

      #about .grid.grid-cols-2.gap-6 {
        gap: 16px !important;
        margin-top: 30px;
      }

      #about .grid.grid-cols-2.gap-6 > div {
        min-height: 90px;
        padding: 14px 13px !important;
        border-radius: 16px !important;
        background: rgba(104, 76, 196, 0.08) !important;
        border: 1px solid rgba(155, 126, 255, 0.09) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
        backdrop-filter: blur(14px) !important;
      }

      body #about .grid.grid-cols-2.gap-6 > div.card-glow,
      body #about .grid.grid-cols-2.gap-6 > div.card-hover,
      body #about .grid.grid-cols-2.gap-6 > div.hov-scale {
        background: rgba(104, 76, 196, 0.08) !important;
        border: 1px solid rgba(155, 126, 255, 0.09) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
      }

      #about .counter {
        font-size: clamp(1.38rem, 1.35vw, 1.72rem) !important;
        line-height: 1;
        margin-bottom: 6px;
      }

      #about [data-about-stat] {
        font-size: 13px !important;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      #about .timeline-item {
        padding: 14px 14px 14px 20px;
        border-radius: 16px;
        background: rgba(104, 76, 196, 0.08);
        border: 1px solid rgba(155, 126, 255, 0.09);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
      }

      #about .timeline-item:hover,
      #about .timeline-item:focus,
      #about .timeline-item:active {
        transform: scale(1.01) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
        border-color: rgba(155, 126, 255, 0.09) !important;
      }

      #about .timeline-item + .timeline-item {
        margin-top: 14px;
      }

      #about .timeline-item h4 {
        font-size: 17px;
        margin-bottom: 6px;
      }

      #about .timeline-item p {
        font-size: 13px !important;
      }

      #skills .text-center.mb-16,
      #projects .text-center.mb-16,
      #boost .text-center.mb-14,
      #freefire .text-center.mb-16,
      #contact .text-center.mb-14 {
        max-width: 760px;
        margin: 0 auto 48px !important;
      }

      #skills .grid.md\:grid-cols-2 {
        gap: 24px !important;
        align-items: stretch;
      }

      #skills .card-glow.rounded-2xl {
        background: var(--pc-surface-soft) !important;
        min-height: 100%;
        padding: 19px !important;
        border-radius: 22px !important;
        background: var(--pc-surface) !important;
        border-color: rgba(155, 126, 255, 0.1) !important;
        box-shadow: var(--pc-shadow);
      }

      #skills .w-12.h-12 {
        width: 52px !important;
        height: 52px !important;
        border-radius: 18px !important;
      }

      #skills .flex.items-center.gap-3.mb-6 > .w-12.h-12 {
        background: linear-gradient(135deg, rgba(96, 91, 255, 0.95), rgba(208, 87, 210, 0.92)) !important;
        box-shadow: 0 12px 28px rgba(82, 54, 174, 0.28);
      }

      #skills h3.text-xl {
        font-size: 0.95rem !important;
        letter-spacing: -0.02em;
      }

      #skills .space-y-5 {
        gap: 12px !important;
      }

      #skills .skill-item {
        padding: 9px 11px;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(56, 38, 122, 0.2), rgba(26, 20, 78, 0.24));
        border: 1px solid rgba(155, 126, 255, 0.09);
      }

      #skills .skill-bar {
        height: 10px !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)) !important;
        border: 1px solid rgba(155, 126, 255, 0.12) !important;
      }

      #skills .skill-progress {
        background: linear-gradient(90deg, #585ef6 0%, #875df4 50%, #c655ce 100%) !important;
      }

      #skills .skill-percent {
        min-width: 54px;
        padding: 5px 11px;
        background: rgba(83, 63, 178, 0.24);
        border-color: rgba(138, 117, 239, 0.18);
        color: #bdaeff !important;
      }

      #skills .card-glow.rounded-2xl {
        background: var(--pc-surface-soft) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 18px 48px rgba(8, 6, 20, 0.32) !important;
      }

      #skills .skill-item {
        background: linear-gradient(180deg, rgba(46, 33, 96, 0.36), rgba(29, 22, 68, 0.42)) !important;
        border-color: rgba(128, 104, 236, 0.14) !important;
      }

      #skills .sca-it .sca-orb-1,
      #skills .sca-orb-1 {
        background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%) !important;
      }

      #skills .sca-it .sca-orb-2,
      #skills .sca-orb-2 {
        background: radial-gradient(circle, rgba(168,85,247,0.3), transparent 70%) !important;
      }

      #skills .sca-it .sca-orb-3,
      #skills .sca-orb-3 {
        background: radial-gradient(circle, rgba(236,72,153,0.2), transparent 70%) !important;
      }

      #skills .sca-it .sca-spark-1,
      #skills .sca-spark-1 {
        background: rgba(167,139,250,0.9) !important;
      }

      #skills .sca-it .sca-spark-2,
      #skills .sca-spark-2 {
        background: rgba(236,72,153,0.8) !important;
      }

      #skills .sca-it .sca-spark-4,
      #skills .sca-spark-4 {
        background: rgba(255,255,255,0.7) !important;
      }

      #skills .sca-it .sca-spark-5,
      #skills .sca-spark-5 {
        background: rgba(167,139,250,0.8) !important;
      }

      #skills .mt-8.card-glow {
        margin-top: 28px !important;
        border-radius: 22px !important;
        padding: 18px 18px !important;
        background: var(--pc-surface-soft) !important;
        box-shadow: var(--pc-shadow);
      }

      #skills .tool-badge {
        padding: 9px 13px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        letter-spacing: 0.03em;
        background: rgba(104, 76, 196, 0.08) !important;
        border: 1px solid rgba(155, 126, 255, 0.09) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
      }

      #projects .grid,
      #freefire .grid {
        display: grid !important;
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 24px !important;
      }

      #projects .project-card,
      #freefire .project-card {
        grid-column: span 6;
      }

      #projects .project-card,
      #freefire .project-card,
      #boost .boost-order-panel,
      #faq .faq-item,
      #contact .contact-card-new {
        background: var(--pc-surface) !important;
        border: 1px solid var(--pc-border) !important;
        box-shadow: var(--pc-shadow);
        backdrop-filter: blur(18px);
      }

      #projects .project-card,
      #freefire .project-card {
        border-radius: 20px !important;
        overflow: hidden;
      }

      #projects .project-card .h-48,
      #freefire .project-card .h-48,
      #freefire .project-card [style*='height:200px'] {
        height: 186px !important;
      }

      #projects .project-card .p-6,
      #projects .project-card .p-5,
      #freefire .project-card .p-5 {
        padding: 16px !important;
      }

      #projects .project-card h3,
      #freefire .project-card h3 {
        font-size: 1rem !important;
        line-height: 1.22 !important;
        margin-bottom: 6px !important;
      }

      #projects .project-card p,
      #freefire .project-card p {
        font-size: 12px !important;
        line-height: 1.6 !important;
        color: rgba(222,236,255,0.72) !important;
      }

      #projects .project-card .flex.gap-3,
      #freefire .project-card .flex.gap-3 {
        gap: 12px !important;
        margin-top: 14px;
      }

      #projects .project-card .flex.gap-3 > *,
      #freefire .project-card .flex.gap-3 > * {
        min-height: 42px;
      }

.selectable-price.selected::after {
  content: "\2713" !important;
}

      #boost > .max-w-4xl {
        width: min(1220px, calc(100vw - 96px)) !important;
        max-width: min(1220px, calc(100vw - 96px)) !important;
      }

      #boost .boost-order-panel {
        padding: 17px !important;
        border-radius: 20px !important;
      }

      #boost .boost-row-2col {
        gap: 18px !important;
      }

      #boost .boost-field-group {
        gap: 10px !important;
      }

      #boost .boost-select-btn,
      #boost #boostLink,
      #boost #boostQuantity,
      #boost #boostNote,
      #boost .boost-submit-btn {
        min-height: 46px !important;
        border-radius: 13px !important;
      }

      #boost #boostServiceList {
        border-radius: 16px !important;
        max-height: 270px;
      }

      #boost .boost-label {
        font-size: 13px !important;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      #freefire > .max-w-6xl {
        width: min(1320px, calc(100vw - 88px)) !important;
        max-width: min(1320px, calc(100vw - 88px)) !important;
      }

      #freefire .project-card {
        grid-column: span 4;
      }

      #freefire .cheat-price-grid {
        gap: 12px !important;
      }

      #freefire .cheat-price-cell {
        min-height: 72px;
        padding: 10px 9px !important;
        border-radius: 12px !important;
        background: rgba(104, 76, 196, 0.08);
      }

      #freefire .cheat-price-num {
        font-size: 16px !important;
      }

      #faq > .max-w-3xl {
        display: grid;
        grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
        gap: 28px;
        align-items: start;
      }

      #faq > .max-w-3xl > .text-center.mb-16 {
        position: sticky;
        top: 118px;
        text-align: left;
        margin: 0 !important;
        padding: 18px 16px;
        border-radius: 20px;
        background: var(--pc-surface-soft);
        border: 1px solid rgba(155, 126, 255, 0.1);
        box-shadow: var(--pc-shadow);
      }

      #faq > .max-w-3xl > .space-y-3 {
        display: flex;
        flex-direction: column;
        gap: 14px !important;
      }

      #faq .faq-item {
        border-radius: 16px !important;
        overflow: hidden;
      }

      #faq .faq-question {
        min-height: 58px;
        padding: 15px 16px !important;
        font-size: 13px !important;
        font-weight: 600;
      }

      #faq .faq-answer {
        font-size: 14px !important;
        line-height: 1.8 !important;
      }

      #contact > .max-w-3xl {
        width: min(1160px, calc(100vw - 92px)) !important;
        max-width: min(1160px, calc(100vw - 92px)) !important;
      }

      #contact .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
      }

      #contact .contact-card-new {
        min-height: 84px;
        padding: 13px 14px !important;
        border-radius: 18px !important;
      }

      #contact .contact-card-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
      }

      #contact .contact-card-name {
        font-size: 13px !important;
        margin-bottom: 3px;
      }

      #contact .contact-card-val {
        font-size: 11px !important;
      }

      #contact .contact-card-note {
        font-size: 12px !important;
        letter-spacing: 0.03em;
      }
    }

/* Mobile Hero Refinements */
    @media (max-width: 768px) {
      #hero-title {
        font-size: clamp(2.2rem, 8vw, 4rem) !important;
        line-height: 1.2 !important;
        padding: 0 10px;
      }
      .typewriter-container, .typewriter-text {
        white-space: normal !important; /* Allow wrapping */
        word-break: keep-all;
        width: auto !important;
        border-right: none !important; /* Remove cursor on mobile */
        min-height: 56px;
      }
      #home {
        padding-top: 100px !important; /* Push content down so it stays below header */
      }
    }

/* Performance-first cleanup */
.reduced-fx #weatherWidget,
.reduced-fx #moodWidget,
.reduced-fx #miniStatsPill,
.reduced-fx #floatActionMenu,
.reduced-fx .cursor-trail-dot,
.reduced-fx .morphing-blob {
  display: none !important;
}

.reduced-fx nav,
.reduced-fx .sp-nav,
.reduced-fx #mobileMenu,
.reduced-fx #settingsPanel,
.reduced-fx #themePicker,
.reduced-fx .pnBox,
.reduced-fx .cmbBox,
.reduced-fx .welcome-card,
.reduced-fx .card-glow,
.reduced-fx .project-card,
.reduced-fx .dl-card,
.reduced-fx .boost-order-panel,
.reduced-fx .faq-item,
.reduced-fx .contact-card-new {
  backdrop-filter: blur(12px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(135%) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
}
.reduced-fx .faq-item {
  animation: none !important;
  transform: none !important;
}

.reduced-fx .vip-orb,
.reduced-fx .shape,
.reduced-fx [class^="particle-"],
.reduced-fx [class*=" particle-"] {
  opacity: 0.45 !important;
  filter: blur(28px) !important;
}

.reduced-fx .animate-float,
.reduced-fx .floaty,
.reduced-fx .text-glow {
  animation: none !important;
}

@media (max-width: 1024px) {
  #weatherWidget,
  #moodWidget,
  #miniStatsPill,
  #floatActionMenu {
    display: none !important;
  }
}

@media (max-width: 768px) {
  nav {
    backdrop-filter: blur(14px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18) !important;
  }

  #home {
    padding-top: 92px !important;
    padding-bottom: 34px !important;
  }

  .hero-bg-vip .vip-orb,
  .hero-bg-vip .shape,
  .hero-bg-vip [class^="particle-"],
  .hero-bg-vip [class*=" particle-"] {
    display: none !important;
  }

  .hero-social-row {
    margin-top: 24px !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  #about,
  #skills,
  #projects,
  #boost,
  #freefire,
  #faq,
  #contact {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  #about .card-glow,
  #skills .card-glow.rounded-2xl,
  #projects .project-card,
  #freefire .project-card,
  #boost .boost-order-panel,
  #faq .faq-item,
  #contact .contact-card-new,
  .dl-card {
    box-shadow: none !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}

/* ========== SAFE PERFORMANCE TUNING ========== */
nav,
.sp-nav,
#mobileMenu,
#settingsPanel,
#themePicker,
.welcome-card,
.card-glow,
.project-card,
.dl-card,
.boost-order-panel,
.faq-item,
.contact-card-new,
.pnBox,
.cmbBox,
.vmp-panel {
  box-shadow: 0 10px 26px rgba(5, 4, 20, 0.18) !important;
}

.project-card:hover,
.dl-card:hover,
.stat-card:hover,
.contact-card-new:hover,
.faq-item:hover {
  box-shadow: 0 14px 28px rgba(10, 8, 28, 0.18) !important;
}

#projects .project-card:hover h3,
#projects .project-card:hover p,
#projects .project-card:hover a,
#projects .project-card:hover .text-glow,
#projects .project-card:hover .light-reactive {
  color: #ffffff !important;
  text-shadow: 0 0 14px rgba(255,255,255,0.16), 0 0 28px rgba(167,139,250,0.14) !important;
}

#projects .project-card:hover p {
  color: rgba(255,255,255,0.92) !important;
}

body.light-mode #projects .project-card:hover h3,
body.light-mode #projects .project-card:hover p,
body.light-mode #projects .project-card:hover a,
body.light-mode #projects .project-card:hover .text-glow,
body.light-mode #projects .project-card:hover .light-reactive {
  color: #1a1a3e !important;
  text-shadow: 0 0 16px rgba(99,102,241,0.18), 0 0 30px rgba(168,85,247,0.12) !important;
}

body.light-mode #projects .project-card:hover p {
  color: #2a2a50 !important;
}

@media (max-width: 768px) {
  nav {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  #home {
    padding-top: 92px !important;
  }

  #about,
  #skills,
  #projects,
  #boost,
  #freefire,
  #faq,
  #contact {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  #projects .project-card,
  #freefire .project-card,
  #faq .faq-item,
  #contact .contact-card-new,
  #boost .boost-order-panel,
  .dl-card,
  #skills .card-glow.rounded-2xl,
  #about .card-glow {
    border-radius: 18px !important;
  }
}

/* ========== MOBILE UI POLISH ========== */
@media (max-width: 768px) {
  #home .max-w-6xl,
  #about .max-w-6xl,
  #skills .max-w-6xl,
  #projects .max-w-6xl,
  #freefire .max-w-6xl,
  #boost .max-w-4xl,
  #faq .max-w-3xl,
  #contact .max-w-3xl {
    width: min(100%, 680px) !important;
    margin-inline: auto !important;
  }

  #hero-title,
  .section-title,
  #projects-title,
  #boost-title,
  #contact-title,
  #about-title,
  #skills-title {
    text-wrap: balance;
    letter-spacing: -0.02em;
  }

  #hero-subtitle,
  #hero-description,
  #projects-sub,
  #boost-sub,
  #contact-sub,
  #skills-sub,
  #faq p.text-gray-400,
  #about p.text-gray-400,
  #freefire p.text-gray-400 {
    max-width: 34ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1.72 !important;
    text-wrap: pretty;
  }

  #hero-description {
    max-width: 30ch !important;
    padding-inline: 6px !important;
    text-align: left !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  #about #about-p1,
  #about #about-p2 {
    max-width: 32ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: justify !important;
    text-align-last: center !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  .typewriter-container {
    display: block !important;
    width: 100% !important;
  }

  .typewriter-text,
  #hero-subtitle {
    display: block !important;
    min-height: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  #home .flex.flex-col.sm\:flex-row {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    gap: 12px !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  .project-card {
    display: flex;
    flex-direction: column;
  }

  .project-card .p-6,
  .project-card .p-5 {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
  }

  .project-card h3 {
    margin-bottom: 0 !important;
    min-height: 2.7em;
    text-wrap: balance;
  }

  .project-card p {
    margin-bottom: 0 !important;
    color: rgba(255,255,255,0.76) !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .project-card .flex.items-center.gap-2.mb-3,
  .project-card .flex.items-center.gap-3.mb-4 {
    margin-bottom: 0 !important;
    flex-wrap: wrap;
    gap: 8px !important;
  }

  .project-card .px-2.py-1,
  .project-card .px-3.py-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    white-space: nowrap;
    border-radius: 999px !important;
  }

  .project-card .flex.gap-3 {
    margin-top: auto;
  }

  .project-card .flex.gap-3 a,
  .project-card .flex.gap-3 button {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    white-space: nowrap;
  }

  #projects .grid,
  #freefire .grid {
    gap: 16px !important;
  }

  #boost .boost-order-panel {
    padding: 20px !important;
  }

  #boost .boost-label,
  #boost .text-xs,
  #freefire .text-xs,
  #projects .text-xs,
  #contact .contact-card-note {
    letter-spacing: 0.02em;
  }

  #contact .grid {
    gap: 14px !important;
  }

  .contact-card-new {
    min-height: 92px;
  }

  .contact-card-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 6px;
  }

  .contact-card-name {
    font-size: 15px !important;
    line-height: 1.3 !important;
  }

  .contact-card-val {
    font-size: 14px !important;
    line-height: 1.45 !important;
    word-break: break-word;
  }

  .contact-card-note {
    font-size: 12px !important;
    line-height: 1.55 !important;
  }

  .contact-card-arrow {
    flex-shrink: 0;
    align-self: center;
    opacity: 0.72;
  }

  .faq-question > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
    text-wrap: balance;
  }

  .faq-icon {
    flex-shrink: 0;
  }

  .hero-social-row a,
  .hero-social-row button,
  .social-link,
  .social-icon-btn {
    min-width: 42px;
    min-height: 42px;
  }
}

/* ========== MOBILE MENU REDESIGN ========== */
#mobileOverlay {
  background:
    radial-gradient(circle at top, rgba(99, 102, 241, 0.16), transparent 38%),
    rgba(3, 6, 18, 0.62) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#mobileMenuBtn {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03)) !important;
  box-shadow: 0 12px 26px rgba(4, 8, 24, 0.22), inset 0 1px 0 rgba(255,255,255,0.08) !important;
  color: #f8fbff !important;
  flex-shrink: 0;
}

#mobileMenuBtn:hover,
#mobileMenuBtn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(129, 140, 248, 0.44) !important;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.18), rgba(255,255,255,0.06)) !important;
  box-shadow: 0 16px 34px rgba(8, 12, 28, 0.28), 0 0 0 4px rgba(99,102,241,0.12) !important;
}

#mobileMenuBtn .mobile-menu-btn-stack {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#mobileMenuBtn .mobile-menu-btn-icon {
  width: 20px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#mobileMenuBtn .mobile-menu-btn-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  color: rgba(248, 250, 252, 0.98);
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.08));
}

#mobileMenu {
  width: min(86vw, 360px) !important;
  padding: 16px 14px 14px !important;
  border-radius: 24px 0 0 24px !important;
  border-left: 1px solid rgba(255,255,255,0.1) !important;
  background:
    radial-gradient(circle at top right, rgba(96, 165, 250, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(14, 19, 38, 0.98), rgba(8, 11, 25, 0.99)) !important;
  box-shadow: -24px 0 70px rgba(2, 6, 23, 0.46) !important;
  overflow-y: auto;
}

#mobileMenu .mobile-menu-head {
  margin-bottom: 12px;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

#mobileMenu .mobile-menu-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#mobileMenu .mobile-menu-logo-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

#mobileMenu .mobile-menu-logo img {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  padding: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
}

#mobileMenu .mobile-menu-brandcopy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#mobileMenu .mobile-menu-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(191, 219, 254, 0.72);
}

#mobileMenu .mobile-menu-subtitle {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.82);
}

#mobileMenu .mobile-menu-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(248,250,252,0.9) !important;
  box-shadow: none !important;
}

#mobileMenu .mobile-menu-close:hover,
#mobileMenu .mobile-menu-close:focus-visible {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(129, 140, 248, 0.34) !important;
}

#mobileMenu .mobile-menu-body {
  gap: 14px !important;
  padding-top: 8px !important;
}

#mobileMenu .mobile-menu-intro {
  margin-top: 6px;
  padding: 14px 14px 15px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)),
    rgba(12, 17, 32, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
}

#mobileMenu .mobile-menu-intro-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(129, 140, 248, 0.14);
  border: 1px solid rgba(129, 140, 248, 0.2);
  color: #dbeafe;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#mobileMenu .mobile-menu-intro-title {
  margin-top: 10px;
  font-size: 20px !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

#mobileMenu .mobile-menu-intro-text {
  margin-top: 8px;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: rgba(226,232,240,0.74) !important;
}

#mobileMenu .mobile-menu-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
}

#mobileMenu .mobile-menu-action {
  min-height: 54px !important;
  padding: 0 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.035) !important;
  color: #f8fafc !important;
  justify-content: space-between;
  gap: 12px;
}

#mobileMenu .mobile-menu-action:hover,
#mobileMenu .mobile-menu-action:focus-visible {
  background: rgba(129, 140, 248, 0.1) !important;
  border-color: rgba(129, 140, 248, 0.24) !important;
}

#mobileMenu .mobile-menu-action .ui-icon-row {
  gap: 10px;
}

#mobileMenu .mobile-menu-action-value,
#mobileMenu .mobile-menu-section-label {
  font-size: 11px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(191,219,254,0.72) !important;
}

#mobileMenu .mobile-menu-section-label {
  margin-top: 2px;
  padding-left: 4px;
}

#mobileMenu .mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mobileMenu .mobile-nav-link {
  min-height: 66px !important;
  padding: 12px 14px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02)) !important;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease !important;
}

#mobileMenu .mobile-nav-link:hover,
#mobileMenu .mobile-nav-link:focus-visible,
#mobileMenu .mobile-nav-link:active {
  transform: translateX(2px);
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.12), rgba(255,255,255,0.04)) !important;
  border-color: rgba(129, 140, 248, 0.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

#mobileMenu .mobile-nav-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, rgba(129, 140, 248, 0.18), rgba(255,255,255,0.04)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e6eefc !important;
}

#mobileMenu .mobile-nav-meta {
  gap: 4px;
}

#mobileMenu .mobile-nav-label {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f8fafc !important;
  letter-spacing: -0.01em;
}

#mobileMenu .mobile-nav-desc {
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: rgba(226,232,240,0.7) !important;
}

#mobileMenu .mobile-nav-arrow {
  font-size: 15px !important;
  color: rgba(191,219,254,0.8) !important;
  transform: translateX(0);
  transition: transform 0.2s ease;
}

#mobileMenu .mobile-nav-link:hover .mobile-nav-arrow,
#mobileMenu .mobile-nav-link:focus-visible .mobile-nav-arrow {
  transform: translateX(2px);
}

body.light-mode #mobileOverlay {
  background:
    radial-gradient(circle at top, rgba(99, 102, 241, 0.14), transparent 36%),
    rgba(244, 247, 255, 0.68) !important;
}

body.light-mode #mobileMenu {
  background:
    radial-gradient(circle at top right, rgba(99, 102, 241, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(242,246,255,0.98)) !important;
  border-left-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-mode #mobileMenu .mobile-menu-head,
body.light-mode #mobileMenu .mobile-menu-intro,
body.light-mode #mobileMenu .mobile-menu-action,
body.light-mode #mobileMenu .mobile-nav-link,
body.light-mode #mobileMenu .mobile-menu-close,
body.light-mode #mobileMenu .mobile-menu-logo img,
body.light-mode #mobileMenu .mobile-nav-icon {
  border-color: rgba(15, 23, 42, 0.08) !important;
}

body.light-mode #mobileMenu .mobile-menu-intro,
body.light-mode #mobileMenu .mobile-menu-action,
body.light-mode #mobileMenu .mobile-nav-link,
body.light-mode #mobileMenu .mobile-menu-close,
body.light-mode #mobileMenu .mobile-menu-logo img,
body.light-mode #mobileMenu .mobile-nav-icon {
  background: rgba(255,255,255,0.76) !important;
}

body.light-mode #mobileMenu .mobile-menu-intro-title,
body.light-mode #mobileMenu .mobile-nav-label,
body.light-mode #mobileMenu .mobile-menu-action,
body.light-mode #mobileMenu .mobile-menu-close {
  color: #0f172a !important;
}

body.light-mode #mobileMenu .mobile-menu-subtitle,
body.light-mode #mobileMenu .mobile-menu-intro-text,
body.light-mode #mobileMenu .mobile-nav-desc {
  color: rgba(15, 23, 42, 0.7) !important;
}

@media (max-width: 768px) {
  #mobileMenu {
    width: min(88vw, 348px) !important;
    padding: 14px 12px 12px !important;
  }

  #mobileMenu .mobile-menu-intro-title {
    font-size: 18px !important;
  }

  #mobileMenu .mobile-menu-intro-text {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #mobileMenu .mobile-menu-actions {
    gap: 8px !important;
  }

  #mobileMenu .mobile-menu-action,
  #mobileMenu .mobile-nav-link {
    box-shadow: none !important;
  }
}

/* ========== MOBILE HEADER LAYOUT FIX ========== */
@media (max-width: 768px) {
  #mainHeaderNav {
    width: min(380px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    top: 12px !important;
    border-radius: 22px !important;
  }

  #mainHeaderNav > div.w-full {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 64px !important;
    padding: 10px 14px !important;
  }

  #mainHeaderNav .mobile-nav-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }

  #mainHeaderNav .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #mainHeaderNav .nav-logo img {
    display: block !important;
    width: auto !important;
    height: 28px !important;
    max-width: min(45vw, 150px) !important;
    object-fit: contain !important;
    box-shadow: none !important;
  }

  #mainHeaderNav .nav-right-icons {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 0 !important;
    justify-content: flex-end !important;
  }

  #mainHeaderNav #mobileMenuBtn,
  #mobileMenuBtn {
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    border-radius: 15px !important;
    flex: 0 0 46px !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #mobileMenuBtn .mobile-menu-btn-stack {
    width: 100% !important;
    height: 100% !important;
    justify-content: center !important;
  }

  #mobileMenuBtn .mobile-menu-btn-copy,
  #mobileMenuBtn .mobile-menu-btn-label,
  #mobileMenuBtn .mobile-menu-btn-subtitle {
    display: none !important;
  }

  #mobileMenuBtn .mobile-menu-btn-icon {
    width: 20px !important;
    height: 16px !important;
    min-width: 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #mobileMenuBtn .mobile-menu-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke-width: 2.1 !important;
  }
}

@media (max-width: 480px) {
  #mainHeaderNav {
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
  }

  #mainHeaderNav > div.w-full {
    gap: 10px !important;
    padding: 9px 12px !important;
    min-height: 60px !important;
  }

  #mainHeaderNav .nav-logo img {
    height: 26px !important;
    max-width: min(48vw, 136px) !important;
  }

  #mainHeaderNav #mobileMenuBtn,
  #mobileMenuBtn {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ========== MOBILE TYPOGRAPHY SAFETY ========== */
@media (max-width: 768px) {
  #hero-description,
  #about p.text-gray-400,
  #skills-sub,
  #projects-sub,
  #boost-sub,
  #contact-sub,
  #faq p.text-gray-400,
  #freefire p.text-gray-400 {
    font-size: 14px !important;
    line-height: 1.78 !important;
    letter-spacing: 0 !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  #about #about-p1,
  #about #about-p2 {
    max-width: 30ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: 2px !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
    text-align: left !important;
    text-align-last: auto !important;
    letter-spacing: 0 !important;
    word-spacing: -0.01em;
  }

  #about .text-gray-400.text-sm,
  #projects .text-gray-400.text-sm,
  #freefire .text-gray-400.text-sm,
  #contact .text-gray-400.text-sm,
  #faq .text-gray-400.text-sm {
    font-size: 13px !important;
    line-height: 1.72 !important;
    letter-spacing: 0 !important;
  }

  #about .section-title,
  #projects .section-title,
  #boost .section-title,
  #contact .section-title,
  #faq .section-title,
  #skills .section-title {
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
  }
}

@media (max-width: 480px) {
  #hero-description,
  #about p.text-gray-400,
  #skills-sub,
  #projects-sub,
  #boost-sub,
  #contact-sub,
  #faq p.text-gray-400,
  #freefire p.text-gray-400 {
    font-size: 13.5px !important;
    line-height: 1.82 !important;
  }

  #about #about-p1,
  #about #about-p2 {
    max-width: 28ch !important;
    font-size: 13.5px !important;
    line-height: 1.88 !important;
  }
}

@media (max-width: 560px) {
  #home,
  #about,
  #skills,
  #projects,
  #boost,
  #freefire,
  #faq,
  #contact {
    padding-inline: 16px !important;
  }

  #home .flex.flex-col.sm\:flex-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  #hero-btn1,
  #hero-btn2 {
    width: 100%;
    font-size: 14px !important;
  }

  .section-title,
  #projects-title,
  #boost-title,
  #contact-title,
  #about-title,
  #skills-title {
    font-size: clamp(1.6rem, 7.8vw, 2rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 12px !important;
  }

  #hero-description,
  #projects-sub,
  #boost-sub,
  #contact-sub,
  #skills-sub,
  #faq p.text-gray-400,
  #about p.text-gray-400,
  #freefire p.text-gray-400 {
    max-width: 32ch !important;
    font-size: 0.95rem !important;
  }

  #hero-description {
    max-width: 30ch !important;
    text-align: justify !important;
    text-align-last: center !important;
    line-height: 1.8 !important;
    text-wrap: pretty !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  #about #about-p1,
  #about #about-p2 {
    max-width: 31ch !important;
    text-align: justify !important;
    text-align-last: center !important;
    line-height: 1.82 !important;
  }

  .project-card .h-48,
  .project-card [style*='height:200px'] {
    height: 196px !important;
  }

  .project-card h3 {
    min-height: auto;
    font-size: 17px !important;
  }

  .project-card p {
    -webkit-line-clamp: 4;
  }

  #projects .project-card .flex.gap-3 > *,
  #freefire .project-card .flex.gap-3 > * {
    flex: 0 0 auto;
  }

  .contact-card-new {
    padding: 15px !important;
    min-height: 88px;
  }
}

@media (max-width: 420px) {
  #home .flex.flex-col.sm\:flex-row {
    grid-template-columns: 1fr;
  }

  #hero-btn1,
  #hero-btn2,
  .project-card .flex.gap-3 a,
  .project-card .flex.gap-3 button {
    white-space: normal;
  }

  #projects .project-card .flex.gap-3 > *,
  #freefire .project-card .flex.gap-3 > * {
    flex-basis: auto;
  }
}

#mobileMenu button[onclick*='openOptimizeSubpage'] {
  display: none !important;
}

/* ========== MOBILE MENU REFINEMENT ========== */
#mobileMenuBtn {
  width: auto !important;
  min-width: 120px !important;
  height: 48px !important;
  min-height: 48px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.11), rgba(255,255,255,0.045)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 14px 32px rgba(6, 6, 18, 0.22) !important;
  padding: 0 8px 0 14px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#mobileMenuBtn .mobile-menu-btn-stack {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#mobileMenuBtn .mobile-menu-btn-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

#mobileMenuBtn .mobile-menu-btn-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}

#mobileMenuBtn .mobile-menu-btn-subtitle {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
}

#mobileMenuBtn .mobile-menu-btn-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

#mobileMenuBtn svg,
#mobileMenuBtn .ui-icon {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2.15 !important;
}

#mobileMenu {
  background:
    radial-gradient(circle at top right, rgba(121, 92, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(12, 12, 28, 0.985), rgba(7, 8, 20, 0.985)) !important;
}

#mobileMenu .mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#mobileMenu .mobile-menu-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

#mobileMenu .mobile-menu-logo img {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 24px rgba(8, 7, 24, 0.28);
}

#mobileMenu .mobile-menu-brandcopy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#mobileMenu .mobile-menu-eyebrow {
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(167,139,250,0.86);
}

#mobileMenu .mobile-menu-subtitle {
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255,255,255,0.62);
}

#mobileMenu .mobile-menu-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  aspect-ratio: 1 / 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #fff;
  flex: 0 0 auto;
}

#mobileMenu .mobile-menu-close .ui-icon,
#mobileMenu .mobile-menu-close svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  flex-shrink: 0;
}

#mobileMenu .mobile-menu-body {
  gap: 18px !important;
}

#mobileMenu .mobile-menu-intro {
  padding: 4px 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#mobileMenu .mobile-menu-intro-badge {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.22);
  color: rgba(221, 214, 254, 0.96);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#mobileMenu .mobile-menu-intro-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  font-weight: 800;
  color: #fbfbff;
}

#mobileMenu .mobile-menu-intro-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.58);
  max-width: 30ch;
}

/* ========== ROUND ICON BUTTON FIX ========== */
#vmpIconBubble,
.vmp-btn,
.vmp-play-btn,
.cmbClose,
.pnClose,
.v3-announce-close,
#mobileMenuBtn,
#mobileMenu .mobile-menu-close,
#imgLightbox .lb-close,
#subpageCloseBtn,
.sp-nav-close,
.decor-showcase-primary .decor-carousel-btn {
  aspect-ratio: 1 / 1 !important;
  min-width: unset !important;
  min-height: unset !important;
  line-height: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

.vmp-btn,
.vmp-play-btn,
#vmpIconBubble,
.cmbClose,
.pnClose,
.v3-announce-close,
#imgLightbox .lb-close,
#subpageCloseBtn,
.sp-nav-close {
  border-radius: 999px !important;
}

.vmp-play-btn {
  width: 44px !important;
  height: 44px !important;
}

.vmp-btn {
  width: 36px !important;
  height: 36px !important;
}

.vmp-btn .ui-icon,
.vmp-btn svg,
.vmp-play-btn .ui-icon,
.vmp-play-btn svg,
#vmpIconBubble .ui-icon,
#vmpIconBubble svg,
#mobileMenuBtn .ui-icon,
#mobileMenuBtn svg,
#mobileMenu .mobile-menu-close .ui-icon,
#mobileMenu .mobile-menu-close svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#mobileMenu .mobile-menu-section-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 2px 2px 0;
}

#mobileMenu .mobile-menu-actions {
  gap: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#mobileMenu .mobile-menu-action {
  min-height: 54px !important;
  padding: 14px 15px !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035)) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(8, 8, 22, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
}

#mobileMenu .mobile-menu-action .ui-icon-row {
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
}

#mobileMenu .mobile-menu-action .ui-icon {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
}

#mobileMenu .mobile-menu-action-value {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.36);
}

#mobileMenu .mobile-menu-links {
  gap: 10px !important;
}

#mobileMenu .mobile-nav-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 15px !important;
  text-decoration: none !important;
  color: #f3f2ff !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 28px rgba(6, 7, 18, 0.18) !important;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

#mobileMenu .mobile-nav-link:active,
#mobileMenu .mobile-nav-link:hover {
  transform: translateY(-1px);
  border-color: rgba(129, 140, 248, 0.32) !important;
  background: linear-gradient(180deg, rgba(99,102,241,0.12), rgba(255,255,255,0.04)) !important;
  box-shadow: 0 18px 34px rgba(8, 9, 22, 0.24) !important;
}

#mobileMenu .mobile-nav-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  color: #eef2ff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 48%),
    linear-gradient(135deg, rgba(99,102,241,0.28), rgba(168,85,247,0.18));
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

#mobileMenu .mobile-nav-icon .ui-icon {
  width: 19px !important;
  height: 19px !important;
  stroke-width: 2 !important;
}

#mobileMenu .mobile-nav-meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#mobileMenu .mobile-nav-label {
  font-size: 15px;
  line-height: 1.2;
  font-weight: 700;
  color: #fbfbff;
}

#mobileMenu .mobile-nav-desc {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255,255,255,0.5);
}

#mobileMenu .mobile-nav-arrow {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  color: rgba(255,255,255,0.32);
}

body.light-mode #mobileMenu {
  background:
    radial-gradient(circle at top right, rgba(99,102,241,0.12), transparent 30%),
    linear-gradient(180deg, rgba(252,252,255,0.99), rgba(245,246,255,0.99)) !important;
}

body.light-mode #mobileMenu .mobile-menu-subtitle,
body.light-mode #mobileMenu .mobile-nav-desc,
body.light-mode #mobileMenu .mobile-menu-action-value,
body.light-mode #mobileMenu .mobile-menu-section-label,
body.light-mode #mobileMenu .mobile-menu-intro-text {
  color: rgba(26,26,62,0.52) !important;
}

body.light-mode #mobileMenu .mobile-menu-close,
body.light-mode #mobileMenu .mobile-menu-action,
body.light-mode #mobileMenu .mobile-nav-link {
  color: #17173a !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,247,255,0.92)) !important;
  border-color: rgba(99,102,241,0.14) !important;
  box-shadow: 0 12px 26px rgba(99,102,241,0.1) !important;
}

body.light-mode #mobileMenu .mobile-nav-label,
body.light-mode #mobileMenu .mobile-menu-eyebrow,
body.light-mode #mobileMenu .mobile-menu-intro-title {
  color: #23235a !important;
}

body.light-mode #mobileMenu .mobile-menu-intro-badge {
  background: rgba(99,102,241,0.12) !important;
  border-color: rgba(99,102,241,0.16) !important;
  color: #312e81 !important;
}

body.light-mode #mobileMenuBtn {
  background:
    radial-gradient(circle at top left, rgba(99,102,241,0.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(244,246,255,0.92)) !important;
  border-color: rgba(99,102,241,0.12) !important;
  box-shadow: 0 14px 28px rgba(99,102,241,0.14) !important;
}

body.light-mode #mobileMenuBtn .mobile-menu-btn-label {
  color: #23235a !important;
}

body.light-mode #mobileMenuBtn .mobile-menu-btn-subtitle {
  color: rgba(35,35,90,0.52) !important;
}

body.light-mode #mobileMenuBtn .mobile-menu-btn-icon {
  background: rgba(99,102,241,0.08) !important;
  border-color: rgba(99,102,241,0.12) !important;
  color: #312e81 !important;
}

body.light-mode #mobileMenu .mobile-nav-icon {
  color: #3730a3 !important;
  background: linear-gradient(135deg, rgba(99,102,241,0.14), rgba(168,85,247,0.08)) !important;
  border-color: rgba(99,102,241,0.12) !important;
}

@media (max-width: 768px) {
  #mobileMenu {
    width: min(354px, calc(100vw - 12px)) !important;
    padding: 22px 16px calc(24px + env(safe-area-inset-bottom)) !important;
    border-top-left-radius: 28px;
    border-bottom-left-radius: 28px;
  }

  #mobileMenu > div:first-child {
    margin: -22px -16px 16px !important;
    padding: calc(16px + env(safe-area-inset-top)) 16px 14px !important;
    background: linear-gradient(180deg, rgba(14,12,34,0.98), rgba(11,10,28,0.92)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  body.light-mode #mobileMenu > div:first-child {
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,247,255,0.94)) !important;
    border-bottom-color: rgba(99,102,241,0.1) !important;
  }

  #mobileMenu .mobile-menu-body {
    gap: 16px !important;
  }

  #mobileMenu .mobile-menu-intro-title {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  #mobileMenuBtn {
    min-width: 108px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 7px 0 12px !important;
    border-radius: 16px !important;
  }

  #mobileMenuBtn .mobile-menu-btn-label {
    font-size: 11px;
  }

  #mobileMenuBtn .mobile-menu-btn-subtitle {
    font-size: 9px;
  }

  #mobileMenuBtn .mobile-menu-btn-icon {
    width: 30px;
    height: 30px;
    border-radius: 11px;
  }

  #mobileMenu {
    width: min(338px, calc(100vw - 10px)) !important;
  }

  #mobileMenu .mobile-menu-actions {
    grid-template-columns: 1fr 1fr !important;
  }

  #mobileMenu .mobile-menu-action {
    min-height: 50px !important;
    padding: 12px 13px !important;
  }

  #mobileMenu .mobile-nav-link {
    min-height: 68px;
    padding: 13px 14px !important;
  }

  #mobileMenu .mobile-nav-icon {
    width: 41px;
    height: 41px;
    border-radius: 15px;
  }

  #mobileMenu .mobile-nav-label {
    font-size: 14px;
  }

  #mobileMenu .mobile-nav-desc {
    font-size: 11px;
  }

  #mobileMenu .mobile-menu-intro-text {
    font-size: 12px;
  }
}

/* ========== BUTTON / SLIDER HOVER TUNING ========== */
.vmp-vol-slider,
.vmp-vol-slider:hover,
.vmp-vol-slider:focus,
.vmp-vol-slider:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
  transform: none !important;
  filter: none !important;
}

.vmp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  filter: none !important;
}

.vmp-vol-slider::-moz-range-thumb {
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
  filter: none !important;
}

.vmp-vol-slider::-moz-range-track {
  box-shadow: none !important;
  border: none !important;
}

button,
[type="button"],
[type="submit"],
[type="reset"],
.btn-primary,
.btn-outline,
.btn-scale,
#backToTop,
#payNowBtn,
.cmbClose,
.pnClose,
.cmb-btn,
#themeToggle,
#searchBtn,
#settingsBtn,
.social-icon,
.social-icon-hover,
.v3-announce-btn-primary,
.v3-announce-close,
.vmp-btn,
.vmp-play-btn {
  outline: none !important;
}

button:hover,
[type="button"]:hover,
[type="submit"]:hover,
[type="reset"]:hover,
.btn-primary:hover,
.btn-outline:hover,
.btn-scale:hover,
#backToTop:hover,
#payNowBtn:hover,
.cmbClose:hover,
.pnClose:hover,
.cmb-btn:hover,
#themeToggle:hover,
#searchBtn:hover,
#settingsBtn:hover,
.social-icon:hover,
.social-icon-hover:hover,
.v3-announce-btn-primary:hover,
.v3-announce-close:hover,
.vmp-btn:hover,
.vmp-play-btn:hover {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
}

button:focus,
button:focus-visible,
[type="button"]:focus,
[type="button"]:focus-visible,
[type="submit"]:focus,
[type="submit"]:focus-visible,
[type="reset"]:focus,
[type="reset"]:focus-visible,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-outline:focus,
.btn-outline:focus-visible,
.btn-scale:focus,
.btn-scale:focus-visible,
#backToTop:focus,
#backToTop:focus-visible,
#payNowBtn:focus,
#payNowBtn:focus-visible,
.cmbClose:focus,
.cmbClose:focus-visible,
.pnClose:focus,
.pnClose:focus-visible,
.cmb-btn:focus,
.cmb-btn:focus-visible,
#themeToggle:focus,
#themeToggle:focus-visible,
#searchBtn:focus,
#searchBtn:focus-visible,
#settingsBtn:focus,
#settingsBtn:focus-visible,
.social-icon:focus,
.social-icon:focus-visible,
.social-icon-hover:focus,
.social-icon-hover:focus-visible,
.v3-announce-btn-primary:focus,
.v3-announce-btn-primary:focus-visible,
.v3-announce-close:focus,
.v3-announce-close:focus-visible,
.vmp-btn:focus,
.vmp-btn:focus-visible,
.vmp-play-btn:focus,
.vmp-play-btn:focus-visible {
  box-shadow: none !important;
  outline: none !important;
}

.social-icon:hover,
.social-icon-hover:hover {
  transform: translateY(-3px) scale(1.15) !important;
}

#themeToggle:hover,
#searchBtn:hover,
#settingsBtn:hover,
.cmbClose:hover,
.pnClose:hover,
.vmp-btn:hover,
.vmp-play-btn:hover {
  transform: scale(1.15) !important;
}

.btn-primary:hover,
.btn-outline:hover,
.btn-scale:hover,
#payNowBtn:hover,
.cmb-btn:hover,
.v3-announce-btn-primary:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

#hero-btn1,
#hero-btn1:hover,
#hero-btn1:focus,
#hero-btn1:focus-visible {
  color: #ffffff !important;
}

#backToTop:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

.cmbClose:hover,
.pnClose:hover,
.v3-announce-close:hover,
.btn-outline:hover,
.cmb-btn:hover {
  border-color: rgba(255,255,255,0.18) !important;
}

body.light-mode .cmbClose:hover,
body.light-mode .pnClose:hover,
body.light-mode .v3-announce-close:hover,
body.light-mode .btn-outline:hover,
body.light-mode .cmb-btn:hover {
  border-color: rgba(99,102,241,0.2) !important;
}

button[style*="transition:all"],
button[style*="transition: all"],
a[style*="cursor:pointer"][style*="border-radius"],
a[style*="display:inline-flex"][style*="border-radius"],
a[style*="display: inline-flex"][style*="border-radius"] {
  box-shadow: none !important;
  outline: none !important;
}

button[style*="transition:all"]:hover,
button[style*="transition: all"]:hover,
a[style*="cursor:pointer"][style*="border-radius"]:hover,
a[style*="display:inline-flex"][style*="border-radius"]:hover,
a[style*="display: inline-flex"][style*="border-radius"]:hover {
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  transform: scale(1.15) !important;
}

button[style*="padding:7px 16px"][style*="border-radius:999px"]:hover,
a[style*="padding:12px 28px"][style*="border-radius:999px"]:hover,
a[style*="padding:14px 36px"][style*="border-radius:999px"]:hover {
  transform: translateY(-2px) scale(1.03) !important;
}

button[style*="border:1px solid rgba(255,255,255,0.15)"]:hover,
button[style*="border: 1px solid rgba(255,255,255,0.15)"]:hover,
button[style*="border:1px solid rgba(255,255,255,0.2)"]:hover,
button[style*="border: 1px solid rgba(255,255,255,0.2)"]:hover {
  border-color: rgba(255,255,255,0.18) !important;
}

body.light-mode button[style*="border:1px solid rgba(255,255,255,0.15)"]:hover,
body.light-mode button[style*="border: 1px solid rgba(255,255,255,0.15)"]:hover,
body.light-mode button[style*="border:1px solid rgba(255,255,255,0.2)"]:hover,
body.light-mode button[style*="border: 1px solid rgba(255,255,255,0.2)"]:hover {
  border-color: rgba(99,102,241,0.2) !important;
}

/* ========== TOP SCROLL BAR CLEANUP ========== */
#scrollProgress,
body.light-mode #scrollProgress,
#scrollProgress.near-end{
  box-shadow: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* ========== MARQUEE PILL CLEANUP ========== */
.marquee-pill,
.marquee-pill:hover,
body.light-mode .marquee-pill,
body.light-mode .marquee-pill:hover{
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  border-color: rgba(120,118,255,0.14) !important;
}

.marquee-pill::before,
.marquee-pill::after,
.marquee-pill:hover::before,
.marquee-pill:hover::after,
body.light-mode .marquee-pill::before,
body.light-mode .marquee-pill::after{
  box-shadow: none !important;
  filter: none !important;
}

body.light-mode .marquee-pill,
body.light-mode .marquee-pill:hover {
  border-color: rgba(99,102,241,0.2) !important;
}

/* ========== SKILLS CARD SOFTENING ========== */
#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl {
  background: var(--pc-surface-soft) !important;
  border-color: rgba(155, 126, 255, 0.09) !important;
  box-shadow: var(--pc-shadow) !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl:hover {
  box-shadow: var(--pc-shadow) !important;
  transform: translateY(-1px) !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-card-border-anim::before {
  opacity: 0 !important;
  animation: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-card-border-anim::after {
  background: transparent !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-shimmer {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-grid {
  opacity: 0.04 !important;
  animation: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-orb {
  display: none !important;
  filter: none !important;
  opacity: 0 !important;
  animation: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-spark {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-item {
  background: rgba(104, 76, 196, 0.08) !important;
  border-color: rgba(155, 126, 255, 0.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body.light-mode #skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl {
  background: var(--pc-surface-soft) !important;
  border-color: rgba(99,102,241,0.12) !important;
  box-shadow: var(--pc-shadow) !important;
}

body.light-mode #skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-card-border-anim::after {
  background: transparent !important;
}

body.light-mode #skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-item {
  background: rgba(104, 76, 196, 0.06) !important;
  border-color: rgba(99,102,241,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

/* ========== STANDALONE PAGE CLEANUP ========== */
#boost,
#freefire,
#subpagePanel,
#subpageCloseBtn,
#spFallingCanvas,
.sp-bg-orb,
#dichVuPanel {
  display: none !important;
}

/* ========== MOBILE LAYOUT REWORK ========== */
@media (max-width: 768px) {
  .decor-showcase-primary {
    padding: 0 10px 10px !important;
    margin-top: 0 !important;
  }

  .decor-showcase-primary .decor-showcase-inner,
  .decor-showcase-secondary .decor-showcase-inner {
    max-width: 100% !important;
  }

  .decor-showcase-primary .decor-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "hero hero"
      "left right"
      "left right" !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  .decor-showcase-primary .decor-side,
  .decor-showcase-primary .decor-stack {
    max-width: none !important;
  }

  .decor-showcase-primary .decor-carousel {
    grid-area: hero;
    min-height: 0;
    aspect-ratio: 16 / 9 !important;
    border-radius: 18px !important;
    overflow: hidden;
    background: transparent !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
  }

  .decor-showcase-primary .decor-carousel-viewport,
  .decor-showcase-primary .decor-carousel-track,
  .decor-showcase-primary .decor-slide {
    height: 100%;
  }

  .decor-showcase-primary .decor-slide img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .decor-showcase-primary .decor-side {
    grid-area: left;
    align-self: stretch;
    margin-top: -28px !important;
    transform: none !important;
  }

  .decor-showcase-primary .decor-side a,
  .decor-showcase-primary .decor-side img {
    height: 100%;
  }

  .decor-showcase-primary .decor-side a {
    aspect-ratio: 0.72 / 1 !important;
    overflow: hidden;
    border-radius: 18px !important;
  }

  .decor-showcase-primary .decor-side img {
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .decor-showcase-primary .decor-stack {
    grid-area: right;
    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
    align-self: stretch;
    margin-top: -28px !important;
    transform: none !important;
  }

  .decor-showcase-primary .decor-stack a,
  .decor-showcase-primary .decor-stack img {
    height: 100%;
  }

  .decor-showcase-primary .decor-stack a {
    aspect-ratio: 1.62 / 1 !important;
    overflow: hidden;
    border-radius: 18px !important;
  }

  .decor-showcase-primary .decor-stack img {
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 18px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .decor-showcase-primary .decor-carousel-btn {
    width: 32px !important;
    height: 48px !important;
    border-radius: 999px !important;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(10px);
  }

  .decor-showcase-primary .decor-carousel-btn svg,
  .decor-showcase-primary .decor-carousel-btn .ui-icon {
    width: 14px !important;
    height: 14px !important;
  }

  .decor-showcase-primary .decor-carousel-btn-prev {
    left: 10px !important;
  }

  .decor-showcase-primary .decor-carousel-btn-next {
    right: 10px !important;
  }

  .decor-showcase-primary .decor-carousel-dots {
    bottom: 10px !important;
  }

  .hero-social-row {
    margin-bottom: 4px !important;
  }

  .decor-showcase-primary a,
  .decor-showcase-primary img,
  .decor-showcase-primary .decor-slide,
  .decor-showcase-primary .decor-carousel-viewport,
  .decor-showcase-primary .decor-side,
  .decor-showcase-primary .decor-stack {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
  }

  .decor-showcase-secondary {
    padding: 10px 12px 0 !important;
  }

  .decor-showcase-secondary .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "hero hero"
      "left rightTop"
      "left rightBottom" !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1) { grid-area: hero; }
  .decor-showcase-secondary .decor-card-row a:nth-child(2) { grid-area: left; }
  .decor-showcase-secondary .decor-card-row a:nth-child(3) { grid-area: rightTop; }
  .decor-showcase-secondary .decor-card-row a:nth-child(4) { grid-area: rightBottom; }
  .decor-showcase-secondary .decor-card-row a:nth-child(5) { display: none !important; }

  .decor-showcase-secondary .decor-card-row img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    border-radius: 22px !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1) img {
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(3) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(4) img {
    aspect-ratio: 1 / 1 !important;
  }

  #home .max-w-4xl {
    max-width: 340px !important;
  }

  #hero-title {
    letter-spacing: -0.05em !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #hero-subtitle,
  #hero-description {
    text-wrap: balance;
  }

  #home .flex.flex-col.sm\:flex-row {
    align-items: stretch !important;
    gap: 12px !important;
  }

  #hero-btn1,
  #hero-btn2 {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    padding: 14px 18px !important;
  }

  #projects {
    padding: 56px 12px 24px !important;
  }

  #projects .text-center.mb-16 {
    margin-bottom: 18px !important;
  }

  #projects-title {
    font-size: 30px !important;
    margin-bottom: 8px !important;
  }

  #projects-sub {
    max-width: 28ch !important;
    margin-inline: auto;
  }

  #projects .grid {
    gap: 14px !important;
  }

  #projects .project-card {
    border-radius: 26px !important;
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transform: none !important;
    filter: none !important;
    box-shadow: 0 18px 38px rgba(4, 8, 28, 0.34) !important;
  }

  #projects .project-card::before,
  #projects .project-card::after,
  #projects .project-card.card-glow::before,
  #projects .project-card.card-glow::after,
  #projects .project-card.light-reactive::before,
  #projects .project-card.light-reactive::after {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #projects .project-card:hover,
  #projects .project-card:active,
  #projects .project-card:focus-within {
    transform: none !important;
    filter: none !important;
    box-shadow: 0 18px 38px rgba(4, 8, 28, 0.34) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: rgba(255, 255, 255, 0.055) !important;
  }

  #projects .project-card.card-glow.active,
  #projects .project-card.card-glow.active:hover,
  #projects .project-card.card-glow.active:active,
  #projects .project-card.light-reactive.active,
  #projects .project-card.light-reactive.active:hover,
  #projects .project-card.light-reactive.active:active {
    background: rgba(255, 255, 255, 0.055) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 18px 38px rgba(4, 8, 28, 0.34) !important;
    filter: none !important;
    transform: none !important;
  }

  #projects .project-card.card-glow.active::before,
  #projects .project-card.card-glow.active::after,
  #projects .project-card.light-reactive.active::before,
  #projects .project-card.light-reactive.active::after {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #projects .project-card:hover h3,
  #projects .project-card:hover p,
  #projects .project-card:hover a,
  #projects .project-card:hover .text-glow,
  #projects .project-card:hover .light-reactive {
    color: inherit !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #projects .project-card:active h3,
  #projects .project-card:active p,
  #projects .project-card:active a,
  #projects .project-card:active .text-glow,
  #projects .project-card:active .light-reactive,
  #projects .project-card:focus-within h3,
  #projects .project-card:focus-within p,
  #projects .project-card:focus-within a,
  #projects .project-card:focus-within .text-glow,
  #projects .project-card:focus-within .light-reactive,
  #projects .project-card.card-glow.active h3,
  #projects .project-card.card-glow.active p,
  #projects .project-card.card-glow.active a,
  #projects .project-card.card-glow.active .text-glow,
  #projects .project-card.card-glow.active .light-reactive,
  #projects .project-card.light-reactive.active h3,
  #projects .project-card.light-reactive.active p,
  #projects .project-card.light-reactive.active a,
  #projects .project-card.light-reactive.active .text-glow,
  #projects .project-card.light-reactive.active .light-reactive {
    color: inherit !important;
    text-shadow: none !important;
    -webkit-text-fill-color: currentColor !important;
  }

  #projects .project-card .h-48,
  #projects .project-card [style*='height:200px'] {
    height: 232px !important;
    border-radius: 0 !important;
  }

  #projects .project-image {
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
  }

  #projects .project-card .p-6,
  #projects .project-card .p-5 {
    padding: 18px 18px 20px !important;
  }

  #projects .project-card .flex.gap-3 {
    gap: 16px !important;
    flex-wrap: wrap;
  }

  #projects .project-card a,
  #projects .project-card a:hover,
  #projects .project-card a:active,
  #projects .project-card a:focus,
  #projects .project-card a:focus-visible,
  #projects .project-card button,
  #projects .project-card button:hover,
  #projects .project-card button:active,
  #projects .project-card button:focus,
  #projects .project-card button:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  #projects .project-card,
  #projects .project-card * {
    -webkit-tap-highlight-color: transparent;
  }

  #projects .project-card *,
  #projects .project-card:hover *,
  #projects .project-card:active *,
  #projects .project-card:focus-within * {
    transition-property: none !important;
    animation: none !important;
    filter: none !important;
  }

  #skills .mt-8.card-glow.rounded-2xl {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 34px rgba(7, 10, 30, 0.28) !important;
  }

  #skills [data-tools-heading] {
    font-size: 17px !important;
    margin-bottom: 16px !important;
  }

  #skills .mt-8.card-glow.rounded-2xl > .flex.flex-wrap.justify-center.gap-4 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    justify-content: stretch !important;
  }

  #skills .tool-badge {
    min-width: 0 !important;
    width: 100% !important;
    display: inline-flex !important;
    justify-content: center;
    text-align: center;
    padding: 12px 14px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: rgba(245, 244, 255, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
  }
}

/* ========== PRESS SCALE TUNING ========== */
@media (hover: none) and (pointer: coarse) {
  button:active,
  a:active,
  [onclick]:active,
  .mobile-nav-link:active,
  .mobile-menu-action:active,
  .ghost-btn:active,
  .primary-btn:active,
  .btn-primary:active,
  .btn-outline:active,
  .btn-scale:active,
  .free-nav-btn:active,
  .lb-btn:active,
  .welcome-btn:active,
  .splash-click-btn:active,
  .spt-item:active,
  .hov-scale:active {
    transform: scale(0.96) !important;
  }

  .btn-primary:hover,
  .btn-outline:hover,
  .btn-scale:hover,
  .ghost-btn:hover,
  .primary-btn:hover,
  .nav-link:hover,
  .social-icon:hover,
  .social-icon-hover:hover,
  .skill-item:hover,
  .tool-badge:hover,
  .stat-card:hover,
  .card-hover:hover,
  .timeline-item:hover,
  .project-card:hover,
  .dl-card:hover,
  .faq-item:hover,
  .contact-card-new:hover,
  .boost-order-panel:hover,
  .mobile-nav-link:hover,
  .mobile-menu-action:hover,
  .cmb-btn:hover,
  .v3-announce-btn-primary:hover,
  .lb-btn:hover,
  .spt-item:hover,
  #payNowBtn:hover,
  #backToTop:hover,
  #themeToggle:hover,
  #langToggle:hover,
  .nav-pay-btn:hover,
  .v3-announce-close:hover,
  .cmbClose:hover,
  .pnClose:hover,
  #v3AnnImg:hover img {
    transform: none !important;
  }

  #about .animate-fade-in-right > .card-glow.hov-scale,
  #about .animate-fade-in-right > .card-glow.hov-scale:hover,
  #about .animate-fade-in-right > .card-glow.hov-scale:active,
  #about .animate-fade-in-right > .card-glow.hov-scale:focus,
  #about .animate-fade-in-right > .card-glow.hov-scale:focus-within {
    transform: none !important;
  }

  #about .timeline-item:hover,
  #about .timeline-item:active,
  #about .timeline-item:focus,
  #about .timeline-item:focus-within {
    transform: scale(1) !important;
  }

  #about .timeline-item:last-child::after {
    display: block !important;
    top: 24px !important;
    height: calc(100% - 24px) !important;
  }
}

/* ========== NTXV MUSIC + CONTROL POLISH ========== */
#vipMusicPlayer.vmp-awake {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

#vipMusicPlayer.vmp-compact {
  transform: translate3d(0,0,0) scale(0.5) !important;
  opacity: 0.78 !important;
}

#vmpPanel {
  width: min(360px, calc(100vw - 28px)) !important;
  padding: 14px !important;
  gap: 12px !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(29,185,84,0.18), transparent 34%),
    linear-gradient(145deg, rgba(11,12,24,0.98), rgba(7,8,18,0.98)) !important;
  border-color: rgba(255,255,255,0.16) !important;
}

.vmp-spotify-embed {
  width: 100%;
  height: 152px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
}

.vmp-spotify-embed iframe {
  display: block;
  width: 100%;
  height: 152px;
  border: 0;
  border-radius: 12px;
}

.vmp-track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.vmp-track-label {
  color: rgba(235,246,240,0.68);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vmp-track-select {
  min-width: 0;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background-color: rgba(8,10,20,0.96);
  color: #f4fbf7;
  padding: 0 30px 0 12px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  outline: none;
  cursor: pointer;
  appearance: none;
  color-scheme: dark;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.8) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.8) 50%, transparent 50%);
  background-position: calc(100% - 17px) 14px, calc(100% - 12px) 14px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.vmp-track-select option {
  color: #f4fbf7;
  background: #0b0d19;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.vmp-track-select option:checked {
  color: #ffffff;
  background: #132219;
}

.vmp-control-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.vmp-power-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.075);
  color: #fff;
  cursor: pointer;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), background 0.22s ease, border-color 0.22s ease;
}

.vmp-power-toggle:hover {
  transform: translateY(-1px) scale(1.02) !important;
  background: rgba(255,255,255,0.12) !important;
}

.vmp-power-light {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: 0 0 0 4px rgba(156,163,175,0.12);
  flex: 0 0 auto;
}

.vmp-power-text {
  flex: 1;
  min-width: 0;
  text-align: left;
  font-size: 12px;
  font-weight: 800;
}

.vmp-power-track {
  width: 42px;
  height: 24px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  flex: 0 0 auto;
}

.vmp-power-track span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

.vmp-power-toggle[aria-pressed="true"] {
  border-color: rgba(29,185,84,0.42);
  background: linear-gradient(135deg, rgba(29,185,84,0.22), rgba(99,102,241,0.16)) !important;
}

.vmp-power-toggle[aria-pressed="true"] .vmp-power-light {
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,0.14), 0 0 16px rgba(34,197,94,0.72);
}

.vmp-power-toggle[aria-pressed="true"] .vmp-power-track {
  background: linear-gradient(135deg, #1db954, #22c55e);
}

.vmp-power-toggle[aria-pressed="true"] .vmp-power-track span {
  transform: translateX(18px);
}

.vmp-disc {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.72) 0 13%, transparent 14%),
    conic-gradient(from 120deg, var(--vmp-a), var(--vmp-b), #111827, var(--vmp-a));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.16), 0 8px 22px rgba(0,0,0,0.32);
}

.vmp-disc-hole {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 5px rgba(0,0,0,0.42);
}

.vmp-disc-mark,
.vmp-disc-num {
  position: absolute;
  color: rgba(255,255,255,0.96);
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}

.vmp-disc-mark {
  left: 7px;
  top: 6px;
  font-size: 12px;
}

.vmp-disc-num {
  right: 6px;
  bottom: 5px;
  font-size: 9px;
}

.vmp-art.spinning {
  animation: none !important;
}

.vmp-cover {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 14%, rgba(255,255,255,0.24), transparent 32%),
    linear-gradient(135deg, var(--vmp-a), var(--vmp-b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 20px rgba(0,0,0,0.28);
}

.vmp-cover-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.vmp-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.24), transparent 42%, rgba(0,0,0,0.16));
  pointer-events: none;
}

.vmp-cover-fallback {
  display: none;
}

.vmp-cover-missing .vmp-cover-fallback {
  display: inline-flex;
}

.vmp-art .vmp-cover {
  width: 44px;
  height: 44px;
}

#vmpIconBubble #vmpBubbleIcon .vmp-disc {
  width: 32px;
  height: 32px;
}

#vmpIconBubble #vmpBubbleIcon .vmp-cover {
  width: 40px;
  height: 40px;
  border-radius: 999px;
}

#vipMusicPlayer #vmpIconBubble {
  animation: none !important;
}

.vmp-art.spinning .vmp-disc,
#vmpIconBubble.playing #vmpBubbleIcon .vmp-disc {
  animation: vmpDiscSpin 5.8s linear infinite;
}

@keyframes vmpDiscSpin {
  to { transform: rotate(360deg); }
}

body.light-mode #vmpPanel {
  background:
    radial-gradient(circle at 18% 0%, rgba(29,185,84,0.14), transparent 34%),
    rgba(255,255,255,0.96) !important;
}

body.light-mode .vmp-track-label,
body.light-mode .vmp-power-text {
  color: #1f2937 !important;
}

body.light-mode .vmp-track-select,
body.light-mode .vmp-power-toggle {
  color: #111827 !important;
  background-color: rgba(248,250,255,0.96) !important;
  border-color: rgba(99,102,241,0.16) !important;
}

body.light-mode .vmp-track-select {
  color-scheme: light;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(17,24,39,0.72) 50%),
    linear-gradient(135deg, rgba(17,24,39,0.72) 50%, transparent 50%);
}

body.light-mode .vmp-track-select option {
  color: #111827;
  background: #f8faff;
}

body.light-mode .vmp-track-select option:checked {
  color: #111827;
  background: #e8ecff;
}

@keyframes ntxvNavPop {
  0% { transform: translate3d(0,0,0) scale(1); }
  45% { transform: translate3d(0,-3px,0) scale(1.16); }
  72% { transform: translate3d(0,1px,0) scale(0.98); }
  100% { transform: translate3d(0,0,0) scale(1.1); }
}

#searchBtn,
#settingsBtn,
#langToggle,
#themeToggle {
  color: #fff !important;
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.26) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.28) !important;
}

body.light-mode #searchBtn,
body.light-mode #settingsBtn,
body.light-mode #langToggle,
body.light-mode #themeToggle {
  color: #fff !important;
  background: rgba(255,255,255,0.34) !important;
  border-color: rgba(255,255,255,0.62) !important;
  text-shadow: 0 1px 8px rgba(67,56,202,0.42);
}

#searchBtn:hover,
#settingsBtn:hover,
#langToggle:hover,
#themeToggle:hover,
body.light-mode #searchBtn:hover,
body.light-mode #settingsBtn:hover,
body.light-mode #langToggle:hover,
body.light-mode #themeToggle:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.68) !important;
  animation: ntxvNavPop 0.5s cubic-bezier(0.34,1.56,0.64,1) both !important;
  box-shadow: 0 12px 30px rgba(255,255,255,0.14), inset 0 1px 1px rgba(255,255,255,0.34) !important;
}

#settingsBtn:hover {
  transform: translate3d(0,0,0) scale(1.1) !important;
}

body.cursor-native .ntxv-smooth-cursor,
body.cursor-native .ntxv-smooth-cursor-dot,
body.cursor-native #vipCursorOuter,
body.cursor-native .cursor-trail-dot {
  display: none !important;
  opacity: 0 !important;
}

body.reduced-fx *,
body.reduced-fx *::before,
body.reduced-fx *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

body.reduced-fx button:hover,
body.reduced-fx a:hover,
body.reduced-fx [onclick]:hover,
body.reduced-fx .project-card:hover,
body.reduced-fx .card-glow:hover,
body.reduced-fx .social-icon:hover,
body.reduced-fx .vmp-btn:hover,
body.reduced-fx .vmp-play-btn:hover,
body.reduced-fx .vmp-power-toggle:hover {
  transform: none !important;
  filter: none !important;
}

body.reduced-fx #vipMusicPlayer,
body.reduced-fx #vipMusicPlayer.vmp-compact,
body.reduced-fx #vipMusicPlayer.vmp-awake {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

body.reduced-fx .vmp-disc,
body.reduced-fx #vmpIconBubble,
body.reduced-fx .vmp-wave-bar {
  animation: none !important;
}

@media (max-width: 640px) {
  #vmpPanel {
    width: min(360px, calc(100vw - 28px)) !important;
  }

  #vipMusicPlayer {
    left: 12px !important;
    bottom: 74px !important;
  }
}

/* ====== COMPACT HEADER REFINEMENT ====== */
#mainHeaderNav > div.w-full {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  min-height: 60px !important;
}

#mainHeaderNav .nav-logo {
  min-height: 40px !important;
}

#mainHeaderNav .nav-logo img {
  height: 34px !important;
  width: auto !important;
}

#mainHeaderNav .nav-link,
#mainHeaderNav .free-menu-btn,
#mainHeaderNav #dichvuNavBtn {
  font-size: 14px !important;
}

#mainHeaderNav {
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease, backdrop-filter 0.3s ease, background 0.3s ease !important;
  will-change: transform, opacity;
}

#mainHeaderNav.mobile-home-hidden {
  transform: translate3d(0, -120%, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#mainHeaderNav #mobileMenuBtn {
  width: 42px !important;
  height: 42px !important;
}

@media (max-width: 768px) {
  #mainHeaderNav {
    left: 50% !important;
    right: auto !important;
    top: 25px !important;
    width: min(336px, calc(100vw - 72px)) !important;
    transform: translate3d(-50%, 0, 0) !important;
    border-radius: 16px !important;
    transition: transform 0.28s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease !important;
    will-change: transform, opacity;
  }

  #mainHeaderNav.mobile-home-hidden {
    transform: translate3d(-50%, -18px, 0) scale(0.94) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  #mainHeaderNav > div,
  #mainHeaderNav .max-w-7xl,
  #mainHeaderNav .max-w-6xl {
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 56px !important;
  }

  #mainHeaderNav .nav-logo img {
    max-width: 96px !important;
    height: 26px !important;
    width: auto !important;
  }

  #mainHeaderNav #mobileMenuBtn {
    width: 40px !important;
    height: 40px !important;
  }

  #mobileMenu {
    background: linear-gradient(180deg, rgba(12, 12, 28, 0.988), rgba(7, 8, 20, 0.988)) !important;
    border-top: none !important;
    box-shadow: none !important;
  }

  #mobileMenu::before,
  #mobileMenu::after {
    display: none !important;
    content: none !important;
  }

  #mobileMenu > div:first-child {
    border-top: none !important;
    box-shadow: none !important;
  }

  #mobileMenu .mobile-menu-head {
    display: block !important;
    margin-bottom: 12px !important;
  }

  #mobileMenu .mobile-menu-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 18px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #mobileMenu .mobile-menu-logo-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 1 1 auto !important;
  }

  #mobileMenu .mobile-menu-logo img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }

  #mobileMenu .mobile-menu-brandcopy {
    gap: 2px !important;
  }

  #mobileMenu .mobile-menu-eyebrow {
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
  }

  #mobileMenu .mobile-menu-subtitle {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  #mobileMenu .mobile-menu-close {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto !important;
    align-self: center !important;
  }

  #mobileMenu .mobile-menu-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    clear: both !important;
  }

  #mobileMenu .mobile-menu-action {
    min-height: 50px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
  }

  #mobileMenu .mobile-menu-action .ui-icon-row {
    font-size: 13px !important;
    gap: 9px !important;
  }

  #mobileMenu .mobile-menu-action-value {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }

  #mobileMenu .mobile-menu-section-label {
    padding-top: 4px !important;
    margin-bottom: 2px !important;
  }

  #mobileMenu .mobile-menu-links {
    gap: 8px !important;
  }

  #mobileMenu .mobile-nav-link {
    min-height: 66px !important;
    padding: 13px 14px !important;
    border-radius: 18px !important;
  }

  #mobileMenu .mobile-nav-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
  }

  #mobileMenu .mobile-nav-label {
    font-size: 13px !important;
  }

  #mobileMenu .mobile-nav-desc {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  #mobileMenu .mobile-nav-arrow {
    font-size: 15px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  button:active,
  a:active,
  [onclick]:active,
  .ghost-btn:active,
  .primary-btn:active,
  .btn-primary:active,
  .btn-outline:active,
  .btn-scale:active,
  .free-nav-btn:active,
  .lb-btn:active {
    transform: scale(0.985) !important;
  }

  .btn-primary:hover,
  .btn-outline:hover,
  .btn-scale:hover,
  .ghost-btn:hover,
  .primary-btn:hover,
  .cmb-btn:hover,
  .v3-announce-btn-primary:hover,
  .lb-btn:hover,
  .nav-pay-btn:hover,
  #payNowBtn:hover,
  #backToTop:hover,
  #themeToggle:hover,
  #langToggle:hover,
  .welcome-btn:hover,
  .splash-click-btn:hover {
    transform: translateY(-1px) scale(1.01) !important;
  }

  .stat-card:hover,
  .card-hover:hover,
  .faq-item:hover,
  .contact-card-new:hover,
  .boost-order-panel:hover {
    transform: translateY(-1px) scale(1.01) !important;
  }

  .timeline-item:hover {
    transform: translateX(1px) scale(1.01) !important;
  }

  .project-card:hover,
  .dl-card:hover {
    transform: translateY(-1px) scale(1.01) !important;
  }

  .skill-item:hover,
  .tool-badge:hover,
  .social-icon:hover,
  .social-icon-hover:hover,
  .mobile-nav-link:hover,
  .mobile-menu-action:hover,
  .spt-item:hover,
  .v3-announce-close:hover,
  .cmbClose:hover,
  .pnClose:hover {
    transform: none !important;
  }

  #v3AnnImg:hover img {
    transform: scale(1.01) !important;
  }
}

@media (min-width: 769px) {
  #about .timeline-item:last-child::after {
    display: block !important;
    top: 24px !important;
    height: calc(100% - 24px) !important;
  }
}

@media (max-width: 560px) {
  .decor-showcase-primary {
    margin-top: 0 !important;
  }

  .decor-showcase-primary .decor-hero-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "hero hero"
      "left right"
      "left right" !important;
    gap: 8px !important;
  }

  .decor-showcase-primary .decor-side,
  .decor-showcase-primary .decor-stack {
    margin-top: -34px !important;
    transform: none !important;
  }

  .decor-showcase-primary .decor-carousel-btn {
    width: 30px !important;
    height: 44px !important;
  }

  .decor-showcase-primary .decor-side img,
  .decor-showcase-primary .decor-slide img,
  .decor-showcase-primary .decor-stack img,
  .decor-showcase-secondary .decor-card-row img {
    border-radius: 16px !important;
  }

  .decor-showcase-secondary .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "hero hero"
      "left rightTop"
      "left rightBottom" !important;
  }

  #projects .project-card .h-48,
  #projects .project-card [style*='height:200px'] {
    height: 210px !important;
  }

  #skills .tool-badge {
    min-width: 0;
    width: 100% !important;
    font-size: 13px !important;
  }
}

/* ========== PERFORMANCE LITE MOTION ========== */
body:not(.light-mode) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 14% 16%, rgba(118, 71, 255, 0.16) 0%, rgba(118, 71, 255, 0.08) 16%, transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(189, 92, 255, 0.12) 0%, rgba(189, 92, 255, 0.06) 14%, transparent 30%),
    radial-gradient(circle at 50% 72%, rgba(109, 72, 255, 0.1) 0%, rgba(109, 72, 255, 0.05) 18%, transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.02) 0%, transparent 28%),
    linear-gradient(180deg, #06060d 0%, #0b0a19 48%, #05050b 100%) !important;
  background-attachment: fixed !important;
}

html:not(.light-mode) {
  background: #06050d !important;
}

@media (max-width: 768px) {
  #backToTop {
    display: none !important;
  }

  body:not(.light-mode) {
    background:
      radial-gradient(circle at 78% 14%, rgba(132, 86, 255, 0.14) 0%, rgba(132, 86, 255, 0.06) 18%, transparent 38%),
      linear-gradient(180deg, #05050b 0%, #090814 46%, #040409 100%) !important;
    background-attachment: scroll !important;
  }
}

#auroraCanvas,
#starsCanvas,
#spFallingCanvas,
#vipCursorOuter,
.cursor-trail-dot,
.morphing-blob,
.sp-bg-orb,
.ow-bubble,
.splash-pulse-ring,
.intro-logo-ring,
.intro-logo-ring-2{
  display: none !important;
}

.animate-float,
.ls-orb,
.sca-orb,
.sca-spark,
.skill-card-border-anim,
.sca-shimmer,
.hero-badge,
.hero-badge-dot,
.marquee-pill::before,
.section-title::after,
.vmp-art.is-playing,
.vmp-wave-bar,
.pulse-ring,
.v3-announce-inner::before,
.free-nav-btn::before {
  animation: none !important;
}

.card-glow,
.project-card,
.dl-card,
.boost-order-panel,
.faq-item,
.contact-card-new,
.welcome-card,
.pnBox,
.cmbBox,
#mobileMenu,
#themePicker,
#settingsPanel,
.vmp-panel,
.v3-announce-inner,
.search-shell,
.search-result,
.subpage-pay-box {
  backdrop-filter: blur(10px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(125%) !important;
  box-shadow: 0 10px 26px rgba(6, 8, 24, 0.18) !important;
}

.animate-fade-in-up,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-scale-in,
.animate-slide-down,
.scale-reveal,
.sp-scroll-reveal {
  animation-duration: 0.55s !important;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.animate-fade-in-up,
.animate-fade-in-left,
.animate-fade-in-right,
.animate-scale-in,
.animate-slide-down {
  will-change: auto !important;
}

.project-card,
.dl-card,
.stat-card,
.card-hover,
.timeline-item,
.skill-item,
.tool-badge,
.social-icon,
.social-icon-hover,
.btn-primary,
.btn-outline,
.btn-scale,
.ghost-btn,
.primary-btn,
.mobile-menu-action,
.mobile-nav-link,
.faq-item,
.contact-card-new,
.boost-service-item,
.selectable-price,
.lb-btn,
.cmb-btn,
.v3-announce-btn-primary {
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease !important;
}

.text-glow,
.light-reactive,
.glow-element.active,
.card-glow.active {
  text-shadow: none !important;
  box-shadow: none !important;
}

#projects .project-card,
#freefire .project-card,
#about .card-glow,
#skills .card-glow.rounded-2xl,
#skills .mt-8.card-glow,
#boost .boost-order-panel,
#faq .faq-item,
#contact .contact-card-new {
  box-shadow: 0 12px 28px rgba(6, 8, 24, 0.16) !important;
}

body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
  background: linear-gradient(180deg, rgba(108, 88, 232, 0.14), rgba(71, 58, 146, 0.12)) !important;
  border: 1px solid rgba(132, 112, 255, 0.22) !important;
  color: #d9d2ff !important;
  min-width: 164px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#about #about-title {
  margin-bottom: 18px !important;
}

#about #about-p1 {
  margin-top: 10px !important;
}

@media (min-width: 1024px) {
  #skills [data-tools-grid] {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: center;
  }

  body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 768px) {
  #skills [data-tools-grid] {
    gap: 10px !important;
  }

  body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
    min-width: 140px !important;
    min-height: 44px !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

@media (min-width: 769px) {
  #about .timeline-item::after {
    top: 24px !important;
    height: calc(100% - 24px) !important;
  }

  #projects .project-card .h-48,
  #projects .project-card [style*='height:200px'] {
    height: 244px !important;
  }
}

@media (max-width: 768px) {
  #about .timeline-item::after {
    top: 24px !important;
    height: calc(100% - 24px) !important;
  }
}

@media (min-width: 769px) {
  body:not(.light-mode) #projects .project-card {
    background: linear-gradient(180deg, rgba(18, 16, 38, 0.98), rgba(11, 10, 26, 0.98)) !important;
    border-color: rgba(120, 108, 216, 0.14) !important;
    box-shadow: 0 18px 38px rgba(4, 8, 28, 0.34) !important;
  }

  body:not(.light-mode) #projects .project-card::before,
  body:not(.light-mode) #projects .project-card::after,
  body:not(.light-mode) #projects .project-card.card-glow::before,
  body:not(.light-mode) #projects .project-card.card-glow::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    opacity: 0 !important;
  }

  body:not(.light-mode) #projects .project-card .p-6,
  body:not(.light-mode) #projects .project-card .p-5 {
    display: block !important;
    background: transparent !important;
    background-image: none !important;
  }

  body:not(.light-mode) #projects .project-card a,
  body:not(.light-mode) #projects .project-card button,
  body:not(.light-mode) #projects .project-card .flex.items-center.gap-2.mb-3 {
    background-image: none !important;
  }

  .decor-showcase-primary .decor-carousel-btn {
    width: 24px !important;
    height: 36px !important;
    min-width: 24px !important;
    min-height: 36px !important;
    aspect-ratio: auto !important;
    border-radius: 999px !important;
  }

  .decor-showcase-primary .decor-carousel-btn svg,
  .decor-showcase-primary .decor-carousel-btn .ui-icon {
    width: 11px !important;
    height: 11px !important;
  }

  .decor-showcase-primary .decor-carousel-btn-prev {
    left: 8px !important;
  }

  .decor-showcase-primary .decor-carousel-btn-next {
    right: 8px !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .hero-social-row .social-icon,
  .hero-social-row .social-icon-hover,
  .hero-social-row a.social-icon,
  .hero-social-row a.social-icon-hover {
    transform: translateY(18px) scale(1) !important;
  }

  .hero-social-row .social-icon:hover,
  .hero-social-row .social-icon-hover:hover,
  .hero-social-row a.social-icon:hover,
  .hero-social-row a.social-icon-hover:hover {
    transform: translateY(17px) scale(1.02) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .hero-social-row .social-icon,
  .hero-social-row .social-icon-hover,
  .hero-social-row a.social-icon,
  .hero-social-row a.social-icon-hover {
    transform: translateY(18px) scale(1) !important;
  }

  .hero-social-row .social-icon:hover,
  .hero-social-row .social-icon-hover:hover,
  .hero-social-row .social-icon:active,
  .hero-social-row .social-icon-hover:active,
  .hero-social-row a.social-icon:hover,
  .hero-social-row a.social-icon-hover:hover,
.hero-social-row a.social-icon:active,
.hero-social-row a.social-icon-hover:active {
  transform: translateY(17.5px) scale(1.01) !important;
}
}

@keyframes vmpIdleBreath {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,0,0) scale(1.08); }
}

#vipMusicPlayer:not(.vmp-compact):not(.vmp-reduced-motion) #vmpIconBubble {
  animation: vmpIdleBreath 3.8s ease-in-out infinite;
}

#vipMusicPlayer.vmp-compact #vmpIconBubble,
#vipMusicPlayer.vmp-reduced-motion #vmpIconBubble,
#vipMusicPlayer #vmpIconBubble:hover {
  animation: none !important;
}

/* Final stability overrides */
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

#searchBtn:hover,
#settingsBtn:hover,
body.light-mode #searchBtn:hover,
body.light-mode #settingsBtn:hover {
  animation: none !important;
  transform: translate3d(0,-2px,0) !important;
}

.v3-announce::before,
body.light-mode .v3-announce::before {
  background: #7c3aed !important;
  background-size: auto !important;
  animation: none !important;
}

body.reduced-fx .animate-fade-in-up,
body.reduced-fx .animate-fade-in-left,
body.reduced-fx .animate-fade-in-right,
body.reduced-fx .animate-scale-in,
body.reduced-fx .animate-slide-down,
body.reduced-fx .vip-reveal,
body.reduced-fx .sp-scroll-reveal,
body.reduced-fx [data-animate],
body.reduced-fx .project-card,
body.reduced-fx .card-glow,
body.reduced-fx .dl-card,
body.reduced-fx .skill-item,
body.reduced-fx .timeline-item {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

body.reduced-fx .gradient-text,
body.reduced-fx .v3-announce-title,
body.reduced-fx .pnBox h3,
body.reduced-fx .cmbBox h3 {
  background: none !important;
  color: #f7f5ff !important;
  -webkit-text-fill-color: currentColor !important;
}

body.light-mode.reduced-fx .gradient-text,
body.light-mode.reduced-fx .v3-announce-title,
body.light-mode.reduced-fx .pnBox h3,
body.light-mode.reduced-fx .cmbBox h3 {
  color: #1a1a3e !important;
}

@media (hover: hover) and (pointer: fine) {
  body.ntxv-custom-cursor,
  body.ntxv-custom-cursor * {
    cursor: none !important;
  }
}

@media (max-width: 768px) {
  #home,
  #about,
  #skills,
  #projects,
  #boost,
  #freefire,
  #faq,
  #contact {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #home > .max-w-4xl,
  section > .max-w-4xl,
  section > .max-w-5xl,
  section > .max-w-6xl,
  section > .max-w-7xl,
  section > .container {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #hero-subtitle,
  #hero-description,
  #about p,
  #skills-sub,
  #projects-sub,
  #contact-sub {
    max-width: min(100%, calc(100vw - 24px)) !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  button:active,
  a:active,
  [onclick]:active,
  .mobile-nav-link:active,
  .mobile-menu-action:active,
  .ghost-btn:active,
  .primary-btn:active,
  .btn-primary:active,
  .btn-outline:active,
  .btn-scale:active,
  .free-nav-btn:active,
  .lb-btn:active,
  .welcome-btn:active,
  .splash-click-btn:active,
  .spt-item:active,
  .hov-scale:active {
    transform: translate3d(0,0,0) scale3d(0.97, 0.97, 1) !important;
    transform-origin: center center !important;
  }
}

/* Compact desktop nav dropdowns */
#freeMenuDropdown,
#dichvuNavDropdown {
  min-width: min(430px, calc(100vw - 32px)) !important;
  padding: 8px !important;
  gap: 7px !important;
  border-radius: 13px !important;
  background: rgba(12, 12, 28, 0.94) !important;
  border-color: rgba(160, 145, 255, 0.16) !important;
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

#freeMenuDropdown {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#dichvuNavDropdown {
  min-width: min(380px, calc(100vw - 32px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#freeMenuDropdown .nav-dropdown-item,
#dichvuNavDropdown .nav-dropdown-item {
  min-height: 42px !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025)) !important;
  border-color: rgba(255, 255, 255, 0.075) !important;
  color: rgba(246, 244, 255, 0.88) !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
}

#freeMenuDropdown .nav-dropdown-item:hover,
#freeMenuDropdown .nav-dropdown-item:focus-visible,
#dichvuNavDropdown .nav-dropdown-item:hover,
#dichvuNavDropdown .nav-dropdown-item:focus-visible {
  transform: translateY(-2px) scale(1.018) !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.22), rgba(168, 85, 247, 0.14)) !important;
  border-color: rgba(168, 160, 255, 0.34) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body.light-mode #freeMenuDropdown,
body.light-mode #dichvuNavDropdown {
  background: rgba(255, 255, 255, 0.94) !important;
  border-color: rgba(79, 70, 229, 0.14) !important;
  box-shadow:
    0 18px 42px rgba(38, 35, 82, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

body.light-mode #freeMenuDropdown .nav-dropdown-item,
body.light-mode #dichvuNavDropdown .nav-dropdown-item {
  background: linear-gradient(180deg, rgba(248, 248, 255, 0.96), rgba(239, 241, 255, 0.88)) !important;
  border-color: rgba(79, 70, 229, 0.12) !important;
  color: #25234b !important;
}

/* Large stability pass */
body:not(.loaded) .app-wrapper {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.loaded .app-wrapper {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#loadingScreen {
  place-items: center !important;
}

#loadingScreen::before,
#loadingScreen::after,
#loadingScreen .ls-corner,
#loadingScreen .ls-logo,
#loadingScreen .ls-bar-wrap,
#loadingScreen .ls-percent {
  display: none !important;
}

#loadingScreen .ls-sub {
  margin: 0 !important;
  color: rgba(246, 244, 255, 0.92) !important;
  font-size: clamp(17px, 4.8vw, 24px) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

body.reduced-fx #hero-title .gradient-text {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  background: none !important;
  color: #f7f5ff !important;
  -webkit-text-fill-color: #f7f5ff !important;
}

body.reduced-fx #hero-title .gradient-text::before,
body.reduced-fx #hero-title .gradient-text::after {
  display: none !important;
}

.v3-announce::before,
body.light-mode .v3-announce::before {
  display: none !important;
}

#scrollProgress {
  height: 2px !important;
  box-shadow: none !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
}

.ui-icon,
svg.ui-icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.vmp-volume-row {
  width: 100%;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.vmp-volume-btn {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: rgba(246, 244, 255, 0.88);
  background: rgba(99, 102, 241, 0.18);
  cursor: pointer;
}

.vmp-volume-btn.is-muted {
  color: rgba(246, 244, 255, 0.42);
  background: rgba(255, 255, 255, 0.06);
}

.vmp-volume-slider,
.vmp-vol-slider {
  flex: 1 1 auto;
  min-width: 0;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  outline: 0;
  background: linear-gradient(90deg, #7367ff, #d84fd3);
}

.vmp-volume-slider::-webkit-slider-thumb,
.vmp-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #ffffff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.55);
}

.vmp-volume-value {
  min-width: 36px;
  text-align: right;
  font-size: 11px;
  font-weight: 800;
  color: rgba(246, 244, 255, 0.74);
}

.vmp-full-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  margin-top: 8px;
  border-radius: 12px;
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 800;
  color: rgba(236, 255, 244, 0.9);
  background: linear-gradient(135deg, rgba(29, 185, 84, 0.24), rgba(99, 102, 241, 0.16));
  border: 1px solid rgba(29, 185, 84, 0.24);
}

.decor-showcase,
.decor-showcase-inner,
.decor-carousel,
.decor-carousel-viewport,
.decor-slide,
.decor-side,
.decor-stack a,
.decor-card-row a,
.project-card,
.project-image-wrap {
  background-color: transparent !important;
}

.decor-showcase img,
.decor-card-row img,
.decor-stack img,
.decor-slide img,
.decor-side img {
  background: transparent !important;
}

@media (max-width: 768px) {
  #v3AnnounceModal {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow-x: hidden !important;
  }

  .v3-announce {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: calc(100vw - 20px) !important;
    border-radius: 20px !important;
  }

  .v3-announce-inner {
    padding: 18px 16px 16px !important;
  }

  .v3-announce-header {
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  .v3-announce-title {
    min-width: 0 !important;
    font-size: clamp(20px, 6vw, 26px) !important;
    overflow-wrap: anywhere !important;
  }

  .v3-announce-img {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 2.02 / 1 !important;
  }

  .v3-announce-items {
    gap: 10px !important;
  }

  .v3-announce-footer,
  .v3-announce-actions {
    display: flex !important;
    flex-direction: row !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .v3-announce-footer .v3-announce-btn-primary,
  .v3-announce-actions .v3-btn-primary {
    min-width: 0 !important;
  }

  .v3-announce-footer .v3-announce-btn-secondary {
    flex: 0 0 auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #scrollProgress {
    display: none !important;
  }

  section,
  .decor-showcase,
  #about,
  #projects,
  #skills,
  #contact,
  #linkbio {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  #hero-description,
  #about #about-p1,
  #about #about-p2,
  #projects-sub,
  #skills-sub,
  #contact-sub {
    max-width: min(100%, calc(100vw - 22px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
    text-align-last: auto !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: auto;
  }

  #searchOverlay {
    padding: 70px 10px 18px !important;
    align-items: stretch !important;
  }

  #searchOverlay .search-box {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 8px 9px !important;
    gap: 8px !important;
    border-radius: 18px !important;
  }

  #searchInput {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    text-overflow: ellipsis !important;
  }

  .search-close-btn {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
  }

  #searchResults {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }

  .search-result-item {
    min-width: 0 !important;
    padding: 10px 11px !important;
    gap: 10px !important;
  }

  .search-result-text,
  .search-result-title,
  .search-result-desc {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  .search-hint {
    width: min(100%, calc(100vw - 20px)) !important;
    max-width: none !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere !important;
  }

  #mobileMenu .mobile-menu-intro,
  #mobileMenu .mobile-menu-section-label {
    display: none !important;
  }

  #mobileMenu .mobile-menu-body {
    gap: 12px !important;
    padding: 14px 10px 20px !important;
  }

  #mobileMenu .mobile-menu-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin: 0 !important;
  }

  #mobileMenu .mobile-menu-action,
  #mobileMenu .mobile-nav-link {
    min-width: 0 !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(29, 28, 52, 0.92), rgba(20, 19, 38, 0.94)) !important;
    border-color: rgba(150, 136, 255, 0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  }

  #mobileMenu .mobile-nav-link {
    min-height: 58px !important;
    padding: 10px 12px !important;
    gap: 10px !important;
  }

  #mobileMenu .mobile-nav-meta,
  #mobileMenu .mobile-nav-label,
  #mobileMenu .mobile-nav-desc {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mobileMenu .mobile-nav-label {
    white-space: nowrap !important;
  }

  #mobileMenu .mobile-nav-desc {
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }

  #mobileMenu .mobile-menu-action .ui-icon-row,
  #mobileMenu .mobile-nav-icon {
    flex: 0 0 auto !important;
  }

  .mobile-header.mobile-home-hidden,
  #mainHeaderNav.mobile-home-hidden {
    transform: translate3d(0, -125%, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .decor-showcase-secondary .decor-card-row,
  .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .decor-showcase-secondary .decor-card-row a,
  .decor-card-row a {
    display: flex !important;
    grid-area: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 17px !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(5) {
    display: flex !important;
  }

  .decor-showcase-secondary .decor-card-row img,
  .decor-card-row img,
  .decor-stack img,
  .decor-slide img,
  .decor-side img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent !important;
  }

  .decor-stack {
    gap: 10px !important;
  }

  #skills .skill-item {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(42, 34, 78, 0.72), rgba(25, 22, 48, 0.86)) !important;
    border: 1px solid rgba(145, 124, 255, 0.16) !important;
  }

  #skills [data-tools-grid] .tool-badge {
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(42, 34, 78, 0.72), rgba(25, 22, 48, 0.86)) !important;
    border: 1px solid rgba(145, 124, 255, 0.16) !important;
    color: rgba(246, 244, 255, 0.82) !important;
  }
}

@media (min-width: 769px) and (max-width: 1240px) {
  .decor-showcase-secondary .decor-card-row {
    grid-template-columns: repeat(5, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    overflow: visible !important;
  }

  .decor-showcase-secondary .decor-card-row a {
    display: flex !important;
    margin-top: 0 !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row img {
    object-fit: contain !important;
    background: transparent !important;
  }
}

/* Final mobile/layout refinement */
@media (min-width: 769px) {
  #about .grid.md\:grid-cols-2 {
    align-items: stretch !important;
  }

  #about .animate-fade-in-left,
  #about .animate-fade-in-right {
    display: flex !important;
    flex-direction: column !important;
  }

  #about .animate-fade-in-right > .card-glow {
    flex: 1 1 auto !important;
    height: 100% !important;
  }
}

#skills > .max-w-6xl > .mt-8.card-glow {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

#skills [data-tools-grid] .tool-badge,
body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
  background: linear-gradient(180deg, rgba(46, 33, 96, 0.36), rgba(29, 22, 68, 0.42)) !important;
  border-color: rgba(128, 104, 236, 0.14) !important;
  color: rgba(232, 227, 255, 0.86) !important;
  border-radius: 14px !important;
}

@media (max-width: 768px) {
  #mainHeaderNav {
    width: min(342px, calc(100vw - 42px)) !important;
    max-width: calc(100vw - 42px) !important;
    top: 14px !important;
  }

  #mainHeaderNav > div,
  #mainHeaderNav .max-w-7xl,
  #mainHeaderNav .max-w-6xl,
  #mainHeaderNav > div.w-full {
    min-height: 50px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
  }

  #mainHeaderNav .nav-logo img {
    height: 23px !important;
    max-width: min(44vw, 118px) !important;
  }

  #mainHeaderNav #mobileMenuBtn,
  #mobileMenuBtn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
  }

  .text-center .section-title,
  #about .section-title,
  #skills .section-title,
  #projects .section-title,
  #contact .section-title,
  #faq .section-title,
  #boost .section-title {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .section-title::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  #vipMusicPlayer {
    left: auto !important;
    right: 12px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }

  #vmpPanel {
    left: auto !important;
    right: 0 !important;
    transform-origin: bottom right !important;
    width: min(344px, calc(100vw - 24px)) !important;
  }

  .decor-showcase-secondary .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "hero hero"
      "left rightTop"
      "left rightBottom" !important;
    gap: 10px !important;
  }

  .decor-showcase-secondary .decor-card-row a {
    grid-area: auto !important;
    margin: 0 !important;
    display: flex !important;
    background: transparent !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1) {
    grid-area: hero !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) {
    grid-area: left !important;
    aspect-ratio: auto !important;
    min-height: 100% !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(3) {
    grid-area: rightTop !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(4) {
    grid-area: rightBottom !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(5) {
    display: none !important;
  }

  .decor-showcase-secondary .decor-card-row img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) img {
    object-fit: contain !important;
    object-position: center top !important;
  }

  #skills .skill-item {
    border-radius: 12px !important;
    overflow: visible !important;
    padding: 11px 13px !important;
  }

  #skills .skill-item span {
    white-space: nowrap !important;
  }

  #skills [data-tools-grid] .tool-badge,
  body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
    border-radius: 12px !important;
    min-width: 0 !important;
  }
}

/* Final compact mobile header lock */
@media (max-width: 768px) {
  #mainHeaderNav {
    left: 50% !important;
    right: auto !important;
    top: 12px !important;
    width: min(328px, calc(100vw - 58px)) !important;
    max-width: calc(100vw - 58px) !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    border-radius: 17px !important;
    overflow: hidden !important;
    transform: translate3d(-50%, 0, 0) !important;
  }

  #mainHeaderNav.mobile-home-hidden {
    transform: translate3d(-50%, -16px, 0) scale(0.94) !important;
  }

  #mainHeaderNav > div,
  #mainHeaderNav .max-w-7xl,
  #mainHeaderNav .max-w-6xl,
  #mainHeaderNav > div.w-full {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 6px 10px !important;
    gap: 8px !important;
  }

  #mainHeaderNav .mobile-nav-brand,
  #mainHeaderNav .nav-right-icons {
    height: 42px !important;
    min-height: 0 !important;
    align-items: center !important;
  }

  #mainHeaderNav .nav-logo {
    height: 28px !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  #mainHeaderNav .nav-logo img {
    height: 21px !important;
    max-width: min(42vw, 108px) !important;
    box-shadow: none !important;
  }

  #mainHeaderNav #mobileMenuBtn,
  #mobileMenuBtn {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 13px !important;
    padding: 0 !important;
  }
}

/* ===== NTXV hard UI fixes 2026-05-01 ===== */
#skills > .max-w-6xl > .mt-8.card-glow,
#skills .mt-8.card-glow.rounded-2xl {
  background:
    radial-gradient(circle at 18% 0%, rgba(126, 100, 255, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(31, 24, 61, 0.92), rgba(17, 14, 39, 0.96)) !important;
  border: 1px solid rgba(137, 118, 255, 0.18) !important;
  box-shadow: 0 18px 42px rgba(6, 8, 28, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

#skills [data-tools-grid] .tool-badge,
body:not(.light-mode) #skills [data-tools-grid] .tool-badge {
  background: linear-gradient(180deg, rgba(42, 34, 78, 0.72), rgba(25, 22, 48, 0.86)) !important;
  border: 1px solid rgba(145, 124, 255, 0.16) !important;
  color: rgba(246, 244, 255, 0.88) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(5, 8, 24, 0.18) !important;
}

#skills-sub,
#projects-sub,
#contact-sub,
#about .text-center > p,
section .text-center > p.max-w-2xl {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 768px) {
  #mainHeaderNav,
  #mainHeaderNav > div,
  #mainHeaderNav .max-w-7xl,
  #mainHeaderNav .max-w-6xl,
  #mainHeaderNav > div.w-full {
    display: flex !important;
    align-items: center !important;
  }

  #mainHeaderNav .mobile-nav-brand,
  #mainHeaderNav .nav-right-icons {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }

  #mainHeaderNav .nav-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    line-height: 0 !important;
    transform: none !important;
  }

  #mainHeaderNav .nav-logo img {
    display: block !important;
    align-self: center !important;
    transform: none !important;
    margin: 0 !important;
  }

  #mainHeaderNav #mobileMenuBtn,
  #mobileMenuBtn {
    align-self: center !important;
    display: inline-grid !important;
    place-items: center !important;
    transform: none !important;
    margin: 0 !important;
  }

  #mobileMenuBtn .mobile-menu-btn-stack,
  #mobileMenuBtn .mobile-menu-btn-icon {
    display: grid !important;
    place-items: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    transform: none !important;
  }

  #mobileMenuBtn .mobile-menu-btn-icon {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #vipMusicPlayer {
    left: 12px !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    transform-origin: bottom left !important;
  }

  #vmpPanel {
    left: 0 !important;
    right: auto !important;
    transform-origin: bottom left !important;
  }

  .decor-showcase-secondary .decor-card-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "portfolio rightTop"
      "portfolio rightBottom" !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .decor-showcase-secondary .decor-card-row a {
    margin: 0 !important;
    min-width: 0 !important;
    border-radius: 17px !important;
    overflow: hidden !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1),
  .decor-showcase-secondary .decor-card-row a:nth-child(5) {
    display: none !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) {
    display: flex !important;
    grid-area: portfolio !important;
    aspect-ratio: auto !important;
    min-height: 100% !important;
    height: 100% !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(3) {
    display: flex !important;
    grid-area: rightTop !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(4) {
    display: flex !important;
    grid-area: rightBottom !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(3) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(4) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
  }
}

/* ===== NTXV mobile music + decor stability patch ===== */
body.reduced-fx #vipMusicPlayer,
body.no-animation-lite #vipMusicPlayer {
  transition: transform 0.24s cubic-bezier(0.22,1,0.36,1), opacity 0.24s ease !important;
}

#vipMusicPlayer.vmp-compact,
body.reduced-fx #vipMusicPlayer.vmp-compact,
body.no-animation-lite #vipMusicPlayer.vmp-compact {
  transform: translate3d(0,0,0) scale(0.5) !important;
  opacity: 0.78 !important;
}

#vipMusicPlayer.vmp-awake:not(.vmp-compact),
body.reduced-fx #vipMusicPlayer.vmp-awake:not(.vmp-compact),
body.no-animation-lite #vipMusicPlayer.vmp-awake:not(.vmp-compact) {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

body.reduced-fx #vmpIconBubble,
body.no-animation-lite #vmpIconBubble {
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}

#vmpPanel {
  display: flex !important;
  visibility: visible !important;
}

@media (hover: hover) and (pointer: fine) {
  #vipMusicPlayer:hover #vmpPanel,
  #vipMusicPlayer:focus-within #vmpPanel {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: all !important;
  }
}

@media (max-width: 768px) {
  #vmpPanel:not(.vmp-expanded) {
    pointer-events: none !important;
  }

  .decor-showcase-secondary .decor-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "chatgpt chatgpt"
      "portfolio ntxv"
      "portfolio adobe" !important;
    gap: 10px !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1) {
    display: flex !important;
    grid-area: chatgpt !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(2) {
    display: flex !important;
    grid-area: portfolio !important;
    aspect-ratio: auto !important;
    min-height: 100% !important;
    height: 100% !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(3) {
    display: flex !important;
    grid-area: ntxv !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(4) {
    display: flex !important;
    grid-area: adobe !important;
    aspect-ratio: 1 / 1 !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(5) {
    display: none !important;
  }

  .decor-showcase-secondary .decor-card-row a:nth-child(1) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(2) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(3) img,
  .decor-showcase-secondary .decor-card-row a:nth-child(4) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}

/* Full image for ChatGPT account banner */
.decor-showcase-secondary .decor-card-row a:nth-child(1) {
  aspect-ratio: 1122 / 1402 !important;
  height: auto !important;
  min-height: 0 !important;
}

.decor-showcase-secondary .decor-card-row a:nth-child(1) img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(0,0,0,0.18) !important;
}

@media (max-width: 768px) {
  .decor-showcase-secondary .decor-card-row a:nth-child(1) {
    aspect-ratio: 1122 / 1402 !important;
  }
}

/* ===== NTXV unified purple UI pass 2026-05-07 ===== */
:root {
  --ntxv-purple-1: #7c3aed;
  --ntxv-purple-2: #a855f7;
  --ntxv-purple-3: #d946ef;
  --ntxv-purple-soft: rgba(168, 85, 247, 0.16);
  --ntxv-rest-text: rgba(246, 244, 255, 0.70);
  --ntxv-active-text: #ffffff;
  --ntxv-panel-bg: rgba(22, 17, 47, 0.88);
  --ntxv-panel-bg-strong: rgba(18, 14, 39, 0.94);
  --ntxv-panel-border: rgba(165, 140, 255, 0.18);
  --ntxv-panel-shadow: 0 16px 34px rgba(5, 5, 18, 0.30);
  --ntxv-purple-gradient: linear-gradient(135deg, var(--ntxv-purple-1), var(--ntxv-purple-2) 55%, var(--ntxv-purple-3));
}

body:not(.light-mode) {
  background:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
    radial-gradient(circle at 16% 14%, rgba(124, 58, 237, 0.16) 0%, rgba(124, 58, 237, 0.07) 18%, transparent 36%),
    radial-gradient(circle at 86% 22%, rgba(168, 85, 247, 0.12) 0%, rgba(168, 85, 247, 0.05) 16%, transparent 34%),
    linear-gradient(180deg, #06050d 0%, #0b0818 48%, #05040b 100%) !important;
  background-size: 42px 42px, 42px 42px, auto, auto, auto !important;
  background-attachment: fixed !important;
}

@media (max-width: 768px) {
  body:not(.light-mode) {
    background-attachment: scroll !important;
    background-size: 38px 38px, 38px 38px, auto, auto, auto !important;
  }
}

.decor-carousel-dots,
.decor-carousel-dot,
.morphing-blob,
.sp-bg-orb,
.ow-bubble,
.splash-pulse-ring,
.intro-logo-ring,
.intro-logo-ring-2 {
  display: none !important;
  animation: none !important;
}

#loadingScreen,
#mainHeaderNav,
#freeMenuDropdown,
#dichvuNavDropdown,
#settingsPanel,
#mobileMenu,
#payNowPopup,
#contactModal,
#v3AnnounceModal,
#vmpPanel,
.pnBox,
.cmbBox {
  backdrop-filter: blur(8px) saturate(125%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
}

.glow-element,
.card-glow,
.project-card,
.skill-item,
.tool-badge,
.dl-card,
.stat-card,
.faq-item,
.contact-card-new,
.boost-order-panel,
.selectable-price,
.mobile-menu-action,
.mobile-nav-link,
.marquee-pill,
.hero-badge {
  box-shadow: var(--ntxv-panel-shadow) !important;
  text-shadow: none !important;
}

.glow-element::before,
.glow-element::after,
.card-glow::before,
.card-glow::after,
.project-card::before,
.project-card::after,
.tool-badge::before,
.tool-badge::after,
.skill-item::before,
.skill-item::after {
  opacity: 0 !important;
  display: none !important;
}

body:not(.light-mode) .card-glow,
body:not(.light-mode) .project-card,
body:not(.light-mode) .skill-item,
body:not(.light-mode) #skills > .max-w-6xl > .mt-8.card-glow,
body:not(.light-mode) #skills .mt-8.card-glow.rounded-2xl,
body:not(.light-mode) #skills [data-tools-grid] .tool-badge,
body:not(.light-mode) .faq-item,
body:not(.light-mode) .contact-card-new,
body:not(.light-mode) .boost-order-panel,
body:not(.light-mode) .selectable-price,
body:not(.light-mode) .mobile-menu-action,
body:not(.light-mode) .mobile-nav-link,
body:not(.light-mode) #freeMenuDropdown .nav-dropdown-item,
body:not(.light-mode) #dichvuNavDropdown .nav-dropdown-item {
  background: linear-gradient(180deg, rgba(34, 26, 73, 0.82), rgba(18, 14, 42, 0.90)) !important;
  border-color: var(--ntxv-panel-border) !important;
  color: var(--ntxv-rest-text) !important;
}

body:not(.light-mode) #skills > .max-w-6xl > .mt-8.card-glow,
body:not(.light-mode) #skills .mt-8.card-glow.rounded-2xl {
  box-shadow: 0 18px 36px rgba(5, 5, 18, 0.28) !important;
}

.gradient-text,
.section-title,
#hero-title .gradient-text,
.skill-progress,
#scrollProgress,
.btn-primary,
.primary-btn,
.v3-announce-btn-primary,
.boost-submit-btn,
.dl-btn,
.chip-btn.active,
.vmp-play-btn {
  background: var(--ntxv-purple-gradient) !important;
  background-image: var(--ntxv-purple-gradient) !important;
}

.btn-primary,
.primary-btn,
.v3-announce-btn-primary,
.boost-submit-btn,
.dl-btn,
.chip-btn.active,
.vmp-play-btn {
  border-color: rgba(196, 181, 253, 0.26) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.20) !important;
}

.text-white,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.text-indigo-300,
.text-indigo-400,
.text-purple-300,
.text-purple-400,
.text-glow,
.nav-link,
.marquee-pill,
.hero-badge,
.skill-item span,
.skill-item p,
.tool-badge,
.project-card p,
.project-card span,
.faq-item p,
.contact-card-new p,
.mobile-nav-label,
.mobile-nav-desc,
.mobile-menu-intro-text,
.vmp-artist,
.vmp-track-label,
.vmp-volume-value,
.vmp-power-text {
  color: var(--ntxv-rest-text) !important;
  text-shadow: none !important;
}

.section-title,
#hero-title,
#hero-greeting,
.project-card h3,
.skill-item h3,
.contact-card-name,
.faq-question span,
.vmp-title,
body:not(.light-mode) #mobileMenu .mobile-menu-intro-title {
  color: rgba(246, 244, 255, 0.82) !important;
  text-shadow: none !important;
}

a:hover,
a:focus-visible,
button:hover,
button:focus-visible,
button:active,
[role="button"]:hover,
[role="button"]:focus-visible,
.nav-link.active,
.nav-link:hover,
.mobile-nav-link:hover .mobile-nav-label,
.mobile-nav-link:active .mobile-nav-label,
.mobile-menu-action:hover,
.mobile-menu-action:active,
.tool-badge:hover,
.tool-badge:focus-visible,
.skill-item:hover *,
.project-card:hover *,
.faq-item:hover *,
.selectable-price.selected,
.selectable-price:hover,
.vmp-btn:hover,
.vmp-power-toggle:hover,
.vmp-track-select:focus {
  color: var(--ntxv-active-text) !important;
}

body:not(.light-mode) #skills [data-tools-grid] .tool-badge,
body:not(.light-mode) #skills [data-tools-grid] .tool-badge:hover {
  background: linear-gradient(180deg, rgba(34, 26, 73, 0.84), rgba(18, 14, 42, 0.92)) !important;
  border-color: var(--ntxv-panel-border) !important;
  box-shadow: 0 12px 24px rgba(5, 5, 18, 0.24) !important;
}

.skill-progress {
  box-shadow: none !important;
}

.skill-progress::after,
.vmp-volume-slider::-webkit-slider-thumb,
.vmp-vol-slider::-webkit-slider-thumb {
  box-shadow: none !important;
}

.selectable-price.selected,
.boost-select-btn.active,
.service-item.active,
.chip-btn.active {
  border-color: rgba(216, 180, 254, 0.42) !important;
  background: linear-gradient(180deg, rgba(88, 63, 191, 0.34), rgba(54, 39, 129, 0.32)) !important;
}

#vipMusicPlayer {
  z-index: 99980 !important;
}

#vipMusicPlayer.vmp-positioned {
  left: var(--vmp-drag-left, 12px) !important;
  top: var(--vmp-drag-top, auto) !important;
  right: auto !important;
  bottom: auto !important;
  transform-origin: top left !important;
}

#vipMusicPlayer.vmp-dragging {
  transition: opacity 0.18s ease !important;
}

#vmpIconBubble {
  touch-action: none;
  user-select: none;
}

#vipMusicPlayer.vmp-panel-open,
#vipMusicPlayer.vmp-awake:not(.vmp-compact) {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

#vipMusicPlayer.vmp-compact {
  transform: translate3d(0,0,0) scale(0.56) !important;
  opacity: 0.76 !important;
}

#vipMusicPlayer.vmp-panel-open #vmpPanel,
#vmpPanel.vmp-expanded {
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

#vmpPanel {
  width: min(360px, calc(100vw - 24px)) !important;
  max-height: min(76vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, rgba(35, 26, 76, 0.94), rgba(16, 13, 37, 0.96)) !important;
  border-color: rgba(177, 148, 255, 0.22) !important;
  box-shadow: 0 18px 42px rgba(4, 4, 16, 0.42) !important;
}

#vmpPanel::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -18px;
  width: 82px;
  height: 18px;
  pointer-events: auto;
}

#vmpIconBubble {
  background: linear-gradient(145deg, rgba(41, 31, 86, 0.96), rgba(16, 13, 38, 0.98)) !important;
  border-color: rgba(177, 148, 255, 0.24) !important;
  box-shadow: 0 12px 26px rgba(8, 7, 26, 0.34) !important;
}

#vmpIconBubble::before,
#vmpIconBubble::after,
#vipMusicPlayer.is-playing #vmpIconBubble::after,
#vmpIconBubble.playing::before {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}

.vmp-spotify-embed,
.vmp-volume-row,
.vmp-track-select,
.vmp-power-toggle {
  background: rgba(255, 255, 255, 0.055) !important;
  border-color: rgba(177, 148, 255, 0.14) !important;
}

.vmp-full-link,
.vmp-power-toggle[aria-pressed="true"],
.vmp-power-toggle[aria-pressed="true"] .vmp-power-track {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.30), rgba(217, 70, 239, 0.18)) !important;
  border-color: rgba(216, 180, 254, 0.28) !important;
  color: #fff !important;
}

.vmp-power-toggle[aria-pressed="true"] .vmp-power-light {
  background: #c084fc !important;
  box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.14) !important;
}

.vmp-wave-bar,
.vmp-volume-slider,
.vmp-vol-slider {
  background: linear-gradient(90deg, #7c3aed, #a855f7, #d946ef) !important;
}

.vmp-cover,
.vmp-disc,
.vmp-art {
  box-shadow: none !important;
}

[style*="#10b981"],
[style*="#06b6d4"],
[style*="#38bdf8"],
[style*="#22c55e"],
[style*="#34d399"],
[style*="#14b8a6"],
[style*="#f59e0b"],
[style*="#ef4444"],
[style*="#f97316"],
[style*="#fbbf24"],
[style*="#60a5fa"],
[style*="#4ade80"],
[style*="rgba(16,185,129"],
[style*="rgba(6,182,212"],
[style*="rgba(59,130,246"],
[style*="rgba(245,158,11"],
[style*="rgba(239,68,68"],
[style*="rgba(34,197,94"] {
  color: var(--ntxv-rest-text) !important;
  border-color: var(--ntxv-panel-border) !important;
  box-shadow: none !important;
}

[style*="linear-gradient"][style*="#10b981"],
[style*="linear-gradient"][style*="#059669"],
[style*="linear-gradient"][style*="#06b6d4"],
[style*="linear-gradient"][style*="#38bdf8"],
[style*="linear-gradient"][style*="#22c55e"],
[style*="linear-gradient"][style*="#14b8a6"],
[style*="linear-gradient"][style*="#f59e0b"],
[style*="linear-gradient"][style*="#ef4444"],
[style*="linear-gradient"][style*="#f97316"],
[style*="linear-gradient"][style*="#fbbf24"],
[style*="background:rgba(16,185,129"],
[style*="background:rgba(6,182,212"],
[style*="background:rgba(59,130,246"],
[style*="background:rgba(245,158,11"],
[style*="background:rgba(239,68,68"],
[style*="background:rgba(34,197,94"] {
  background: var(--ntxv-purple-gradient) !important;
  color: #fff !important;
}

@media (max-width: 768px) {
  #vipMusicPlayer {
    left: 12px !important;
    right: auto !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    transform-origin: bottom left !important;
  }

  #vipMusicPlayer.vmp-positioned {
    left: var(--vmp-drag-left, 12px) !important;
    top: var(--vmp-drag-top, auto) !important;
    right: auto !important;
    bottom: auto !important;
    transform-origin: top left !important;
  }

  #vipMusicPlayer.vmp-panel-open,
  #vipMusicPlayer.vmp-awake:not(.vmp-compact) {
    transform: translate3d(0,0,0) scale(1) !important;
  }

  #vmpPanel {
    left: 0 !important;
    right: auto !important;
    bottom: 58px !important;
    width: min(344px, calc(100vw - 22px)) !important;
    max-height: min(72vh, 620px) !important;
    transform-origin: bottom left !important;
  }

  #vmpPanel.vmp-expanded,
  #vipMusicPlayer.vmp-panel-open #vmpPanel {
    display: flex !important;
    pointer-events: auto !important;
    opacity: 1 !important;
  }
}

/* Keep text gradients clipped after the unified color pass. */
.gradient-text,
#hero-title .gradient-text {
  background: var(--ntxv-purple-gradient) !important;
  background-image: var(--ntxv-purple-gradient) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

.section-title {
  background: transparent !important;
  background-image: none !important;
  color: rgba(246, 244, 255, 0.82) !important;
}

.section-title::after {
  background: var(--ntxv-purple-gradient) !important;
}

.dl-card > [style*="font-size"]:empty,
.dl-icon-box:empty,
.v3-announce-title:empty {
  display: none !important;
}

/* ===== NTXV solid purple layout pass ===== */
:root {
  --ntxv-purple: #8b5cf6;
  --ntxv-purple-deep: #211449;
  --ntxv-purple-soft: rgba(139, 92, 246, 0.16);
  --ntxv-purple-line: rgba(139, 92, 246, 0.13);
  --ntxv-bg: #070512;
  --ntxv-surface: rgba(25, 18, 52, 0.84);
  --ntxv-surface-2: rgba(18, 13, 40, 0.92);
  --ntxv-border: rgba(168, 139, 250, 0.20);
  --ntxv-text: rgba(247, 244, 255, 0.88);
  --ntxv-muted: rgba(226, 218, 255, 0.66);
  --ntxv-purple-gradient: linear-gradient(135deg, #8b5cf6, #8b5cf6);
}

html,
body {
  background-color: var(--ntxv-bg) !important;
}

body:not(.light-mode) {
  background-color: var(--ntxv-bg) !important;
  background-image:
    linear-gradient(var(--ntxv-purple-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ntxv-purple-line) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
  background-position: 0 0 !important;
  background-attachment: fixed !important;
}

body.light-mode {
  background-image:
    linear-gradient(rgba(139, 92, 246, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.10) 1px, transparent 1px) !important;
  background-size: 56px 56px !important;
}

.hero-bg-vip,
.hero-grid-vip,
.vip-orb,
.morphing-blob,
#auroraCanvas,
#starsCanvas,
#vipCursorOuter,
.cursor-trail-dot {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

.gradient-text,
#hero-title .gradient-text,
.section-title,
body.light-mode .gradient-text,
body.light-mode #hero-title .gradient-text {
  background: none !important;
  background-image: none !important;
  color: #c4b5fd !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.btn-primary,
.primary-btn,
.v3-announce-btn-primary,
.boost-submit-btn,
.dl-btn,
.chip-btn.active,
.vmp-play-btn,
.skill-progress,
#scrollProgress,
#skills .bg-gradient-to-br,
.hero-avatar-orbit.bg-gradient-to-br {
  background: var(--ntxv-purple) !important;
  background-image: none !important;
}

.text-glow,
.glow-element,
.card-glow,
.project-card,
.skill-item,
.tool-badge,
.marquee-pill,
.hero-badge,
#vmpPanel,
#vmpIconBubble {
  text-shadow: none !important;
  filter: none !important;
}

.glow-element,
.card-glow,
.project-card,
.skill-item,
.tool-badge,
.marquee-pill,
.hero-badge,
.btn-primary,
.btn-outline,
.vmp-btn,
.vmp-volume-row,
.vmp-track-select,
.vmp-full-link,
#vmpPanel,
#vmpIconBubble {
  box-shadow: none !important;
}

.glow-element::before,
.glow-element::after,
.card-glow::before,
.card-glow::after,
.project-card::before,
.project-card::after,
.skill-item::before,
.skill-item::after,
.marquee-pill::before,
.marquee-pill::after,
.skill-progress::after {
  content: none !important;
  display: none !important;
}

.animate-float,
.sca-orb,
.sca-spark,
.sca-shimmer,
.skill-card-border-anim,
.hero-badge,
.hero-badge-dot,
.vmp-wave-bar,
.pulse-ring {
  animation: none !important;
}

#home {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding: clamp(96px, 11vh, 132px) 24px 56px !important;
}

#home > .max-w-6xl,
#home > .max-w-4xl {
  max-width: 1140px !important;
}

#home .animate-scale-in.delay-200 {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  column-gap: clamp(42px, 7vw, 84px);
  row-gap: 0;
  align-items: center;
  text-align: left !important;
}

#home .animate-scale-in.delay-200 > .flex.justify-center.mb-2,
#hero-greeting,
#hero-title,
#home .typewriter-container,
#hero-description,
#home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row,
.hero-stats-grid,
.hero-social-row {
  grid-column: 1;
}

#home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
  justify-content: flex-start !important;
  margin-bottom: 14px !important;
}

.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: rgba(139, 92, 246, 0.13) !important;
  border: 1px solid rgba(196, 181, 253, 0.20) !important;
  color: var(--ntxv-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  backdrop-filter: none !important;
}

.hero-badge-dot,
.hero-status-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--ntxv-purple) !important;
  box-shadow: none !important;
  flex: 0 0 auto;
}

#hero-greeting {
  display: none !important;
}

#hero-title {
  max-width: 620px;
  margin: 0 0 16px !important;
  font-size: clamp(54px, 7vw, 82px) !important;
  line-height: 0.98 !important;
  letter-spacing: 0 !important;
}

#home .typewriter-container {
  justify-content: flex-start !important;
  padding: 0 !important;
}

#hero-subtitle {
  width: auto !important;
  max-width: 620px !important;
  margin: 0 !important;
  color: rgba(247, 244, 255, 0.84) !important;
  font-size: clamp(17px, 2vw, 22px) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

#hero-description {
  max-width: 560px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: rgba(255, 255, 255, 0.94) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  text-align: left !important;
}

#home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 28px !important;
}

#hero-btn1,
#hero-btn2 {
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 16px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  transform: none !important;
}

#hero-btn1 {
  background: var(--ntxv-purple) !important;
  border: 1px solid rgba(196, 181, 253, 0.26) !important;
  color: #fff !important;
}

#hero-btn2 {
  background: transparent !important;
  border: 1px solid rgba(196, 181, 253, 0.22) !important;
  color: rgba(247, 244, 255, 0.86) !important;
}

#hero-btn1:hover,
#hero-btn2:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(216, 180, 254, 0.42) !important;
}

.hero-right-cluster {
  grid-column: 2;
  grid-row: 1 / 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  justify-self: center;
  position: relative;
  z-index: 2;
}

.hero-right-cluster.hero-visual-shift {
  transform: translateX(clamp(8px, 1.1vw, 16px));
}

.hero-right-cluster .hero-avatar-orbit {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: center;
  align-self: center;
  width: clamp(272px, 28.5vw, 358px) !important;
  height: clamp(272px, 28.5vw, 358px) !important;
  margin: 0 !important;
  padding: 3px !important;
  border-radius: 999px !important;
  background: var(--ntxv-purple) !important;
  outline: 1px solid rgba(196, 181, 253, 0.22);
  outline-offset: 18px;
  position: relative;
}

.hero-avatar-orbit > div {
  background: var(--ntxv-bg) !important;
}

.hero-right-cluster .hero-availability-card {
  grid-column: auto !important;
  grid-row: auto !important;
  justify-self: center;
  align-self: auto;
  position: relative;
  width: min(340px, 100%);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--ntxv-surface-2);
  border: 1px solid var(--ntxv-border);
  color: var(--ntxv-text);
}

.hero-availability-card strong,
.hero-availability-card span {
  display: block;
}

.hero-availability-card strong {
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
  color: rgba(247, 244, 255, 0.90);
}

.hero-availability-card div > span {
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.95) !important;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  max-width: 620px;
  margin-top: 34px;
}

.hero-stat {
  min-height: 72px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(139, 92, 246, 0.09);
  border: 1px solid rgba(196, 181, 253, 0.16);
}

.hero-stat strong,
.hero-stat span {
  display: block;
}

.hero-stat strong {
  color: #fff;
  font-size: 22px;
  line-height: 1;
}

.hero-stat span {
  margin-top: 7px;
  color: var(--ntxv-muted);
  font-size: 11px;
  line-height: 1.35;
}

#home .hero-marquee-bleed {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  margin-top: clamp(40px, 7vh, 68px) !important;
}

#vipMarquee {
  background: rgba(139, 92, 246, 0.055) !important;
  border-top: 1px solid rgba(196, 181, 253, 0.10) !important;
  border-bottom: 1px solid rgba(196, 181, 253, 0.10) !important;
  padding: 12px 0 !important;
}

.marquee-pill {
  background: rgba(139, 92, 246, 0.11) !important;
  border: 1px solid rgba(196, 181, 253, 0.16) !important;
  color: rgba(247, 244, 255, 0.78) !important;
  padding: 10px 18px !important;
  gap: 0 !important;
}

@keyframes pwcfCrossfade {
  from {
    opacity: 0;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

#hero-title .pwcf-word,
#hero-subtitle .pwcf-word,
#hero-description .pwcf-word {
  display: inline;
  opacity: 0;
  animation: pwcfCrossfade 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--pwcf-i, 0) * 0.042s);
}

body.reduced-fx #hero-title .pwcf-word,
body.reduced-fx #hero-subtitle .pwcf-word,
body.reduced-fx #hero-description .pwcf-word {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.hero-subtitle-wrap {
  overflow: visible !important;
}

.zalo-brand-icon {
  flex-shrink: 0;
  border-radius: 10px;
}

.hero-social-row .zalo-brand-icon {
  width: 26px !important;
  height: 26px !important;
}

.hero-social-row {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: 22px !important;
}

.hero-social-row .social-icon {
  width: 40px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(139, 92, 246, 0.08) !important;
  border: 1px solid rgba(196, 181, 253, 0.12) !important;
}

#home .absolute.bottom-10.left-1\/2 {
  display: none !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl {
  background: rgba(23, 16, 50, 0.82) !important;
  border-color: rgba(196, 181, 253, 0.14) !important;
}

#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-grid,
#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-orb,
#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-spark,
#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .skill-card-border-anim,
#skills .grid.md\:grid-cols-2 > .card-glow.rounded-2xl .sca-shimmer {
  display: none !important;
}

.skill-progress {
  height: 100% !important;
  border-radius: 999px !important;
}

.skill-progress::after {
  content: none !important;
  display: none !important;
}

#vmpPanel .vmp-control-row {
  gap: 18px !important;
  justify-content: center !important;
  padding: 4px 0 2px !important;
}

#vmpPanel .vmp-btn {
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  background: rgba(139, 92, 246, 0.14) !important;
  border: 1px solid rgba(196, 181, 253, 0.16) !important;
}

#vmpPanel .vmp-play-btn {
  width: 52px !important;
  height: 52px !important;
  background: var(--ntxv-purple) !important;
  border-color: rgba(216, 180, 254, 0.32) !important;
}

#vmpPanel .vmp-waves {
  margin-left: 2px !important;
  opacity: 0.7 !important;
}

.vmp-power-toggle {
  display: none !important;
}

#vmpPanel {
  background: var(--ntxv-surface-2) !important;
  border-color: var(--ntxv-border) !important;
}

#vmpIconBubble {
  background: var(--ntxv-surface-2) !important;
  border-color: var(--ntxv-border) !important;
}

@media (max-width: 900px) {
  body:not(.light-mode),
  body.light-mode {
    background-attachment: scroll !important;
    background-size: 44px 44px !important;
  }

  #home {
    min-height: auto !important;
    padding: calc(86px + env(safe-area-inset-top)) 18px 38px !important;
  }

  #home .animate-scale-in.delay-200 {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2,
  #home .typewriter-container,
  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row,
  .hero-social-row {
    justify-content: center !important;
  }

  .hero-avatar-orbit {
    order: 1;
    width: 132px !important;
    height: 132px !important;
    margin: 0 0 20px !important;
    outline-offset: 8px;
  }

  .hero-availability-card {
    order: 2;
    width: min(100%, 320px);
    margin: 0 0 20px;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 3;
  }

  #hero-title {
    order: 4;
    font-size: clamp(38px, 10vw, 56px) !important;
    text-align: center !important;
  }

  #home .typewriter-container {
    order: 5;
  }

  #hero-subtitle,
  #hero-description {
    text-align: center !important;
  }

  #hero-description {
    order: 6;
    max-width: 34ch !important;
    margin-top: 14px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 7;
    width: 100%;
    align-items: stretch !important;
  }

  #hero-btn1,
  #hero-btn2 {
    width: 100% !important;
  }

  .hero-stats-grid {
    order: 8;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
  }

  #home .hero-marquee-bleed {
    order: 9;
    margin-top: 30px !important;
  }

  .hero-social-row {
    order: 10;
    margin-top: 20px !important;
  }

  #vipMusicPlayer.vmp-compact {
    left: 8px !important;
    bottom: calc(6px + env(safe-area-inset-bottom)) !important;
    transform: translate3d(0,0,0) scale(0.42) !important;
    opacity: 0.58 !important;
  }
}

/* ===== NTXV hero balance update ===== */
body:not(.light-mode) {
  background-color: #06050d !important;
  background-image:
    radial-gradient(circle at 78% 16%, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.15) 18%, transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.07) 20%, transparent 44%),
    linear-gradient(rgba(139, 92, 246, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, #06050d 0%, #110b23 52%, #05040b 100%) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
  background-attachment: fixed !important;
}

#hero-title {
  color: #fff !important;
  letter-spacing: 0 !important;
}

#hero-title .gradient-text,
#hero-title .hero-name-line {
  display: block !important;
  background: none !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: none !important;
}

#hero-title .hero-name-line + .hero-name-line {
  margin-top: 0.04em;
}

#hero-subtitle,
#hero-description,
.hero-badge,
.hero-availability-card strong,
.hero-availability-card span,
#hero-btn2,
.hero-social-row .social-icon {
  color: rgba(255, 255, 255, 0.92) !important;
}

#hero-description {
  color: rgba(255, 255, 255, 0.82) !important;
}

.hero-stats-grid {
  display: none !important;
}

.hero-right-cluster {
  grid-row: 1 / 8 !important;
}

.hero-right-cluster .hero-avatar-orbit {
  grid-row: auto !important;
}

#vmpPanel .vmp-control-row {
  gap: 22px !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 2px 0 !important;
}

#vmpPanel .vmp-btn {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
}

#vmpPanel .vmp-play-btn {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
}

#vmpPanel .vmp-btn:hover,
#vmpPanel .vmp-btn:active {
  transform: translateY(-1px) !important;
}

#vmpPanel .vmp-waves {
  margin-left: 0 !important;
  transform: scale(0.92) !important;
  transform-origin: center !important;
}

#home,
#vmpPanel,
.card-glow,
.project-card,
.skill-item,
.tool-badge,
.marquee-track {
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (max-width: 900px) {
  body:not(.light-mode) {
    background-image:
      radial-gradient(circle at 75% 12%, rgba(139, 92, 246, 0.24) 0%, rgba(139, 92, 246, 0.12) 18%, transparent 42%),
      linear-gradient(rgba(139, 92, 246, 0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.12) 1px, transparent 1px),
      linear-gradient(180deg, #06050d 0%, #100a22 56%, #05040b 100%) !important;
    background-size: auto, 44px 44px, 44px 44px, auto !important;
  }

  .hero-availability-card {
    order: 2 !important;
    align-self: center !important;
    min-width: 0 !important;
    width: min(100%, 320px) !important;
    justify-content: center !important;
    margin: 0 0 18px !important;
  }

  #hero-title {
    font-size: clamp(42px, 12vw, 58px) !important;
    line-height: 0.98 !important;
  }

  #hero-subtitle,
  #hero-description {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  #vmpPanel .vmp-control-row {
    gap: 20px !important;
  }

  #vmpPanel .vmp-btn {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  #vmpPanel .vmp-play-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ===== NTXV final requested home/music pass - EOF ===== */
body:not(.light-mode) {
  background-image:
    radial-gradient(circle at 78% 16%, rgba(139, 92, 246, 0.28) 0%, rgba(139, 92, 246, 0.15) 18%, transparent 42%),
    radial-gradient(circle at 50% 74%, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.07) 20%, transparent 44%),
    linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
    linear-gradient(180deg, #06050d 0%, #110b23 52%, #05040b 100%) !important;
  background-size: auto, auto, 56px 56px, 56px 56px, auto !important;
}

.hero-stats-grid {
  display: none !important;
}

#hero-title .gradient-text,
#hero-title .hero-name-line {
  display: block !important;
  background: none !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

#vmpPanel .vmp-control-row {
  gap: 26px !important;
}

#vmpPanel .vmp-btn {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

#vmpPanel .vmp-play-btn {
  width: 46px !important;
  height: 46px !important;
  flex: 0 0 46px !important;
}

#vmpPanel .vmp-waves {
  transform: scale(0.86) !important;
  transform-origin: center !important;
  margin-left: 0 !important;
}

@media (min-width: 901px) {
  #hero-title {
    font-size: clamp(68px, 7.6vw, 100px) !important;
    line-height: 0.95 !important;
    margin-bottom: 22px !important;
  }

  #hero-subtitle {
    font-size: clamp(25px, 2.35vw, 30px) !important;
    max-width: 760px !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    max-width: 710px !important;
    margin-top: 24px !important;
    font-size: 18px !important;
    line-height: 1.82 !important;
    color: rgba(255, 255, 255, 0.84) !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 54px !important;
    padding: 0 28px !important;
    font-size: 16px !important;
    border-radius: 18px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 34px !important;
    gap: 18px !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    width: clamp(340px, 32vw, 430px) !important;
    height: clamp(340px, 32vw, 430px) !important;
    z-index: 2 !important;
  }

  .hero-availability-card {
    position: absolute !important;
    top: clamp(490px, 68%, 540px) !important;
    right: clamp(8px, 3vw, 42px) !important;
    z-index: 4 !important;
    width: min(360px, 86%) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: rgba(13, 12, 31, 0.76) !important;
    border-color: rgba(196, 181, 253, 0.28) !important;
  }

  .hero-availability-card div {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .hero-availability-card div > span,
  .hero-availability-sub {
    display: block !important;
    margin-top: 5px !important;
    color: rgba(255, 255, 255, 0.98) !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    text-transform: none !important;
  }

  .hero-availability-arrow {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    font-size: 20px !important;
  }

  .hero-social-row {
    grid-column: 1 !important;
    grid-row: 6 !important;
    gap: 24px !important;
    margin-top: 24px !important;
  }

  .hero-social-row .social-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 15px !important;
  }

  #home .hero-marquee-bleed {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 38px !important;
  }
}

@media (max-width: 900px) {
  body:not(.light-mode) {
    background-image:
      radial-gradient(circle at 72% 12%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.11) 18%, transparent 42%),
      linear-gradient(rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.084) 1px, transparent 1px),
      linear-gradient(180deg, #06050d 0%, #100a22 56%, #05040b 100%) !important;
    background-size: auto, 44px 44px, 44px 44px, auto !important;
  }

  .hero-availability-card {
    display: none !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 1 !important;
    margin: 18px 0 20px !important;
  }

  .hero-right-cluster {
    order: 2 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    transform: translateX(10px);
  }

  .hero-right-cluster .hero-avatar-orbit {
    order: unset !important;
    width: 184px !important;
    height: 184px !important;
    margin: 0 0 26px !important;
    outline-offset: 12px !important;
  }

  #hero-title {
    order: 3 !important;
    font-size: clamp(50px, 15vw, 72px) !important;
    line-height: 0.95 !important;
    margin-bottom: 18px !important;
  }

  #home .typewriter-container {
    order: 4 !important;
  }

  #hero-subtitle {
    font-size: 20px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.94) !important;
  }

  #hero-description {
    order: 5 !important;
    max-width: 33ch !important;
    font-size: 17px !important;
    line-height: 1.72 !important;
    margin-top: 22px !important;
    color: rgba(255, 255, 255, 0.88) !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 6 !important;
    margin-top: 30px !important;
  }

  #home .hero-marquee-bleed {
    order: 7 !important;
  }

  .hero-social-row {
    order: 8 !important;
    gap: 18px !important;
  }

  #vmpPanel .vmp-control-row {
    gap: 24px !important;
  }

  #vmpPanel .vmp-btn {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  #vmpPanel .vmp-play-btn {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }
}

/* ===== Home balance tweak 2026-05-08 ===== */
@media (min-width: 901px) {
  #home .animate-scale-in.delay-200 {
    grid-template-columns: minmax(0, 0.95fr) minmax(288px, 388px) !important;
    column-gap: clamp(58px, 8.5vw, 112px) !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2,
  #hero-title,
  #home .typewriter-container,
  #hero-description,
  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row,
  .hero-social-row {
    transform: translateX(-22px) scale(0.95) !important;
    transform-origin: left center !important;
  }

  #hero-title {
    font-size: clamp(64.5px, 7.22vw, 95px) !important;
  }

  #hero-subtitle {
    font-size: clamp(23.75px, 2.23vw, 28.5px) !important;
  }

  #hero-description {
    max-width: 674px !important;
    font-size: 17.1px !important;
  }

  #hero-btn1,
  #hero-btn2 {
    min-height: 51px !important;
    padding: 0 27px !important;
    font-size: 15.2px !important;
  }

  .hero-avatar-orbit {
    width: clamp(297px, 27.9vw, 378px) !important;
    height: clamp(297px, 27.9vw, 378px) !important;
    transform: translateY(-18px) !important;
  }

  .hero-availability-card {
    top: clamp(510px, 70%, 565px) !important;
    right: clamp(18px, 4vw, 56px) !important;
  }

  .hero-social-row {
    gap: 40px !important;
  }
}

@media (max-width: 900px) {
  .hero-avatar-orbit {
    width: 155px !important;
    height: 155px !important;
    margin-bottom: 28px !important;
    transform: translateY(-8px) !important;
  }

  #hero-title {
    font-size: clamp(47.5px, 14.25vw, 68.5px) !important;
  }

  #hero-subtitle {
    font-size: 19px !important;
  }

  #hero-description {
    font-size: 16.15px !important;
  }

  .hero-social-row {
    gap: 26px !important;
  }
}

/* ===== NTXV stability pass 2026-05-09 ===== */
:root {
  --ntxv-rest-text: #ffffff;
  --ntxv-active-text: #ffffff;
}

body:not(.light-mode) .text-gray-300,
body:not(.light-mode) .text-gray-400,
body:not(.light-mode) .text-gray-500,
body:not(.light-mode) .text-slate-300,
body:not(.light-mode) .text-slate-400,
body:not(.light-mode) .text-zinc-300,
body:not(.light-mode) .text-zinc-400,
body:not(.light-mode) .text-neutral-300,
body:not(.light-mode) .text-neutral-400,
body:not(.light-mode) .nav-link,
body:not(.light-mode) .nav-dropdown-item,
body:not(.light-mode) .mobile-nav-desc,
body:not(.light-mode) .mobile-menu-intro-text,
body:not(.light-mode) .tp-desc,
body:not(.light-mode) .pnSub,
body:not(.light-mode) .pnNote,
body:not(.light-mode) .cmb-btn div,
body:not(.light-mode) .vmp-artist,
body:not(.light-mode) .vmp-track-label,
body:not(.light-mode) .vmp-full-link,
body:not(.light-mode) .v3-announce-badge,
body:not(.light-mode) .v3-announce-badge span,
body:not(.light-mode) .v3-announce-btn-secondary,
body:not(.light-mode) [style*="color:rgba(255,255,255,0."],
body:not(.light-mode) [style*="color: rgba(255,255,255,0."],
body:not(.light-mode) [style*="color: rgba(255, 255, 255, 0."],
body:not(.light-mode) [style*="color:#818cf8"],
body:not(.light-mode) [style*="color:#c084fc"],
body:not(.light-mode) [style*="color:#fbbf24"],
body:not(.light-mode) [style*="color:#34d399"] {
  color: #ffffff !important;
  -webkit-text-fill-color: currentColor !important;
}

.hero-availability-card {
  cursor: pointer;
  text-decoration: none !important;
  color: #fff !important;
  transform: translateZ(0);
}

.hero-availability-card:hover,
.hero-availability-card:focus-visible {
  transform: translateY(-1px) translateZ(0) !important;
}

#about {
  padding-top: clamp(58px, 7vw, 82px) !important;
  padding-bottom: clamp(58px, 7vw, 82px) !important;
  overflow: clip;
}

#about .grid.md\:grid-cols-2 {
  gap: clamp(22px, 3.2vw, 38px) !important;
  align-items: start !important;
}

#about .animate-fade-in-left,
#about .animate-fade-in-right {
  display: block !important;
}

#about .animate-fade-in-left,
#about .animate-fade-in-right,
#about .reveal-section,
#about .scale-reveal {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition-duration: 0.16s !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

#about .animate-fade-in-right > .card-glow {
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.5vw, 28px) !important;
  contain: layout paint;
}

#about #about-title {
  margin-bottom: 14px !important;
}

#about #about-p1,
#about #about-p2 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  line-height: 1.68 !important;
  color: #fff !important;
}

#about #about-p2 {
  margin-bottom: 18px !important;
}

#about .grid.grid-cols-2.gap-6 {
  gap: 14px !important;
}

#about .grid.grid-cols-2.gap-6 > .card-glow {
  min-height: 86px !important;
  padding: 14px 16px !important;
  transform: translateZ(0) !important;
  contain: layout paint;
}

#about .grid.grid-cols-2.gap-6 > .card-glow:hover,
#about .timeline-item:hover,
#about .animate-fade-in-right > .card-glow:hover {
  transform: none !important;
}

#about .timeline-item {
  padding-bottom: 2px !important;
  transform: none !important;
  contain: layout paint;
}

#about .space-y-6 {
  gap: 18px !important;
}

#about .timeline-item p {
  color: #fff !important;
}

.project-card,
.dl-card,
.stat-card,
.card-hover,
.hov-scale,
.timeline-item,
.skill-item,
.tool-badge,
.contact-card-new,
.faq-item {
  will-change: auto !important;
}

.project-card:hover,
.dl-card:hover,
.stat-card:hover,
.card-hover:hover,
.hov-scale:hover,
.skill-item:hover,
.tool-badge:hover,
.contact-card-new:hover,
.faq-item:hover {
  transform: translateY(-2px) !important;
}

.project-card:hover .project-image {
  transform: scale(1.025) !important;
}

@media (max-width: 900px) {
  #about {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  #about .grid.md\:grid-cols-2 {
    gap: 18px !important;
  }

  #about .grid.grid-cols-2.gap-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #about .grid.grid-cols-2.gap-6 > .card-glow {
    min-height: 78px !important;
    padding: 12px !important;
  }
}

/* ===== Requested hero order + Zalo logo fix 2026-05-14 ===== */
.zalo-brand-icon {
  display: block;
  object-fit: contain;
  flex-shrink: 0;
}

.hero-social-row .zalo-brand-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
}

.contact-zalo-icon {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
}

.contact-card-icon .contact-zalo-logo {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
}

@media (min-width: 901px) {
  #home .animate-scale-in.delay-200 {
    display: grid !important;
    grid-template-columns: minmax(0, 0.95fr) minmax(300px, 390px) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    column-gap: clamp(58px, 8.5vw, 112px) !important;
    align-items: center !important;
  }

  .hero-right-cluster {
    grid-column: 2 !important;
    grid-row: 1 / span 6 !important;
    align-self: center !important;
    justify-self: center !important;
    justify-content: center !important;
    position: relative !important;
    transform: translateX(clamp(8px, 1.1vw, 16px)) !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    transform: none !important;
    margin: 0 !important;
  }

  .hero-right-cluster .hero-availability-card,
  .hero-availability-card {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 4 !important;
    width: min(360px, 90%) !important;
    min-width: 0 !important;
    margin: 28px auto 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    grid-column: 1 !important;
    grid-row: 5 !important;
    margin-top: 34px !important;
  }

  #home .animate-scale-in.delay-200 > .hero-social-row {
    grid-column: 1 !important;
    grid-row: 6 !important;
    justify-content: flex-start !important;
    gap: 24px !important;
    margin-top: 24px !important;
  }

  #home .hero-marquee-bleed {
    margin-top: 34px !important;
  }
}

@media (max-width: 900px) {
  #home .animate-scale-in.delay-200 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-right-cluster {
    order: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transform: none !important;
  }

  .hero-right-cluster .hero-avatar-orbit {
    order: 1 !important;
    transform: none !important;
    margin: 0 auto 18px !important;
  }

  .hero-right-cluster .hero-availability-card,
  .hero-availability-card {
    order: 2 !important;
    display: flex !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(100%, 320px) !important;
    margin: 0 auto 22px !important;
  }

  #home .animate-scale-in.delay-200 > .flex.justify-center.mb-2 {
    order: 2 !important;
  }

  #hero-title {
    order: 3 !important;
  }

  #home .typewriter-container {
    order: 4 !important;
  }

  #hero-description {
    order: 5 !important;
  }

  #home .animate-scale-in.delay-200 > .flex.flex-col.sm\:flex-row {
    order: 6 !important;
  }

  #home .animate-scale-in.delay-200 > .hero-social-row,
  .hero-social-row {
    order: 7 !important;
    justify-content: center !important;
    gap: 18px !important;
    margin-top: 22px !important;
  }

  #home .hero-marquee-bleed {
    order: 8 !important;
    margin-top: 28px !important;
  }
}

/* ===== NTXV final performance polish 2026-05-14 ===== */
html,
body,
section,
#home,
.hero-bg-vip,
.app-wrapper {
  background-attachment: scroll !important;
}

.free-nav-btn::before,
.free-nav-btn::after,
#freeMenuDropdown .nav-dropdown-item::before,
#freeMenuDropdown .nav-dropdown-item::after,
#dichvuNavDropdown .nav-dropdown-item::before,
#dichvuNavDropdown .nav-dropdown-item::after {
  display: none !important;
  animation: none !important;
}

.free-nav-btn:hover,
.free-menu-btn:hover,
#dichvuNavBtn:hover,
#freeMenuDropdown .nav-dropdown-item:hover,
#dichvuNavDropdown .nav-dropdown-item:hover {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: translateY(-1px) !important;
}

.btn-primary:hover,
.btn-outline:hover,
.liquid-btn:hover,
.dl-btn:hover,
.nav-pay-btn:hover {
  box-shadow: 0 8px 18px rgba(99, 102, 241, 0.16) !important;
  filter: none !important;
}

.hero-social-row .zalo-brand-icon,
.contact-zalo-icon,
.contact-card-icon .contact-zalo-logo {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

.hero-social-row .zalo-brand-icon {
  width: 42px !important;
  height: 42px !important;
}

body.reduced-fx #auroraCanvas,
body.reduced-fx .vip-orb,
body.reduced-fx .shape,
body.reduced-fx .morphing-blob,
body.reduced-fx [class^="particle-"],
body.reduced-fx [class*=" particle-"],
body.reduced-fx .cursor-trail-dot,
body.reduced-fx #vipCursorOuter,
body.reduced-fx .ntxv-smooth-cursor,
body.reduced-fx .ntxv-smooth-cursor-dot {
  display: none !important;
  animation: none !important;
}

/* ===== NTXV requested interaction/visual cleanup 2026-05-16 ===== */
html,
body,
body *:not(svg):not(path) {
  font-family: var(--ntxv-font-main, 'Inter', sans-serif) !important;
}

:root {
  --ntxv-panel-shadow: 0 8px 18px rgba(5, 6, 18, 0.14);
  --shadow-lg: 0 10px 24px rgba(5, 6, 18, 0.18);
}

#mainHeaderNav {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.18) !important;
}

.card-glow,
.project-card,
.skill-item,
.tool-badge,
.dl-card,
.stat-card,
.faq-item,
.contact-card-new,
.boost-order-panel,
.selectable-price,
.mobile-menu-action,
.mobile-nav-link,
.hero-badge,
.marquee-pill {
  box-shadow: var(--ntxv-panel-shadow) !important;
}

#vmpPanel,
.pnBox,
.cmbBox,
.v3-announce,
#settingsPanel,
#mobileMenu,
#freeMenuDropdown,
#dichvuNavDropdown {
  box-shadow: 0 12px 28px rgba(4, 5, 16, 0.22) !important;
}

button:active,
button:focus,
button:focus-visible,
a:active,
a:focus,
a:focus-visible,
[role="button"]:active,
[role="button"]:focus,
[role="button"]:focus-visible,
.btn-primary:active,
.btn-primary:focus,
.btn-outline:active,
.btn-outline:focus,
.btn-scale:active,
.vmp-btn:active,
.vmp-btn:focus,
.cmb-btn:active,
.cmb-btn:focus,
.ghost-btn:active,
.ghost-btn:focus,
.primary-btn:active,
.primary-btn:focus,
.mobile-nav-link:active,
.mobile-nav-link:focus,
.v3-announce-btn-primary:active,
.v3-announce-btn-primary:focus,
.v3-announce-btn-secondary:active,
.v3-announce-btn-secondary:focus {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

.btn-primary:hover,
.btn-outline:hover,
.liquid-btn:hover,
.dl-btn:hover,
.nav-pay-btn:hover {
  box-shadow: 0 5px 14px rgba(99, 102, 241, 0.10) !important;
}

.vmp-power-toggle[aria-pressed="true"] .vmp-power-light,
.skill-progress::after,
.vmp-volume-slider::-webkit-slider-thumb,
.vmp-vol-slider::-webkit-slider-thumb {
  box-shadow: none !important;
}

.v3-announce-footer {
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.v3-announce-btn-today {
  border-color: rgba(196, 181, 253, 0.20) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

.hero-social-row .social-icon:has(.zalo-brand-icon) {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.hero-social-row .zalo-brand-icon {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 10px !important;
}

.cmb-btn-zalo .cmb-btn-icon {
  width: 50px !important;
  height: 50px !important;
}

.contact-zalo-icon,
.contact-card-icon .contact-zalo-logo {
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
}

@media (min-width: 901px) {
  body #projects.projects-horizontal #featuredProjectsGrid {
    gap: clamp(21px, 2.55vw, 35px) !important;
  }

  body #projects.projects-horizontal #featuredProjectsGrid .project-card {
    flex-basis: clamp(368px, 35.65vw, 451px) !important;
    width: clamp(368px, 35.65vw, 451px) !important;
    min-height: clamp(495px, 66.7vh, 598px) !important;
  }

  body #projects.projects-horizontal #featuredProjectsGrid .project-card .h-48,
  body #projects.projects-horizontal #featuredProjectsGrid .project-card [style*='height:200px'] {
    height: clamp(219px, 25.3vh, 267px) !important;
  }

  body:not(.light-mode) #projects .project-card,
  #projects .project-card,
  #projects .project-card:hover,
  #projects .project-card:active,
  #projects .project-card:focus-within {
    box-shadow: 0 10px 22px rgba(4, 8, 28, 0.20) !important;
  }
}

@media (max-width: 900px) {
  #home .hero-badge,
  #hero-greeting,
  #home .hero-right-cluster .hero-availability-card,
  #home .hero-availability-card {
    display: none !important;
  }

  .hero-social-row .social-icon:has(.zalo-brand-icon) {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex: 0 0 46px !important;
  }

  #home .hero-social-row {
    gap: 14px !important;
    width: min(100%, 310px) !important;
    margin-top: 18px !important;
  }

  #home .hero-social-row .social-icon {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #home .hero-social-row .social-icon svg,
  #home .hero-social-row .social-icon img {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
  }

  .hero-social-row .zalo-brand-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    border-radius: 9px !important;
  }
}

body.reduced-fx #home .hero-social-row {
  display: flex !important;
  align-items: center !important;
}

body.reduced-fx #home .hero-social-row .social-icon,
body.reduced-fx #home .hero-social-row .social-icon:has(.zalo-brand-icon) {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(18px) scale(1) !important;
}

body.reduced-fx #home .hero-social-row .social-icon svg,
body.reduced-fx #home .hero-social-row .social-icon img {
  width: 25px !important;
  height: 25px !important;
  max-width: 25px !important;
  max-height: 25px !important;
}

body.reduced-fx #home .hero-social-row .social-icon .zalo-brand-icon {
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 10px !important;
}

@media (min-width: 901px) {
  body.reduced-fx #home .hero-social-row {
    transform: translateX(-22px) scale(0.95) !important;
    transform-origin: left center !important;
  }
}

@media (max-width: 900px) {
  body.reduced-fx #home .hero-social-row {
    transform: none !important;
    justify-content: center !important;
    gap: 14px !important;
    width: min(100%, 310px) !important;
  }

  body.reduced-fx #home .hero-social-row .social-icon,
  body.reduced-fx #home .hero-social-row .social-icon:has(.zalo-brand-icon) {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    flex-basis: 46px !important;
    transform: none !important;
  }

  body.reduced-fx #home .hero-social-row .social-icon .zalo-brand-icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
}