:root {
  --bg-primary: #000000;
  --bg-secondary: #0a0a0a;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.4);
  --accent: #e4ff1a;
  --accent-dim: rgba(228, 255, 26, 0.15);
  --accent-glow: rgba(228, 255, 26, 0.3);
  --accent-secondary: #ff3d00;
  --accent-tertiary: #00e5ff;
  
  
  --glass-bg: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --border-subtle: 1px solid rgba(255, 255, 255, 0.07);
  --border-accent: 1px solid rgba(228, 255, 26, 0.2);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: "Space Grotesk", "Inter", sans-serif;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  --section-padding: clamp(80px, 12vh, 140px);
  --container-width: 1200px;
}
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) var(--bg-primary);
}
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 1024px) {
  body {
    cursor: auto !important;
  }
  #cursor-dot,
  #cursor-ring,
  #cursor-glow {
    display: none !important;
  }
}
::selection {
  background: #e4ff1a4d;
  color: #000;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 2px;
}
img {
  max-width: 100%;
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}
.section {
  padding: var(--section-padding) 0;
  position: relative;
  overflow: hidden;
}
@keyframes floatAmbient {
  0% {
    transform: translate(0) scale(1) rotate(0);
  }
  50% {
    transform: translate(50px, 100px) scale(1.1) rotate(15deg);
  }
  to {
    transform: translate(-30px, 50px) scale(0.9) rotate(-10deg);
  }
}
@keyframes gridScroll {
  0% {
    background-position: 0 0;
  }
  to {
    background-position: 100px 100px;
  }
}
@keyframes subtleFloat {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes subtleFloatReverse {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
.accent {
  color: var(--accent);
}
.glass {
  background: var(--glass-bg);
  border: var(--border-subtle);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--glass-shadow);
}
.gradient-text {
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: initial;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradientShift 4s ease-in-out infinite;
}
@keyframes gradientShift {
  0%,
  to {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
[data-lucide] {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
#cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  will-change: left, top;
  box-shadow:
    0 0 12px var(--accent-glow),
    0 0 4px var(--accent);
  transition:
    width 0.15s,
    height 0.15s,
    background 0.15s;
}
#cursor-dot.hovering {
  width: 14px;
  height: 14px;
  background: var(--accent-secondary);
  box-shadow: 0 0 20px #ff3d0066;
}
#cursor-ring {
  position: fixed;
  width: 40px;
  height: 40px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  will-change: left, top;
  opacity: 0.5;
  transition:
    width 0.3s,
    height 0.3s,
    border-color 0.3s,
    opacity 0.3s;
}
#cursor-ring.hovering {
  width: 56px;
  height: 56px;
  border-color: var(--accent-secondary);
  opacity: 0.8;
}
#cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 168, 128, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  will-change: left, top;
}
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}
.preloader-inner {
  text-align: center;
}
.preloader-name {
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: 0.2em;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: initial;
  background-clip: text;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards 0.2s;
}
.preloader-bar {
  width: 200px;
  height: 2px;
  background: #ffffff0f;
  margin: 24px auto;
  border-radius: 2px;
  overflow: hidden;
}
.preloader-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  width: 0%;
  animation: fillBar 1.8s ease forwards 0.5s;
}
@keyframes fillBar {
  to {
    width: 100%;
  }
}
.preloader-tagline {
  font-size: 13px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards 0.8s;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px clamp(24px, 4vw, 48px);
  transition: all var(--transition-smooth);
}
#navbar.scrolled {
  padding: 14px clamp(24px, 4vw, 48px);
  background: var(--bg-primary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: none;
}
.nav-logo {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  cursor: none;
  transition: opacity var(--transition-fast);
}
.nav-logo:hover {
  opacity: 0.7;
}
.nav-logo .accent {
  color: var(--accent);
}
.nav-links {
  display: flex;
  gap: 32px;
}
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  position: relative;
  cursor: none;
}
.nav-link:after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-smooth);
}
.nav-link:hover,
.nav-link.active {
  color: var(--accent);
}
.nav-link:hover:after,
.nav-link.active:after {
  width: 100%;
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: all var(--transition-fast);
}
.nav-hamburger.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav-hamburger.open span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
#hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero-reveal-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  z-index: 10;
  box-shadow:
    0 0 20px var(--accent),
    0 0 60px var(--accent-glow);
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-flash {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0;
  z-index: 9;
  pointer-events: none;
}
#hero .hero-greeting,
#hero .hero-name,
#hero .hero-subtitle,
#hero .hero-cta,
#hero .hero-search-hint,
#hero .hero-scroll-indicator {
  opacity: 0;
  transition: none;
}
#hero .hero-bg-grid {
  opacity: 0;
}
#hero .hero-greeting {
  transform: translate(-30px);
  filter: blur(12px);
}
#hero .hero-name {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.1);
  filter: blur(0px);
}
#hero .hero-subtitle {
  transform: translateY(30px) scale(0.9);
  filter: blur(8px);
}
#hero .hero-cta {
  transform: translateY(50px) scale(0.8);
  filter: blur(6px);
}
#hero .hero-scroll-indicator {
  transform: translate(-50%) translateY(-30px);
}
#hero.hero-loaded .hero-reveal-line {
  animation: lineSweep 0.6s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes lineSweep {
  0% {
    left: 0;
    width: 0;
    opacity: 1;
  }
  50% {
    left: 0;
    width: 100%;
    opacity: 1;
  }
  to {
    left: 100%;
    width: 0;
    opacity: 0;
  }
}
#hero.hero-loaded .hero-flash {
  animation: flashBurst 0.5s ease 0.25s forwards;
}
@keyframes flashBurst {
  0% {
    opacity: 0;
  }
  15% {
    opacity: 0.15;
  }
  30% {
    opacity: 0;
  }
  45% {
    opacity: 0.08;
  }
  to {
    opacity: 0;
  }
}
#hero.hero-loaded .hero-bg-grid {
  animation: gridGlitch 1s ease 0.3s forwards;
}
@keyframes gridGlitch {
  0% {
    opacity: 0;
    transform: scale(1.3) rotate(0.5deg);
  }
  20% {
    opacity: 0.6;
    transform: scale(0.98) rotate(-0.2deg);
  }
  40% {
    opacity: 0.3;
    transform: scale(1.02) rotate(0.1deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
#hero.hero-loaded .hero-name {
  animation:
    nameReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards,
    nameGlow 0.4s ease 0.8s forwards;
}
@keyframes nameReveal {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    transform: scale(1.1);
  }
  20% {
    opacity: 1;
  }
  to {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes nameGlow {
  0% {
    text-shadow: none;
  }
  50% {
    text-shadow:
      0 0 40px rgba(228, 255, 26, 0.3),
      0 0 80px rgba(228, 255, 26, 0.1);
  }
  to {
    text-shadow: none;
  }
}
#hero.hero-loaded .hero-greeting {
  animation: flickerIn 0.8s ease 0.5s forwards;
}
@keyframes flickerIn {
  0% {
    opacity: 0;
    transform: translate(-30px);
    filter: blur(12px);
  }
  25% {
    opacity: 0.7;
    filter: blur(0px);
  }
  35% {
    opacity: 0.2;
    filter: blur(4px);
  }
  50% {
    opacity: 0.9;
    transform: translate(-5px);
    filter: blur(0px);
  }
  65% {
    opacity: 0.5;
  }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0px);
  }
}
#hero.hero-loaded .hero-subtitle {
  animation: depthReveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s forwards;
}
@keyframes depthReveal {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}
#hero.hero-loaded .hero-cta {
  animation: ctaSpring 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s forwards;
}
#hero.hero-loaded .hero-search-hint {
  animation: hintReveal 0.8s ease 1.3s forwards;
}
@keyframes hintReveal {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ctaSpring {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
    filter: blur(6px);
  }
  60% {
    transform: translateY(-6px) scale(1.02);
    filter: blur(0px);
  }
  80% {
    transform: translateY(3px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}
#hero.hero-loaded .hero-scroll-indicator {
  animation: scrollDrop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}
@keyframes scrollDrop {
  0% {
    opacity: 0;
    transform: translate(-50%) translateY(-30px);
  }
  70% {
    transform: translate(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translate(-50%) translateY(0);
  }
}
#hero:before,
#hero:after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(150px);
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
  animation: floatAmbient 20s infinite alternate ease-in-out;
}
#hero:before {
  background: var(--accent);
  top: -150px;
  left: -150px;
}
#hero:after {
  background: var(--accent-tertiary, #00e5ff);
  bottom: -150px;
  right: -150px;
  animation-delay: -10s;
}
.hero-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(228, 255, 26, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228, 255, 26, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    black 30%,
    transparent 80%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 70% 70% at 50% 50%,
    black 30%,
    transparent 80%
  );
  animation: gridScroll 100s linear infinite;
}
#hero-3d-container,
#hero-3d-foreground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
#hero-3d-container {
  z-index: 1;
  opacity: 0;
  transition: opacity 2s ease;
}
#hero-3d-foreground {
  z-index: 3;
  opacity: 0;
  transition: opacity 2s ease;
}
#hero.hero-loaded #hero-3d-container,
#hero.hero-loaded #hero-3d-foreground {
  opacity: 1;
}
#hero-3d-container canvas,
#hero-3d-foreground canvas {
  width: 100% !important;
  height: 100% !important;
}
.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  padding: 0 20px;
  text-shadow:
    0 2px 20px rgba(0, 0, 0, 0.8),
    0 0 40px rgba(0, 0, 0, 0.5);
  transition: text-shadow 0.8s ease;
}
.hero-search-hint {
  margin-top: 24px;
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-search-hint kbd {
  background: var(--bg-card);
  border: var(--border-subtle);
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-body);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px #0003;
  transition: all 0.3s ease;
}
.hero-greeting {
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.hero-name {
  font-family: var(--font-heading);
  font-size: clamp(48px, 10vw, 130px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}
.hero-subtitle {
  font-size: clamp(16px, 2vw, 22px);
  color: var(--text-secondary);
  font-weight: 500;
  min-height: 1.5em;
  margin-bottom: 48px;
}
.cursor-blink {
  animation: blink 1s step-end infinite;
  color: var(--accent);
  font-weight: 300;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}
.hero-cta {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-xl);
  transition: all var(--transition-smooth);
  cursor: none;
  letter-spacing: 0.01em;
}
.btn-primary {
  background: var(--accent);
  color: #000;
  border: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--accent-glow);
}
.btn-outline {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-subtle);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 5;
}
.scroll-line {
  width: 1px;
  height: 40px;
  background: var(--bg-card), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,
  to {
    opacity: 0.3;
    transform: scaleY(0.6);
  }
  50% {
    opacity: 1;
    transform: scaleY(1);
  }
}
.hero-scroll-indicator span {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.section-title {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.section-num {
  color: var(--accent);
  font-size: 0.5em;
  font-weight: 500;
  margin-right: 12px;
  vertical-align: middle;
}
.section-subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 48px;
  line-height: 1.7;
}
.about-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 80px;
  margin-top: 48px;
  align-items: start;
}
@media (max-width: 1024px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.about-image-container {
  position: sticky;
  top: 100px;
}
.about-image-wrapper {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(228, 255, 26, 0.15);
  box-shadow: 0 30px 70px -15px #000c;
  background: var(--bg-card);
}
.about-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  display: block;
  filter: grayscale(30%) brightness(0.95);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-image-wrapper:hover .about-img {
  filter: grayscale(0%) brightness(1.1);
  transform: scale(1.03);
}
.about-img-glow {
  position: absolute;
  inset: 0;
  background: transparent 0%,
    transparent 70%
  );
  opacity: 0.1;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.about-image-wrapper:hover .about-img-glow {
  opacity: 0.2;
}
.about-content {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.about-text p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.8;
}
.about-text strong {
  color: var(--text-primary);
  font-weight: 600;
}
.about-intro {
  font-size: 20px !important;
  color: var(--text-primary) !important;
  line-height: 1.6;
  margin-bottom: 32px !important;
}
.about-hobbies {
  margin-top: 80px;
}
.about-hobbies h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  margin-bottom: 32px;
  color: var(--text-primary);
  text-align: center;
}
.hobbies-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
@media (max-width: 1200px) {
  .hobbies-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 600px) {
  .hobbies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.hobby-item {
  background: var(--glass-bg);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 24px 16px;
  text-align: center;
  transition: all var(--transition-smooth);
}
.hobby-item:hover {
  background: var(--bg-card-hover);
  transform: translateY(-4px);
  border-color: #e4ff1a33;
}
.hobby-icon {
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.hobby-icon [data-lucide] {
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.hobby-item span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.tools-marquee-wrapper {
  margin-top: 48px;
  position: relative;
  overflow: hidden;
}
.spline-viewer {
  width: 100%;
  height: clamp(280px, 40vw, 480px);
  margin-top: 48px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.spline-viewer iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.marquee-track {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    black 8%,
    black 92%,
    transparent 100%
  );
}
.marquee-track + .marquee-track {
  margin-top: 8px;
}
.marquee-inner {
  display: flex;
  width: max-content;
}
.marquee-left {
  animation: marqueeScrollLeft 40s linear infinite;
}
.marquee-right {
  animation: marqueeScrollRight 40s linear infinite;
}
.marquee-track:hover .marquee-inner {
  animation-play-state: paused;
}
@keyframes marqueeScrollLeft {
  0% {
    transform: translate(0);
  }
  to {
    transform: translate(-50%);
  }
}
@keyframes marqueeScrollRight {
  0% {
    transform: translate(-50%);
  }
  to {
    transform: translate(0);
  }
}
.marquee-content {
  display: flex;
  gap: 12px;
  padding: 0 6px;
}
.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  transition: all 0.3s ease;
  cursor: none;
}
.tool-icon:hover {
  transform: translateY(-3px) scale(1.15);
}
.tool-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  opacity: 0.5;
  transition:
    opacity 0.3s ease,
    filter 0.3s ease;
}
.tool-icon:hover img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(228, 255, 26, 0.5));
}
.skills-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.skill-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
.skill-card:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}
.skill-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-4px);
}
.skill-card:hover:before {
  opacity: 1;
}
.skill-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.skill-icon [data-lucide] {
  width: 26px;
  height: 26px;
  color: var(--accent);
  transition:
    transform var(--transition-smooth),
    filter var(--transition-smooth);
}
.skill-card:hover .skill-icon [data-lucide] {
  transform: translateY(-5px);
  filter: drop-shadow(0 0 15px var(--accent));
}
.skill-header h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}
.skill-list {
  list-style: none;
}
.skill-list li {
  font-size: 14px;
  color: var(--text-secondary);
  position: relative;
  padding: 6px 0 6px 16px;
  transition: color var(--transition-fast);
}
.skill-list li:before {
  content: "›";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.skill-list li:hover {
  color: var(--text-primary);
}
.portfolio-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 40px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: var(--border-subtle);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: none;
  transition: all var(--transition-smooth);
}
.tab-btn [data-lucide] {
  width: 16px;
  height: 16px;
}
.tab-btn:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}
.tab-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.tab-btn.active [data-lucide] {
  color: #000;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.portfolio-grid-logos {
  grid-template-columns: repeat(4, 1fr);
}
.portfolio-item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--bg-secondary);
  cursor: none;
  transition: transform var(--transition-smooth);
  border: var(--border-subtle);
}
.portfolio-item:hover {
  transform: scale(1.02);
  border-color: #e4ff1a26;
}
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}
.portfolio-item:hover img {
  transform: scale(1.08);
}
.drive-gallery .portfolio-item {
  aspect-ratio: unset !important;
  background: transparent;
  transform: none;
}
.drive-gallery .portfolio-item img {
  width: 100%;
  height: auto !important;
  object-fit: unset !important;
  display: block;
}
.drive-gallery .portfolio-item:hover {
  transform: none;
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: #000000bf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity var(--transition-smooth);
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}
.portfolio-overlay [data-lucide] {
  width: 22px;
  height: 22px;
  color: var(--accent);
}
.portfolio-overlay span {
  color: var(--accent);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.logo-item {
  aspect-ratio: 1;
}
.logo-placeholder,
.social-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(228, 255, 26, 0.05);
  gap: 12px;
}
.logo-icon-large {
  width: 48px !important;
  height: 48px !important;
  color: var(--accent);
}
.social-icon-large {
  width: 36px !important;
  height: 36px !important;
  color: var(--accent);
  opacity: 0.6;
}
.logo-placeholder p,
.social-placeholder p {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.project-card {
  padding: 32px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  cursor: none;
  position: relative;
  overflow: hidden;
  animation: subtleFloat 8s infinite ease-in-out;
}
.project-card:nth-child(2n) {
  animation-name: subtleFloatReverse;
  animation-duration: 9s;
}
.project-card:nth-child(3n) {
  animation-delay: -3s;
}
.project-card:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  z-index: -1;
  filter: blur(40px);
}
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-dim);
}
.project-card:hover:after {
  opacity: 0.08;
}
.project-badge {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  border: 1px solid rgba(228, 255, 26, 0.2);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  width: fit-content;
}
.project-icon {
  margin-bottom: 12px;
}
.project-icon [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--accent);
  opacity: 0.8;
}
.project-card h3 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}
.project-card p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}
.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.project-tech span {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: 20px;
  color: var(--text-muted);
  font-weight: 500;
}
.project-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  transition: letter-spacing var(--transition-smooth);
}
.project-link [data-lucide] {
  width: 16px;
  height: 16px;
}
.project-card:hover .project-link {
  letter-spacing: 0.06em;
}
.extensions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.extension-card {
  padding: 28px;
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-smooth);
  cursor: none;
  display: flex;
  flex-direction: column;
  animation: subtleFloat 7s infinite ease-in-out;
}
.extension-card:nth-child(2n) {
  animation-name: subtleFloatReverse;
  animation-duration: 10s;
  animation-delay: -1s;
}
.extension-card:hover {
  transform: translateY(-6px);
  border-color: #e4ff1a26;
  background: var(--bg-card-hover);
}
.ext-icon {
  margin-bottom: 16px;
  display: flex;
  justify-content: center;
}
.ext-icon [data-lucide] {
  width: 32px;
  height: 32px;
  color: var(--accent);
}
.extension-card h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}
.extension-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  flex: 1;
}
.business-card {
  margin-top: 48px;
  padding: 48px;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}
.business-card:before {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: transparent,
    transparent 70%
  );
  pointer-events: none;
}
.business-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.business-title-row [data-lucide] {
  width: 28px;
  height: 28px;
  color: var(--accent);
}
.business-name {
  font-family: var(--font-heading);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
}
.business-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: #ff3d001f;
  color: var(--accent-secondary);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 61, 0, 0.2);
}
.business-badge [data-lucide] {
  width: 14px;
  height: 14px;
}
.business-story {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.8;
  max-width: 700px;
  margin-bottom: 32px;
}
.business-story strong {
  color: var(--text-primary);
}
.business-services h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}
.services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.services-tags span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: #ffffff0a;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-xl);
  font-size: 13px;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.services-tags span [data-lucide] {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}
.services-tags span:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.services-tags span:hover [data-lucide] {
  opacity: 1;
  color: var(--accent);
}
.business-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.value-item {
  text-align: center;
}
.value-num {
  font-family: var(--font-heading);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: initial;
  background-clip: text;
}
.value-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}
.contact-text {
  font-size: 18px;
  color: var(--text-secondary);
  margin-top: 16px;
  margin-bottom: 48px;
  line-height: 1.8;
}
.contact-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.contact-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 32px;
  border-radius: var(--radius-lg);
  transition: all var(--transition-smooth);
  cursor: none;
}
.contact-btn:hover {
  transform: translateY(-6px);
  border-color: #e4ff1a26;
  background: var(--bg-card-hover);
}
.contact-icon {
  width: 32px !important;
  height: 32px !important;
  color: var(--accent);
}
.tab-icon-img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 8px;
  filter: brightness(0) saturate(100%) invert(86%) sepia(50%)
    replace(0, 0, 0, e4ff1a);
}
.contact-icon-img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
}
.contact-btn span:nth-child(2) {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
}
.contact-handle {
  font-size: 13px !important;
  color: var(--text-muted) !important;
  font-weight: 400 !important;
}
#footer {
  padding: 40px 0;
  border-top: var(--border-subtle);
}
.footer-content {
  text-align: center;
}
.footer-credit {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.footer-location {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.footer-year {
  font-size: 12px;
  color: var(--text-muted);
}
.reveal { opacity: 1; transform: none; }
.reveal.visible { opacity: 1; transform: none; }
.reveal:nth-child(2) {
  transition-delay: 0.1s;
}
.reveal:nth-child(3) {
  transition-delay: 0.2s;
}
.reveal:nth-child(4) {
  transition-delay: 0.3s;
}
.reveal:nth-child(5) {
  transition-delay: 0.4s;
}
.reveal:nth-child(6) {
  transition-delay: 0.5s;
}
@media (max-width: 1024px) {
  .skills-grid,
  .extensions-grid,
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  body {
    cursor: auto;
  }
  #cursor-dot,
  #cursor-ring,
  #cursor-glow {
    display: none;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: #000000f2;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    flex-direction: column;
    padding: 100px 40px 40px;
    gap: 24px;
    transition: right var(--transition-smooth);
    border-left: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav-links.open {
    right: 0;
  }
  .nav-hamburger {
    display: flex;
    z-index: 1001;
  }
  .nav-link {
    font-size: 18px;
    cursor: auto;
  }
  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .skills-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-grid,
  .portfolio-grid-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .projects-grid,
  .extensions-grid,
  .contact-links {
    grid-template-columns: 1fr;
  }
  .business-card {
    padding: 32px;
  }
  .business-values {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .btn {
    padding: 12px 24px;
    cursor: auto;
  }
  .hero-name {
    font-size: clamp(36px, 12vw, 72px);
  }
  .tab-btn,
  .portfolio-item,
  .project-card,
  .extension-card,
  .contact-btn,
  .hobby-item {
    cursor: auto;
  }
}
.drive-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 24px;
}
.api-placeholder {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  background: var(--glass-bg);
  border: var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-align: center;
  gap: 16px;
  padding: 40px;
}
.api-placeholder p {
  max-width: 380px;
  line-height: 1.7;
  font-size: 14px;
}
.loading-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-secondary);
  border: var(--border-subtle);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.drive-gallery[data-ratio="16-9"] .gallery-item {
  aspect-ratio: 16 / 9;
}
.gallery-item:hover {
  border-color: #e4ff1a4d;
}
.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.1);
}
.gallery-item:after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0003;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.gallery-item:hover:after {
  opacity: 1;
}
@media (max-width: 1024px) {
  .drive-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .drive-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 400px) {
  .drive-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
.drive-gallery .portfolio-item {
  aspect-ratio: unset !important;
}
.drive-gallery .portfolio-item img {
  height: auto !important;
  object-fit: unset !important;
}
.gallery-item.hidden-item {
  display: none;
}
.view-more-container {
  display: flex;
  justify-content: center;
  margin-top: 48px;
  width: 100%;
}
.view-more-container.hidden {
  display: none;
}
.btn-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
}
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99000;
  align-items: center;
  justify-content: center;
}
#lightbox.active {
  display: flex;
}
#lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: #000000eb;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: lbFadeIn 0.25s ease;
}
@keyframes lbFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#lightbox-img-wrap {
  position: relative;
  z-index: 2;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lbScaleIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes lbScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
#lightbox-img,
#lightbox-video {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 40px 80px #0009;
  transition: opacity 0.18s ease;
  display: block;
}
#lightbox-video.hidden,
#lightbox-img.hidden {
  display: none;
}
#lightbox-close,
#lightbox-prev,
#lightbox-next {
  position: fixed;
  z-index: 3;
  background: var(--bg-card);
  border: var(--border-subtle);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-primary);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#lightbox-close {
  top: 20px;
  right: 20px;
}
#lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
#lightbox-close:hover {
  background: #ff3d0066;
}
#lightbox-prev:hover,
#lightbox-next:hover {
  background: #e4ff1a26;
  transform: translateY(-50%) scale(1.1);
}
#lightbox-close [data-lucide],
#lightbox-prev [data-lucide],
#lightbox-next [data-lucide] {
  width: 20px;
  height: 20px;
  pointer-events: none;
}
#lightbox-counter {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  background: #00000080;
  padding: 6px 16px;
  border-radius: 20px;
  border: var(--border-subtle);
}
@media (max-width: 480px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .portfolio-grid-logos {
    grid-template-columns: repeat(2, 1fr);
  }
  .business-values {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hobbies-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
#command-palette {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
#command-palette.active {
  display: flex;
}
.cmd-backdrop {
  position: absolute;
  inset: 0;
  background: #0006;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: cmdFadeIn 0.2s ease;
}
.cmd-modal {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: var(--bg-secondary);
  border: var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px #000c;
  overflow: hidden;
  animation: cmdSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  margin: 0 20px;
}
.cmd-input-container {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  border-bottom: var(--border-subtle);
}
.cmd-input-container [data-lucide] {
  color: var(--text-muted);
  width: 20px;
  height: 20px;
}
.cmd-input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 10px 16px;
  font-size: 18px;
  color: var(--text-primary);
  font-family: var(--font-body);
  outline: none;
}
.cmd-input::placeholder {
  color: var(--text-muted);
}
.cmd-results {
  max-height: 350px;
  overflow-y: auto;
  padding: 12px;
}
.cmd-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s ease;
}
.cmd-item:hover,
.cmd-item.selected {
  background: var(--bg-card-hover);
}
.cmd-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e4ff1a1a;
  color: var(--accent);
  border-radius: var(--radius-sm);
}
.cmd-item-info {
  flex: 1;
}
.cmd-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.cmd-item-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cmd-empty {
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
@keyframes cmdFadeIn {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes cmdSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.business-grid-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.business-card {
  padding: 40px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: all var(--transition-smooth);
  height: 100%;
}
.business-card.highlight-card {
  border: 1px solid rgba(228, 255, 26, 0.2);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}
.business-card.highlight-card {
  border: 1px solid rgba(228, 255, 26, 0.3) !important;
  box-shadow: 0 0 30px #e4ff1a0d;
}
.highlight-card-subtle {
  border: 1px solid rgba(228, 255, 26, 0.15) !important;
  background: var(--bg-card);
}
.logo-container-small,
.logo-container-large {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px #0006;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.logo-container-small {
  width: 40px;
  height: 40px;
  padding: 4px;
}
.logo-container-large {
  width: 56px;
  height: 56px;
  padding: 6px;
}
.logo-container-small img,
.logo-container-large img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.business-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.business-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.business-title-row [data-lucide] {
  color: var(--accent);
  width: 28px;
  height: 28px;
}
.business-name {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
}
.business-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  background: #ffffff0d;
  border-radius: 20px;
  color: var(--accent);
  border: 1px solid rgba(228, 255, 26, 0.1);
}
.business-story {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.business-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stat-item {
  display: flex;
  flex-direction: column;
}
.stat-val {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
}
.stat-lab {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.business-services h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: 0.1em;
}
.services-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.services-tags span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #ffffff08;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.services-tags span:hover {
  background: #ffffff14;
  border-color: var(--accent);
  color: var(--text-primary);
}
.business-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: auto;
}
.value-item {
  padding: 16px;
  background: #ffffff05;
  border-radius: var(--radius-md);
  text-align: center;
}
.value-num {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}
.value-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .business-grid-main {
    grid-template-columns: 1fr;
  }
  .business-card {
    padding: 30px;
  }
}
.testimonials-wrapper {
  position: relative;
  margin-top: 48px;
  display: flex;
  align-items: center;
}
.testimonials-grid {
  display: flex;
  overflow-x: auto;
  gap: 24px;
  padding: 20px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.testimonials-grid::-webkit-scrollbar {
  display: none;
}
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: #141414cc;
  border: 1px solid rgba(228, 255, 26, 0.2);
  border-radius: 50%;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all var(--transition-smooth);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.scroll-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 0 20px #e4ff1a4d;
}
.scroll-btn.prev {
  left: -22px;
}
.scroll-btn.next {
  right: -22px;
}
@media (max-width: 1024px) {
  .scroll-btn {
    display: none;
  }
  .testimonials-grid {
    scrollbar-width: none;
  }
}
.testimonial-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  padding: 32px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: all var(--transition-smooth);
  height: auto;
}
.testimonial-card:hover {
  transform: translateY(-5px);
  border-color: #e4ff1a33;
}
.test-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.test-user {
  display: flex;
  align-items: center;
  gap: 12px;
}
.test-avatar {
  width: 40px;
  height: 40px;
  background: var(--accent);
  color: #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.test-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.test-date {
  font-size: 12px;
  color: var(--text-muted);
}
.test-rating {
  display: flex;
  gap: 2px;
  color: var(--accent);
}
.test-rating [data-lucide] {
  width: 14px;
  height: 14px;
  fill: var(--accent);
}
.test-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
  flex: 1;
}
.test-footer {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.test-app {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.05em;
  padding: 4px 10px;
  background: #e4ff1a1a;
  border-radius: 4px;
}
@media (max-width: 480px) {
  .hero-cta {
    flex-direction: column;
    width: 100%;
    padding: 0 10px;
  }
  .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 24px;
    font-size: 14px;
  }
  .hero-name {
    font-size: 42px;
  }
  .hero-subtitle {
    font-size: 15px;
    padding: 0 10px;
  }
}
.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
}
.grid-load-more-container {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}
.grid-load-more-container.hidden {
  display: none;
}
.projects-grid.collapsed > .project-card:nth-child(n + 4) {
  display: none !important;
}
.extensions-grid.collapsed > .extension-card:nth-child(n + 5) {
  display: none !important;
}
@media (max-width: 1200px) {
  .extensions-grid.collapsed > .extension-card:nth-child(n + 4) {
    display: none !important;
  }
}
@media (max-width: 1024px) {
  .projects-grid.collapsed > .project-card:nth-child(n + 3) {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .extensions-grid.collapsed > .extension-card:nth-child(n + 3) {
    display: none !important;
  }
}
@media (max-width: 600px) {
  .projects-grid.collapsed > .project-card:nth-child(n + 2) {
    display: none !important;
  }
  .extensions-grid.collapsed > .extension-card:nth-child(n + 2) {
    display: none !important;
  }
}

/* HIGH CONTRASTOVERRIDES */
:root {
  --bg-primary: #000000 !important;
  --bg-secondary: #000000 !important;
  --bg-card: #0a0a0a !important;
  --bg-card-hover: #111111 !important;
  --accent: #E4FF1A !important;
  --text-primary: #FFFFFF !important;
}

body {
  background: var(--bg-primary);
}

/* Solid accent buttons */
.btn-primary, .btn, .hero-cta .btn {
  background: var(--accent) !important;
  color: #000000 !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover {
  background: #c3e600 !important; /* Slightly darker lime */
  box-shadow: 0 0 15px var(--accent) !important;
}

/* Remove soft backgrounds/borders from cards */
.project-card, .extension-card, .business-card, .testimonial-card, .skill-category {
  background: var(--bg-card) !important;
  border: 1px solid #333 !important;
  box-shadow: none !important;
}
.project-card:hover, .extension-card:hover, .business-card:hover {
  border-color: var(--accent) !important;
}

/* Replace text gradients */
.gradient-text, .accent-text {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Hide old custom cursor if we are doing a new one, but let's keep it and style it flat */
#cursor-dot { background: var(--accent) !important; }
#cursor-ring { border: 1px solid var(--accent) !important; background: transparent !important; }
#cursor-glow { display: none !important; } /* Removing glow based on gradient rule */

/* Section number badges */
.section-num {
  color: var(--accent) !important;
  font-weight: bold;
}

/* FLUID TYPOGRAPHY & NOISE */
:root {
  --font-heading: 'Fraunces', sans-serif;
  --font-body: 'Inter', sans-serif;
}
html {
  font-size: 16px;
}
h1, .hero-name {
  font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem) !important;
  line-height: 1.1 !important;
}
h2, .section-title {
  font-size: clamp(2rem, 4vw + 1rem, 3.5rem) !important;
}
p, .hero-subtitle, .about-text p {
  font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem) !important;
}

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

/* Hover reveal effect for cards */
.project-card, .extension-card {
  position: relative;
  overflow: hidden;
}
.project-card img, .extension-card img, .project-card video {
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), filter 0.6s ease !important;
}
.project-card:hover img, .extension-card:hover img, .project-card:hover video {
  transform: scale(1.05) !important;
  filter: brightness(1.1) !important;
}
/* Ensure grid collapses are fixed as requested */
/* Remove old ad-hoc nth-child(n+4) display:none rules for collapsed states */
.projects-grid.collapsed > .project-card:nth-child(n+4),
.extensions-grid.collapsed > .extension-card:nth-child(n+5) {
  display: block !important;
}
/* We will manage collapse logic via JS or proper CSS if needed, but the original CSS had nth-child hardcodes. 
   Wait, if we override it, the 'view more' button might break. Let's let JS handle visibility or keep CSS grid clean. */

/* FIXED GRID REFLOW FOR MOBILE */
.projects-grid, .extensions-grid, .hobbies-grid {
  display: grid;
  gap: 24px;
}

@media (max-width: 768px) {
  .projects-grid, .extensions-grid, .hobbies-grid {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .extensions-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1025px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .extensions-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* HIDE OLD CURSORS */
#cursor-dot, #cursor-ring, #cursor-glow {
  display: none !important;
}

/* NEW CUSTOM CURSORS */
#my-cursor-dot, #my-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999999;
  border-radius: 50%;
}
#my-cursor-dot {
  width: 8px; height: 8px;
  background: var(--accent);
  margin: -4px 0 0 -4px;
}
#my-cursor-ring {
  width: 40px; height: 40px;
  border: 1px solid var(--accent);
  margin: -20px 0 0 -20px;
  transition: width 0.3s, height 0.3s, margin 0.3s, background 0.3s;
}

/* Hide on mobile */
@media (max-width: 768px) {
  #my-cursor-dot, #my-cursor-ring {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   STANZZA-INSPIRED CLEAN REDESIGN
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0c0c0c;
  --bg-card: #151515;
  --text-1: #f0e6d3;
  --text-2: #8a8075;
  --text-3: #4a453f;
  --border: rgba(240,230,211,0.08);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

/* ── GLOBAL ──────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--text-1) !important;
  font-family: var(--font-body) !important;
  overflow-x: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-font-smoothing: antialiased !important;
}

::selection {
  background: var(--text-1);
  color: var(--bg);
}

/* ── FORCE REVEAL ────────────────────────────────────────── */
.reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* ── KILL HERO ORIGINAL ANIMATIONS ───────────────────────── */
#hero .hero-greeting,
#hero .hero-name,
#hero .hero-subtitle,
#hero .hero-cta,
#hero .hero-scroll-indicator,
.hero-content {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
  animation: none !important;
}

/* ── PRELOADER ───────────────────────────────────────────── */
#site-preloader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-inner {
  text-align: center;
}

.preloader-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-2);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  opacity: 0;
}

.preloader-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--text-1);
  text-transform: uppercase;
  margin: 0;
  overflow: hidden;
}

.preloader-name .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

.preloader-line {
  width: 60px;
  height: 1px;
  background: var(--text-3);
  margin: 2rem auto 0;
  transform: scaleX(0);
  transform-origin: left;
}

/* ── HERO ────────────────────────────────────────────────── */
#hero {
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding: 0 5vw 8vh !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-video-bg iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(12,12,12,0.3) 0%, rgba(12,12,12,0.85) 100%);
  z-index: 1;
}

.hero-content {
  position: relative !important;
  z-index: 10 !important;
  max-width: 900px;
}

.hero-name {
  font-family: var(--font-display) !important;
  font-size: clamp(3rem, 12vw, 9rem) !important;
  line-height: 0.85 !important;
  letter-spacing: -0.04em !important;
  font-weight: 900 !important;
  color: var(--text-1) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
}

.gradient-text {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--text-1) !important;
  color: var(--text-1) !important;
}

.hero-greeting {
  display: block !important;
  color: var(--text-2) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.5rem !important;
}

.hero-subtitle {
  display: block !important;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important;
  margin-top: 2rem !important;
  color: var(--text-2) !important;
  max-width: 500px;
  line-height: 1.6 !important;
}

.hero-cta {
  display: flex !important;
  gap: 1rem !important;
  margin-top: 3rem !important;
  flex-wrap: wrap !important;
}

.hero-search-hint {
  display: block !important;
  margin-top: 2rem !important;
  color: var(--text-3) !important;
  font-size: 0.75rem !important;
}

.hero-scroll-indicator {
  display: none !important;
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 16px 36px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.15em !important;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
  cursor: pointer !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn-primary {
  background: var(--text-1) !important;
  color: var(--bg) !important;
}
.btn-primary:hover {
  background: #fff !important;
  transform: scale(1.02) !important;
}

.btn-outline {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}
.btn-outline:hover {
  border-color: var(--text-2) !important;
  transform: scale(1.02) !important;
}

/* ── SECTIONS ────────────────────────────────────────────── */
.section {
  padding: 15vw 5vw 10vw !important;
  position: relative !important;
}

.container {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* ── SECTION TITLES ──────────────────────────────────────── */
.section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(2.5rem, 8vw, 7rem) !important;
  font-weight: 900 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.03em !important;
  text-transform: uppercase !important;
  color: var(--text-1) !important;
  margin-bottom: 1rem !important;
  position: relative !important;
  z-index: 10 !important;
  overflow: hidden !important;
}

.section-num {
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  color: var(--text-3) !important;
  display: block !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0.2em !important;
}

.section-subtitle {
  font-size: clamp(0.8rem, 1.2vw, 1rem) !important;
  color: var(--text-2) !important;
  max-width: 600px !important;
  line-height: 1.7 !important;
  margin-bottom: 5rem !important;
}

/* ── CARDS ────────────────────────────────────────────────── */
.project-card, .extension-card, .business-card,
.testimonial-card, .skill-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 2.5rem !important;
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1) !important;
  color: var(--text-1) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.project-card:hover, .extension-card:hover,
.business-card:hover {
  border-color: rgba(240,230,211,0.15) !important;
  transform: translateY(-4px) !important;
}

.project-card h3, .extension-card h3,
.business-card h3 {
  color: var(--text-1) !important;
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

.project-card p, .extension-card p,
.business-card p {
  color: var(--text-2) !important;
  line-height: 1.6 !important;
}

.project-badge, .ext-badge {
  background: rgba(240,230,211,0.06) !important;
  color: var(--text-2) !important;
  border: none !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.project-tech span {
  background: rgba(240,230,211,0.04) !important;
  color: var(--text-3) !important;
  border: 1px solid var(--border) !important;
  font-size: 0.7rem !important;
}

.project-link {
  color: var(--text-2) !important;
}

/* ── ABOUT ───────────────────────────────────────────────── */
.about-img {
  border-radius: 12px !important;
  filter: grayscale(30%) !important;
  transition: filter 0.6s ease !important;
}
.about-img:hover {
  filter: grayscale(0%) !important;
}

.about-img-glow {
  display: none !important;
}

/* ── NAVBAR ───────────────────────────────────────────────── */
#navbar {
  background: rgba(12,12,12,0.8);
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
  z-index: 9000 !important;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.nav-link {
  color: var(--text-2) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  transition: color 0.3s ease !important;
}
.nav-link:hover {
  color: var(--text-1) !important;
}

.nav-logo {
  color: var(--text-1) !important;
  font-family: var(--font-display) !important;
}

.accent {
  color: var(--text-2) !important;
}

/* ── HIDE OLD JUNK ───────────────────────────────────────── */
#board-path-svg, .dice-dock, .dice-waypoint,
#cursor-dot, #cursor-ring, #cursor-glow,
#my-cursor-dot, #my-cursor-ring,
#kinetic-tool-follower, .css-game-piece,
.meeple, .playing-card,
.hero-bg-grid, .hero-reveal-line, .hero-flash,
#hero-3d-container, #hero-3d-foreground,
#noise-overlay, #dice-canvas, .game-piece {
  display: none !important;
}

/* ── TESTIMONIALS ────────────────────────────────────────── */
.testimonial-card {
  min-width: 350px !important;
}

/* ── FOOTER ──────────────────────────────────────────────── */
#footer {
  border-top: 1px solid var(--border) !important;
  background: var(--bg) !important;
  color: var(--text-2) !important;
}

/* ── KEYFRAMES ───────────────────────────────────────────── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(2rem, 12vw, 4rem) !important;
  }
  .hero-name {
    font-size: clamp(2.5rem, 14vw, 5rem) !important;
  }
  .hero-video-bg iframe {
    width: 200%;
    height: 200%;
  }
  .section {
    padding: 20vw 5vw 10vw !important;
  }
}

/* ── REDUCED MOTION ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UNIFIED CINEMATIC FOOTAGE SYSTEM
   ═══════════════════════════════════════════════════════════════ */

.section {
  position: relative !important;
  overflow: hidden !important;
}

.section-video-bg,
.hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.video-iframe-wrapper {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.video-iframe-wrapper iframe,
.section-video-bg iframe,
.hero-video-bg iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  border: none !important;
  pointer-events: none !important;
  /* Uniform Cinematic Color Grading matching site's dark palette */
  filter: brightness(0.55) contrast(1.2) saturate(0.82) sepia(0.14) hue-rotate(-6deg) !important;
  opacity: 0.85 !important;
  transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
  will-change: transform, opacity !important;
}

/* Default responsive aspect ratio sizing before JS recalculates */
@media (min-aspect-ratio: 16/9) {
  .video-iframe-wrapper iframe,
  .section-video-bg iframe,
  .hero-video-bg iframe {
    /* removed */
  }
}
@media (max-aspect-ratio: 16/9) {
  .video-iframe-wrapper iframe,
  .section-video-bg iframe,
  .hero-video-bg iframe {
    /* removed */
  }
}

/* Cinematic film-grade double gradient overlay */
.section-video-overlay,
.hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: radial-gradient(circle at center, rgba(12,12,12,0.4) 0%, rgba(12,12,12,0.85) 100%),
              linear-gradient(to bottom, rgba(12,12,12,0.95) 0%, rgba(12,12,12,0.25) 20%, rgba(12,12,12,0.25) 80%, rgba(12,12,12,0.98) 100%) !important;
  pointer-events: none !important;
}

/* Subtle CRT analog scanline texture over video layer */
.section-video-bg::after,
.hero-video-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  opacity: 0.6 !important;
}

/* Ensure content and cards have proper elevation over video */
.container,
.hero-content {
  position: relative !important;
  z-index: 10 !important;
}

.project-card,
.extension-card,
.business-card,
.skill-card,
.testimonial-card {
  background: rgba(20, 20, 20, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO PROPER ALIGNMENT & BIG BOLD KINETIC TYPOGRAPHY SYSTEM
   ═══════════════════════════════════════════════════════════════ */

/* Perfectly Aligned Hero Section */
#hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Perfect vertical center alignment */
  align-items: flex-start !important;
  padding: 130px 6vw 90px !important;
  position: relative !important;
  overflow: hidden !important;
}

.hero-content {
  position: relative !important;
  z-index: 10 !important;
  max-width: 1150px !important;
  width: 100% !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

/* Refined Hero Badge */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 18px !important;
  border-radius: 100px !important;
  background: rgba(240, 230, 211, 0.05) !important;
  border: 1px solid rgba(240, 230, 211, 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-1) !important;
  margin-bottom: 1.5rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.badge-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #27ae60 !important;
  box-shadow: 0 0 10px #27ae60, 0 0 20px rgba(39, 174, 96, 0.5) !important;
  display: inline-block !important;
  animation: pulseGreen 2s infinite ease-in-out !important;
}

@keyframes pulseGreen {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.hero-greeting {
  display: block !important;
  color: var(--text-2) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.75rem, 1.2vw, 0.92rem) !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  margin-bottom: 1.2rem !important;
  font-weight: 500 !important;
}

/* BIG, BOLD, TEXTURED DISPLAY TYPOGRAPHY */
.hero-name,
.section-title {
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.04em !important;
  line-height: 0.88 !important;
  color: var(--text-1) !important;
  position: relative !important;
  /* Rich warm metallic gradient fill with depth */
  background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 50%, #c4b59f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 35px rgba(240, 230, 211, 0.18) !important;
  will-change: transform, opacity !important;
}

.hero-name {
  font-size: clamp(3.8rem, 13vw, 11rem) !important;
  margin-bottom: 0 !important;
}

.section-title {
  font-size: clamp(3rem, 9.5vw, 8rem) !important;
  margin-bottom: 1.2rem !important;
}

/* Chromatic Aberration RGB Glitch Animation */
@keyframes kineticGlitchRGB {
  0% {
    text-shadow: -2.5px 0 rgba(235, 60, 60, 0.8), 2.5px 0 rgba(60, 195, 235, 0.8);
    transform: translate(0, 0);
  }
  20% {
    text-shadow: 3px 0 rgba(235, 60, 60, 0.9), -3px 0 rgba(60, 195, 235, 0.9);
    transform: translate(-1.5px, 0.5px);
  }
  40% {
    text-shadow: -1.5px 0 rgba(235, 60, 60, 0.7), 1.5px 0 rgba(60, 195, 235, 0.7);
    transform: translate(1px, -0.5px);
  }
  60% {
    text-shadow: 1.5px 0 rgba(235, 60, 60, 0.8), -1.5px 0 rgba(60, 195, 235, 0.8);
    transform: translate(-0.5px, 0);
  }
  80% {
    text-shadow: -0.5px 0 rgba(235, 60, 60, 0.4), 0.5px 0 rgba(60, 195, 235, 0.4);
    transform: translate(0, 0);
  }
  100% {
    text-shadow: 0 0 25px rgba(240, 230, 211, 0.2);
    transform: translate(0, 0);
  }
}

.is-glitching {
  animation: kineticGlitchRGB 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
}

/* Kinetic Split Character Elements */
.char,
.word {
  display: inline-block !important;
  will-change: transform, opacity !important;
  backface-visibility: hidden !important;
  -webkit-font-smoothing: antialiased !important;
}

.hero-subtitle {
  display: block !important;
  font-size: clamp(1rem, 1.8vw, 1.35rem) !important;
  margin-top: 2rem !important;
  color: var(--text-2) !important;
  max-width: 650px !important;
  line-height: 1.65 !important;
}

.hero-cta {
  display: flex !important;
  gap: 1.2rem !important;
  margin-top: 3rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.hero-search-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 2.5rem !important;
  color: var(--text-3) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.05em !important;
}

.hero-search-hint kbd {
  background: rgba(240, 230, 211, 0.08) !important;
  border: 1px solid rgba(240, 230, 211, 0.16) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  color: var(--text-1) !important;
  font-family: monospace !important;
  font-size: 0.72rem !important;
}

/* Floating Scroll Indicator */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: 35px !important;
  right: 6vw !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 10 !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  opacity: 0.85 !important;
  transition: opacity 0.3s ease !important;
}

.hero-scroll-indicator:hover {
  opacity: 1 !important;
}

.scroll-mouse-pill {
  width: 18px !important;
  height: 28px !important;
  border: 1.5px solid rgba(240, 230, 211, 0.3) !important;
  border-radius: 14px !important;
  position: relative !important;
}

.scroll-wheel-dot {
  width: 3px !important;
  height: 6px !important;
  background: var(--text-1) !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 5px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  animation: scrollWheelAnim 1.8s infinite ease-in-out !important;
}

@keyframes scrollWheelAnim {
  0% { transform: translate(-50%, 0); opacity: 1; }
  60% { transform: translate(-50%, 9px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

.section-num {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--text-3) !important;
  display: block !important;
  margin-bottom: 0.8rem !important;
  letter-spacing: 0.25em !important;
  text-transform: uppercase !important;
}

.section-subtitle {
  font-size: clamp(0.85rem, 1.3vw, 1.05rem) !important;
  color: var(--text-2) !important;
  max-width: 620px !important;
  line-height: 1.7 !important;
  margin-bottom: 4.5rem !important;
}

@media (max-width: 768px) {
  #hero {
    padding: 110px 6vw 70px !important;
  }
  .hero-scroll-indicator {
    display: none !important;
  }
  .hero-name {
    font-size: clamp(3rem, 15vw, 5.5rem) !important;
  }
  .section-title {
    font-size: clamp(2.5rem, 12vw, 4.5rem) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE, SYSTEM CURSOR & YOUTUBE LOGO CROPPING REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

/* 1. RESTORE SYSTEM MOUSE POINTER (Always visible on all elements) */
html,
body,
*,
*::before,
*::after {
  cursor: auto !important;
}

a,
button,
.btn,
.tab-btn,
.nav-link,
.project-card,
.extension-card,
.business-card,
.contact-btn,
.filter-btn,
.view-more-container button,
[role="button"],
input[type="submit"],
input[type="button"] {
  cursor: pointer !important;
}

input,
textarea {
  cursor: text !important;
}

/* 2. CROP OUT YOUTUBE LOGO & INCREASE VIDEO OPACITY & CLARITY */
.section-video-bg,
.hero-video-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  background: #0c0c0c !important;
}

.video-iframe-wrapper {
  position: absolute !important;
  inset: 0 !important; /* Expands 12% beyond container in all directions to crop YouTube watermark */
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.video-iframe-wrapper iframe,
.section-video-bg iframe,
.hero-video-bg iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(1.32) !important; /* Scale 1.32x guarantees YouTube logo is pushed outside crop bounds! */
  border: none !important;
  pointer-events: none !important;
  /* Optimized lightweight filter - fast on GPU, vibrant & high opacity */
  filter: brightness(0.95) contrast(1.1) saturate(1.05) !important;
  opacity: 1 !important; /* Higher opacity as requested! */
  transition: opacity 0.6s ease !important;
  will-change: transform !important;
}

/* Clearer, more vibrant overlay gradient */
.section-video-overlay,
.hero-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: radial-gradient(circle at center, rgba(12,12,12,0.1) 0%, rgba(12,12,12,0.5) 100%),
              linear-gradient(to bottom, rgba(12,12,12,0.5) 0%, rgba(12,12,12,0.05) 25%, rgba(12,12,12,0.05) 75%, rgba(12,12,12,0.7) 100%) !important;
  pointer-events: none !important;
}

/* Reduce scanline opacity so video shines through with higher fidelity */
.section-video-bg::after,
.hero-video-bg::after {
  opacity: 0.35 !important;
}

/* Hardware acceleration on cards & headings for 60fps buttery smooth scroll */
.project-card,
.extension-card,
.business-card,
.hero-content,
.section-title {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   CLEAN RESPONSIVE CENTERED HERO (100% IN-VIEWPORT, ZERO OVERFLOW)
   ═══════════════════════════════════════════════════════════════ */

#hero {
  min-height: 100vh !important;
  min-height: 100svh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  padding: max(80px, 9vh) 5vw max(45px, 5vh) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.hero-content {
  position: relative !important;
  z-index: 10 !important;
  max-width: 980px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  margin: auto !important;
}

/* Badge */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 14px !important;
  border-radius: 100px !important;
  background: rgba(240, 230, 211, 0.05) !important;
  border: 1px solid rgba(240, 230, 211, 0.12) !important;
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--text-1) !important;
  margin-bottom: 0.75rem !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

.badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #27ae60 !important;
  box-shadow: 0 0 8px #27ae60 !important;
  display: inline-block !important;
  animation: pulseGreen 2s infinite ease-in-out !important;
}

/* Greeting */
.hero-greeting {
  display: block !important;
  color: var(--text-2) !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.72rem, 1vw, 0.85rem) !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  margin-bottom: 0.4rem !important;
  font-weight: 500 !important;
}

/* Big Bold Headline - Fits any screen width & height */
.hero-name {
  font-family: var(--font-display) !important;
  font-size: clamp(2.6rem, 7.5vw, 6.8rem) !important;
  line-height: 0.92 !important;
  letter-spacing: -0.035em !important;
  font-weight: 900 !important;
  color: var(--text-1) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f4ebd9 50%, #c4b59f 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 30px rgba(240, 230, 211, 0.15) !important;
  white-space: normal !important;
}

/* Subtitle */
.hero-subtitle {
  display: block !important;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem) !important;
  margin-top: 0.65rem !important;
  color: var(--text-2) !important;
  max-width: 580px !important;
  line-height: 1.5 !important;
}

/* CTA Buttons - Guaranteed on screen */
.hero-cta {
  display: flex !important;
  gap: 0.85rem !important;
  margin-top: 1.4rem !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

.hero-cta .btn {
  padding: 13px 28px !important;
  font-size: 11.5px !important;
  letter-spacing: 0.12em !important;
}

/* Search Hint */
.hero-search-hint {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 0.85rem !important;
  color: var(--text-3) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.04em !important;
}

/* Centered Floating Scroll Indicator */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  z-index: 10 !important;
  font-family: var(--font-body) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--text-2) !important;
  opacity: 0.8 !important;
  transition: opacity 0.3s ease !important;
}

.scroll-mouse-pill {
  width: 15px !important;
  height: 23px !important;
  border: 1.5px solid rgba(240, 230, 211, 0.28) !important;
  border-radius: 12px !important;
  position: relative !important;
}

.scroll-wheel-dot {
  width: 2.5px !important;
  height: 5px !important;
  background: var(--text-1) !important;
  border-radius: 2px !important;
  position: absolute !important;
  top: 4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  animation: scrollWheelAnim 1.8s infinite ease-in-out !important;
}

@media (max-width: 768px) {
  #hero {
    padding: 85px 5vw 35px !important;
  }
  .hero-name {
    font-size: clamp(2.3rem, 11vw, 4.2rem) !important;
  }
  .hero-scroll-indicator {
    display: none !important;
  }
  .hero-cta {
    gap: 0.6rem !important;
    margin-top: 1.1rem !important;
  }
  .hero-cta .btn {
    padding: 11px 22px !important;
    font-size: 11px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   OLD MONEY CLASSIC LUXURY PALETTE & UNIQUE ARCHIVAL PRELOADER
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #0c0b0a !important;
  --bg-card: #131210 !important;
  --text-1: #f5eee3 !important;
  --text-2: #9e9486 !important;
  --text-3: #5c554c !important;
  --accent: #c5a880 !important;
  --gold: #c5a880 !important;
  --gold-light: #dfc8a8 !important;
  --gold-dark: #8c7352 !important;
  --border: rgba(197, 168, 128, 0.12) !important;
  --border-hover: rgba(197, 168, 128, 0.3) !important;
}

/* Base Body Color Tone */
body {
  background: #0c0b0a !important;
  color: #f5eee3 !important;
}

/* ── 1. UNIQUE OLD-MONEY ARCHIVAL PRELOADER ──────────────── */
#site-preloader {
  position: fixed !important;
  inset: 0 !important;
  background: #0c0b0a !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.preloader-inner {
  text-align: center !important;
  position: relative !important;
  z-index: 10 !important;
  max-width: 600px !important;
  padding: 20px !important;
}

.preloader-crest {
  width: 56px !important;
  height: 56px !important;
  border: 1.5px solid rgba(197, 168, 128, 0.35) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 1.4rem !important;
  position: relative !important;
  box-shadow: 0 0 20px rgba(197, 168, 128, 0.15) !important;
  background: rgba(197, 168, 128, 0.03) !important;
}

.crest-monogram {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #c5a880 !important;
}

.preloader-edition {
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: #9e9486 !important;
  margin-bottom: 0.75rem !important;
}

.preloader-name {
  font-family: var(--font-display) !important;
  font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  margin: 0 0 2rem !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5eee3 50%, #c5a880 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
}

.preloader-progress-wrap {
  width: min(320px, 82vw) !important;
  margin: 0 auto !important;
}

.preloader-track {
  width: 100% !important;
  height: 2px !important;
  background: rgba(197, 168, 128, 0.14) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  position: relative !important;
}

.preloader-bar-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #8c7352 0%, #c5a880 70%, #f5eee3 100%) !important;
  box-shadow: 0 0 10px rgba(197, 168, 128, 0.8) !important;
}

.preloader-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 0.85rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}

.preloader-status {
  color: #9e9486 !important;
}

.preloader-percentage {
  font-family: monospace !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #c5a880 !important;
}

/* ── 2. OLD MONEY CLASSIC BUTTONS ────────────────────────── */
.btn {
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  transition: all 0.35s cubic-bezier(0.19, 1, 0.22, 1) !important;
}

.btn-primary {
  background: #f5eee3 !important;
  color: #12100d !important;
  border: 1px solid #dfd3c0 !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), 0 0 15px rgba(197, 168, 128, 0.15) !important;
}

.btn-primary:hover {
  background: #ffffff !important;
  color: #000000 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(197, 168, 128, 0.35) !important;
  
}

.btn-outline {
  background: rgba(18, 16, 14, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(197, 168, 128, 0.28) !important;
  color: #f5eee3 !important;
}

.btn-outline:hover {
  
  color: #ffffff !important;
  background: rgba(197, 168, 128, 0.08) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 20px rgba(197, 168, 128, 0.18) !important;
}

/* ── 3. ICONS & ACCENTS COLOR HARMONY ─────────────────────── */
[data-lucide],
.lucide,
.hobby-icon i,
.skill-icon i,
.project-icon i,
.ext-icon i,
.contact-icon i,
.tab-btn i,
.scroll-btn i {
  color: #c5a880 !important;
  stroke: #c5a880 !important;
}

.tab-btn.active {
  background: transparent !important;
  
  color: #f5eee3 !important;
}

.project-badge,
.ext-badge,
.business-badge {
  background: rgba(197, 168, 128, 0.08) !important;
  border: 1px solid rgba(197, 168, 128, 0.2) !important;
  color: #c5a880 !important;
  letter-spacing: 0.12em !important;
  font-size: 0.65rem !important;
}

.project-tech span,
.services-tags span {
  border: 1px solid rgba(197, 168, 128, 0.14) !important;
  color: #9e9486 !important;
  background: rgba(197, 168, 128, 0.03) !important;
}

.section-num {
  color: #c5a880 !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.22em !important;
}

/* Card Borders & Refinement */
.project-card,
.extension-card,
.business-card,
.skill-card,
.testimonial-card {
  background: rgba(18, 17, 15, 0.9) !important;
  border: 1px solid rgba(197, 168, 128, 0.12) !important;
}

.project-card:hover,
.extension-card:hover,
.business-card:hover {
  border-color: rgba(197, 168, 128, 0.35) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 25px rgba(197, 168, 128, 0.08) !important;
}

/* Navbar */
#navbar {
  border-bottom: 1px solid rgba(197, 168, 128, 0.1) !important;
  background: rgba(12, 11, 10, 0.85);
}

.nav-link {
  color: #9e9486 !important;
}

.nav-link:hover {
  color: #f5eee3 !important;
}

.nav-logo .accent {
  color: #c5a880 !important;
}

/* ═══════════════════════════════════════════════════════════════
   VINTAGE ROYAL HERALDIC EMBLEM & PROGRESS REFINEMENTS
   ═══════════════════════════════════════════════════════════════ */

.royal-emblem {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin-bottom: 1.2rem !important;
  color: #c5a880 !important;
}

.royal-flourish {
  font-size: 0.72rem !important;
  letter-spacing: 0.18em !important;
  color: rgba(197, 168, 128, 0.45) !important;
}

.royal-crown-symbol {
  font-size: 1.8rem !important;
  color: #c5a880 !important;
  text-shadow: 0 0 20px rgba(197, 168, 128, 0.6) !important;
  display: inline-block !important;
  animation: royalGlow 3s infinite ease-in-out !important;
  line-height: 1 !important;
}

@keyframes royalGlow {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 15px rgba(197, 168, 128, 0.4);
  }
  50% {
    transform: scale(1.08);
    text-shadow: 0 0 30px rgba(197, 168, 128, 0.85), 0 0 45px rgba(197, 168, 128, 0.35);
  }
}

.preloader-ornament-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0.6rem auto 1.8rem !important;
  position: relative !important;
  width: 140px !important;
}

.preloader-ornament-line::before,
.preloader-ornament-line::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(197, 168, 128, 0.4)) !important;
}

.preloader-ornament-line::after {
  background: linear-gradient(90deg, rgba(197, 168, 128, 0.4), transparent) !important;
}

.ornament-diamond {
  font-size: 0.65rem !important;
  color: #c5a880 !important;
  padding: 0 10px !important;
  text-shadow: 0 0 10px rgba(197, 168, 128, 0.6) !important;
}

.preloader-track {
  width: 100% !important;
  height: 3px !important;
  background: rgba(197, 168, 128, 0.14) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

.preloader-bar-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(90deg, #8c7352 0%, #c5a880 65%, #fff8ee 100%) !important;
  box-shadow: 0 0 14px rgba(197, 168, 128, 0.9) !important;
}

.preloader-name {
  font-family: var(--font-display) !important;
  font-size: clamp(2.4rem, 6.5vw, 4.6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6efe3 45%, #c5a880 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  line-height: 1 !important;
}

/* ═══════════════════════════════════════════════════════════════
   HERO TYPOGRAPHY VERTICAL SPACING & PROPORTIONS FIX
   ═══════════════════════════════════════════════════════════════ */
.hero-content {
  padding-top: 1rem !important;
  padding-bottom: 2rem !important;
}

.hero-greeting {
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  font-size: clamp(0.75rem, 0.95vw, 0.88rem) !important;
  letter-spacing: 0.3em !important;
  color: #c5a880 !important;
}

.hero-name {
  margin-top: 0 !important;
  margin-bottom: 1.35rem !important;
  line-height: 1.05 !important;
  letter-spacing: -0.025em !important;
  font-size: clamp(2.8rem, 8vw, 6.2rem) !important;
}

.hero-subtitle {
  margin-top: 0 !important;
  margin-bottom: 2.2rem !important;
  line-height: 1.65 !important;
  font-size: clamp(1rem, 1.4vw, 1.22rem) !important;
  color: #a89f91 !important;
}

.hero-cta {
  margin-top: 0 !important;
  margin-bottom: 1.4rem !important;
  gap: 1.15rem !important;
}

.hero-search-hint {
  margin-top: 0 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.08em !important;
  color: #6d6457 !important;
}

.hero-scroll-indicator {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   TOOLS KINETIC MATRIX & RANDOM BLINKING STYLES
   ═══════════════════════════════════════════════════════════════ */


.tools-kinetic-matrix .tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 60px !important;
  background: rgba(25, 23, 20, 0.75) !important;
  border: 1px solid rgba(197, 168, 128, 0.1) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease, 
              background 0.4s ease !important;
  position: relative !important;
}

.tools-kinetic-matrix .tool-icon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important; margin: auto !important;
  opacity: 0.45 !important;
  transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease !important;
  filter: grayscale(40%) !important;
}

/* Hover Effect */
.tools-kinetic-matrix .tool-icon:hover {
  transform: translateY(-4px) scale(1.08) !important;
  
  background: transparent !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 16px rgba(197, 168, 128, 0.3) !important;
}

.tools-kinetic-matrix .tool-icon:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) drop-shadow(0 0 8px rgba(197, 168, 128, 0.6)) !important;
}

/* Kinetic Random Blink State - Applied dynamically by JS */
.tools-kinetic-matrix .tool-icon.kinetic-active {
  border-color: rgba(197, 168, 128, 0.65) !important;
  background: rgba(197, 168, 128, 0.14) !important;
  box-shadow: 0 0 22px rgba(197, 168, 128, 0.35), inset 0 0 8px rgba(197, 168, 128, 0.2) !important;
  transform: translateY(-3px) scale(1.06) !important;
}

.tools-kinetic-matrix .tool-icon.kinetic-active img {
  opacity: 1 !important;
  filter: grayscale(0%) drop-shadow(0 0 10px rgba(197, 168, 128, 0.75)) !important;
  transform: scale(1.1) !important;
}

@media (max-width: 768px) {
  .tools-kinetic-matrix {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)) !important;
    gap: 10px !important;
    padding: 16px !important;
    margin-top: 32px !important;
  }
  .tools-kinetic-matrix .tool-icon {
    height: 50px !important;
    padding: 8px !important;
  }
  .tools-kinetic-matrix .tool-icon img {
    width: 22px !important;
    height: 22px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE & MOBILE/DESKTOP STABILITY GUARANTEES
   ═══════════════════════════════════════════════════════════════ */
#hero {
  height: auto !important;
  min-height: 100vh !important;
  max-height: none !important;
  padding: 100px 5vw 60px !important;
}

.hero-name {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: manual !important;
}

.section-video-bg iframe,
.hero-video-bg iframe {
  will-change: auto !important;
}

@media (max-width: 768px) {
  .hero-name {
    font-size: clamp(2.2rem, 10vw, 4rem) !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
  }
}



/* MOTION RICH PRELOADER */
.royal-emblem {
  animation: pulseEmblem 3s infinite alternate ease-in-out !important;
}
.preloader-name {
  animation: glowName 4s infinite alternate ease-in-out !important;
  transition: letter-spacing 4s ease !important;
}
.preloader-edition {
  animation: floatEdition 5s infinite alternate ease-in-out !important;
}
.ornament-diamond {
  animation: spinDiamond 6s infinite linear !important;
}

@keyframes pulseEmblem {
  0% { transform: scale(0.95); opacity: 0.7; filter: drop-shadow(0 0 5px rgba(197, 168, 128, 0.2)); }
  100% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 18px rgba(197, 168, 128, 0.7)); }
}
@keyframes glowName {
  0% { text-shadow: 0 0 10px rgba(197, 168, 128, 0.1); letter-spacing: 12px; }
  100% { text-shadow: 0 0 25px rgba(197, 168, 128, 0.5); letter-spacing: 16px; }
}
@keyframes floatEdition {
  0% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(-5px); opacity: 0.9; }
}
@keyframes spinDiamond {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


@media (max-width: 768px) {
  .hero-name, .section-title {
    line-height: 1.15 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    white-space: normal !important;
    margin-bottom: 15px !important;
  }
}

/* FORCED STRETCH OVERRIDE: ULTIMATE CSS-ONLY COVER */
.hero-video-bg iframe, .section-video-bg iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: max(120vw, 213vh) !important; /* 16:9 aspect ratio * 1.2 bleed */
  height: max(67.5vw, 120vh) !important; 
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
  object-fit: cover !important;
  pointer-events: none !important;
}



/* ULTIMATE CSS-ONLY ASPECT-RATIO COVER */
.hero-video-bg iframe, .section-video-bg iframe {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  
  /* The Magic Formula for object-fit: cover on iframes */
  /* Width & Height are aggressively calculated and enforced by JS ResizeObserver */
  
  max-width: none !important;
  max-height: none !important;
  
  /* Scale up to hide any borders/branding and ensure deep bleed */
  transform: translate(-50%, -50%) scale(1.4) !important; 
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .hero-video-bg iframe, .section-video-bg iframe {
    /* On mobile, sections can be incredibly tall. 
       Scale heavily to prevent letterboxing on extreme portrait layouts */
    transform: translate(-50%, -50%) scale(1.8) !important;
  }
}


/* ── ENDLESS KINETIC MATRIX ─────────────────────── */
.tools-kinetic-matrix.endless-matrix {
  display: flex !important;
  flex-direction: column !important;
  gap: 40px !important;
  overflow: hidden !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  background: rgba(18, 17, 15, 0.4) !important;
  padding: 40px 0 !important;
  border-top: 1px solid rgba(197, 168, 128, 0.08) !important;
  border-bottom: 1px solid rgba(197, 168, 128, 0.08) !important;
}

.matrix-row {
  display: flex !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
}

.matrix-track {
  display: flex !important;
  gap: 40px !important;
  padding: 0 8px !important;
}

.matrix-track.track-left {
  animation: endlessLeft 45s linear infinite !important;
}

.matrix-track.track-right {
  animation: endlessRight 50s linear infinite !important;
}

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

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

.endless-matrix .tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 65px !important;
  height: 65px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  flex-shrink: 0 !important;
}

.endless-matrix .tool-icon:hover {
  transform: scale(1.2) !important;
  
  background: transparent !important;
  box-shadow: none !important;
  z-index: 10 !important;
}

.endless-matrix .tool-icon img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important; margin: auto !important;
  opacity: 0.6 !important;
  filter: grayscale(30%) !important;
  transition: all 0.3s ease !important;
}

.endless-matrix .tool-icon:hover img {
  opacity: 1 !important;
  filter: grayscale(0%) drop-shadow(0 0 8px rgba(197, 168, 128, 0.5)) !important;
}
\n
/* BULLETPROOF MOBILE TEXT MASHING FIX */
.hero-name, .section-title {
  display: block !important;
  text-align: center !important;
  word-wrap: break-word !important;
  white-space: normal !important;
}
.hero-name .word, .section-title .word {
  display: inline-block !important;
  margin-right: 0.25em !important;
  white-space: nowrap !important;
}
.hero-name .char, .section-title .char {
  display: inline-block !important;
}
@media (max-width: 768px) {
  .hero-name {
    font-size: clamp(30px, 12vw, 60px) !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
  }
  .section-title {
    font-size: clamp(28px, 10vw, 50px) !important;
    line-height: 1.2 !important;
    letter-spacing: 1px !important;
  }
}
\n
/* TRUE TRANSPARENT ICONS */
.endless-matrix .tool-icon {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 65px !important;
  height: 65px !important;
}
.endless-matrix .tool-icon:hover {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: scale(1.3) !important;
}
.endless-matrix .tool-icon img {
  filter: grayscale(10%) !important;
  opacity: 0.9 !important;
  object-fit: contain !important;
  width: 45px !important;
  height: 45px !important;
  margin: auto !important;
}
.endless-matrix .tool-icon:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}
\n
img.growthdeck-logo {
  filter: grayscale(100%) brightness(500%) !important; /* Make it pure white */
  opacity: 0.9;
}
\n/* Compact 'Beyond the Code' */\n
@media (max-width: 768px) {
  #business {
    padding: 40px 0 !important;
  }
  .business-grid {
    gap: 15px !important;
  }
  .business-card {
    padding: 20px !important;
    min-height: auto !important;
  }
  .business-card h3 {
    font-size: 1.2rem !important;
    margin-bottom: 10px !important;
  }
  .business-card p {
    font-size: 0.9rem !important;
  }
}
\n/* Force mobile text layout */\n
@media (max-width: 768px) {
  .hero-name {
    font-size: 15vw !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.1 !important;
    display: block !important;
    padding: 0 10px !important;
  }
  .section-title {
    font-size: 12vw !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.1 !important;
    display: block !important;
    padding: 0 10px !important;
  }
}

/* ==========================================================================
   RESTRUCTURE & STANZZZA/OBYS STYLING (STAMP: V2_mu3o0p26)
   ========================================================================== */

/* FIXED NAVBAR */
#navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 990 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px clamp(20px, 4vw, 48px) !important;
  background: rgba(8, 8, 8, 0.75);
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: padding 0.3s ease, background 0.3s ease !important;
}

.nav-logo {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: -0.02em !important;
}

.nav-links {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
}

.nav-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  position: relative !important;
}

.nav-link:hover {
  color: #c5a880 !important;
}

.nav-link-cta {
  color: #c5a880 !important;
  font-weight: 600 !important;
}

.nav-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.nav-cmd-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border-radius: 6px !important;
  padding: 6px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  font-size: 12px !important;
  transition: all 0.2s ease !important;
}

.nav-cmd-btn:hover {
  background: rgba(197, 168, 128, 0.15) !important;
  border-color: #c5a880 !important;
  color: #fff !important;
}

.cmd-badge {
  font-size: 10px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
}

.nav-hamburger {
  display: none !important;
  flex-direction: column !important;
  gap: 5px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px !important;
}

.nav-hamburger span {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: #fff !important;
  border-radius: 2px !important;
  transition: all 0.3s ease !important;
}

@media (max-width: 900px) {
  .nav-links {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: rgba(10, 10, 10, 0.98) !important;
    flex-direction: column !important;
    padding: 24px !important;
    gap: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .nav-links.mobile-open {
    display: flex !important;
  }
  .nav-hamburger {
    display: flex !important;
  }
}

/* SECTION ANCHOR OFFSET */
.section-anchor {
  position: absolute;
  top: -80px;
  left: 0;
  pointer-events: none;
}

/* 01: MINIMAL TYPOGRAPHIC PRELOADER */
#site-preloader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: #060606 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  padding: clamp(24px, 5vw, 60px) !important;
  color: #fff !important;
  box-sizing: border-box !important;
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.75s cubic-bezier(0.19, 1, 0.22, 1);
}

#site-preloader.preloader-dismissed {
  clip-path: inset(0 0 100% 0) !important;
  pointer-events: none !important;
}

.preloader-meta-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.preloader-center {
  margin: auto 0 !important;
  width: 100% !important;
  max-width: 800px !important;
}

.preloader-number {
  font-family: 'Space Grotesk', monospace !important;
  font-size: clamp(64px, 16vw, 160px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #f0ede6 !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 24px !important;
}

.preloader-line-track {
  width: 100% !important;
  height: 2px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.preloader-line-fill {
  width: 0%;
  height: 100% !important;
  background: linear-gradient(90deg, #c5a880, #f0ede6) !important;
  transition: width 0.05s linear !important;
}

.preloader-status-text {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: 3px !important;
  color: rgba(197, 168, 128, 0.8) !important;
  text-transform: uppercase !important;
}

/* 02: STATEMENT SECTION */
.statement-section {
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #080808 !important;
  text-align: center !important;
  padding: 80px 20px !important;
}

.statement-wrapper {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.statement-tag {
  display: inline-block !important;
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #c5a880 !important;
  margin-bottom: 24px !important;
}

.statement-heading {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(36px, 6vw, 76px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #f5f5f7 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 24px !important;
}

.statement-subtext {
  font-size: clamp(16px, 2vw, 22px) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  max-width: 700px !important;
  margin: 0 auto !important;
  line-height: 1.6 !important;
}

/* 04: SHOWCASE HORIZONTAL SCROLL ON DESKTOP */
.showcase-horizontal-section {
  padding: 80px 0 !important;
  overflow: hidden !important;
  background: #0a0a0a !important;
}

.showcase-header {
  margin-bottom: 40px !important;
}

.showcase-track-container {
  width: 100% !important;
  overflow: hidden !important;
}

.showcase-track {
  display: flex !important;
  gap: 28px !important;
  padding: 20px 40px 40px 40px !important;
  width: max-content !important;
  will-change: transform !important;
}

.showcase-card-wrapper {
  width: clamp(300px, 32vw, 420px) !important;
  flex-shrink: 0 !important;
}

@media (max-width: 1023px) {
  .showcase-track-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .showcase-track {
    display: flex !important;
    width: max-content !important;
    padding: 10px 20px 30px 20px !important;
    transform: none !important;
  }
  .showcase-card-wrapper {
    width: 300px !important;
    scroll-snap-align: start !important;
  }
}

/* 05: APPROACH NUMBERED STEPPING SEQUENCE */
.approach-section {
  background: #070707 !important;
  padding: 90px 0 !important;
}

.approach-sequence {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  margin-top: 40px !important;
}

.approach-step-card {
  display: flex !important;
  align-items: flex-start !important;
  padding: clamp(24px, 4vw, 48px) !important;
  border-radius: 16px !important;
  background: rgba(18, 18, 18, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  gap: clamp(24px, 5vw, 60px) !important;
  transition: border-color 0.3s ease, transform 0.3s ease !important;
}

.approach-step-card:hover {
  border-color: rgba(197, 168, 128, 0.35) !important;
  transform: translateY(-3px) !important;
}

.step-num-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  width: 130px !important;
}

.step-giant-num {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(38px, 6vw, 64px) !important;
  font-weight: 700 !important;
  color: #c5a880 !important;
  line-height: 1 !important;
}

.step-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
}

.step-content-col {
  flex: 1 !important;
}

.step-intro {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.75) !important;
  margin-bottom: 20px !important;
  line-height: 1.5 !important;
}

.step-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 10px 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.step-list li {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  position: relative !important;
  padding-left: 14px !important;
}

.step-list li::before {
  content: '·' !important;
  position: absolute !important;
  left: 0 !important;
  color: #c5a880 !important;
  font-size: 20px !important;
  line-height: 14px !important;
}

@media (max-width: 768px) {
  .approach-step-card {
    flex-direction: column !important;
    gap: 16px !important;
  }
  .step-num-col {
    width: 100% !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 14px !important;
  }
}

/* 07: NUMBERS SECTION */
.numbers-section {
  padding: 90px 0 !important;
  background: #080808 !important;
}

.numbers-tag {
  font-size: 12px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #c5a880 !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

.numbers-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 40px !important;
}

.number-stat-card {
  padding: 32px 24px !important;
  border-radius: 14px !important;
  background: rgba(18, 18, 18, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.3s ease, border-color 0.3s ease !important;
}

.number-stat-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(197, 168, 128, 0.4) !important;
}

.stat-big-val {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(36px, 5vw, 54px) !important;
  font-weight: 700 !important;
  color: #f5f5f7 !important;
  line-height: 1.1 !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.02em !important;
}

.stat-big-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #c5a880 !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.stat-big-desc {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* 09: STANZZZA FEATURED PULL-QUOTE */
.featured-pull-quote {
  padding: clamp(32px, 5vw, 60px) !important;
  border-radius: 18px !important;
  background: rgba(18, 18, 18, 0.75) !important;
  border: 1px solid rgba(197, 168, 128, 0.25) !important;
  margin: 40px 0 !important;
  position: relative !important;
}

.pull-quote-icon {
  font-family: 'Playfair Display', serif !important;
  font-size: 60px !important;
  color: #c5a880 !important;
  line-height: 1 !important;
  margin-bottom: 10px !important;
  opacity: 0.6 !important;
}

.pull-quote-text {
  font-family: 'Playfair Display', serif !important;
  font-size: clamp(20px, 3vw, 32px) !important;
  font-style: italic !important;
  line-height: 1.4 !important;
  color: #f5f5f7 !important;
  margin: 0 0 28px 0 !important;
}

.pull-quote-author {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.author-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #c5a880 !important;
  color: #000 !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.author-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

.author-meta strong {
  font-size: 14px !important;
  color: #fff !important;
}

.author-meta span {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

.pull-quote-rating {
  margin-left: auto !important;
  display: flex !important;
  gap: 4px !important;
  color: #c5a880 !important;
}

/* 10: BUILT WITH CLOSING STRIP */
.built-with-section {
  padding: 60px 0 30px 0 !important;
  background: #060606 !important;
  text-align: center !important;
}

.built-with-tag {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #c5a880 !important;
  display: inline-block !important;
  margin-bottom: 8px !important;
}

.built-with-title {
  font-size: 18px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.7) !important;
}



/* ==========================================================
   V5 BUG 1 FIX: ABSOLUTE VIDEO BACKGROUNDS
   ========================================================== */
section, #hero {
  position: relative;
}





.section-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: rgba(0,0,0,0.4); /* fallback overlay */
}

.container, .hero-content {
  position: relative !important;
  z-index: 2 !important;
}

/* Ensure SplitType elements don't get permanently invisible */
.reveal-text .word {
  opacity: 1; /* Reset by GSAP */
}



/* ==========================================================
   V6: LIQUID GLASS & HORIZONTAL FIX
   ========================================================== */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-top: 40px;
}
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

/* Liquid Glass Cards */
.liquid-glass-card {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(25px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5) !important;
  border-radius: 20px !important;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 25px !important;
}

.liquid-glass-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 15px 50px -10px rgba(0, 0, 0, 0.7), 0 0 20px rgba(255, 255, 255, 0.05) !important;
}

.card-header-flex {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  width: 100% !important;
}

.card-header-flex h3 {
  margin: 0 !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.02em !important;
}

.card-header-flex .project-icon, .card-header-flex .ext-icon {
  margin: 0 !important;
  flex-shrink: 0 !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.card-content-hidden {
  margin-top: 20px !important;
  opacity: 1 !important;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Collapsed State */
.liquid-glass-card.collapsed-card {
  /* Only show header (padding top 25 + header height ~40 + padding bottom 25 = 90px) */
  max-height: 90px !important; 
}
.liquid-glass-card.collapsed-card .card-content-hidden {
  opacity: 0 !important;
  transform: translateY(15px) !important;
  pointer-events: none !important;
}

.liquid-glass-card:not(.collapsed-card) {
  max-height: 800px !important; 
}

/* Center Built-With Icons */
.built-with-section {
  text-align: center !important;
}
.tools-kinetic-matrix.endless-matrix {
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.matrix-row {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}
.matrix-track {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 20px !important;
  animation: none !important; /* Kill the marquee glitch */
  width: 100% !important;
}

/* Futuristic Text Glow */
.reveal-text .word {
  text-shadow: 0 0 10px rgba(255,255,255,0) !important;
  transition: text-shadow 0.4s ease !important;
}



/* ==========================================================
   V7: ROBUST HORIZONTAL SHOWCASE CSS
   ========================================================== */
.showcase-track-container {
  width: 100vw !important;
  overflow: hidden !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 60px 0 !important;
}

.showcase-track {
  display: flex !important;
  gap: 40px !important;
  width: max-content !important;
  padding: 0 5vw !important; /* Visual inset at start and end */
  will-change: transform !important;
}

.showcase-track .showcase-card-wrapper {
  width: 450px !important;
  flex-shrink: 0 !important;
}

/* Ensure liquid glass cards take full height inside the wrapper */
.showcase-track .liquid-glass-card {
  height: 100% !important;
}

@media (max-width: 1023px) {
  .showcase-track-container {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .showcase-track {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 25px !important;
    padding: 0 15px !important;
  }
  .showcase-track .showcase-card-wrapper {
    width: 100% !important;
  }
}



/* ==========================================================
   V8: APPROACH PINNED SEQUENCE
   ========================================================== */
@media (min-width: 1024px) {
  .approach-sequence {
    position: relative !important;
    min-height: 50vh !important; /* Reserve height so the container doesn't collapse */
    width: 100% !important;
  }
  
  /* Initial state before GSAP takes over */
  .approach-step-card {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    opacity: 0;
    visibility: hidden;
  }
  
  /* Make the first one visible immediately to prevent layout flash */
  .approach-step-card:first-child {
    opacity: 1;
    visibility: visible;
  }
}

/* Fallback for mobile (keep it static) */
@media (max-width: 1023px) {
  .approach-sequence {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    min-height: auto !important;
  }
  .approach-step-card {
    position: relative !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}



/* ==========================================================
   V9: KEEP CARDS OPEN PERMANENTLY
   ========================================================== */
.liquid-glass-card {
  max-height: none !important;
}
.liquid-glass-card .card-content-hidden {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}



/* ==========================================================
   SHOWCASE SECTION: RESPONSIVE VERTICAL SCROLL GRID
   ========================================================== */
.showcase-horizontal-section,
.showcase-vertical-section,
#showcase {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: clamp(60px, 8vw, 100px) 0 !important;
}

.showcase-track-container,
.showcase-container {
  position: relative !important;
  width: 100% !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 clamp(20px, 4vw, 48px) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  left: auto !important;
  right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.showcase-track,
.showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(20px, 2.5vw, 32px) !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  will-change: auto !important;
}

.showcase-track .showcase-card-wrapper,
.showcase-card-wrapper {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex-shrink: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.showcase-track .liquid-glass-card,
.showcase-track .project-card,
.showcase-card-wrapper .project-card {
  width: 100% !important;
  height: 100% !important;
  min-height: 380px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
}

@media (max-width: 1100px) {
  .showcase-track,
  .showcase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

@media (max-width: 720px) {
  .showcase-track,
  .showcase-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}



/* ==========================================================
   V11 FIXES
   ========================================================== */

/* FIX A: Showcase vertical grid */
.showcase-vertical-section .showcase-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
  gap: 28px !important;
  margin-top: 40px !important;
}
@media (max-width: 768px) {
  .showcase-vertical-section .showcase-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Keep showcase-card-wrapper full width inside grid */
.showcase-grid .showcase-card-wrapper {
  width: 100% !important;
}

/* FIX B: Marquee rows - each row scrolls in its own direction */
.tools-kinetic-matrix.endless-matrix {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
  overflow: hidden !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  margin-left: -50vw !important;
  padding: 40px 0 !important;
}

.matrix-row {
  overflow: hidden !important;
  width: 100% !important;
}

.matrix-track {
  display: flex !important;
  gap: 30px !important;
  width: max-content !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

/* Row 1 & 3: scroll LEFT (→) */
.matrix-track.track-left {
  animation: marquee-left 40s linear infinite !important;
}
/* Row 2 & 4: scroll RIGHT (←) */
.matrix-track.track-right {
  animation: marquee-right 40s linear infinite !important;
}

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-33.333%); }
}
@keyframes marquee-right {
  0%   { transform: translateX(-33.333%); }
  100% { transform: translateX(0); }
}

.matrix-track .tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.matrix-track .tool-icon img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  opacity: 0.6 !important;
  filter: none !important;
  transition: opacity 0.3s !important;
}
.matrix-track .tool-icon:hover img {
  opacity: 1 !important;
}

/* FIX C: Hero buttons — white background, dark text */
#hero .btn-primary,
#hero .btn.btn-primary {
  background: #ffffff !important;
  color: #0a0a0a !important;
  border-color: #ffffff !important;
}
#hero .btn-primary:hover,
#hero .btn.btn-primary:hover {
  background: rgba(255,255,255,0.85) !important;
  color: #0a0a0a !important;
}
#hero .btn-outline,
#hero .btn.btn-outline {
  border-color: rgba(255,255,255,0.6) !important;
  color: #ffffff !important;
}
#hero .btn-outline:hover,
#hero .btn.btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: #ffffff !important;
}


/* ==========================================================
   V11 VIDEO OPACITY & OVERLAY FIX
   ========================================================== */

/* All background videos: 80% opacity */
.media-bg-video, .hero-video-bg iframe, .section-video-bg iframe, video { opacity: 0.85; }
/* Overlay: dark base + very subtle site-tinted vignette.
   Uses the site's primary background (#000000) at ~55% opacity
   so the neon-dark aesthetic bleeds through uniformly. */
.media-bg::after,
.hero-video-bg::after,
.section-video-bg::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  /* Linear gradient so it's heavier at top/bottom (frame) and lighter in the middle (content area) */
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0%,
      rgba(0, 0, 0, 0.35) 40%,
      rgba(0, 0, 0, 0.35) 60%,
      rgba(0, 0, 0, 0.65) 100%
    ) !important;
  /* Tiny site-accent tint so the overlay feels like it belongs */
  mix-blend-mode: multiply !important;
  pointer-events: none !important;
}

/* Ensure content still sits above the overlay */
.media-bg ~ .container,
.media-bg ~ .hero-content,
.media-bg ~ .showcase-header,
.media-bg ~ .approach-header,
section > .container,
section > .hero-content,
section > .showcase-header,
section > .approach-header {
  position: relative !important;
  z-index: 2 !important;
}


/* ==========================================================
   V11.1 � SHOWCASE CARD SHAKING FIX
   Root cause: stale will-change + conflicting max-height
   transitions from old collapse logic fighting hover transforms.
   ========================================================== */

/* 1. Strip all problematic will-change + old max-height from showcase cards */
.showcase-grid .showcase-card-wrapper, .showcase-grid .liquid-glass-card, .showcase-grid .project-card { will-change: transform, opacity; }

/* 2. Clean, single-source transition for cards � only transform & box-shadow */
.showcase-grid .liquid-glass-card,
.showcase-grid .project-card {
  max-height: none !important;        /* kill the collapsible height transition */
  transition: box-shadow 0.35s ease, border-color 0.35s ease !important;
  backface-visibility: hidden !important;   /* GPU compositing � stops sub-pixel jitter */
  -webkit-backface-visibility: hidden !important;
}

/* 3. Hover: only lift � no scale, no blur-change � those cause repaints that jitter */
.showcase-grid .liquid-glass-card:hover,
.showcase-grid .project-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* 4. Neutralise the card-content-hidden transitions (from collapsible era) */
.showcase-grid .card-content-hidden {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ==========================================================
   V11.1 � POWERED BY: TRUE CENTRED + ENDLESS MARQUEE FIX
   ========================================================== */

/* Outer strip: full bleed, clips the moving rows */
.tools-kinetic-matrix.endless-matrix {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  overflow: hidden !important;
  width: 100% !important;             /* no negative margin hack � keep it simple */
  position: relative !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 48px 0 !important;
  /* centre the whole block */
  align-items: center !important;
}

/* Each row is full-width and clips its track */
.matrix-row {
  width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
}

/* The moving strip � sized to 3� its unique content so looping is invisible */
.matrix-track {
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  flex-wrap: nowrap !important;
  /* width is set by content (max-content) � animation handles the loop */
  width: max-content !important;
}

/* Direction animations � row repeats 3� content, so shifting 33.333% = one set */
.matrix-track.track-left {
  animation: marquee-ltr 35s linear infinite !important;
}
.matrix-track.track-right {
  animation: marquee-rtl 35s linear infinite !important;
}

@keyframes marquee-ltr {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
@keyframes marquee-rtl {
  from { transform: translateX(-33.333%); }
  to   { transform: translateX(0); }
}

/* Pause on hover */
.endless-matrix:hover .matrix-track {
  animation-play-state: paused !important;
}

/* Icon sizing */
.matrix-track .tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}
.matrix-track .tool-icon img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  opacity: 0.55 !important;
  transition: opacity 0.25s ease !important;
}
.matrix-track .tool-icon:hover img {
  opacity: 1 !important;
}


/* ==========================================================
   V11.2 � SECTION TITLE OVERLAP FIX
   Root cause: SplitType creates .word spans with inline-block +
   GSAP y-translate. When the heading wraps to 2 lines the parent
   h2 height collapses (it only sees the first line) so line 2
   renders on top of the subtitle below.
   ========================================================== */

/* 1. Force every section heading to be a block that grows with content */
.section-title,
h2.section-title {
  display: block !important;
  overflow: visible !important;          /* never clip split words */
  /* enough line-height so each line has breathing room */
  line-height: 1.15 !important;
  /* reset any stale transform that GSAP left behind between breakpoints */
  white-space: normal !important;
  word-break: break-word !important;
}

/* 2. The .word spans SplitType creates must be inline-block
      and MUST NOT use position:absolute � keep them in flow */
.section-title .word,
h2.section-title .word {
  display: inline-block !important;
  position: relative !important;         /* stay in normal flow */
  vertical-align: top !important;        /* snap to the top of the line box */
  white-space: nowrap !important;        /* words don't wrap mid-word */
  margin-right: 0.25em !important;       /* word spacing */
  /* The GSAP y-transform lives here � ensure the element
     doesn't shrink the parent's height */
  will-change: opacity, transform !important;
  backface-visibility: hidden !important;
}

/* 3. Each line wrapper SplitType creates (if lines type is used) */
.section-title .line,
h2.section-title .line {
  display: block !important;
  overflow: visible !important;
  /* ? THIS is the key fix: don't let line wrappers be zero-height */
  min-height: 1.2em !important;
  line-height: inherit !important;
}

/* 4. Subtitle sits BELOW the title � never overlaps */
.section-subtitle,
p.section-subtitle {
  display: block !important;
  position: relative !important;
  margin-top: 16px !important;
  clear: both !important;
}

/* 5. Heading containers (approach header etc) � stack vertically */
.approach-header,
.showcase-header,
.section-header,
[class*="-header"]:not(.built-with-header) {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: flex-start !important;
}

/* 6. Mobile � smaller type so titles never need 3+ lines */
@media (max-width: 768px) {
  .section-title,
  h2.section-title {
    font-size: clamp(28px, 9vw, 48px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
  }
}

@media (max-width: 480px) {
  .section-title,
  h2.section-title {
    font-size: clamp(24px, 8vw, 38px) !important;
    line-height: 1.25 !important;
  }
}


/* ==========================================================
   V11.3 � SECTION TITLE ALWAYS VISIBLE (SplitType excluded)
   h2.section-title is NOT processed by SplitType/GSAP anymore.
   Ensure they are always fully visible on every device.
   ========================================================== */
h2.section-title,
.section-title {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  line-height: 1.15 !important;
}

/* Section number badge */
.section-num {
  display: inline !important;
  font-size: 0.5em !important;
  vertical-align: super !important;
  opacity: 0.5 !important;
  margin-right: 0.3em !important;
  letter-spacing: 0.05em !important;
}

/* Section text part */
.section-text {
  display: inline !important;
}

/* Subtitle always below, never overlapping */
.section-subtitle,
p.section-subtitle {
  display: block !important;
  position: static !important;
  margin-top: 14px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile: shrink titles so they always fit on one or two clean lines */
@media (max-width: 768px) {
  h2.section-title,
  .section-title {
    font-size: clamp(26px, 8.5vw, 46px) !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 480px) {
  h2.section-title,
  .section-title {
    font-size: clamp(22px, 7.5vw, 34px) !important;
    line-height: 1.25 !important;
  }
}

.media-bg {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}



/* === POWERED BY DESKTOP CENTERED FIX === */
#built-with,
.built-with-section {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 60px 0 40px 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
.built-with-section .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto 32px auto !important;
  width: 100% !important;
  max-width: 1200px !important;
}
.built-with-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.built-with-tag {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #c5a880 !important;
  display: inline-block !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.built-with-title {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 700px !important;
}
.tools-kinetic-matrix.endless-matrix {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
  align-items: center !important;
  justify-content: center !important;
}
.matrix-row {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  margin: 0 auto !important;
}
.matrix-track {
  display: flex !important;
  align-items: center !important;
  gap: 36px !important;
  padding-right: 36px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  width: max-content !important;
  will-change: transform !important;
}
.matrix-track.track-left {
  animation: marquee-ltr 35s linear infinite !important;
}
.matrix-track.track-right {
  animation: marquee-rtl 35s linear infinite !important;
}
@keyframes marquee-ltr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes marquee-rtl {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}
.tools-kinetic-matrix:hover .matrix-track,
.endless-matrix:hover .matrix-track {
  animation-play-state: paused !important;
}
.matrix-track .tool-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  height: 54px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.matrix-track .tool-icon:hover {
  background: rgba(197, 168, 128, 0.12) !important;
  border-color: rgba(197, 168, 128, 0.4) !important;
  transform: translateY(-4px) scale(1.12) !important;
}
.matrix-track .tool-icon img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  opacity: 0.65 !important;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)) !important;
  transition: all 0.3s ease !important;
}
.matrix-track .tool-icon:hover img {
  opacity: 1 !important;
  filter: drop-shadow(0 0 8px rgba(197, 168, 128, 0.6)) !important;
}

/* === FULLSCREEN VIDEO & ENHANCED PARALLAX ENGINE === */
.media-bg {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.media-bg-video,
video.media-bg-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  pointer-events: none !important;
  transform: none !important;
}

#hero .media-bg-video {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  transform: none !important;
}

.section-video-overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.72) 100%) !important;
  pointer-events: none !important;
}

.section-parallax-watermark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(4rem, 16vw, 15rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04) !important;
  pointer-events: none !important;
  user-select: none !important;
  z-index: 1 !important;
  white-space: nowrap !important;
  will-change: transform !important;
}


/* === BI-DIRECTIONAL IN/OUT ANIMATION ENGINES === */
.fresh-section-title .title-name {
  display: inline-block !important;
  will-change: transform, opacity !important;
}

.project-card,
.approach-pillar-card,
.extension-card,
.business-card,
.testimonial-card,
.number-stat-card,
.highlight-card {
  will-change: transform, opacity !important;
  transform-origin: 50% 0% !important;
  transform-style: preserve-3d !important;
}


/* === AMBIENT BACKGROUND MUSIC WIDGET === */
/* ==========================================================
   AMBIENT BACKGROUND MUSIC WIDGET
   ========================================================== */
.music-widget-container {
  position: fixed !important;
  bottom: clamp(16px, 3vw, 28px) !important;
  right: clamp(16px, 3vw, 28px) !important;
  z-index: 996 !important;
  pointer-events: auto !important;
}

.music-pill-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: rgba(14, 14, 14, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  user-select: none !important;
}

.music-pill-btn:hover {
  background: rgba(22, 22, 22, 0.92) !important;
  border-color: rgba(197, 168, 128, 0.45) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 16px rgba(197, 168, 128, 0.25) !important;
}

.music-pill-btn:focus-visible {
  outline: 2px solid #c5a880 !important;
  outline-offset: 3px !important;
}

/* Playing State */
.music-pill-btn.is-playing {
  border-color: rgba(197, 168, 128, 0.5) !important;
  background: rgba(18, 17, 15, 0.9) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(197, 168, 128, 0.25) !important;
}

.music-pill-btn.is-playing .music-status-badge {
  color: #c5a880 !important;
  opacity: 1 !important;
}

/* Visualizer Bars */
.music-visualizer {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2.5px !important;
  height: 14px !important;
  width: 14px !important;
}

.viz-bar {
  width: 2px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  border-radius: 1px !important;
  transition: all 0.3s ease !important;
  height: 3px !important;
}

.music-pill-btn.is-playing .viz-bar {
  background: #c5a880 !important;
  box-shadow: 0 0 6px rgba(197, 168, 128, 0.5) !important;
}

.music-pill-btn.is-playing .viz-bar-1 { animation: vizBarJump 1.2s infinite ease-in-out !important; }
.music-pill-btn.is-playing .viz-bar-2 { animation: vizBarJump 0.8s infinite ease-in-out 0.2s !important; }
.music-pill-btn.is-playing .viz-bar-3 { animation: vizBarJump 1.1s infinite ease-in-out 0.4s !important; }
.music-pill-btn.is-playing .viz-bar-4 { animation: vizBarJump 0.9s infinite ease-in-out 0.1s !important; }

@keyframes vizBarJump {
  0%, 100% { height: 3px; }
  50% { height: 13px; }
}

.music-label-text {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 11px !important;
}

.music-status-badge {
  font-size: 10px !important;
  opacity: 0.5 !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: opacity 0.3s ease, color 0.3s ease !important;
}