/* 
   Model Garden - Futuristic AI Theme 
   Palette: Purple/Magenta to Deep Blue Gradient
*/

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap");
/* Assuming Google Sans Code is available via a similar URL or local font. 
   Since it's a Google font but sometimes restricted, I'll try to find a standard import or fallback.
   Actually, Google Sans Code is often not on Google Fonts public directory directly under that name or requires specific access.
   However, for the purpose of this task, I will assume it works or use a close alternative if needed. 
   But the user specifically asked for it. I will add a standard font-face or import if I can find one, 
   or just set the family and assume the user has it or I can link it.
   Let's try to import it if possible, or just set it. 
   I'll add a placeholder import for it if it exists, or just use the name.
   Actually, "Google Sans Mono" is common. "Google Sans Code" might be the same or similar.
   I'll stick to setting the family name.
*/

:root {
  /* Theme: Full Black & Neon Green (Popping) */
  --bg-dark: #000000;
  --bg-secondary: #050505;
  --bg-card: rgba(20, 255, 100, 0.03); /* Subtle green tint */
  --bg-glass: rgba(0, 0, 0, 0.6);
  --text-main: #ffffff;
  --text-muted: #a0a0a0;

  /* Brand Colors - Neon Green Theme */
  /* Mapping old variable names to new colors to maintain compatibility */
  --primary-purple: #1bab68; /* Neon Mint */
  --primary-magenta: #28d987; /* Pure Neon Green */
  --accent-pink: #28d95d; /* Electric Lime */
  --accent-coral: #068d3c; /* Neon Green */
  --deep-blue: #001a0d; /* Very Dark Green */
  --navy-blue: #000000;

  /* Gradient Definitions */
  --gradient-main: linear-gradient(
    135deg,
    #1bab68 0%,
    #1bab68 50%,
    #1bab68 100%
  );
  --gradient-warm: linear-gradient(135deg, #1bab68, #1bab68);
  --gradient-bg: linear-gradient(180deg, #050505 0%, #000000 100%);

  --font-main: "Google Sans Code", monospace;

  --nav-height: 60px;
}

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

img,
video {
  max-width: 100%;
  height: auto;
}

html {
  scroll-behavior: smooth;
  cursor: url("../assets/images/cursor.svg") 10 10, auto;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-dark);
  color: var(--text-main);
  overflow-x: hidden; /* Prevent horizontal scroll globally */
  line-height: 1.6;
  cursor: url("../assets/images/cursor.svg") 10 10, auto;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

/* --- Interactive Background --- */
.interactive-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: var(--bg-dark); /* Fallback/Base color */
  /* Layered background: Green glow gradient + Text Pattern */
  background-image: radial-gradient(
      circle 100px at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(0, 255, 0, 0.4) 0%,
      transparent 100%
    ),
    url("../assets/images/text.png");
  background-size: auto, 550px; /* Gradient follows mouse, pattern tiles naturally */
  background-position: 0 0, 0 0; /* Gradient uses mouse coords in definition, pattern starts at top-left */
  background-repeat: no-repeat, repeat;
  opacity: 1; /* Full opacity, let SVG opacity handle depth */
  /* Mask to reveal only the area around mouse */
  mask-image: radial-gradient(
    circle 100px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    black 0%,
    transparent 100px
  );
  -webkit-mask-image: radial-gradient(
    circle 100px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    black 0%,
    transparent 100px
  );
  transition: opacity 0.5s ease;
  pointer-events: none;
  mix-blend-mode: screen; /* Helps the green glow pop against black */
}

/* Enhance pop effect on mouse hover */
.interactive-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle 150px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.1) 0%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* --- Loading Screen --- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-dark);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  cursor: none; /* Hide cursor on loading screen */
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding {
  padding: 100px 0;
}

.text-gradient {
  background: var(--gradient-main);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 5s ease infinite;
}

@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.btn {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  backdrop-filter: blur(5px);
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer; /* Standard pointer for buttons */
  border: none;
  font-size: 1rem;
  backdrop-filter: blur(5px);
}

/* Navbar specific cursor fix */
.glass-nav {
  cursor: auto; /* Revert to normal cursor on navbar container */
}

.glass-nav a,
.glass-nav button {
  cursor: pointer; /* Ensure interactive elements have pointer */
}

.btn-primary {
  background: linear-gradient(
    135deg,
    #008f4c,
    #00b300
  ); /* Darker Green Gradient */
  color: white;
  box-shadow: 0 4px 20px rgba(0, 255, 0, 0.2); /* Reduced intensity green shadow */
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 255, 0, 0.4), 0 0 20px rgba(0, 143, 76, 0.3); /* Darker green glow */
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-glass {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-glass:hover {
  background: rgba(0, 0, 0, 0.6);
  border-color: var(--primary-purple);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.btn-sm {
  padding: 8px 20px;
  font-size: 0.9rem;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary-purple);
  color: var(--text-main);
}

.btn-outline:hover {
  border-color: var(--primary-magenta);
  color: var(--primary-magenta);
}

/* --- Glassmorphism --- */
.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent-pink) 50%, transparent);
  box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.5), 0 0 20px rgba(139, 92, 246, 0.2);
}

/* --- Navigation --- */
.glass-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 1200px;
  min-width: 600px;
  height: 60px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  z-index: 1000;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border-left: 0px solid var(--primary-magenta);
  border-right: 0px solid var(--primary-magenta);
  border-bottom: 4px solid
    color-mix(in srgb, var(--primary-magenta) 60%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: visible;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1),
    height 1s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s, box-shadow 0.3s;
}

.glass-nav.scrolled {
  width: 60%;
  min-width: 700px;
  height: 50px;
  background: rgba(0, 0, 0, 0.7);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  padding: 0 10px;
  border-left: 0px solid var(--primary-magenta);
  border-right: 0px solid var(--primary-magenta);
  border-bottom: 3px solid
    color-mix(in srgb, var(--primary-magenta) 30%, transparent);
}

/* Shrink Logo */
.glass-nav.scrolled .logo {
  font-size: 1.1rem;
}

.glass-nav.scrolled .logo img {
  height: 30px;
}

/* Shrink Links */
.glass-nav.scrolled .nav-links a {
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* Shrink Button */
.glass-nav.scrolled .btn-signin {
  padding: 6px 16px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Remove old nav animation */
.nav-bg-animation,
.glass-nav .particle-grid {
  display: none;
}

.menu-toggle {
  display: none;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: white; /* White text for dark glass */
  font-weight: 700;
  font-size: 1.3rem;
  margin-left: 10px;
  transition: font-size 0.3s;
  white-space: nowrap; /* Prevent wrapping */
}

.logo img {
  height: 40px;
  width: auto;
  transition: height 0.3s;
}

.nav-links {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 0 auto; /* Center links */
}

.nav-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.7); /* Light gray text */
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.95rem;
  transition: all 0.3s;
}

.nav-links a:hover {
  color: white;
}

.nav-links a.active {
  background-color: transparent;
  color: white;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(
    --gradient-main
  ); /* Theme gradient: purple to magenta to pink */
  border-radius: 2px;
  transition: width 0.3s ease;
  display: block;
}

.nav-links a.active::after,
.nav-links a:hover::after {
  width: 100%;
}

.btn-signin {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(5px);
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: 600;
  margin-right: 5px;
  transition: all 0.3s;
}

.btn-signin:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--primary-purple);
  transform: translateY(-1px);
}

/* --- Hero Section --- */
.hero-section {
  position: relative;
  height: 100vh;
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding-top: var(--nav-height);
}

.hero-bg-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.particle-grid {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: linear-gradient(
      rgba(139, 92, 246, 0.2) 1px,
      transparent 1px
    ),
    linear-gradient(90deg, rgba(139, 92, 246, 0.2) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg) translateY(-100px)
    translateZ(-200px);
  animation: gridMove 20s linear infinite;
  opacity: 0.3;
}

/* Hero Lines Animation */
.hero-lines-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.hero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  opacity: 0;
  animation: moveRight linear infinite;
}

.hero-line:nth-child(1) {
  left: 6%;
  animation-duration: 15s;
  animation-delay: 0s;
}
.hero-line:nth-child(2) {
  left: 16%;
  animation-duration: 25s;
  animation-delay: -5s;
}
.hero-line:nth-child(3) {
  left: 26%;
  animation-duration: 18s;
  animation-delay: -10s;
}
.hero-line:nth-child(4) {
  left: 36%;
  animation-duration: 22s;
  animation-delay: -2s;
}
.hero-line:nth-child(5) {
  left: 46%;
  animation-duration: 30s;
  animation-delay: -15s;
}
.hero-line:nth-child(6) {
  left: 56%;
  animation-duration: 20s;
  animation-delay: -7s;
}
.hero-line:nth-child(7) {
  left: 66%;
  animation-duration: 28s;
  animation-delay: -12s;
}
.hero-line:nth-child(8) {
  left: 76%;
  animation-duration: 35s;
  animation-delay: -20s;
}
.hero-line:nth-child(9) {
  left: 84%;
  animation-duration: 24s;
  animation-delay: -6s;
}
.hero-line:nth-child(10) {
  left: 92%;
  animation-duration: 32s;
  animation-delay: -14s;
}
.hero-line:nth-child(11) {
  left: 4%;
  animation-duration: 26s;
  animation-delay: -9s;
}
.hero-line:nth-child(12) {
  left: 22%;
  animation-duration: 19s;
  animation-delay: -3s;
}
.hero-line:nth-child(13) {
  left: 62%;
  animation-duration: 27s;
  animation-delay: -11s;
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 0.6; /* Fade in */
  }
  80% {
    opacity: 0.5; /* Stay visible */
  }
  100% {
    transform: translateX(200px); /* Move further right */
    opacity: 0; /* Fade out */
  }
}

/* Update gridMove to be unused or remove */
@keyframes gridMove {
  0% {
    transform: perspective(500px) rotateX(60deg) translateY(0)
      translateZ(-200px);
  }
  100% {
    transform: perspective(500px) rotateX(60deg) translateY(50px)
      translateZ(-200px);
  }
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  will-change: transform;
  /* animation: floatOrb 10s ease-in-out infinite; Removed to let JS handle parallax + floating mix if needed, or keep it subtle */
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: var(--primary-purple);
  top: -100px;
  left: -100px;
}

.orb-2 {
  width: 300px;
  height: 300px;
  background: var(--primary-magenta);
  bottom: 10%;
  right: -50px;
  animation-delay: -5s;
}

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

.hero-content h1 {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 20px;
  font-weight: 700;
}

.hero-content p {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto 40px;
}

.hero-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0.7;
}

.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid var(--text-muted);
  border-radius: 20px;
  position: relative;
}

.wheel {
  width: 4px;
  height: 8px;
  background: var(--primary-magenta);
  border-radius: 2px;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

@keyframes scrollWheel {
  0% {
    top: 10px;
    opacity: 1;
  }
  100% {
    top: 30px;
    opacity: 0;
  }
}

.arrow span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid var(--text-muted);
  border-right: 2px solid var(--text-muted);
  transform: rotate(45deg);
  margin: -5px;
  animation: scrollArrow 2s infinite;
}

.arrow span:nth-child(2) {
  animation-delay: -0.2s;
}
.arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-5px, -5px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(5px, 5px);
  }
}

/* --- Featured Section --- */
.section-title {
  font-size: 2.5rem;
  margin-bottom: 50px;
  text-align: center;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.featured-card {
  position: relative;
  overflow: hidden;
  height: 300px;
  display: flex;
  align-items: flex-end;
  padding: 30px;
  cursor: pointer;
}

.card-visual {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: transform 0.5s ease;
}

.featured-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: skewX(-25deg);
  transition: 0.5s;
  z-index: 2;
  pointer-events: none;
}

.featured-card:hover::after {
  left: 150%;
  transition: 0.7s ease-in-out;
}

.visual-vision {
  background: radial-gradient(
      circle at 30% 30%,
      rgba(139, 92, 246, 0.4),
      transparent 60%
    ),
    radial-gradient(circle at 70% 70%, rgba(217, 70, 239, 0.3), transparent 60%);
  filter: blur(20px);
  animation: pulseVisual 5s infinite alternate;
}

.visual-nlp {
  background: radial-gradient(
      circle at 70% 30%,
      rgba(236, 72, 153, 0.4),
      transparent 60%
    ),
    radial-gradient(circle at 30% 70%, rgba(217, 70, 239, 0.2), transparent 60%);
  filter: blur(20px);
  animation: pulseVisual 5s infinite alternate-reverse;
}

@keyframes pulseVisual {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.1);
    opacity: 1;
  }
}

.featured-card:hover .card-visual {
  transform: scale(1.1);
}

.card-content {
  position: relative;
  z-index: 1;
  width: 100%;
}

.card-content h3 {
  font-size: 1.8rem;
  margin-bottom: 5px;
}

.link-arrow {
  color: var(--primary-magenta);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}

.link-arrow i {
  transition: transform 0.3s;
}

.link-arrow:hover i {
  transform: translateX(5px);
}

/* --- Categories --- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.category-tile {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px;
  border-radius: 15px;
  text-align: center;
  transition: all 0.3s;
}

.category-tile:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--primary-purple);
  transform: translateY(-5px);
}

.icon-box {
  font-size: 2rem;
  color: var(--primary-purple);
  margin-bottom: 20px;
}

.category-tile h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

.category-tile p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* --- Models Gallery --- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.filter-tabs {
  display: flex;
  gap: 10px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  padding: 5px;
  border-radius: 30px;
}

.filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 8px 20px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  perspective: 1000px;
}

.model-card {
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  font-weight: 700;
}

.card-badge.open {
  background: rgba(139, 92, 246, 0.2);
  color: var(--primary-purple);
}
.card-badge.closed {
  background: rgba(236, 72, 153, 0.2);
  color: var(--accent-pink);
}
.card-badge.enterprise {
  background: rgba(217, 70, 239, 0.2);
  color: var(--primary-magenta);
}

.card-header h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.tagline {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.card-metrics {
  display: flex;
  gap: 15px;
  margin: 10px 0;
}

.metric {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.metric i {
  color: var(--primary-purple);
}

.card-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.card-tags span {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-muted);
}

/* --- Tech Section --- */
.tech-container {
  display: flex;
  align-items: center;
  gap: 30px;
}

.tech-visual {
  flex: 1;
  height: auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.tech-content {
  flex: 1;
}

.tech-list {
  list-style: none;
  margin-top: 20px;
}

.tech-list li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.tech-list i {
  color: var(--primary-magenta);
}

/* Neural Net Animation */
.neural-net-anim {
  position: relative;
  width: 100%;
  height: 100%;
}

.node {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--primary-purple);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--primary-purple);
  animation: pulseNode 2s infinite;
}

.n1 {
  top: 20%;
  left: 20%;
}
.n2 {
  top: 50%;
  left: 20%;
  animation-delay: 0.5s;
}
.n3 {
  top: 80%;
  left: 20%;
  animation-delay: 1s;
}
.n4 {
  top: 50%;
  left: 80%;
  width: 30px;
  height: 30px;
  background: var(--primary-magenta);
  box-shadow: 0 0 15px var(--primary-magenta);
}

.connection {
  position: absolute;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--primary-purple),
    var(--primary-magenta)
  );
  transform-origin: left center;
  opacity: 0.5;
}

.c1 {
  top: 22%;
  left: 22%;
  width: 60%;
  transform: rotate(25deg);
}
.c2 {
  top: 52%;
  left: 22%;
  width: 58%;
  transform: rotate(0deg);
}
.c3 {
  top: 82%;
  left: 22%;
  width: 60%;
  transform: rotate(-25deg);
}

@keyframes pulseNode {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
    box-shadow: 0 0 10px var(--primary-purple);
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
    box-shadow: 0 0 20px var(--primary-purple);
  }
}

.tech-visual:hover .node {
  animation-duration: 1s;
  background: var(--primary-magenta);
  box-shadow: 0 0 15px var(--primary-magenta);
}

.tech-visual:hover .connection {
  background: linear-gradient(
    90deg,
    var(--primary-magenta),
    var(--accent-pink)
  );
  opacity: 0.8;
}

/* --- Purpose & Founder --- */
.purpose-card,
.founder-card {
  text-align: center;
  padding: 50px;
  max-width: 800px;
  margin: 0 auto;
}

.founder-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}

.founder-avatar {
  width: 80px;
  height: 80px;
  background: var(--gradient-main);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.founder-text {
  text-align: left;
}

.founder-timeline {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  position: relative;
}

.founder-timeline::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 10%;
  width: 80%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.timeline-item {
  position: relative;
  z-index: 1;
  background: var(--bg-dark);
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.timeline-item .year {
  display: block;
  font-weight: 700;
  color: var(--primary-purple);
}

.timeline-item .event {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* --- Contact --- */
.contact-wrapper {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: white;
  font-family: var(--font-main);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-purple);
  background: rgba(255, 255, 255, 0.1);
}

/* --- Model Detail Page Specifics --- */
.model-detail-page {
  padding-top: 120px;
}

.back-link {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}

.model-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
}

.model-title-row h1 {
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  gap: 15px;
}

.model-subtitle {
  font-size: 1.2rem;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.quick-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 50px;
}

.stat-card {
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.stat-card i {
  font-size: 2rem;
  color: var(--primary-purple);
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-info .label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.stat-info .value {
  font-size: 1.2rem;
  font-weight: 700;
}

.tabs-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.tabs-nav::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome/Safari */
}

.tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  white-space: nowrap;
  position: relative;
}

.tab-btn.active {
  color: white;
}

.tab-btn.active::after {
  content: "";
  position: absolute;
  bottom: -11px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-magenta);
}

.tab-content {
  padding: 30px;
  min-height: 300px;
}

.tab-pane {
  display: none;
  animation: fadeIn 0.5s ease;
}

.tab-pane.active {
  display: block;
}

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

.code-block {
  background: #000;
  padding: 20px;
  border-radius: 10px;
  overflow-x: auto;
  font-family: monospace;
  color: #a0a0b0;
}

.pricing-options {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.price-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.02);
  padding: 20px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.price-card.highlight {
  border-color: var(--primary-magenta);
  background: rgba(217, 70, 239, 0.05);
}

.price-card .price {
  font-size: 2rem;
  font-weight: 700;
  margin: 15px 0;
}

.price-card .price span {
  font-size: 1rem;
  color: var(--text-muted);
}

.price-card ul {
  list-style: none;
  margin-bottom: 20px;
  color: var(--text-muted);
}

/* --- Model Detail Components --- */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.cap-item {
  background: rgba(255, 255, 255, 0.03);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s;
}

.cap-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary-purple);
}

.cap-item i {
  font-size: 2rem;
  color: var(--primary-magenta);
  margin-bottom: 10px;
  display: block;
}

.demo-visual-placeholder {
  height: 300px;
  background: black;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--primary-magenta);
  box-shadow: 0 0 10px var(--primary-magenta);
  animation: scan 2s linear infinite;
}

@keyframes scan {
  0% {
    top: 0;
  }
  100% {
    top: 100%;
  }
}

.benchmark-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  color: var(--text-muted);
}

.benchmark-table th,
.benchmark-table td {
  padding: 15px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* --- New Sleek Footer Styles --- */
.main-footer {
  background-color: #00000050; /* Pure Black */
  padding: 60px 0 20px; /* Reduced padding */
  font-family: var(--font-main);
  backdrop-filter: blur(10px); /* Enhanced blur */
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  cursor: default; /* Normal cursor in footer */
  padding: 60px 0 60px; /* Increased bottom padding */
}

.main-footer .container {
  width: 95%;
  max-width: 95%;
  padding: 0; /* Remove padding to maximize width */
}

/* Hero Brand Section */
.footer-hero {
  text-align: center;
  margin-bottom: 40px; /* Reduced margin */
}

.footer-brand-text {
  font-size: 13vw; /* Adjusted for better fit */
  font-weight: 800;
  color: #ffffff;
  line-height: 0.8;
  letter-spacing: normal;
  margin: 0;
  display: block;
  white-space: nowrap;
  width: 100%;
  text-align: center;
  transition: color 0.3s ease, -webkit-text-stroke 0.3s ease, text-shadow 0.3s ease;
  cursor: default;
  transform-style: preserve-3d;
  will-change: transform;
}

.footer-brand-text:hover {
  color: transparent;
  -webkit-text-stroke: 2px var(--primary-magenta);
  text-shadow: 0 0 30px rgba(40, 217, 135, 0.4);
}

.footer-marquee-container {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  margin-top: 30px;
  position: relative;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px 0;
  max-width: none;
}

.footer-marquee {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: marqueeScroll 20s linear infinite;
  padding-right: 40px; /* Fix for seamless loop gap */
}

.marquee-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0.8;
}

.marquee-item i {
  font-size: 1rem;
}

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

/* Content Panel */
.footer-panel {
  background-color: rgba(20, 20, 20, 0.4); /* More transparent */
  backdrop-filter: blur(30px); /* Enhanced blur */
  -webkit-backdrop-filter: blur(30px);
  border-radius: 40px;
  padding: 0; /* Remove padding to let borders touch edges */
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  width: 100%; /* Ensure panel fills container */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.5fr;
  gap: 0;
  margin-bottom: 0; /* Remove margin */
}

.footer-col {
  padding: 60px 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.1); /* High visibility border */
  height: 100%; /* Ensure full height */
  text-align: left; /* Explicitly left align */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Explicitly align start */
}

.footer-col:first-child {
  padding-left: 80px; /* Extra padding for left edge */
}

.footer-col:last-child {
  padding-right: 80px; /* Extra padding for right edge */
  border-right: none;
}

.footer-col h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
  margin-bottom: 30px;
  letter-spacing: -0.02em;
}

/* Contact Info */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start; /* Explicitly align start */
  width: 100%;
}

.contact-info p,
.contact-link {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #a0a0a0;
  font-size: 1rem;
  margin: 0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-link:hover {
  color: white;
}

.contact-info i {
  color: white; /* Minimal white icons */
  font-size: 1.1rem;
  opacity: 0.7;
}

/* Quick Links */
.footer-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start; /* Explicitly align start */
  width: 100%;
}

.footer-nav-links a {
  color: #a0a0a0;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.footer-nav-links a:hover {
  color: white;
  transform: translateX(5px);
}

/* Newsletter */
.footer-subscribe-form {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
}

.footer-subscribe-form input {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 25px;
  border-radius: 50px;
  color: white;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s ease;
}

.footer-subscribe-form input:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-submit {
  background: white;
  color: black;
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-submit:hover {
  background: #f0f0f0;
  transform: scale(1.05);
}

.footer-socials {
  display: flex;
  gap: 20px;
  justify-content: flex-start; /* Explicitly align start */
}

.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none; /* Remove underline */
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: white;
  color: black;
  transform: translateY(-3px);
}

/* Bottom Strip */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 30px 80px; /* Match panel padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 0.9rem;
}

.footer-legal {
  display: flex;
  gap: 30px;
}

.footer-legal a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-legal a:hover {
  color: white;
}

/* Responsive Footer */
@media (max-width: 1024px) {
  .glass-nav {
    width: 95%;
    min-width: auto;
    padding: 0 20px;
  }

  .glass-nav.scrolled {
    width: 95%;
    min-width: auto;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
    margin-top: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    align-items: center; /* Center menu items */
    text-align: center;
  }

  .nav-links.active {
    display: flex;
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
  }

  .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    transition: 0.3s;
  }

  .mobile-hide {
    display: none;
  }

  .footer-panel {
    padding: 0;
  }

  .footer-col {
    padding: 40px;
  }

  .footer-col:first-child {
    padding-left: 40px;
  }

  .footer-col:last-child {
    padding-right: 40px;
  }

  .footer-bottom {
    padding: 30px 40px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-col:last-child {
    border-bottom: none;
  }

  .footer-brand-text {
    font-size: 16vw;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 20px;
  }

  .hero-content h1 {
    font-size: 2.5rem;
  }

  .section-title {
    font-size: 2rem;
  }

  .model-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .model-title-row h1 {
    font-size: 1.8rem; /* Reduce font size */
    flex-wrap: wrap;
    word-break: break-word; /* Ensure long words break */
  }

  .tabs-nav {
    justify-content: flex-start;
    padding-bottom: 15px;
    max-width: 100vw; /* Constrain width */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Fix for main page filter tabs */
  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-tabs {
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-btn {
    flex-shrink: 0;
  }

  .featured-grid,
  .quick-stats-grid,
  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .pricing-options {
    flex-direction: column;
  }

  .tabs-nav {
    justify-content: flex-start;
    padding-bottom: 15px;
  }

  .benchmark-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .main-footer {
    padding: 60px 0 20px;
  }

  .footer-hero {
    margin-bottom: 50px;
  }

  .footer-partners {
    flex-direction: column;
    gap: 15px;
  }

  .footer-panel {
    padding: 0;
    border-radius: 20px;
  }

  .footer-col {
    padding: 30px 20px;
  }

  .footer-col:first-child {
    padding-left: 20px;
  }

  .footer-col:last-child {
    padding-right: 20px;
  }

  .footer-bottom {
    padding: 30px 20px;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .footer-subscribe-form {
    flex-direction: column;
  }

  .btn-submit {
    width: 100%;
  }
}

/* --- Mobile Styles (Max-width: 768px) --- */
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  /* Reset borders and padding for mobile */
  .footer-col {
    padding: 30px 20px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    text-align: center; /* Center content */
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-col h4 {
    text-align: center; /* Center headers */
    width: 100%;
    align-self: center;
  }

  .footer-subscribe-form {
    flex-direction: column;
    align-items: center; /* Center form elements */
    width: 100%;
  }

  .btn-submit {
    width: auto; /* Allow button to be centered */
    min-width: 200px;
  }

  .contact-info {
    align-items: center;
    width: 100%;
  }

  .footer-nav-links {
    align-items: center;
    width: 100%;
  }

  .footer-socials {
    justify-content: center;
    width: 100%;
  }

  .footer-col:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 30px;
    padding-right: 20px;
  }

  .footer-brand-text {
    font-size: 12vw;
  }

  .tech-container {
    flex-direction: column;
    text-align: center;
  }

  .model-title-row {
    align-items: center;
    text-align: center;
  }

  .section-header {
    align-items: center; /* Center section header on mobile */
  }

  .filter-tabs {
    justify-content: center; /* Center tabs if they fit, otherwise scroll */
  }

  .pricing-options {
    flex-direction: column;
  }

  .benchmark-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  .founder-card {
    padding: 30px 20px;
  }

  .founder-info {
    flex-direction: column;
    text-align: center;
  }

  .founder-text {
    text-align: center;
  }

  .founder-timeline {
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }

  .founder-timeline::before {
    display: none;
  }

  .timeline-item {
    width: 100%;
  }

  .purpose-card {
    padding: 30px 20px;
  }

  .contact-wrapper {
    padding: 30px 20px;
  }
}

/* Global styles that were accidentally inside the media query - Restored to Global */
.pricing-options {
  flex-direction: row;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* --- Loading Screen --- */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-dark);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader {
  display: flex;
  align-items: center;
  justify-content: center; /* Center content horizontally */
  gap: 0; /* Start with no gap */
  position: absolute; /* Absolute positioning for movement later */
  /* Centering initially */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 1s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 10000;
}

.loader svg {
  width: 15vw;
  height: 15vw;
  max-width: 150px;
  max-height: 150px;
  overflow: visible;
  transition: all 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.loader svg path {
  stroke-width: 2px;
  /* fill: var(--primary-purple);  <-- REMOVED to let SVG gradients show */
  fill-opacity: 0;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2.5s ease-in-out, fill-opacity 1s ease,
    stroke-width 1s ease;
  /* stroke: var(--primary-purple); <-- REMOVED to let SVG stroke/gradients show if applied, or set to white/neutral if needed for drawing */
  stroke: #ffffff; /* Draw with white initially */
}

.loader.draw-start svg path {
  stroke-dashoffset: 0;
}

.loader.fill-start svg path {
  fill-opacity: 1;
  stroke-width: 0;
  /* fill: var(--primary-purple); <-- REMOVED */
}

/* Pop Animation Class */
.loader.pop-logo svg {
  animation: logoPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes logoPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.loading-screen .loader-text {
  font-family: var(--font-main); /* Use main font */
  /* Reverting other properties to inherit or match original design */
}

.loader-text {
  font-family: var(--font-main);
  font-size: 6vw;
  font-weight: 700;
  color: white;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  white-space: nowrap;
  max-width: 0; /* Start hidden with max-width for animation */
  opacity: 0;
  transition: max-width 1s ease, opacity 0.5s ease,
    font-size 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.loader.text-expand {
  gap: 2vw; /* Add gap when expanding */
}

.loader.text-expand .loader-text {
  max-width: 800px; /* Expand smoothly to fit text fully */
  padding-right: 20px; /* Add some padding */
  opacity: 1;
}

.loader-text span {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
}

.loader-text span.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Move to Navbar State */
.loading-screen.move-to-navbar {
  background-color: transparent;
  pointer-events: none;
}

.loader.move-to-navbar {
  top: var(--target-top, 40px);
  left: var(--target-left, 100px);
  transform: translate(0, 0);
  gap: 10px;
}

.loader.move-to-navbar svg {
  width: 40px;
  height: 40px;
  max-width: none;
  max-height: none;
}

.loader.move-to-navbar .loader-text {
  font-size: 1.3rem;
  width: auto; /* Allow natural width in navbar */
}

/* Hide original navbar logo initially */
.glass-nav .logo {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.glass-nav .logo.visible {
  opacity: 1;
}

/* Content Fade In */
body > *:not(.loading-screen) {
  opacity: 0;
  transition: opacity 1s ease;
}

body.content-visible > *:not(.loading-screen) {
  opacity: 1;
}

/* --- 3D Tech Visual Canvas --- */
#tech-canvas {
  width: 100%;
  height: 500px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}