:root {
  /* Global Design System Variables */
  /* Colors */
  --color-red: #D72638;
  --color-navy: #1B2D48;
  --color-white: #F4F1ED;
  --color-cyan: #00F5FF;

  /* Typography */
  --font-primary: sans-serif;

  /* Spacing Scale */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 30px;
  --spacing-xl: 40px;
  --spacing-xxl: 80px;

  /* Border Radius Scale */
  --radius-sm: 5px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 50px;
}

/* Universal Reset for consistent cross-browser sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-primary);
}

/* Fluid base font-size: scales rem values smoothly from mobile to large desktop */
html {
  font-size: clamp(16px, 0.85rem + 0.4vw, 19px);
}

/* =========================================
   GLOBAL & LAYOUT 
========================================= */
/* Main body structure to push footer to the bottom */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  background-color: var(--color-navy);
}

/* Scroll-lock utility classes used when modals are active */
body.locked, html.locked {
  overflow: hidden;
  touch-action: none;
}

/* Pause heavy background animations when a full-screen modal is active to save GPU/CPU */
body.locked .background-engine, 
body.locked .stars-layer {
  animation-play-state: paused;
}

/* Hide background elements when a full-screen modal is active */
body.locked .site-footer, 
body.locked .back-to-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Accessibility helper: hides elements visually but keeps them readable by screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Step-based visibility control for the onboarding flow */
body .hidden-step,
#decision-overlay .hidden-step { 
    display: none; 
}

/* Text color utilities */
.text-red { color: var(--color-red); }
.text-navy { color: var(--color-navy); }
.text-white { color: var(--color-white); }

/* Global reset for focus outlines on interactive chat/menu elements */
:is(.chat-pill, .chat-input, .chat-send-btn, .chat-menu-btn):is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* Interactive hover effect for selectable chat options */
.chat-pill:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 245, 255, 0.3);
}

/* =========================================
   ATMOSPHERE (Background & Stars)
========================================= */
/* Fixed, hardware-accelerated animated gradient background */
.background-engine {
  position: fixed; 
  inset: 0;
  width: 100%; height: 150vh;
  z-index: -2;
  background: linear-gradient(45deg, var(--color-navy), var(--color-navy), var(--color-red), var(--color-cyan));
  background-size: 400% 400%;
  animation: gradientCarousel 90s ease-in-out infinite;
  will-change: background-position;
}

/* Shifts the background gradient position to create a moving color effect */
@keyframes gradientCarousel {
  0%, 40%, 70%, 100% { background-position: 0% 50%; }   
  50% { background-position: 50% 50%; } 
  60% { background-position: 100% 50%; }
}

/* Containers for the multi-depth parallax star effect */
.parallax-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  will-change: transform;
}

/* Base layer for stars, set up for continuous upward drift */
.stars-layer {
  position: absolute;
  inset: 0;
  background: transparent;
  will-change: transform;
}

/* Box-shadow trick: Generates hundreds of stars from a single div */
.small {
  width: 1px; height: 1px;
  box-shadow: 15vw 20vh #FFF, 35vw 45vh #FFF, 80vw 10vh #FFF, 12vw 88vh #FFF, 55vw 30vh #FFF, 15vw 120vh #FFF, 35vw 145vh #FFF, 80vw 110vh #FFF, 12vw 188vh #FFF, 55vw 130vh #FFF, 25vw 60vh #FFF, 45vw 80vh #FFF, 65vw 15vh #FFF, 85vw 65vh #FFF, 5vw 140vh #FFF, 90vw 180vh #FFF, 75vw 160vh #FFF, 22vw 195vh #FFF, 40vw 105vh #FFF, 60vw 170vh #FFF, 95vw 40vh #FFF, 10vw 50vh #FFF, 70vw 90vh #FFF, 30vw 10vh #FFF, 50vw 150vh #FFF;
  animation: driftStars 150s linear infinite;
}

.medium {
  width: 2px; height: 2px; opacity: 0.7;
  box-shadow: 10vw 10vh #FFF, 50vw 20vh #FFF, 30vw 90vh #FFF, 70vw 40vh #FFF, 20vw 60vh #FFF, 10vw 110vh #FFF, 50vw 120vh #FFF, 30vw 190vh #FFF, 70vw 140vh #FFF, 20vw 160vh #FFF, 15vw 45vh #FFF, 85vw 35vh #FFF, 45vw 100vh #FFF, 60vw 15vh #FFF, 5vw 130vh #FFF, 95vw 175vh #FFF, 40vw 185vh #FFF, 75vw 80vh #FFF, 25vw 145vh #FFF, 80vw 195vh #FFF;
  animation: driftStars 100s linear infinite;
}

.large {
  width: 3px; height: 3px; opacity: 0.5;
  box-shadow: 5vw 80vh #FFF, 95vw 20vh #FFF, 40vw 40vh #FFF, 65vw 75vh #FFF, 5vw 180vh #FFF, 95vw 120vh #FFF, 40vw 140vh #FFF, 65vw 175vh #FFF, 15vw 15vh #FFF, 80vw 50vh #FFF, 25vw 95vh #FFF, 55vw 110vh #FFF, 75vw 140vh #FFF, 10vw 150vh #FFF, 85vw 190vh #FFF, 35vw 25vh #FFF, 50vw 65vh #FFF, 20vw 135vh #FFF, 90vw 85vh #FFF, 60vw 195vh #FFF, 30vw 55vh #FFF, 70vw 105vh #FFF;
  animation: driftStars 70s linear infinite;
}

/* Hardware accelerated transform for smooth 60fps star movement */
@keyframes driftStars {
  from { transform: translate3d(0, 0, 0); } 
  to { transform: translate3d(0, -100vh, 0); }
}

/* =========================================
   NAVBAR & HEADER
========================================= */
/* Main page header container */
.main-header {
  position: relative;
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg);
  z-index: 1000;
}

/* Flexible top navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

/* Pill-shaped navigation buttons */
.nav-btn {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  font-size: clamp(0.85rem, 0.7rem + 0.4vw, 1.05rem);
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.nav-btn:hover { background: var(--color-white); color: var(--color-navy); }
.header-logo { height: 40px; width: auto; }

/* =========================================
   HERO SECTION
========================================= */
/* Centered landing viewport content */
.hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 0 var(--spacing-lg); text-align: center; }
.hero-content { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-keywords { color: var(--color-white); font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.2rem); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-md); opacity: 0.9; }
.hero-slogan { color: var(--color-white); font-size: clamp(2.5rem, 8vw, 5rem); line-height: 1.1; font-weight: 700; }

/* =========================================
   SECTION TRANSITION & LIGHT MODE
========================================= */
/* Visual SVG transition between the dark hero and the light content sections */
.smooth-wave-divider { position: relative; width: 100%; line-height: 0; overflow: hidden; margin-top: -100px; z-index: 5; }
.smooth-wave-divider svg { display: block; width: calc(100% + 1.3px); height: 150px; }

/* Wrapper applying a white background over the fixed starry night background */
.light-mode-sections {
  background-color: var(--color-white);
  position: relative; z-index: 5; padding-bottom: var(--spacing-xxl); 
}

/* Inverting text colors for readability in light mode sections */
.light-mode-sections :is(h2, h3, p, .section-title) { color: var(--color-navy); }
.light-mode-sections :is(.item-desc p, .process-card p, .footer-brand p) { opacity: 0.8; font-weight: 500; }
.light-mode-sections :is(.services-list, .services-item) { border-color: rgba(27, 45, 72, 0.1); }
.light-mode-sections .site-footer { background: var(--color-white); border-top: 1px solid rgba(27, 45, 72, 0.1); }
.light-mode-sections .link-group a { color: var(--color-navy); }

/* =========================================
   SERVICES SECTION 
========================================= */
.services-section { padding: var(--spacing-xxl) var(--spacing-md); max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }
.services-list { width: 100%; display: flex; flex-direction: column; border-top: 1px solid rgba(244, 241, 237, 0.2); gap: var(--spacing-lg); padding-top: var(--spacing-xl); }
.services-item { display: flex; flex-direction: column; gap: var(--spacing-md); padding: var(--spacing-lg) 0; border-bottom: 1px solid rgba(244, 241, 237, 0.2); }

.item-text-wrapper { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.item-title h3 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 500; }
.item-desc p { line-height: 1.6; font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); }
.item-image img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 16 / 9; border-radius: var(--radius-md); }

/* =========================================
   PORTFOLIO SECTION
========================================= */
.portfolio-section {
  padding: 60px 20px; margin: var(--spacing-xxl) auto;
  width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center;
  position: relative; z-index: 10; overflow: hidden;
}

.portfolio-section .section-title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); margin-bottom: var(--spacing-lg); font-weight: 800; text-align: center; color: var(--color-white); }
.slider-wrapper { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }

/* CSS Scroll Snapping configuration for smooth swipeable carousel */
.portfolio-slider {
  display: flex; width: 100%; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  /* Hide scrollbars for cleaner UI */
  scrollbar-width: none; 
  -ms-overflow-style: none; 
}
.portfolio-slider::-webkit-scrollbar { display: none; }

.portfolio-card {
  flex: 0 0 100%; width: 100%;
  scroll-snap-align: start; padding: 0 var(--spacing-sm);
  display: flex; flex-direction: column; gap: var(--spacing-md); align-items: center;
}

.portfolio-info-row { display: flex; flex-direction: column; width: 100%; text-align: left; gap: var(--spacing-sm); }
.portfolio-image-row { width: 100%; }

.card-img.main-img { height: 250px; }
.portfolio-company { color: var(--color-white); font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.8rem); font-weight: 500; margin-bottom: var(--spacing-xs); word-wrap: break-word; }
.portfolio-services { color: var(--color-white); font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem); line-height: 1.5; text-transform: uppercase; letter-spacing: 1px; font-weight: 800; }
.card-img { width: 100%; height: 250px; object-fit: cover; border-radius: var(--radius-md); }

.case-study-link {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding-top: var(--spacing-md);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white); text-decoration: none; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem);
  transition: opacity 0.3s ease;
}
.case-study-link:is(:hover, :focus) { opacity: 0.7; }

/* Custom slider pagination dots */
.slider-dots-container { display: flex; justify-content: center; gap: 12px; margin-top: var(--spacing-xl); }
.slider-dot { width: 35px; height: 12px; border-radius: 50px; background: rgba(255, 255, 255, 0.3); border: none; cursor: pointer; transition: width 0.4s ease, background 0.3s ease; position: relative; overflow: hidden; }
.slider-dot.active { width: 75px; background: rgba(255, 255, 255, 0.2); }

/* Progress bar animation inside the active slider dot to show auto-advance timing */
.slider-dot.active::after { content: ''; position: absolute; inset: 0; width: 0%; background: var(--color-cyan); animation: fillDot 10s linear forwards; }
@keyframes fillDot { to { width: 100%; } }

/* =========================================
   PROCESS SECTION 
========================================= */
/* Grid layout displaying the company methodology */
.process-section { padding: var(--spacing-xxl) var(--spacing-sm); max-width: 1000px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.process-section .section-title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); margin-bottom: var(--spacing-lg); font-weight: 800; text-align: center; }
.bento-grid.process-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); margin-top: var(--spacing-xl); }

/* Glassmorphism card styling for process steps */
.bento-item {
  position: relative; 
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 28px;
  padding: var(--spacing-lg);
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  opacity: 0; animation: fadeSlideUp 0.6s ease forwards;
}

/* Staggered animation entry for cards */
.bento-item:nth-child(1) { animation-delay: 0.1s; }
.bento-item:nth-child(2) { animation-delay: 0.3s; }
.bento-item:nth-child(3) { animation-delay: 0.5s; }

.bento-item:is(:hover, :focus) { transform: translateY(-5px); border-color: var(--color-cyan); background: rgba(0, 245, 255, 0.1); }
.prototype-card { border-color: rgba(0, 245, 255, 0.4); box-shadow: 0 0 20px rgba(0, 245, 255, 0.05); }

/* Highlight badge for the interactive step */
.prototype-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--color-cyan); color: #000; font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.9rem); font-weight: 800;
  padding: 6px 14px; border-radius: 20px; text-transform: uppercase; letter-spacing: 1px;
  box-shadow: 0 4px 10px rgba(0, 245, 255, 0.3); white-space: nowrap; z-index: 10;
}

.process-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--spacing-md) var(--spacing-xs); }
.process-number { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); font-weight: bold; margin-bottom: var(--spacing-xs); letter-spacing: 2px; }
.process-card h3 { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); margin-bottom: 10px; }
.process-card p { font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem); line-height: 1.5; }

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

/* =========================================
   GENERATOR SECTION
========================================= */
.generator-section {
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xxl);
  width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10;
}

.generator-section .section-title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); margin-bottom: var(--spacing-lg); font-weight: 800; text-align: center; color: var(--color-white); }
.generator-section .text-medium { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem); opacity: 0.8; margin-bottom: var(--spacing-xl); text-align: center; font-weight: 500; color: var(--color-white); }
.search-container { width: 100%; max-width: 850px; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* The prompt input bar expands elegantly on focus using focus-within */
.search-interface {
  display: none; position: relative; background: var(--color-white); border-radius: 35px;
  width: 100%; height: 60px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-radius 0.4s ease, transform 0.4s ease;
  overflow: hidden; 
}
.search-interface:focus-within { height: 180px; border-radius: 24px; transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 245, 255, 0.15); }

#main-prompt {
  width: 100%; height: 100%; display: block; border: none; background: transparent;
  padding: 8px 140px 8px var(--spacing-md); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); line-height: 1.5; color: var(--color-navy); resize: none;
  transition: padding 0.4s ease;
}

/* Make room for the button to slide down when the textarea expands */
.search-interface:focus-within #main-prompt { padding-right: var(--spacing-md); padding-bottom: 60px; }
#main-prompt::placeholder { color: rgba(27, 45, 72, 0.5); }

.search-actions { position: absolute; right: 8px; top: 8px; z-index: 5; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.search-interface:focus-within .search-actions { transform: translateY(120px); }

.generate-btn {
  background: var(--color-navy); color: var(--color-white); border: none;
  padding: 0 var(--spacing-lg); height: 44px; font-weight: bold; font-size: clamp(0.95rem, 0.85rem + 0.3vw, 1.15rem);
  cursor: pointer; border-radius: var(--radius-pill); transition: background 0.3s ease, transform 0.2s ease;
}
.generate-btn:is(:hover, :focus) { background: var(--color-cyan); color: var(--color-navy); transform: scale(1.02); }

/* Auto-populating prompt suggestion chips */
.floating-pills-zone { margin-top: var(--spacing-xl); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-sm); }
.pill {
  padding: 10px 20px; border-radius: var(--radius-pill); font-weight: bold; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem); border: none; cursor: pointer; color: var(--color-navy);
  animation: float 4s ease-in-out infinite; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.pill:is(:hover, :focus) { transform: scale(1.05) translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }

.pill.red { background: var(--color-red); }
.pill.cyan { background: var(--color-cyan); }
.pill.white { background: var(--color-white); }

/* Floating animation for prompt pills */
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.floating-1 { animation-delay: 0s; } .floating-2 { animation-delay: 1.5s; } .floating-4 { animation-delay: 3s; }

/* Phase 1 Modification: Direct to Chat Bypass — wrapper + button styling */
.direct-chat-wrapper { margin-top: 40px; }
#direct-chat-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  text-transform: none;
  letter-spacing: normal;
  transition: transform 0.2s ease, color 0.3s ease, border-color 0.3s ease;
}
#direct-chat-btn:is(:hover, :focus) { color: var(--color-cyan); border-color: var(--color-cyan); transform: translateY(-2px); }

/* =========================================
   MOCKUP SHELL / BROWSER
========================================= */
/* Styles targeting the DOM injected by Javascript during mockup generation */
.mockup-shell { 
  width: 100%; 
  flex: 1;
  background: #ffffff; 
  display: flex; 
  flex-direction: column; 
  font-family: var(--font-primary);
}

.mockup-nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 15px var(--spacing-lg); 
  background: var(--secondary); 
  color: var(--primary); 
  flex-wrap: wrap; 
  gap: 15px; 
}

.mockup-logo-text { 
  font-weight: 900; 
  font-size: 1.5rem; 
  letter-spacing: 1px; 
}

/* Visibility control for the internal mockup navigation tabs */
.mockup-page { 
  display: none; 
  animation: pageFadeIn 0.4s ease forwards; 
}
.mockup-page.active-page { 
  display: block; 
}

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

.mockup-links { 
  display: flex; 
  gap: 20px; 
  flex-wrap: wrap; 
}

.mockup-links span { 
  font-size: 0.85rem; 
  font-weight: bold; 
  opacity: 0.8; 
  cursor: pointer; 
  transition: opacity 0.3s ease; 
}

.mockup-links span:hover { 
  opacity: 1; 
}

.mockup-links span.active-nav {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.mockup-hero { 
  height: 350px; 
  background-size: cover; 
  background-position: center; 
  position: relative; 
  flex-shrink: 0; 
}

.mockup-overlay { 
  position: absolute; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.6); 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  text-align: center; 
  padding: var(--spacing-md); 
}

.mockup-overlay h1 { 
  color: #ffffff; 
  font-size: clamp(2rem, 5vw, 3.5rem); 
  margin-bottom: var(--spacing-sm); 
  text-shadow: 0 2px 10px rgba(0,0,0,0.5); 
}

.mockup-overlay p { 
  color: rgba(255, 255, 255, 0.9); 
  font-size: clamp(1rem, 2vw, 1.2rem); 
  max-width: 600px; 
  line-height: 1.5; 
}

.mockup-cta { 
  margin-top: var(--spacing-md); 
  padding: 12px 30px; 
  background: var(--primary); 
  color: #ffffff; 
  border: none; 
  border-radius: 8px; 
  font-weight: bold; 
  font-size: 1rem; 
  text-transform: uppercase; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
  cursor: pointer; 
  transition: transform 0.2s; 
}

.mockup-cta:hover { 
  transform: scale(1.05); 
}

.mockup-section { 
  padding: 60px 20px; 
  color: #333; 
  max-width: 1000px; 
  margin: 0 auto; 
  width: 100%; 
}

.mockup-section-title { 
  text-align: center; 
  margin-bottom: 40px; 
  font-size: 2rem; 
  color: var(--primary); 
}

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

.mockup-card { 
  background: #f8f9fa; 
  padding: 30px; 
  border-radius: 12px; 
  text-align: center; 
  transition: transform 0.3s; 
  border: 1px solid #eaeaea; 
}

.mockup-card:hover { 
  transform: translateY(-5px); 
}

.mockup-card h3 { 
  color: var(--secondary); 
  margin-bottom: 15px; 
  font-size: 1.3rem; 
}

.mockup-card p { 
  line-height: 1.6; 
  color: #666; 
}

.mockup-product { 
  background: white; 
  border: 1px solid #eaeaea; 
  border-radius: 12px; 
  overflow: hidden; 
  text-align: center; 
  padding-bottom: 20px; 
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
  transition: transform 0.3s;
}

.mockup-product:hover {
  transform: translateY(-5px);
}

.mockup-product-img { 
  width: 100%; 
  height: 200px; 
  background: #f0f0f0; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #aaa; 
  font-size: 1.5rem; 
  margin-bottom: 15px; 
}

.mockup-product h4 { 
  margin-bottom: 5px; 
  color: #333; 
  font-size: 1.2rem;
}

.mockup-product .price { 
  color: var(--primary); 
  font-weight: bold; 
  font-size: 1.1rem; 
  margin-bottom: 15px; 
}

.mockup-product-btn { 
  background: var(--secondary); 
  color: var(--primary); 
  border: none; 
  padding: 10px 20px; 
  border-radius: 6px; 
  cursor: pointer; 
  font-weight: bold; 
  transition: opacity 0.2s; 
}

.mockup-product-btn:hover { 
  opacity: 0.8; 
}

/* Placeholder skeleton loading state to simulate fetching data */
.skeleton-card {
  background: #e0e0e0;
  border-radius: 12px;
  height: 320px;
  position: relative;
  overflow: hidden;
  border: 1px solid #d4d4d4;
}

/* Shimmer animation for skeleton loader */
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: loadingShimmer 1.5s infinite;
}

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

.mockup-input {
  width: 100%; padding: 12px; margin-bottom: 15px;
  border: 1px solid #ccc; border-radius: 6px; font-family: inherit;
}

.mockup-footer { 
  padding: 40px 20px; 
  background: #111; 
  color: #fff; 
  text-align: center; 
  margin-top: auto; 
}

/* Fake browser controls (dots) and address bar */
.browser-bar { background: #e0e0e0; padding: 10px var(--spacing-md); display: flex; align-items: center; gap: var(--spacing-md); position: relative; z-index: 50; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }

.traffic-lights { display: flex; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; }
.red { background: #ff5f56; cursor: pointer; transition: transform 0.2s; }
.red:hover { transform: scale(1.2); }
.yellow { background: #ffbd2e; } 
.green { background: #27c93f; }
.address-bar { background: white; flex: 1; border-radius: var(--radius-sm); font-size: 12px; padding: 4px var(--spacing-sm); color: #999; }

/* Phase 3 Modification: Persistent start button inside the browser bar */
#persistent-start-btn {
  margin-left: auto;
  padding: 6px 16px;
  font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem);
  flex: 0 0 auto;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
#persistent-start-btn:not(.hidden-step) { animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes popIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* =========================================
   FULL SCREEN ONBOARDING MODAL
========================================= */
/* The dark blur backdrop holding the chatbot and presentation interface */
.decision-overlay {
  position: fixed; inset: 0; width: 100%; height: 100%;
  background: rgba(27, 45, 72, 0.98); 
  z-index: 9999; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; overflow: hidden; 
}
.decision-overlay.active { opacity: 1; pointer-events: auto; }

/* The initial question card shown right after viewing the mockup */
#step-hook {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1);
  background: rgba(27, 45, 72, 0.95); 
  border: 1px solid rgba(0, 245, 255, 0.3); padding: var(--spacing-xl); border-radius: var(--radius-lg);
  text-align: center; width: 90%; max-width: 450px; color: var(--color-white); box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  z-index: 10; transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Two-column container for the chatbot step */
.onboarding-split {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; background: var(--color-navy); 
  opacity: 0; transform: scale(0.98); visibility: hidden; pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), visibility 0.8s;
  overflow: hidden;
}

.onboarding-split.show-layout {
  opacity: 1; transform: scale(1); visibility: visible; pointer-events: auto;
}

/* Chat column setup */
.onboarding-left { flex: 1; display: flex; flex-direction: column; align-items: center; padding: var(--spacing-xl) var(--spacing-md); overflow-y: auto; }
/* Hide presentation column on mobile */
.onboarding-right { display: none; }

.decision-card {
  background: rgba(27, 45, 72, 0.95); 
  border: 1px solid rgba(0, 245, 255, 0.3); padding: var(--spacing-lg); border-radius: var(--radius-lg);
  text-align: center; width: 100%; max-width: 500px; color: var(--color-white); box-shadow: 0 20px 50px rgba(0,0,0,0.5); margin: auto;
}
.decision-card h2 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); margin-bottom: 10px; line-height: 1.2; }
.decision-card p { color: rgba(244, 241, 237, 0.7); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem); }
.decision-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.lfg-btn {
  background: var(--color-navy); color: white; border: 1px solid var(--color-cyan); padding: 10px 12px;
  border-radius: 10px; font-weight: bold; font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem); cursor: pointer; flex: 1 1 120px;
  transition: transform 0.3s ease, background 0.3s ease;
}
.lfg-btn:is(:hover, :focus, :active) { background: var(--color-cyan); color: var(--color-navy); transform: translateY(-2px); }
.lfg-btn.outline-white { border-color: rgba(255, 255, 255, 0.3); }

/* =========================================
   CHATBOT UI SKELETON
========================================= */
/* Mobile-first structural locks to prevent interface scrolling. 
   Only the chat-stage will scroll. */
div.onboarding-left.chat-layout { 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  height: 100%; 
  width: 100%; 
  padding: 0; 
  overflow: hidden; 
}

/* Phase 1 Modification: Standalone Chatbot Mode */
.onboarding-split.standalone-mode { 
  justify-content: center; 
  align-items: center; 
}
.onboarding-split.standalone-mode .onboarding-left { 
  z-index: 10; 
  position: relative; 
  background: var(--color-navy); 
  height: 100%; 
  width: 100%;
  margin: 0; 
  border-radius: 0; 
  border: none; 
}
.onboarding-split.standalone-mode .onboarding-right { 
  display: block; 
  position: absolute; 
  inset: 0; 
  border: none; 
  padding: 0; 
  z-index: 0; 
}

/* Ensure the header and input bar never squish on mobile so the messages have to scroll instead */
.chat-header { 
  flex-shrink: 0; 
  padding: 20px; 
  border-bottom: 1px solid rgba(0, 245, 255, 0.1); 
}
.chat-header-top { display: flex; justify-content: space-between; align-items: center; position: relative; }
.chat-header-spacer, .chat-menu-wrapper { flex: 1; }

.chat-logo-circle { width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 245, 255, 0.3); display: flex; justify-content: center; align-items: center; }
.chat-logo-img { width: 30px; height: auto; }
.chat-email-link { color: var(--color-cyan); text-decoration: none; font-weight: bold; }
.chat-menu-wrapper { display: flex; justify-content: flex-end; position: relative; }

/* The three-dots menu button inside the chat header */
.chat-menu-btn {
  background: transparent; border: none; color: var(--color-white); cursor: pointer; width: 40px; height: 40px;
  display: flex; justify-content: flex-end; align-items: center; opacity: 0.6; transition: opacity 0.3s ease, color 0.3s ease;
}
.chat-menu-btn:hover { opacity: 1; color: var(--color-cyan); }

/* The dropdown menu options inside the chat interface */
.chat-dropdown {
  position: absolute; top: calc(100% + 10px); right: 0;
  background: rgba(27, 45, 72, 0.98); 
  border: 1px solid rgba(0, 245, 255, 0.2); border-radius: 12px; display: flex; flex-direction: column; padding: 8px;
  min-width: 180px; z-index: 100; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(-10px); pointer-events: none; 
  transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.3s;
}
.chat-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

.chat-dropdown button { background: transparent; border: none; color: var(--color-white); padding: 10px 15px; text-align: right; cursor: pointer; font-size: clamp(0.9rem, 0.82rem + 0.3vw, 1.1rem); border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; }
.chat-dropdown button:hover { background: rgba(0, 245, 255, 0.1); color: var(--color-cyan); }
.chat-dropdown button.text-red:hover { background: rgba(215, 38, 56, 0.1); color: var(--color-red); }

.chat-blurb { text-align: center; margin-top: 15px; }
.chat-blurb h3 { font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); color: var(--color-white); }
.chat-blurb p { font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem); color: rgba(255, 255, 255, 0.6); }

/* The actual scrolling container holding the conversation */
.chat-stage { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 30px 20px; display: flex; flex-direction: column; gap: 20px; }
.chat-bubble { max-width: 85%; padding: 15px 20px; font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); line-height: 1.5; }
.bot-bubble { align-self: flex-start; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(0, 245, 255, 0.2); border-radius: 20px 20px 20px 0; color: var(--color-white); }

/* Typing animation logic for bot pauses */
.typing-dots { display: flex; align-items: center; gap: 5px; padding: 5px 2px; }
.typing-dots span { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; }
.typing-dots span:nth-child(1) { animation-delay: -0.32s; } .typing-dots span:nth-child(2) { animation-delay: -0.16s; }

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

.chat-options-container.user-side { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

.chat-pill { background: var(--color-cyan); color: var(--color-navy); border: 1px solid var(--color-cyan);
  padding: 12px 24px; border-radius: 25px; font-weight: bold; cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.chat-pill:not(:disabled):active { transform: translateY(0); }
.chat-pill.outline { background: transparent; color: var(--color-white); }
.chat-pill.outline:not(:disabled):hover { background: var(--color-cyan); color: var(--color-navy); }

/* Footer wrapper holding input field */
.chat-action-bar { 
  flex-shrink: 0; 
  padding: 10px; 
  border-top: 1px solid rgba(0, 245, 255, 0.1); 
  display: flex; 
  gap: 15px; 
  background: var(--color-navy); 
  width: 100%; 
}

.chat-input {
  flex: 1 1 0; min-width: 0; height: 50px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 25px; padding: 0 20px; color: var(--color-white); font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem); transition: border-color 0.3s ease;
}
.chat-input:focus { border-color: rgba(255, 255, 255, 0.3); }
.chat-input:disabled { opacity: 0.5; cursor: not-allowed; }

.chat-send-btn {
  background: var(--color-red); color: var(--color-navy); border: none; width: 50px; height: 50px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center; cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease, background 0.3s ease;
}
.chat-send-btn svg { stroke: var(--color-navy); transition: stroke 0.3s ease; }
.chat-send-btn:not(:disabled):hover { transform: scale(1.08); }
.chat-send-btn:not(:disabled):active { transform: scale(0.95); }
.chat-send-btn:disabled { background: rgba(255, 255, 255, 0.1); cursor: not-allowed; }
.chat-send-btn:disabled svg { stroke: rgba(255, 255, 255, 0.3); }

/* =========================================
   NEW CHATBOT UI ELEMENTS
========================================= */

/* Checkbox Multiple-Select Interactions */
.chat-checkbox.selected {
  background: var(--color-cyan);
  color: var(--color-navy);
  border-color: var(--color-cyan);
  box-shadow: 0 4px 15px rgba(0, 245, 255, 0.3);
}

/* Custom In-Chat Submit Buttons */
.submit-btn {
  background: rgba(0, 245, 255, 0.1);
  color: var(--color-cyan);
  border: 1px solid var(--color-cyan);
  margin-top: 10px;
  width: 100%;
  text-align: center;
  justify-content: center;
}

.submit-btn:hover {
  background: var(--color-cyan);
  color: var(--color-navy);
}

/* Dropdown Select & Textarea Wrappers */
.chat-select-container, .chat-textarea-container {
  width: 100%;
  max-width: 85%;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Input core stylings for Selects and Textareas */
.chat-select, .chat-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 245, 255, 0.3);
  color: var(--color-white);
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  font-family: inherit;
}

.chat-select:focus, .chat-textarea:focus {
  border-color: var(--color-cyan);
  box-shadow: 0 0 10px rgba(0, 245, 255, 0.2);
}

/* Fix dropdown option contrast against browser defaults */
.chat-select option {
  background: var(--color-navy);
  color: var(--color-white);
}

.chat-textarea {
  resize: vertical;
  min-height: 100px;
}

/* =========================================
   FOOTER
========================================= */
.site-footer { padding: 60px var(--spacing-md) var(--spacing-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); color: var(--color-white); position: relative; transition: opacity 0.4s ease, visibility 0.4s ease; }
.footer-content { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: var(--spacing-xl); }
.footer-logo { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 800; margin-bottom: var(--spacing-sm); }
.footer-brand p { font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); }
.footer-links { display: grid; grid-template-columns: 1fr; gap: var(--spacing-lg); }
.link-group h4 { font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem); text-transform: uppercase; letter-spacing: 2px; color: var(--color-cyan); margin-bottom: 15px; }

.link-group a { display: block; color: var(--color-white); text-decoration: none; font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem); margin-bottom: var(--spacing-sm); opacity: 0.7; transition: transform 0.3s ease, opacity 0.3s ease; }
.link-group a:is(:hover, :focus, :active) { opacity: 1; color: var(--color-cyan); transform: translateX(5px); }

.footer-bottom { max-width: 1100px; margin: var(--spacing-xl) auto 0; padding-top: var(--spacing-md); border-top: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; font-size: clamp(0.85rem, 0.78rem + 0.25vw, 1rem); opacity: 0.5; }

/* Scroll-to-top floating action button */
.back-to-top {
  position: fixed; bottom: var(--spacing-lg); right: var(--spacing-lg); background: var(--color-cyan); color: var(--color-navy); border: none;
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.4); opacity: 0; visibility: hidden; transform: translateY(20px); transition: transform 0.4s ease, opacity 0.4s ease; z-index: 999;
}
.back-to-top.show { opacity: 0.5; visibility: visible; transform: translateY(0); }
.back-to-top:is(:hover, :focus, :active) { transform: scale(1.1); background: var(--color-white); }

/* =========================================
   TRANSITIONS, MODALS & ANIMATIONS
========================================= */
/* Compresses the landing hero section to the top when the generator is triggered */
.hero-section.minimized { transform: scaleY(0.4); transform-origin: top; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hero-section.minimized :is(.brand-logo, .floating-pills-zone) { opacity: 0; pointer-events: none; transform: translateY(-20px); transition: transform 0.4s ease, opacity 0.4s ease; }
.hero-section.minimized .search-interface { pointer-events: none; opacity: 0.5; transition: transform 0.4s ease, opacity 0.4s ease; }

/* Initial viewing stage container for generated websites */
.browser-stage {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; justify-content: center; align-items: flex-end; 
  background: rgba(0, 0, 0, 0); pointer-events: none; visibility: hidden; transition: background 0.6s ease, visibility 0.6s ease; 
}
.browser-stage.active { background: rgba(0, 0, 0, 0.7); pointer-events: auto; visibility: visible; }

/* The white modal shell simulating a browser window */
.browser-window {
  width: 95%; max-width: 1000px; height: 85%; margin: 0 auto; background: var(--color-white); 
  border-radius: 20px;
  overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 -20px 50px rgba(0,0,0,0.5);
  transform: translateY(120%); transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; cursor: default; 
}
.browser-stage.active .browser-window { transform: translateY(0); }

/* Inner scrolling area for the generated website output */
.browser-content { 
  flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; position: relative; touch-action: pan-y; 
  display: flex; flex-direction: column; }

/* =========================================
   LARGE DESKTOP UPGRADES (Scaling up sizes)
========================================= */
@media (min-width: 1200px) {

  /* --- Typography Scaling --- */
  /* (Most font sizes now scale fluidly via clamp() — only keep what the clamps don't cover) */
  .hero-slogan { font-size: 6rem; }
  .item-desc p { line-height: 1.8; }
  .mockup-overlay h1 { font-size: 4rem; }
  .mockup-overlay p { font-size: 1.4rem; }

  /* --- Button & Input Scaling --- */
  .nav-btn { padding: 12px 32px; }
  .generate-btn { padding: 0 40px; height: 56px; }
  .pill { padding: 12px 30px; }
  .lfg-btn { padding: 14px 24px; }
  .mockup-cta { padding: 18px 45px; font-size: 1.2rem; }
  #main-prompt { padding-top: 12px; }

  /* --- Image & Container Scaling --- */
  .card-img.main-img { height: 450px; }
  .card-img.sub-img { height: 350px; }
  .mockup-product-img { height: 260px; }

  /* Slightly widen the mockup window so the scaled items fit beautifully */
  .browser-window.presentation-mode { max-width: 1200px; height: 85vh; }
  .search-container { max-width: 1000px; }
}

/* =========================================
   DESKTOP & TABLET UPGRADES
========================================= */
@media (min-width: 900px) {

  /* Restore blurs for desktop/tablet devices where GPU can handle it */
  .decision-overlay {
    background: rgba(27, 45, 72, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
  
  #step-hook, .decision-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  
  .chat-dropdown {
    background: rgba(27, 45, 72, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  
  .chat-action-bar { 
    padding: 20px; 
  }

  .footer-content { grid-template-columns: 2fr 1fr; }
  .brand-logo { font-size: 4rem; margin-bottom: 2rem; }
  .search-container { max-width: 900px; }
  #main-prompt { padding-left: var(--spacing-xl); }
  .floating-pills-zone { margin-top: 50px; gap: var(--spacing-lg); }
  .pill { padding: 10px 25px; }
  
  @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }

  /* Services Alternating Layout Update */
  .services-item { flex-direction: row; align-items: center; gap: var(--spacing-xl); }
  .services-item:nth-child(even) { flex-direction: row-reverse; }
  .services-item .item-text-wrapper { flex: 1; }
  .services-item .item-image { flex: 1.2; }
  .item-image img { aspect-ratio: 4 / 3; }

  /* Portfolio Grid Layout Update */
  .portfolio-section { padding: 80px 40px; }
  
  .portfolio-card { 
    padding: var(--spacing-md) var(--spacing-xl); 
    align-items: stretch; 
  }
  
  .portfolio-info-row {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--spacing-xl);
    width: 100%;
    align-items: start;
  }
  
  .portfolio-image-row {
    display: grid;
    grid-template-columns: 1fr 2fr; 
    gap: var(--spacing-md);
    width: 100%;
    align-items: center; 
  }

  div.sub-images-container.hide-on-mobile {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: var(--spacing-md);
  }
  
  .card-img.main-img { height: 300px; width: 100%; object-fit: cover; border-radius: var(--radius-md); }
  .card-img.sub-img { height: 300px; width: 100%; object-fit: cover; border-radius: var(--radius-md); }

  .portfolio-summary { font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem); line-height: 1.6; color: var(--color-white); opacity: 0.9; }
  .portfolio-location { margin-top: var(--spacing-md); font-size: clamp(0.85rem, 0.75rem + 0.4vw, 1.05rem); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; color: var(--color-white); opacity: 0.8; }

  .info-col.left-col { display: flex; flex-direction: column; height: 100%; }
  .info-col.left-col .case-study-link { margin-top: auto; padding-top: var(--spacing-md); }

  /* Expands the process section to 3 side-by-side boxes */
  .bento-grid.process-grid { grid-template-columns: repeat(3, 1fr); gap: var(--spacing-sm); }
  .bento-item:not(:last-child)::after { content: '→'; position: absolute; top: 50%; right: -25px; transform: translateY(-50%); font-weight: bold; color: var(--color-cyan); }

  /* Onboarding screen splits chat onto the left, and presentation onto the right */
  .onboarding-split { flex-direction: row; background: transparent; }
  .onboarding-left { flex: 1.5; padding: var(--spacing-xxl); background: var(--color-navy); }
  .onboarding-right { display: flex; flex: 3; justify-content: center; align-items: center; border-left: 1px solid rgba(0, 245, 255, 0.1); padding: var(--spacing-xxl); position: relative; overflow: hidden; z-index: 1; background: transparent; }
  
  /* Restoring the decorative boundaries for Desktop standalone chat */
  .onboarding-split.standalone-mode .onboarding-left { 
    flex: 0 0 450px; 
    height: 85vh; 
    margin: auto; 
    border-radius: 20px;
    border: 1px solid rgba(0, 245, 255, 0.2);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  }

  /* Applied dynamically when the main browser is moved into the split-screen */
  .browser-window.presentation-mode { width: 100%; max-width: 1000px; height: 80vh; border: none; transform: translateY(0); box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
  .footer-links { grid-template-columns: 1fr 1fr; }

  .hide-on-desktop { display: none; }
  a.hide-on-mobile { display: flex; }
  p.hide-on-mobile { display: block; }
  div.hide-on-mobile { display: block; }
}

/* Visibility Utilities (Mobile First) */
@media (max-width: 899px) {
  .hide-on-mobile { display: none; }
  .hide-on-desktop { display: flex; }
}

/* =========================================
   UTILITIES
========================================= */
/* Loading stage elements displayed before AI generation injects the content */
.ai-loading-screen { padding: 100px var(--spacing-md); text-align: center; }
.ai-loading-title { color: var(--color-navy); animation: pulse 1.5s infinite; }
.ai-loading-subtitle { color: #666; margin-top: var(--spacing-sm); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Force cloned backgrounds to stay inside the right panel without !important */
.onboarding-right .background-engine,
.onboarding-right .parallax-layer {
    position: absolute;
}