/* ============================================
   AETHROC - Premium AI Consulting
   Complete Redesign - Orange/Purple Theme
   ============================================ */

/* ---------- CSS Variables ---------- */
:root {
  /* Colors */
  --color-bg: #0a0a0a;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #1a1a1a;

  --color-white: #ffffff;
  --color-gray-100: #f5f5f5;
  --color-gray-300: #d4d4d4;
  --color-gray-400: #a3a3a3;
  --color-gray-500: #737373;
  --color-gray-600: #525252;
  --color-gray-800: #262626;

  --color-orange: #ff6b00;
  --color-orange-light: #ff8533;
  --color-purple: #8b5cf6;
  --color-purple-light: #a78bfa;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--color-orange) 0%, var(--color-purple) 100%);
  --gradient-text: linear-gradient(90deg, var(--color-orange) 0%, var(--color-purple) 100%);
  --gradient-glow: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Space Grotesk', var(--font-primary);

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-6xl: 4.5rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* ---------- Reset & Base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-white);
  background: var(--color-bg);
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

.loader {
  text-align: center;
}

.loader-logo {
  width: 120px;
  height: auto;
  margin-bottom: var(--space-6);
  animation: pulse 2s ease-in-out infinite;
}

.loader-bar {
  width: 200px;
  height: 3px;
  background: var(--color-gray-800);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.loader-progress {
  width: 0%;
  height: 100%;
  background: var(--gradient-primary);
  animation: loading 1.5s ease-out forwards;
}

@keyframes loading {
  to {
    width: 100%;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(0.98);
  }
}

/* ---------- Container ---------- */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.btn-primary {
  background: var(--gradient-primary);
  color: var(--color-white);
  box-shadow: 0 4px 20px rgba(255, 107, 0, 0.3);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(255, 107, 0, 0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-gray-600);
}

.btn-ghost:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* ---------- Glass Card ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
}

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) 0;
  background: transparent;
  transition: background var(--transition-base);
}

.header.scrolled {
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-link {
  font-size: var(--text-sm);
  color: var(--color-gray-300);
  transition: color var(--transition-fast);
}

.nav-link:hover {
  color: var(--color-white);
}

.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.mobile-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition-fast);
}

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

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

.hero-bg-orb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  max-width: 1200px;
  height: auto;
  opacity: 0.5;
  filter: blur(2px);
  animation: floatOrb 8s ease-in-out infinite;
  -webkit-mask-image: radial-gradient(circle, white 30%, transparent 70%);
  mask-image: radial-gradient(circle, white 30%, transparent 70%);
}

@keyframes floatOrb {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(-50%, -52%) scale(1.03) rotate(2deg);
  }
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 10%, var(--color-bg) 60%);
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(139, 92, 246, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 30% 80%, rgba(255, 107, 0, 0.15) 0%, transparent 50%);
}

.hero-particles {
  position: absolute;
  inset: 0;
  opacity: 0.6;
}

.hero-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.hero-content {
  max-width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 107, 0, 0.1);
  border: 1px solid rgba(255, 107, 0, 0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-orange);
  margin-bottom: var(--space-6);
}

.badge-dot {
  width: 6px;
  height: 6px;
  background: var(--color-orange);
  border-radius: 50%;
  animation: blink 2s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 5vw, var(--text-6xl));
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-6);
}

.gradient-text {
  background: linear-gradient(90deg,
      var(--color-orange) 0%,
      var(--color-purple) 30%,
      var(--color-white) 50%,
      var(--color-purple) 70%,
      var(--color-orange) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 5s linear infinite;
}

.hero-subtitle {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
  line-height: 1.7;
}

/* ---------- Hero Typewriter ---------- */
.hero-cta {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: center;
  /* Enforces center alignment */
  width: 100%;
}

/* ---------- Hero Centered Layout ---------- */
.hero-container.centered-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  min-height: 100vh;
  gap: 0;
  padding-top: 0;
  position: relative;
}

.centered-hero .hero-content {
  max-width: 800px;
  text-align: center;
  z-index: 2;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  /* Position title in center of black hole (approximately 48% from top) */
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Container for elements below the title */
.hero-below-title {
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  z-index: 2;
  width: 100%;
  max-width: 1000px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: black;
}

#hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-visual-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.9;
  mix-blend-mode: screen;
  /* Blends black background seamlessly */
  z-index: 0;
  pointer-events: none;
}

@keyframes visualPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.05);
    opacity: 1;
  }
}

.hero-overlay {
  background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.8) 90%);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Typewriter Effect ---------- */
.typewriter-wrapper {
  display: inline;
}

.typewriter-text {
  color: var(--color-orange);
  font-weight: 700;
}

.typewriter-cursor {
  color: var(--color-orange);
  font-weight: 400;
  animation: cursorBlink 0.8s infinite;
  margin-left: 2px;
}

@keyframes cursorBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* ---------- DNA Icons Bar ---------- */
.dna-bar {
  display: inline-flex;
  /* Changed from flex to center properly in text-align center container */
  justify-content: center;
  gap: var(--space-12);
  padding: var(--space-6) var(--space-10);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  backdrop-filter: blur(12px);
  z-index: 2;
  margin-top: var(--space-8);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.dna-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  transition: transform var(--transition-fast);
}

.dna-item:hover {
  transform: translateY(-4px);
  filter: brightness(1.2);
}

.dna-icon {
  font-size: var(--text-xl);
  color: var(--color-orange);
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.4);
}

.dna-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--color-gray-300);
  font-weight: 500;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dna-bar {
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
    gap: var(--space-6);
  }
}

.robot-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.25) 0%, rgba(139, 92, 246, 0.1) 40%, transparent 70%);
  filter: blur(60px);
  z-index: -1;
  animation: glowPulse 4s ease-in-out infinite;
}

@keyframes robotFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1deg);
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ---------- Typewriter Effect ---------- */
.typewriter-wrapper {
  display: inline;
}

.typewriter-text {
  color: var(--color-orange);
  font-weight: 700;
}

.typewriter-cursor {
  color: var(--color-orange);
  font-weight: 400;
  animation: cursorBlink 0.8s infinite;
  margin-left: 2px;
}

@keyframes cursorBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* ---------- DNA Icons Bar ---------- */
/* ---------- AI Core System ---------- */
/* ---------- Floating Glass Interface ---------- */
/* ---------- Obsidian Monolith Cards ---------- */
.obsidian-grid {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  margin-top: var(--space-12);
  width: 100%;
}

.obsidian-card {
  position: relative;
  width: 320px;
  height: 380px;
  /* Taller content-rich cards */
  text-decoration: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(8, 8, 12, 0.6);
  /* Very dark base */
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

/* Background Noise/Gradient */
.card-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
  opacity: 1;
  z-index: 0;
}

/* Inner Glow Effect */
.card-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
  pointer-events: none;
}

.obsidian-card:hover .card-glow {
  opacity: 1;
}

.obsidian-card.featured .card-glow {
  background: radial-gradient(circle, rgba(255, 107, 0, 0.2) 0%, transparent 70%);
}

/* Content */
.card-content {
  position: relative;
  z-index: 1;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card-icon-wrapper {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-6);
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  color: var(--color-gray-400);
  transition: all var(--transition-base);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.obsidian-card:hover .card-icon-wrapper {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-purple-light);
  transform: translateY(-4px);
}

.obsidian-card.featured:hover .card-icon-wrapper {
  color: var(--color-orange);
}

.obsidian-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: var(--space-4);
  line-height: 1.2;
}

.obsidian-card p {
  font-size: var(--text-base);
  color: var(--color-gray-400);
  line-height: 1.6;
  margin-bottom: auto;
  /* Pushes footer down */
}

/* Footer Link */
.card-footer {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.link-text {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity var(--transition-base);
}

.link-arrow {
  width: 20px;
  height: 20px;
  color: var(--color-purple);
  transition: transform var(--transition-base);
}

.obsidian-card.featured .link-arrow {
  color: var(--color-orange);
}

.obsidian-card:hover .link-arrow {
  transform: translateX(4px);
}

.obsidian-card:hover .link-text {
  opacity: 1;
}

/* Hover State Card */
.obsidian-card:hover {
  transform: translateY(-8px);
  border-color: rgba(139, 92, 246, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.obsidian-card.featured:hover {
  border-color: rgba(255, 107, 0, 0.3);
}

/* Responsive */
@media (max-width: 1024px) {
  .obsidian-grid {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .obsidian-grid {
    flex-direction: column;
    align-items: center;
  }

  .obsidian-card {
    width: 100%;
    max-width: 360px;
    height: auto;
    min-height: 320px;
  }
}

/* ---------- Animation Classes ---------- */
.animate-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.8s ease forwards;
}

.animate-in:nth-child(1) {
  animation-delay: 0.1s;
}

.animate-in:nth-child(2) {
  animation-delay: 0.2s;
}

.animate-in:nth-child(3) {
  animation-delay: 0.3s;
}

.animate-in:nth-child(4) {
  animation-delay: 0.4s;
}

.animate-in:nth-child(5) {
  animation-delay: 0.5s;
}

.animate-in:nth-child(6) {
  animation-delay: 0.6s;
}

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

/* ---------- Section Base ---------- */
.section {
  padding: var(--space-24) 0;
}

.section-dark {
  background: var(--color-bg-secondary);
}

.section-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto var(--space-16);
}

.section-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-orange);
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.section-desc {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
}

/* ---------- Services Grid ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.service-card {
  padding: var(--space-8);
  transition: all var(--transition-base);
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.service-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}

.service-icon svg {
  width: 28px;
  height: 28px;
  stroke: white;
}

.service-card h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.6;
}

/* ---------- Pillars Section ---------- */
.pillars-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: center;
}

.pillars-content .section-title {
  text-align: left;
}

.pillars-content .section-desc {
  text-align: left;
  margin-bottom: var(--space-8);
}

.pillar-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.pillar-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: background var(--transition-fast);
}

.pillar-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.pillar-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pillar-text h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}

.pillar-text p {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

.pillars-visual {
  display: grid;
  gap: var(--space-4);
}

.visual-card {
  padding: var(--space-8);
  text-align: center;
}

.visual-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.vs-number {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vs-label {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
}

/* ---------- CTA Section ---------- */
.cta-wrapper {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-12);
  padding: var(--space-16);
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255, 107, 0, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%),
    rgba(255, 255, 255, 0.02);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Animated Gradient Border */
.cta-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: var(--radius-xl);
  background: linear-gradient(90deg,
      var(--color-orange),
      var(--color-purple),
      var(--color-orange-light),
      var(--color-purple-light),
      var(--color-orange));
  background-size: 300% 100%;
  animation: gradientBorderFlow 4s linear infinite;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.8;
}

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

  100% {
    background-position: 300% 50%;
  }
}

/* Floating Particles Background */
.cta-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 107, 0, 0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 80% 20%, rgba(139, 92, 246, 0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 70%, rgba(255, 133, 51, 0.3) 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 50%, rgba(167, 139, 250, 0.3) 0%, transparent 100%),
    radial-gradient(3px 3px at 90% 80%, rgba(255, 107, 0, 0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 10% 60%, rgba(139, 92, 246, 0.2) 0%, transparent 100%);
  animation: floatParticles 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes floatParticles {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.6;
  }

  25% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.8;
  }

  50% {
    transform: translateY(-5px) translateX(-5px);
    opacity: 1;
  }

  75% {
    transform: translateY(-15px) translateX(3px);
    opacity: 0.7;
  }
}

.cta-content h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
}

/* Animated Text Shine Effect */
.cta-content h2 .gradient-text {
  background: linear-gradient(90deg,
      var(--color-orange) 0%,
      var(--color-purple) 30%,
      rgba(255, 255, 255, 0.9) 50%,
      var(--color-purple) 70%,
      var(--color-orange) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 3s ease-in-out infinite;
}

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

  100% {
    background-position: -100% 50%;
  }
}

.cta-content p {
  font-size: var(--text-lg);
  color: var(--color-gray-400);
  margin-bottom: var(--space-8);
}

.cta-buttons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.cta-visual {
  display: flex;
  justify-content: center;
  position: relative;
}

/* Logo Glow Pulse Effect */
.cta-logo {
  max-width: 200px;
  opacity: 0.9;
  filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.3)) drop-shadow(0 0 40px rgba(139, 92, 246, 0.2));
  animation: logoGlowPulse 3s ease-in-out infinite;
  transition: all 0.4s ease;
}

.cta-logo:hover {
  transform: scale(1.05) rotate(2deg);
  filter: drop-shadow(0 0 30px rgba(255, 107, 0, 0.5)) drop-shadow(0 0 60px rgba(139, 92, 246, 0.4));
}

@keyframes logoGlowPulse {

  0%,
  100% {
    filter: drop-shadow(0 0 20px rgba(255, 107, 0, 0.3)) drop-shadow(0 0 40px rgba(139, 92, 246, 0.2));
    transform: scale(1);
  }

  50% {
    filter: drop-shadow(0 0 35px rgba(255, 107, 0, 0.5)) drop-shadow(0 0 60px rgba(139, 92, 246, 0.35));
    transform: scale(1.02);
  }
}

/* ---------- Three Steps CTA Section ---------- */
.steps-wrapper {
  padding: var(--space-8) 0;
}

.text-center {
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-tag {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-orange);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-4);
  border: 1px solid rgba(255, 107, 0, 0.2);
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.steps-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  position: relative;
  margin-bottom: var(--space-16);
}

.step-card {
  flex: 1;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all var(--transition-base);
  background: rgba(20, 20, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px);
}

.step-card:hover {
  transform: translateY(-10px);
  border-color: rgba(255, 107, 0, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(255, 107, 0, 0.1);
}

.step-icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
  border-radius: 50%;
}

.step-number {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  background: var(--gradient-primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.step-icon {
  width: 32px;
  height: 32px;
  color: var(--color-white);
  transition: all var(--transition-base);
}

.step-card:hover .step-icon {
  color: var(--color-orange);
  transform: scale(1.1);
}

.step-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.step-card p {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.6;
}

/* Connectors */
.step-connector {
  flex: 0 0 auto;
  width: 60px;
  height: 2px;
  background: rgba(255, 255, 255, 0.05);
  margin-top: 40px;
  position: relative;
}

.connector-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gradient-primary);
  animation: connectLine 2s forwards;
  animation-play-state: paused;
}

.connector-dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--color-orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px var(--color-orange);
  opacity: 0;
  transition: opacity 0.3s;
}

.step-card:hover+.step-connector .connector-dot {
  opacity: 1;
  animation: moveDot 1.5s infinite linear;
}

.step-card:hover+.step-connector .connector-line {
  animation-play-state: running;
  width: 100%;
  transition: width 0.5s ease;
}

@keyframes moveDot {
  0% {
    left: 0%;
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 1;
  }
}

/* Final CTA */
.final-cta-container {
  text-align: center;
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards 0.5s;
}

.final-cta-text {
  font-size: var(--text-lg);
  color: var(--color-gray-300);
}

.pulse-btn {
  animation: pulseShadow 2s infinite;
}

@keyframes pulseShadow {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.4);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(255, 107, 0, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 0, 0);
  }
}

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

/* Responsive */
@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .step-connector {
    width: 2px;
    height: 40px;
    margin: 0;
  }

  .connector-dot {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .step-card:hover+.step-connector .connector-dot {
    animation: moveDotVertical 1.5s infinite linear;
  }

  @keyframes moveDotVertical {
    0% {
      top: 0%;
      opacity: 1;
    }

    100% {
      top: 100%;
      opacity: 1;
    }
  }
}
}

50% {
  opacity: 1;
  transform: translateX(-50%) scale(1.1);
}
}

/* Typing Animation for Commands */
.terminal-command::after {
  content: '▋';
  animation: cursorBlink 0.8s infinite;
  color: var(--color-orange);
  margin-left: 2px;
}

.terminal-command.typed::after {
  display: none;
}

/* ---------- Tech Stack Marquee (Ghost Stream) ---------- */
/* .tech-stack-section removed - consolidated at bottom of file */

/* .tech-stack-header removed - consolidated at bottom of file */

.tech-tag {
  font-size: 10px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 2px;
  color: var(--color-orange);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-2);
}

.tech-stack-header p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.tech-stack-header strong {
  color: var(--color-gray-300);
}

/* Marquee Container */
.marquee-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Centered horizontally */
  overflow: hidden;
  /* Fade out edges mask */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  display: flex;
  gap: var(--space-12);
  width: max-content;
  /* Infinite Scroll Animation - Moves content LEFT (Right-to-Left flow) */
  animation: scroll 40s linear infinite;
  padding: var(--space-4) 0;
}

/* Pause on Hover */
.marquee-wrapper:hover .marquee-content {
  animation-play-state: paused;
}

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

  100% {
    transform: translateX(0);
  }
}

/* Icons */
.tech-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-gray-600);
  transition: all var(--transition-base);
  opacity: 0.7;
}

.tech-item svg {
  width: 24px;
  height: 24px;
  transition: all var(--transition-base);
}

.tech-item span {
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Hover States - Original Colors */
.tech-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* Brand Colors */
/* Brand Colors - Reveal on Hover */
.tech-item[title="ChatGPT"]:hover {
  color: #10a37f;
}

.tech-item[title="Claude"]:hover {
  color: #d97757;
}

.tech-item[title="Gemini"]:hover {
  color: #4E89E0;
  /* or use a gradient text effect if possible, but color is safer for SVG fill */
}

/* Ensure SVG fills use the currentColor to inherit the hover color */
.tech-item svg {
  fill: currentColor;
}

/* Special Case: Google Drive Multicolor on Hover */
/* We need to hide the monochrome paths and show the multicolor ones, or toggle fill. 
   Since we injected multicolor paths with specific fill attributes, we need to override them by default to be monochrome (currentColor),
   and then unset the override on hover.
*/

.tech-item[title="Google Drive"] svg path {
  fill: currentColor;
  /* Default: Gray/White via parent color */
}

.tech-item[title="Google Drive"]:hover svg path:nth-child(1) {
  fill: #2a71e9;
  /* Blue */
}

.tech-item[title="Google Drive"]:hover svg path:nth-child(2) {
  fill: #fccd48;
  /* Yellow */
}

.tech-item[title="Google Drive"]:hover svg path:nth-child(3) {
  fill: #0ba25e;
  /* Green */
}

.tech-item[title="JavaScript"]:hover {
  color: #f7df1e;
}

.tech-item[title="Notion"]:hover {
  color: #ffffff;
}

.tech-item[title="APIs"]:hover {
  color: var(--color-orange);
}

.tech-item.special:hover {
  color: var(--color-purple-light);
}



/* The "+ More" Badge */
.tech-item.special {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.plus-icon {
  font-size: 16px;
  font-weight: 300;
  color: var(--color-orange);
}


/* ---------- Footer ---------- */
.footer {
  background: var(--color-bg-secondary);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-main {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
}

.footer-brand {
  max-width: 300px;
}

.footer-logo {
  height: 60px;
  margin-bottom: var(--space-4);
}

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.footer-links {
  display: flex;
  gap: var(--space-16);
}

.footer-col h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.footer-col a {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.footer-col a:hover {
  color: var(--color-orange);
}

.footer-bottom {
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
}

/* ---------- Service Learn More Button ---------- */
.service-learn-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-orange);
  text-decoration: none;
  transition: all var(--transition-base);
  position: relative;
}

.service-learn-more::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gradient-primary);
  transition: width var(--transition-base);
}

.service-learn-more:hover {
  color: var(--color-orange-light);
  transform: translateX(4px);
}

.service-learn-more:hover::after {
  width: 100%;
}

/* ---------- Service Detail Sections ---------- */
.service-detail-section {
  position: relative;
  padding: var(--space-24) 0;
  background: var(--color-bg);
  overflow: hidden;
}

.service-detail-section.section-dark {
  background: var(--color-bg-secondary);
}

/* Floating Orb Effects */
.detail-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}

.detail-orb-1 {
  top: 10%;
  left: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-orange) 0%, transparent 70%);
  animation-delay: 0s;
}

.detail-orb-2 {
  bottom: 10%;
  right: -10%;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, var(--color-purple) 0%, transparent 70%);
  animation-delay: -4s;
}

@keyframes orbFloat {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(20px, -20px) scale(1.1);
  }
}

/* Detail Header */
.detail-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-16);
  position: relative;
  z-index: 1;
}

.back-to-services {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  margin-bottom: var(--space-6);
  text-decoration: none;
  transition: all var(--transition-base);
}

.back-to-services:hover {
  color: var(--color-orange);
  transform: translateX(-4px);
}

/* Detail Content Grid */
.detail-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  position: relative;
  z-index: 1;
}

/* Detail Card */
.detail-card {
  padding: var(--space-10);
  transition: all var(--transition-base);
}

.detail-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 107, 0, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.detail-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 107, 0, 0.1);
  border: 1px solid rgba(255, 107, 0, 0.2);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
  transition: all var(--transition-base);
}

.detail-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--color-orange);
}

.detail-card:hover .detail-icon {
  background: rgba(255, 107, 0, 0.15);
  transform: scale(1.05);
}

.detail-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
  color: var(--color-white);
}

.detail-card>p {
  font-size: var(--text-base);
  color: var(--color-gray-400);
  margin-bottom: var(--space-6);
  line-height: 1.7;
}

/* Detail List */
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  color: var(--color-gray-300);
  line-height: 1.6;
}

.list-icon {
  color: var(--color-orange);
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-top: 4px;
}

/* Implementation Steps */
.implementation-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.impl-step {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all var(--transition-base);
}

.impl-step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 107, 0, 0.2);
}

.step-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}

.impl-step strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: var(--space-1);
}

.impl-step p {
  font-size: var(--text-sm);
  color: var(--color-gray-400);
  line-height: 1.5;
  margin: 0;
}

/* Detail CTA */
.detail-cta {
  text-align: center;
  margin-top: var(--space-16);
  position: relative;
  z-index: 1;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pillars-wrapper {
    grid-template-columns: 1fr;
  }

  .cta-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .cta-buttons {
    justify-content: center;
  }

  .detail-content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .hero-split {
    flex-direction: column;
    text-align: center;
  }

  .hero-split .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-visual {
    order: -1;
    margin-bottom: var(--space-8);
    min-height: 300px;
  }

  .robot-image {
    max-height: 350px;
  }

  .hero-cta {
    justify-content: center;
  }

  .dna-bar {
    flex-wrap: wrap;
    gap: var(--space-6);
  }

  .dna-item {
    flex: 0 0 40%;
  }

  .nav {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .footer-main {
    flex-direction: column;
  }

  .detail-card {
    padding: var(--space-6);
  }

  .impl-step {
    flex-direction: column;
    gap: var(--space-2);
  }

  .service-detail-section {
    padding: var(--space-16) 0;
  }

  /* Responsive Hero Layout */
  .centered-hero .hero-content {
    top: 35%;
  }

  .hero-below-title {
    bottom: 15%;
  }
}

/* ---------- Tech Stack Marquee (Ghost Stream) ---------- */
.tech-stack-section {
  position: absolute;
  bottom: 7rem;
  left: 0;
  width: 100%;
  z-index: 10;
  overflow: hidden;
  text-align: center;
  padding: 0 var(--space-4);
  /* Ensure it sits above other elements if needed */
}

/* Clear conflicting rules */
/* .tech-stack-section previously defined at line 1522 and 2181 is now consolidated here */

.tech-stack-header {
  margin-bottom: var(--space-8);
  opacity: 0.8;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.tech-tag {
  font-size: 10px;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 2px;
  color: var(--color-orange);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-2);
}

.tech-stack-header p {
  font-size: var(--text-sm);
  color: var(--color-gray-500);
}

.tech-stack-header strong {
  color: var(--color-gray-300);
}

/* Marquee Container */
.marquee-wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  /* Centered horizontally */
  overflow: hidden;
  /* Fade out edges mask */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Responsive Tech Stack */
@media (max-width: 768px) {
  .tech-stack-section {
    bottom: 6rem;
    padding: 0 var(--space-4);
  }
}

/* Additional Hero Mobile Responsive */
@media (max-width: 480px) {
  .centered-hero .hero-content {
    top: 30%;
    padding: 0 var(--space-4);
  }

  .hero-title {
    font-size: clamp(var(--text-2xl), 6vw, var(--text-4xl));
  }

  .hero-below-title {
    bottom: 18%;
    gap: var(--space-4);
  }
}