@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');

:root {
  /* Color Palette */
  --bg-dark: #06080d;
  --bg-darker: #030406;
  --bg-card: rgba(13, 17, 28, 0.65);
  --bg-card-hover: rgba(22, 28, 45, 0.8);
  
  --primary: #8b5cf6; /* Electric Violet */
  --primary-rgb: 139, 92, 246;
  --primary-glow: rgba(139, 92, 246, 0.15);
  --primary-hover: #a78bfa;
  
  --secondary: #06b6d4; /* Neon Cyan */
  --secondary-rgb: 6, 182, 212;
  --secondary-glow: rgba(6, 182, 212, 0.15);
  --secondary-hover: #22d3ee;
  
  --accent: #ec4899; /* Radiant Pink */
  --accent-rgb: 236, 72, 153;
  --accent-glow: rgba(236, 72, 153, 0.15);
  
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  
  --border-color: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(139, 92, 246, 0.15);
  
  /* Layout & Spacing */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  
  --font-sans: 'Inter', sans-serif;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Base Styles */
body {
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-sans);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darker);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* Dynamic Ambient Glows */
.ambient-glows {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.15;
  mix-blend-mode: screen;
  animation: float-glow 20s infinite alternate ease-in-out;
}

.glow-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--primary) 0%, transparent 80%);
  top: -10%;
  right: -5%;
  animation-duration: 25s;
}

.glow-orb-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--secondary) 0%, transparent 80%);
  bottom: -15%;
  left: -10%;
  animation-duration: 30s;
}

.glow-orb-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 80%);
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.08;
  animation-duration: 22s;
}

@keyframes float-glow {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(60px, 40px) scale(1.15);
  }
}

/* Layout Utilities */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.glass-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -15px rgba(0, 0, 0, 0.5);
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  overflow: hidden; /* clip border spotlights */
}

/* Spotlight border effect using pseudo element */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  padding: 1px; /* border thickness */
  background: radial-gradient(
    300px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(255, 255, 255, 0.12),
    transparent 40%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
  transition: opacity var(--transition-fast);
  opacity: 0;
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card-glow::before {
  background: radial-gradient(
    300px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(var(--primary-rgb), 0.3),
    rgba(var(--secondary-rgb), 0.15) 50%,
    transparent 80%
  );
}

.glass-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.6);
}

/* Glass-card-glow features a glowing primary outline on hover */
.glass-card-glow:hover {
  border-color: rgba(var(--primary-rgb), 0.35);
  box-shadow: 0 0 25px rgba(var(--primary-rgb), 0.1);
  transform: translateY(-2px);
}

/* Header & Navigation Trigger (macOS/iOS Dock Style) */
.header-trigger {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(60% + 76px); /* ~1cm wider on each side */
  max-width: 976px;
  height: 100px; /* Initial small activation zone */
  z-index: 1000;
  background: transparent;
  pointer-events: auto;
  transition: height 0.3s ease;
}

/* When the dock is deployed, the hover zone expands to keep it open */
.header-trigger.expanded {
  height: 160px;
}

header {
  position: fixed;
  top: 0;
  left: 50%;
  width: auto;
  max-width: 95vw;
  z-index: 1001;
  background: rgba(10, 12, 20, 0.45); /* frosted semi-transparent dark */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px; /* Reduced vertical profile */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
  padding: 0 18px;
  
  /* Centered horizontally, translated up with 12px visible indicator bar */
  transform: translate(-50%, calc(-100% + 12px));
  
  /* BASE TRANSITION (for disappearance / slide-up): Slower, smooth cubic-bezier */
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  
  pointer-events: auto;
}

/* Hovering either the trigger or the header itself springs it down */
.header-trigger:hover + header,
header:hover {
  /* Floats 15px below the top of the viewport when active (1.25x scaled) */
  transform: translate(-50%, 15px);
  
  /* ACTIVE TRANSITION (for appearance / slide-down): Faster, springy bounce */
  transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

.nav-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 56px; /* 0.75x of previous 75px dock height */
  gap: 30px;
  width: 100%;
}

.nav-left-group {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-self: start;
  width: 100%;
  height: 100%;
}

.nav-left-group .logo {
  position: static; /* Reset absolute positioning to prevent overlap */
}

.nav-left-group .nav-btn {
  justify-self: center; /* Center the Accueil button exactly between the Logo Dot and the CTA */
  transform: translateX(12px); /* Shunted slightly right (1.25x scaled) to balance spacing between T and CTA */
}

.btn-cta-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  height: 100%;
}

.nav-right-group {
  display: flex;
  align-items: center;
  justify-self: end;
  height: 100%;
}

header .logo {
  font-size: 20px; /* Reduced for slimmer dock */
}

header .logo-dot {
  width: 6px;
  height: 6px;
}

header .nav-links {
  gap: 8px;
}

header .nav-btn {
  font-size: 13px; /* Reduced for slimmer dock */
  padding: 6px 14px;
  border-radius: 12px;
}

header .btn-cta {
  padding: 8px 16px;
  font-size: 13px; /* Reduced for slimmer dock */
  border-radius: 12px;
}

.logo {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  background: linear-gradient(135deg, var(--text-main) 30%, var(--primary) 70%, var(--secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.logo-dot {
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 10px var(--secondary);
}

.nav-links {
  display: flex;
  gap: 8px;
  list-style: none;
}

.nav-item {
  position: relative;
}

.nav-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-btn:hover {
  color: var(--text-main);
}

.nav-btn.active {
  color: var(--primary-hover);
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

/* Call to Action Button */
.btn-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  color: #fff;
  border: none;
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.btn-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.45);
  opacity: 0.95;
}

.btn-cta:active {
  transform: translateY(0);
}

/* Global Content Sections */
main.container {
  padding-top: 100px; /* Higher specificity to override .container padding, ensures clean spacing below fixed header */
  min-height: 100vh;
  position: relative;
}

.app-section {
  display: none;
  animation: fade-in-up var(--transition-normal);
}

.app-section.active {
  display: block;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------- */
/* SECTION 1: LANDING PAGE STYLE                        */
/* ---------------------------------------------------- */

.hero {
  padding: 100px 0 80px 0;
  text-align: center;
  position: relative;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 9999px;
  color: var(--primary-hover);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.05);
}

.hero h1 {
  font-size: 64px;
  line-height: 1.1;
  font-weight: 800;
  margin-bottom: 24px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 span.gradient-text-1 {
  background: linear-gradient(135deg, #a78bfa 10%, #ec4899 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero h1 span.gradient-text-2 {
  background: linear-gradient(135deg, var(--secondary) 10%, #3b82f6 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subtitle {
  font-size: 20px;
  color: var(--text-muted);
  max-width: 650px;
  margin: 0 auto 40px auto;
  font-weight: 300;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-main);
  border: 1px solid var(--border-color);
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-hover);
  transform: translateY(-2px);
}

/* Features grid */
.features-section {
  padding: 80px 0;
  border-top: 1px solid var(--border-color);
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-header h2 {
  font-size: 38px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, var(--text-main) 50%, var(--text-dim) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}

.feature-card {
  padding: 40px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.feature-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.feature-icon-wrapper.purple {
  background: rgba(139, 92, 246, 0.1);
  color: var(--primary);
  border: 1px solid rgba(139, 92, 246, 0.2);
}

.feature-icon-wrapper.cyan {
  background: rgba(6, 182, 212, 0.1);
  color: var(--secondary);
  border: 1px solid rgba(6, 182, 212, 0.2);
}

.feature-card h3 {
  font-size: 22px;
  margin-bottom: 16px;
}

.feature-card p {
  color: var(--text-muted);
  margin-bottom: 24px;
  flex-grow: 1;
}

.feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-muted);
}

.feature-list li i {
  color: var(--secondary);
  font-size: 14px;
}

/* Portfolio / Showcases */
.portfolio-section {
  padding: 80px 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 182, 212, 0.02) 50%, transparent 100%);
  border-top: 1px solid var(--border-color);
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 32px;
}

.portfolio-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.portfolio-preview {
  height: 200px;
  background: linear-gradient(135deg, rgba(22, 28, 45, 0.4) 0%, rgba(13, 17, 28, 0.9) 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
}

.portfolio-glow-overlay {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.15;
}

.portfolio-card:nth-child(1) .portfolio-glow-overlay {
  background: var(--primary);
  top: 10%;
  left: 10%;
}

.portfolio-card:nth-child(2) .portfolio-glow-overlay {
  background: var(--secondary);
  bottom: 10%;
  right: 10%;
}

.portfolio-card:nth-child(3) .portfolio-glow-overlay {
  background: var(--accent);
  top: 40%;
  left: 40%;
}

.portfolio-graphic {
  position: relative;
  z-index: 2;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
}

.portfolio-graphic i {
  font-size: 40px;
  background: linear-gradient(135deg, var(--text-main) 30%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.portfolio-graphic-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.portfolio-content {
  padding: 30px;
}

.portfolio-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.portfolio-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--text-muted);
}

.portfolio-content h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.portfolio-content p {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 20px;
}

.portfolio-link {
  color: var(--secondary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition-fast);
}

.portfolio-link:hover {
  gap: 10px;
  color: var(--secondary-hover);
}

/* ---------------------------------------------------- */
/* SECTION 2: ESTIMATOR STYLE                           */
/* ---------------------------------------------------- */

.estimator-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  padding: 40px 0 80px 0;
  align-items: start;
}

@media (max-width: 992px) {
  .estimator-layout {
    grid-template-columns: 1fr;
  }
}

/* Wizard steps */
.estimator-wizard {
  padding: 40px;
}

.wizard-progress {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  position: relative;
}

.wizard-progress::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 1;
}

.progress-line-active {
  position: absolute;
  top: 15px;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  z-index: 2;
  width: 0%;
  transition: width var(--transition-normal);
}

.progress-step-node {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-darker);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  z-index: 3;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.progress-step-node.active {
  border-color: var(--primary);
  color: var(--text-main);
  background: var(--bg-dark);
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
}

.progress-step-node.completed {
  border-color: var(--secondary);
  background: var(--secondary);
  color: var(--bg-darker);
}

/* Step content */
.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
  animation: fade-in-up var(--transition-normal);
}

.wizard-step h3 {
  font-size: 24px;
  margin-bottom: 8px;
}

.wizard-step-desc {
  color: var(--text-muted);
  font-size: 15px;
  margin-bottom: 30px;
}

/* Selection Cards Grid */
.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.selection-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.selection-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.selection-card.selected {
  border-color: var(--secondary);
  background: rgba(6, 182, 212, 0.05);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.05);
}

.selection-card i {
  font-size: 28px;
  color: var(--text-muted);
  margin-bottom: 16px;
  transition: color var(--transition-fast);
}

.selection-card.selected i {
  color: var(--secondary);
}

.selection-card h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.selection-card p {
  font-size: 12px;
  color: var(--text-dim);
}

/* Checkbox & Switch lists */
.checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 40px;
}

.checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.checkbox-item:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
}

.checkbox-item.checked {
  border-color: var(--primary);
  background: rgba(139, 92, 246, 0.05);
}

.checkbox-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.checkbox-info i {
  font-size: 20px;
  color: var(--text-dim);
}

.checkbox-item.checked .checkbox-info i {
  color: var(--primary-hover);
}

.checkbox-details h4 {
  font-size: 16px;
  margin-bottom: 4px;
}

.checkbox-details p {
  font-size: 13px;
  color: var(--text-muted);
}

.checkbox-indicator {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: transparent;
  font-size: 12px;
}

.checkbox-item.checked .checkbox-indicator {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}

/* Step navigation buttons */
.step-navigation {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 24px;
}

/* Live Quote Card */
.quote-summary-card {
  padding: 32px;
  position: sticky;
  top: 110px;
}

.quote-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.quote-label {
  color: var(--text-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.quote-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.quote-price {
  font-size: 40px;
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--secondary);
  text-shadow: 0 0 20px rgba(6, 182, 212, 0.15);
}

.quote-price-sub {
  color: var(--text-muted);
  font-size: 14px;
}

.quote-metric-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 15px;
}

.quote-metric-row .label {
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-metric-row .value {
  font-weight: 600;
}

.quote-divider {
  height: 1px;
  background: var(--border-color);
  margin: 24px 0;
}

.quote-spec-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-main);
}

.quote-specs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}

.quote-specs-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.quote-specs-list li span:last-child {
  color: var(--text-main);
  font-weight: 500;
}

/* Contact/Submission in Estimator */
.estimator-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.form-control {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: all var(--transition-fast);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.1);
}

/* Success State in Estimator */
.estimator-success {
  text-align: center;
  padding: 40px 0;
}

.success-icon-wrap {
  width: 80px;
  height: 80px;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-size: 36px;
  margin: 0 auto 24px auto;
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  animation: success-pulse 2s infinite ease-in-out;
}

@keyframes success-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(6, 182, 212, 0.35);
  }
}

/* Range slider styling */
.slider-group {
  margin-bottom: 30px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 500;
}

.slider-val {
  color: var(--secondary);
  font-weight: 600;
}

.range-slider {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--secondary);
  cursor: pointer;
  transition: transform 0.1s;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
}

.range-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

/* ---------------------------------------------------- */
/* SECTION 3: DASHBOARD STYLE                           */
/* ---------------------------------------------------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 40px 0 80px 0;
  align-items: start;
}

@media (max-width: 992px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Dashboard Navigation Panel */
.dashboard-nav {
  padding: 24px;
}

.project-selector {
  margin-bottom: 30px;
}

.project-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.project-badge-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981; /* Healthy green for running status */
  box-shadow: 0 0 8px #10b981;
}

.project-name {
  font-weight: 600;
  font-size: 14px;
}

.project-type {
  font-size: 11px;
  color: var(--text-muted);
}

.dash-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dash-menu-btn {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.dash-menu-btn:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.03);
}

.dash-menu-btn.active {
  color: var(--secondary);
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.15);
}

/* Dashboard Main Workspace */
.dashboard-workspace {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Header summary metrics row */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.metric-card {
  padding: 24px;
  position: relative;
}

.metric-card i {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--text-dim);
  font-size: 20px;
}

.metric-title {
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.metric-val {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-heading);
}

.metric-trend {
  font-size: 12px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-trend.up { color: #10b981; }
.metric-trend.down { color: #ef4444; }

/* Sub-sections within workspace (switched by dash-menu-btn) */
.dash-panel {
  display: none;
}

.dash-panel.active {
  display: flex;
  flex-direction: column;
  gap: 30px;
  animation: fade-in-up var(--transition-normal);
}

/* Progress Panel */
.progress-card {
  padding: 30px;
}

.progress-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.progress-percentage {
  font-size: 24px;
  font-weight: 700;
  color: var(--secondary);
}

.progress-bar-container {
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 30px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
  width: 68%;
  border-radius: 5px;
  position: relative;
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.3);
}

.timeline-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 24px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 5px;
  width: 2px;
  background: rgba(255, 255, 255, 0.06);
}

.timeline-item {
  position: relative;
  margin-bottom: 24px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: -24px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg-dark);
  border: 2px solid var(--border-color);
  transition: all var(--transition-fast);
}

.timeline-item.completed .timeline-dot {
  background: var(--secondary);
  border-color: var(--secondary);
  box-shadow: 0 0 10px var(--secondary);
}

.timeline-item.active .timeline-dot {
  background: var(--bg-dark);
  border-color: var(--primary);
  box-shadow: 0 0 10px var(--primary);
}

.timeline-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.timeline-text h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.timeline-item.completed .timeline-text h4 {
  color: var(--text-main);
}

.timeline-item.pending .timeline-text h4 {
  color: var(--text-dim);
}

.timeline-text p {
  font-size: 13px;
  color: var(--text-muted);
}

.timeline-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.timeline-badge.completed {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.timeline-badge.active {
  background: rgba(139, 92, 246, 0.1);
  color: var(--primary-hover);
}

.timeline-badge.pending {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
}

/* Live Terminal Widget */
.terminal-card {
  background: #020305;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
}

.terminal-header {
  background: #090d16;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
}

.terminal-buttons {
  display: flex;
  gap: 8px;
}

.terminal-dot-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.terminal-dot-btn.red { background: #ef4444; }
.terminal-dot-btn.yellow { background: #f59e0b; }
.terminal-dot-btn.green { background: #10b981; }

.terminal-title {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 500;
}

.terminal-body {
  padding: 20px;
  height: 220px;
  overflow-y: auto;
  font-size: 13px;
  color: #a7f3d0; /* Terminal Green font */
  line-height: 1.5;
}

.terminal-line {
  margin-bottom: 8px;
  opacity: 0.95;
}

.terminal-line .accent-log {
  color: var(--secondary);
}

.terminal-line .time-log {
  color: var(--text-dim);
}

/* Live Messaging Chat */
.chat-container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 480px;
}

.chat-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.2);
  border: 1px solid rgba(139, 92, 246, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-weight: 600;
}

.chat-status-text {
  font-size: 13px;
  color: var(--text-muted);
}

.chat-messages {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-bubble {
  max-width: 70%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  position: relative;
  line-height: 1.5;
}

.chat-bubble.inbound {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble.outbound {
  background: var(--primary);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
}

.chat-bubble-time {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 6px;
  text-align: right;
}

.chat-bubble.outbound .chat-bubble-time {
  color: rgba(255, 255, 255, 0.6);
}

.chat-typing-indicator {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  padding: 10px 16px;
  border-radius: 12px;
  display: none;
  align-items: center;
  gap: 4px;
}

.chat-typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--text-muted);
  border-radius: 50%;
  display: inline-block;
  animation: typing-bounce 1.4s infinite ease-in-out both;
}

.chat-typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.chat-typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.chat-input-area {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 12px;
}

.chat-input {
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: 14px;
}

.chat-input:focus {
  outline: none;
  border-color: var(--secondary);
}

.chat-send-btn {
  background: var(--secondary);
  color: var(--bg-darker);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all var(--transition-fast);
}

.chat-send-btn:hover {
  background: var(--secondary-hover);
  transform: scale(1.05);
}

/* Repository & Code Commit Feed */
.repo-commit-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.commit-card {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.commit-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.commit-icon {
  width: 36px;
  height: 36px;
  background: rgba(6, 182, 212, 0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
}

.commit-info h5 {
  font-size: 14px;
  margin-bottom: 2px;
  font-weight: 600;
}

.commit-info p {
  font-size: 12px;
  color: var(--text-muted);
}

.commit-sha {
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-dim);
}

/* Footer Section */
footer {
  border-top: 1px solid var(--border-color);
  padding: 40px 0;
  text-align: center;
  background: var(--bg-darker);
}

.footer-logo {
  margin-bottom: 16px;
  justify-content: center;
}

.footer-text {
  font-size: 13px;
  color: var(--text-dim);
}

/* ---------------------------------------------------- */
/* PREMIUM DESIGN SYSTEMS UPGRADES (Reel inspired)     */
/* ---------------------------------------------------- */

/* Infinite Text Marquee Banner */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  padding: 24px 0;
  margin: 60px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  background: rgba(13, 17, 28, 0.2);
  display: flex;
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: 60px;
  animation: marquee-scroll 30s linear infinite;
  padding-left: 60px;
}

.marquee-content span {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--text-dim) 0%, rgba(255, 255, 255, 0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background var(--transition-fast), filter var(--transition-fast);
  cursor: pointer;
}

.marquee-content span:hover {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.3));
}

.marquee-dot {
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--secondary);
  flex-shrink: 0;
}

@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Custom Interactive Follower Cursor */
#custom-cursor {
  width: 8px;
  height: 8px;
  background: var(--secondary);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--secondary);
  mix-blend-mode: screen;
  display: none; /* enabled dynamically on mousemove */
}

#cursor-blur-glow {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(var(--secondary-rgb), 0.3);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  display: none; /* enabled dynamically on mousemove */
}

body.custom-cursor-enabled #custom-cursor,
body.custom-cursor-enabled #cursor-blur-glow {
  display: block;
}

/* Cursor Hover Class states */
body.cursor-hover #custom-cursor {
  width: 4px;
  height: 4px;
  background-color: var(--primary);
  box-shadow: 0 0 8px var(--primary);
}

body.cursor-hover #cursor-blur-glow {
  width: 60px;
  height: 60px;
  border-color: rgba(var(--primary-rgb), 0.5);
  background-color: rgba(var(--primary-rgb), 0.05);
  box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15);
}

/* Hide default cursor on desktop devices with pointer capabilities *only* when custom cursor class is active */
body.custom-cursor-enabled,
body.custom-cursor-enabled button,
body.custom-cursor-enabled a,
body.custom-cursor-enabled select,
body.custom-cursor-enabled input,
body.custom-cursor-enabled textarea,
body.custom-cursor-enabled .selection-card,
body.custom-cursor-enabled .checkbox-item,
body.custom-cursor-enabled .dash-menu-btn,
body.custom-cursor-enabled .logo {
  cursor: none !important;
}

/* ---------------------------------------------------- */
/* 3D SCROLL ORBIT & JARVIS HOLO-SPHERE SYSTEM          */
/* ---------------------------------------------------- */

#scrollytelling-world {
  position: relative;
  width: 100%;
  height: 500vh; /* increased to 500vh to slow down transitions even further, making them extremely smooth */
}

#scrollytelling-viewport {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  perspective: 1400px;
  transform-style: preserve-3d;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#scrollytelling-scene {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: calc(100% - 80px);
  transform-style: preserve-3d;
  will-change: transform;
  pointer-events: none;
  z-index: 1; /* Enforce stacking context below the logo (z-index 15) */
  /* No CSS transition — JS updates transform every frame via scroll for zero-lag tracking */
}

.scene-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  transform-style: preserve-3d;
  opacity: 0; /* Managed dynamically by JS */
  pointer-events: none;
  z-index: 2; /* Sits in front of the background logo */
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0 24px;
}

.scene-block.active {
  opacity: 1;
  pointer-events: auto;
}

/* Precise initial 3D positions of the blocks (Spiral staircase orbit, Radius = 520px, Step height = 160px) */
#block-hero {
  transform: translate3d(0, 0, 520px);
}

#block-features {
  transform: translate3d(520px, 160px, 0) rotateY(90deg); /* positioned 160px lower for spiral scroll Y-descent */
}

#block-portfolio {
  transform: translate3d(0, 320px, -520px) rotateY(180deg); /* positioned 320px lower for spiral scroll Y-descent */
}

/* When at the very top of the page (logo intro screen), hide and push down all content blocks */
body.scroll-at-top .scene-block {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.scroll-at-top #block-hero {
  transform: translate3d(0, 100px, 520px) !important;
}

body.scroll-at-top #block-features {
  transform: translate3d(520px, 260px, 0) rotateY(90deg) !important;
}

body.scroll-at-top #block-portfolio {
  transform: translate3d(0, 420px, -520px) rotateY(180deg) !important;
}

/* Specific overrides for marquee inside 3D scrollytelling block to prevent zoom & spacing issues */
.scene-block .marquee-container {
  margin: 15px 0;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.01);
  border-top: 1px solid rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.scene-block .marquee-content span {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* Container alignments inside 3D blocks (Desktop only) */
@media (min-width: 992px) {
  /* Hero shifted in diagonal (up and right) to clear the Jarvis core */
  #block-hero .hero {
    display: flex;
    justify-content: flex-start;
    padding-left: 190px; /* Shifted right by ~3cm */
  }
  #block-hero .hero-content {
    text-align: left;
    max-width: 480px;
    margin: 0;
    transform: translateY(-90px); /* Shifted up by ~2.5cm */
  }
  
  /* Features grid with a compact 40px gap (~1cm) between cards */
  #block-features .features-section {
    max-width: 860px !important;
    margin: 0 auto;
  }
  #block-features .features-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important; /* ~1cm gap for a tight, cohesive layout */
    width: 100%;
  }
  
  /* Portfolio centered in the middle of the screen and compact */
  #block-portfolio .portfolio-section {
    max-width: 860px !important; /* Centered max-width to match features */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #block-portfolio .portfolio-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 columns side-by-side */
    gap: 16px;
    width: 100%;
    margin-top: 15px;
  }
}

/* Jarvis Core Fixed Container */
#jarvis-fixed-container {
  position: fixed;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
  perspective: 1000px;
  transform-style: preserve-3d;
}

@media (max-width: 991px) {
  #jarvis-fixed-container {
    display: none !important;
  }
}

.jarvis-sphere {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: jarvis-spin-sphere 20s linear infinite;
  will-change: transform;
}

.jarvis-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15),
              inset 0 0 15px rgba(6, 182, 212, 0.15);
  transform-style: preserve-3d;
}

/* Different angles for energy rings */
.jarvis-ring.r-x { transform: rotateX(90deg); }
.jarvis-ring.r-y { transform: rotateY(90deg); }
.jarvis-ring.r-z { transform: rotateZ(90deg); }

.jarvis-ring.r-diag1 { 
  transform: rotateX(45deg) rotateY(45deg); 
  border-color: rgba(139, 92, 246, 0.4); /* Violet ring */
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.15),
              inset 0 0 15px rgba(139, 92, 246, 0.15);
}
.jarvis-ring.r-diag2 { 
  transform: rotateX(-45deg) rotateY(45deg); 
  border-color: rgba(236, 72, 153, 0.35); /* Pink ring */
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.15),
              inset 0 0 15px rgba(236, 72, 153, 0.15);
}

.jarvis-ring.r-glow {
  border: 2px dashed rgba(6, 182, 212, 0.6);
  animation: jarvis-pulse-ring 5s ease-in-out infinite alternate;
}

.jarvis-core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, var(--secondary) 0%, rgba(139, 92, 246, 0.8) 50%, transparent 100%);
  border-radius: 50%;
  filter: blur(4px);
  box-shadow: 0 0 35px rgba(6, 182, 212, 0.8),
              0 0 70px rgba(139, 92, 246, 0.4);
  animation: jarvis-pulse-core 2s ease-in-out infinite alternate;
}

/* HUD elements outside the sphere */
.jarvis-hud-ring {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 1px solid rgba(6, 182, 212, 0.15);
  border-radius: 50%;
  animation: jarvis-spin-hud-cw 35s linear infinite;
}

.jarvis-hud-dashed {
  position: absolute;
  width: 290px;
  height: 290px;
  border: 1px dashed rgba(139, 92, 246, 0.2);
  border-radius: 50%;
  animation: jarvis-spin-hud-ccw 25s linear infinite;
}

/* Animations */
@keyframes jarvis-spin-sphere {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes jarvis-spin-hud-cw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes jarvis-spin-hud-ccw {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes jarvis-pulse-core {
  0% { transform: translate(-50%, -50%) scale(0.85); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes jarvis-pulse-ring {
  0% { transform: scale(0.95) rotate(0deg); }
  100% { transform: scale(1.05) rotate(180deg); }
}

/* Adjustments for children layout inside scene blocks */
.scene-block .hero,
.scene-block .features-section,
.scene-block .portfolio-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  will-change: transform, opacity;
}

.scene-block .features-section {
  padding: 0;
  border-top: none;
}
.scene-block .portfolio-section {
  padding: 0;
  background: none;
  border-top: none;
}

/* Hide global footer on landing page */
body.section-home footer {
  display: none;
}

/* Portfolio integrated footer styles */
.portfolio-footer {
  margin-top: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 11px;
  width: 100%;
}

/* Compact sizing overrides inside the 3D viewport to fit 100% standard screen zoom */
#scrollytelling-viewport {
  font-size: 11px; /* Projects to ~17px body copy on standard screen zoom (highly readable) */
}

#scrollytelling-viewport .hero h1 {
  font-size: 26px !important; /* 26px * 1.6 = ~42px projected (ultra-sleek header size) */
  line-height: 1.15;
  margin-bottom: 8px;
  max-width: 480px;
}

#scrollytelling-viewport .hero-subtitle {
  font-size: 12px;
  max-width: 400px;
  margin-bottom: 12px;
  line-height: 1.4;
}

#scrollytelling-viewport .section-header {
  margin-bottom: 10px;
}

#scrollytelling-viewport .section-header h2 {
  font-size: 20px;
  margin-bottom: 4px;
}

#scrollytelling-viewport .section-header p {
  font-size: 11px;
  max-width: 400px;
}

/* Feature cards compact overrides */
#scrollytelling-viewport .features-section {
  max-width: 860px !important;
}
#scrollytelling-viewport .feature-card {
  padding: 16px 20px;
}
#scrollytelling-viewport .feature-card h3 {
  font-size: 14px;
  margin-bottom: 4px;
}
#scrollytelling-viewport .feature-icon-wrapper {
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: 6px;
}
#scrollytelling-viewport .feature-icon-wrapper i {
  width: 14px;
  height: 14px;
}
#scrollytelling-viewport .feature-list {
  gap: 3px;
}
#scrollytelling-viewport .feature-list li {
  font-size: 10px;
}

/* Portfolio cards compact overrides */
#scrollytelling-viewport .portfolio-card {
  padding: 0;
  max-width: 100%;
}
#scrollytelling-viewport .portfolio-preview {
  height: 80px;
}
#scrollytelling-viewport .portfolio-preview i {
  width: 20px;
  height: 20px;
}
#scrollytelling-viewport .portfolio-content {
  padding: 12px;
}
#scrollytelling-viewport .portfolio-content h3 {
  font-size: 13px;
  margin-bottom: 4px;
}
#scrollytelling-viewport .portfolio-content p {
  font-size: 10px;
  line-height: 1.35;
  margin-bottom: 6px;
}
#scrollytelling-viewport .portfolio-tags {
  margin-bottom: 4px;
}
#scrollytelling-viewport .portfolio-tag {
  font-size: 8px;
  padding: 1px 3px;
  border-radius: 3px;
}
#scrollytelling-viewport .portfolio-link {
  font-size: 10px;
}

/* ========================================== */
/* Ambient 3D Logo & Vertical Energy Beam    */
/* ========================================== */

#logo-intro-ambient {
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  will-change: opacity;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1; /* Behind scene blocks so they pass in front */
}

.logo-3d-wrapper {
  position: relative;
  width: 1400px;
  height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Layered 3D text extrusion */
.logo-3d {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 160px; /* Even more colossal cinematic logo */
  letter-spacing: 0.18em;
  transform-style: preserve-3d;
  animation: logoFloat 4s ease-in-out infinite;
  text-align: center;
}

.logo-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(var(--z));
  color: #ffffff;
  /* Ultra-luminous cinematic neon energy core */
  text-shadow: 
    0 0 25px rgba(139, 92, 246, 0.98), 
    0 0 50px rgba(139, 92, 246, 0.9), 
    0 0 100px rgba(6, 182, 212, 0.98), 
    0 0 160px rgba(6, 182, 212, 0.7);
  backface-visibility: hidden;
}

/* Back layers simulate deep metallic extrusion */
.logo-layer:not(:first-child) {
  color: rgba(6, 182, 212, 0.8);
  text-shadow: none;
}

/* Spinning holographic energy rings surrounding the logo */
.logo-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.logo-ring.ring-1 {
  width: 1360px;
  height: 550px; /* Less oval, taller ratio */
  border: 2px solid rgba(6, 182, 212, 0.5);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.3), inset 0 0 25px rgba(6, 182, 212, 0.3);
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(15deg); /* Slightly softer tilt */
  animation: logoRingSpin1 12s linear infinite;
}

.logo-ring.ring-2 {
  width: 1320px;
  height: 500px; /* Less oval, taller ratio */
  border: 1.5px solid rgba(139, 92, 246, 0.6);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4), inset 0 0 20px rgba(139, 92, 246, 0.4);
  transform: translate(-50%, -50%) rotateX(-60deg) rotateY(-20deg); /* Slightly softer tilt */
  animation: logoRingSpin2 10s linear infinite;
}

.logo-ring.ring-3 {
  width: 1400px;
  height: 600px; /* Less oval, taller ratio */
  border: 1px dashed rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(0deg); /* Synced tilt angle */
  animation: logoRingSpin1 18s linear infinite reverse;
}

.logo-ring.ring-4 {
  width: 1260px;
  height: 520px; /* Elliptical geometry to make Z-rotation visible */
  border: 1.2px solid rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
  transform: translate(-50%, -50%) rotateX(-60deg) rotateY(30deg);
  animation: logoRingSpin4 13s linear infinite;
}

.logo-ring.ring-5 {
  width: 1440px;
  height: 620px; /* Elliptical geometry to make Z-rotation visible */
  border: 1.2px dashed rgba(6, 182, 212, 0.65);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
  transform: translate(-50%, -50%) rotateX(70deg) rotateY(-30deg);
  animation: logoRingSpin5 16s linear infinite reverse;
}

/* Swirling electric energy filaments wrapping the logo letters */
.logo-filament {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  transform-style: preserve-3d;
}

/* Clockwise spinning filaments – bright white core with cyan glow */
.filament-1, .filament-3, .filament-5 {
  border-left: 2.5px solid rgba(255, 255, 255, 0.95);
  border-right: none;
  filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.95)) drop-shadow(0 0 20px rgba(139, 92, 246, 0.7));
}

/* Counter‑clockwise spinning filaments – bright white core with purple glow */
.filament-2, .filament-4, .filament-6 {
  border-right: 2px solid rgba(255, 255, 255, 0.95);
  border-left: none;
  filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.95)) drop-shadow(0 0 15px rgba(6, 182, 212, 0.7));
}

/* Individual filament sizes, rotations and animation speeds */
.filament-1 { width: 60px; transform: translate(-50%, 0) rotateY(0deg); animation: vortexRotateCW 6s linear infinite; }
.filament-2 { width: 80px; transform: translate(-50%, 0) rotateY(60deg); animation: vortexRotateCCW 5s linear infinite; }
.filament-3 { width: 70px; transform: translate(-50%, 0) rotateY(120deg); animation: vortexRotateCW 8s linear infinite; }
.filament-4 { width: 90px; transform: translate(-50%, 0) rotateY(180deg); animation: vortexRotateCCW 7s linear infinite; }
.filament-5 { width: 50px; transform: translate(-50%, 0) rotateY(240deg); animation: vortexRotateCW 4.5s linear infinite; }
.filament-6 { width: 75px; transform: translate(-50%, 0) rotateY(300deg); animation: vortexRotateCCW 6.5s linear infinite; }

/* Glowing sparks floating around the logo */
.logo-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.9));
  pointer-events: none;
  opacity: 0;
}

.spark-1 { left: 45%; animation: sparkRise1 3s linear infinite; }
.spark-2 { left: 52%; animation: sparkRise2 2.5s linear infinite; }
.spark-3 { left: 48%; animation: sparkRise3 3.5s linear infinite; }
.spark-4 { left: 55%; animation: sparkRise4 2.8s linear infinite; }
.spark-5 { left: 42%; animation: sparkRise5 3.2s linear infinite; }

/* Animations */
@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0px) rotateY(0deg) rotateX(0deg);
  }
  50% {
    transform: translateY(-6px) rotateY(2deg) rotateX(1deg);
  }
}

@keyframes logoRingSpin1 {
  0% {
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg);
  }
}

@keyframes logoRingSpin2 {
  0% {
    transform: translate(-50%, -50%) rotateX(-60deg) rotateZ(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-60deg) rotateZ(0deg);
  }
}

@keyframes logoRingSpin4 {
  0% {
    transform: translate(-50%, -50%) rotateX(-60deg) rotateY(30deg) rotateZ(360deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(-60deg) rotateY(30deg) rotateZ(0deg);
  }
}

@keyframes logoRingSpin5 {
  0% {
    transform: translate(-50%, -50%) rotateX(70deg) rotateY(-30deg) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateX(70deg) rotateY(-30deg) rotateZ(360deg);
  }
}

@keyframes vortexRotateCW {
  0% {
    transform: translate(-50%, 0) rotateY(0deg) scaleX(1);
  }
  50% {
    transform: translate(-50%, 0) rotateY(180deg) scaleX(0.8) skewY(5deg);
  }
  100% {
    transform: translate(-50%, 0) rotateY(360deg) scaleX(1);
  }
}

@keyframes vortexRotateCCW {
  0% {
    transform: translate(-50%, 0) rotateY(360deg) scaleX(0.8);
  }
  50% {
    transform: translate(-50%, 0) rotateY(180deg) scaleX(1) skewY(-5deg);
  }
  100% {
    transform: translate(-50%, 0) rotateY(0deg) scaleX(0.8);
  }
}

@keyframes sparkRise1 {
  0% { transform: translateY(220px) scale(0); opacity: 0; }
  30% { opacity: 1; transform: translateY(150px) translateX(-15px) scale(1.5); }
  70% { opacity: 1; transform: translateY(80px) translateX(10px) scale(1.2); }
  100% { transform: translateY(0px) translateX(-5px) scale(0.2); opacity: 0; }
}

@keyframes sparkRise2 {
  0% { transform: translateY(220px) scale(0); opacity: 0; }
  30% { opacity: 1; transform: translateY(160px) translateX(12px) scale(1.3); }
  70% { opacity: 1; transform: translateY(90px) translateX(-10px) scale(1.1); }
  100% { transform: translateY(0px) translateX(8px) scale(0.2); opacity: 0; }
}

@keyframes sparkRise3 {
  0% { transform: translateY(220px) scale(0); opacity: 0; }
  30% { opacity: 1; transform: translateY(140px) translateX(-10px) scale(1.4); }
  70% { opacity: 1; transform: translateY(70px) translateX(15px) scale(1.2); }
  100% { transform: translateY(0px) translateX(-8px) scale(0.2); opacity: 0; }
}

@keyframes sparkRise4 {
  0% { transform: translateY(220px) scale(0); opacity: 0; }
  30% { opacity: 1; transform: translateY(170px) translateX(8px) scale(1.2); }
  70% { opacity: 1; transform: translateY(100px) translateX(-12px) scale(1.0); }
  100% { transform: translateY(0px) translateX(4px) scale(0.2); opacity: 0; }
}

@keyframes sparkRise5 {
  0% { transform: translateY(220px) scale(0); opacity: 0; }
  30% { opacity: 1; transform: translateY(150px) translateX(-8px) scale(1.4); }
  70% { opacity: 1; transform: translateY(80px) translateX(12px) scale(1.1); }
  100% { transform: translateY(0px) translateX(-4px) scale(0.2); opacity: 0; }
}