/*
=================================================================
  TABLE OF CONTENTS
=================================================================
  0. Hero Section (NEW)
  1. General & Typography
  2. Layout & Containers
  3. Header & Navigation
  4. Page Sections
  5. About Section
  6. Products / Services Section (Οι Υπηρεσίες μας)
  7. Contact Section & Form
  8. Footer
  9. Dark Mode Theme
  10. Chat Widget
  11. Animations & Keyframes
  12. MODAL STYLES
  13. RESPONSIVE DESIGN (NEW)
=================================================================
*/

/* --- 0. HERO SECTION (SIMPLIFIED ANTHROPIC-STYLE) --- */
/* --- 0. NEW HERO SECTION --- */
/* --- 0. NEW HERO SECTION (Overlay Logic) --- */

/* --- 1. General & Typography --- */
:root {
  --bg-light: #f8fafc;
  --bg-off-white: #f1f5f9;
  --bg-surface: rgba(255, 255, 255, 0.82);
  --text-dark: #1e293b;
  --text-medium: #475569;
  --text-light-gray: #64748b;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --mouse-x: 50vw;
  --mouse-y: 40vh;
  --accent-primary: #0891b2;
  --accent-primary-darker: #0e7490;
  --accent-brand: #3B7984;
  --accent-violet: #6366f1;
  --accent-gradient: linear-gradient(135deg, #22d3ee 0%, #3B7984 45%, #818cf8 100%);
  --border-color: rgba(148, 163, 184, 0.42);
  --card-shadow: 0 4px 24px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(148, 163, 184, 0.22);
  --card-hover-shadow: 0 16px 40px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(34, 211, 238, 0.28);
  --success-color: #10b981;
  --error-color: #ef4444;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --chat-widget-width: 500px;
  --chat-widget-height: 680px;

  /* MODAL COLORS */
  --modal-chatbot-icon-color: #3b82f6;
  --modal-chatbot-bg-color: rgba(59, 130, 246, 0.1);  
  --modal-chatbot-accent-color: #3b82f6;

  --modal-dataanalysis-icon-color: #10b981;
  --modal-dataanalysis-bg-color: rgba(16, 185, 129, 0.1);
  --modal-dataanalysis-accent-color: #10b981;

  --modal-machinelearning-icon-color: #8b5cf6;
  --modal-machinelearning-bg-color: rgba(139, 92, 246, 0.1);
  --modal-machinelearning-accent-color: #8b5cf6;

  --modal-nlp-icon-color: #ef4444;
  --modal-nlp-bg-color: rgba(239, 68, 68, 0.1);
  --modal-nlp-accent-color: #ef4444;

  --modal-automation-icon-color: #f59e0b;
  --modal-automation-bg-color: rgba(245, 158, 11, 0.1);
  --modal-automation-accent-color: #f59e0b;

  --modal-security-icon-color: #60a5fa;
  --modal-security-bg-color: rgba(96, 165, 250, 0.1);
  --modal-security-accent-color: #60a5fa;

    --modal-aiworkers-icon-color: #d0006f;
  --modal-aiworkers-bg-color: rgba(208, 0, 111, 0.1);
  --modal-aiworkers-accent-color: #d0006f;

  /* Typography — Inter (body/UI) + Space Grotesk (headings) */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Space Grotesk', var(--font-body);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-header-height, 220px);
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-dark);
  background-color: #eef2f6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--transition), color var(--transition);
}

/* Headings — Space Grotesk */
h1, h2, h3, h4, h5, h6,
.company-title h1,
.company-title .tagline,
section h2,
section h3,
.homepage-hero h2,
.homepage-hero__eyebrow,
.final-cta-band h2,
.b2b-card h3,
.innovation-card__body h3,
.product-card h3,
.contact-info-card h3,
.contact-form-container h3,
.product-detail-modal h3,
.markdown-body h1,
.markdown-body h3,
.modal-title,
.footer-col h4,
.architecture-doc__eyebrow,
.architecture-doc__brand--lead,
.architecture-doc__brand--lead.markdown-body h2 {
  font-family: var(--font-heading);
}

/* UI & body copy — Inter */
nav a,
.mobile-nav a,
.demo-cta-btn,
.btn-secondary-outline,
.btn-submit,
.form-group label,
.form-group input,
.form-group textarea,
.form-group select,
#form-status,
.chat-widget,
.chat-widget-header,
.chat-messages,
.chat-status-bar,
.chat-input-area input,
.chat-prompt-label,
.footer-col a,
footer p,
.integration-tag,
.credibility-pill,
.b2b-lead,
.homepage-hero__sub,
.architecture-doc__question,
.architecture-doc__block p,
.architecture-doc__insight p,
.architecture-doc__vision p,
.architecture-doc__cta p,
section p,
section li,
.about-text p {
  font-family: var(--font-body);
}

/* --- 2. Layout & Containers --- */
.container {
  max-width: 1140px;
  margin: auto;
  padding: 0 20px;
}

.container-wide {
  max-width: 1600px;
  margin: auto;
  padding: 0 20px;
}

/* --- 3. Header & Navigation --- */
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(248, 250, 252, 0.92) 45%, rgba(241, 245, 249, 0.94) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#siteHeader .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.company-header {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  min-height: 150px;
  transition: min-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding 0.45s ease;
}

.logo-img {
  position: absolute;
  top: 50%;
  left: 200px;
  transform: translateY(-50%);
  width: 200px;
  height: 200px;
  transition:
    width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.company-title {
  text-align: center;
  margin-left: 150px;
  transition: margin 0.45s cubic-bezier(0.22, 1, 0.36, 1), text-align 0.45s ease;
}

.company-title h1 {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.05;
  color: #0f172a;
  letter-spacing: -0.03em;
  text-shadow: none;
  transition: font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.company-title h1 .agents-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none;
}

.company-title .tagline {
  display: block;
  margin-top: 10px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: #0891b2;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  word-spacing: 0.15em;
  text-shadow: none;
}

nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  list-style: none;
  gap: 25px;
  margin-top: 12px;
}

nav a {
  position: relative;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  color: #475569;
  padding: 8px 14px;
  border-radius: 999px;
  transition: color var(--transition), background var(--transition), box-shadow var(--transition);
  text-shadow: none;
  letter-spacing: 0.02em;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 2px;
  transition: width var(--transition), left var(--transition);
}

nav a:hover,
nav a.active {
  color: #0f172a;
  background: rgba(34, 211, 238, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, 0.28);
}

nav a:hover::after,
nav a.active::after {
  width: 40%;
  left: 30%;
}

.language-selector {
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

#siteHeader:not(.is-scrolled) .language-selector {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 12;
}
.language-selector a {
  display: block;
  line-height: 0; 
}
.language-selector img {
  width: 36px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.language-selector img:hover {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Header shell — original expanded layout; compact brand + nav on scroll */
#siteHeader .header-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
  position: relative;
  transition: gap 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

#siteHeader .company-title .tagline {
  transition: opacity 0.35s ease, max-height 0.35s ease, margin 0.35s ease;
}

@media (min-width: 1025px) {
  #siteHeader.is-scrolled {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  #siteHeader.is-scrolled .container {
    align-items: stretch;
    padding-left: clamp(12px, 2vw, 28px);
    padding-right: clamp(12px, 2vw, 28px);
  }

  #siteHeader.is-scrolled .header-shell {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(12px, 2vw, 24px);
    width: 100%;
    min-height: 72px;
    padding-right: 0;
    overflow: visible;
  }

  #siteHeader.is-scrolled .company-header {
    order: 1;
    flex: 0 0 auto;
    min-height: 0;
    width: auto;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 14px;
  }

  #siteHeader.is-scrolled .logo-img {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
  }

  #siteHeader.is-scrolled .company-title {
    margin-left: 0;
    text-align: left;
    line-height: 1;
  }

  #siteHeader.is-scrolled .company-title h1 {
    font-size: clamp(1.4rem, 2.1vw, 1.75rem);
    line-height: 1.05;
    white-space: nowrap;
  }

  #siteHeader.is-scrolled .company-title .tagline {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
  }

  #siteHeader.is-scrolled nav {
    order: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: stretch;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    width: auto;
    max-width: none;
    padding-inline: 2px;
  }

  #siteHeader.is-scrolled nav::-webkit-scrollbar {
    display: none;
  }

  #siteHeader.is-scrolled nav ul {
    margin-top: 0 !important;
    gap: 4px 8px;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    min-width: min-content;
    max-width: 100%;
  }

  #siteHeader.is-scrolled nav a {
    padding: 6px 8px;
    font-size: 0.88rem;
  }

  /* Greek labels are longer — tighter fit in collapsed bar */
  html[lang=el] #siteHeader.is-scrolled .company-header {
    gap: 10px;
  }

  html[lang=el] #siteHeader.is-scrolled .logo-img {
    width: 56px;
    height: 56px;
  }

  html[lang=el] #siteHeader.is-scrolled .company-title h1 {
    font-size: clamp(1.15rem, 1.65vw, 1.5rem);
  }

  html[lang=el] #siteHeader.is-scrolled nav ul {
    gap: 2px 4px;
    justify-content: space-between;
  }

  html[lang=el] #siteHeader.is-scrolled nav a {
    font-size: 0.76rem;
    padding: 5px 5px;
    letter-spacing: -0.01em;
  }

  html[lang=el] #siteHeader.is-scrolled .language-selector img {
    width: 28px;
  }

  @media (min-width: 1025px) and (max-width: 1320px) {
    html[lang=el] #siteHeader.is-scrolled nav a {
      font-size: 0.72rem;
      padding: 4px 3px;
    }

    html[lang=el] #siteHeader.is-scrolled .company-title h1 {
      font-size: 1.12rem;
    }
  }

  #siteHeader.is-scrolled .language-selector {
    order: 3;
    flex: 0 0 auto;
    position: static !important;
    top: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex;
    align-items: center;
    align-self: center;
    margin: 0;
    height: auto;
  }

  #siteHeader.is-scrolled .language-selector img {
    width: 32px;
    display: block;
  }

  #siteHeader.is-scrolled .header-cta-row {
    display: none;
  }
}

/* --- 4. Page Sections --- */
section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

section:nth-child(even) {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 120%;
  height: 100%;
  background: radial-gradient(ellipse at center top, rgba(34, 211, 238, 0.03), transparent 68%);
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

section h2 {
  position: relative;
  font-family: var(--font-heading);
  font-size: 2.45rem;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

section h2::after {
  content: '';
  display: block;
  width: 72px;
  height: 4px;
  background: var(--accent-gradient);
  margin: 18px auto 34px;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.45);
}

section p,
section ul {
  font-size: 1.1rem;
  color: var(--text-medium);
  margin-bottom: 1.4em;
}

section ul {
  list-style: none;
}

section li {
  margin-bottom: 12px;
}

#trust ul {
  list-style: disc;
  padding-left: 1.25rem;
}
#trust li {
  padding-left: 0.15rem;
  margin-bottom: 8px;
}

.innovation-card__tags li,
.outcome-list li,
nav li,
footer li {
  padding-left: 0;
  position: static;
}
.innovation-card__tags li::before,
.outcome-list li::before,
nav li::before,
footer li::before {
  content: none;
  display: none;
}
.innovation-card__tags li { margin-bottom: 0; }
.outcome-list li { margin-bottom: 0; }

/* --- 5. About Section --- */
#about .about-content {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap; 
}

#about .about-text {
  flex: 1.5;
  min-width: 300px; 
}

#about .about-text strong {
  color: var(--accent-primary-darker);
  font-weight: 600;
}

.about-image {
  flex: 1;
  max-width: 480px;
  min-width: 300px;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(34, 211, 238, 0.2);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.about-image:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--card-hover-shadow);
  border-color: rgba(34, 211, 238, 0.45);
}
.about-image.parallax-float:hover {
  transform: none;
  filter: brightness(1.04) saturate(1.05);
}

/* --- 6. Products / Services Section --- */
section#products {
  background-color: transparent;
}

section#products::before {
  display: none;
}

.product-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  align-items: stretch;
}

.product-card {
  flex: 1 1 320px;
  max-width: 450px;
  text-align: left;
  padding: 32px 28px;
  border-radius: 20px;
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.22);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
}

.product-card:hover {
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: var(--card-hover-shadow);
}
#products .product-card:hover,
#our-products .product-card:hover {
  --lift: -6px;
}

.product-card.chatbot {
    --card-hover-shadow: 0 0px 35px rgba(59, 130, 246, 0.6); 
}
.product-card.dataanalysis {
    --card-hover-shadow: 0 0px 35px rgba(16, 185, 129, 0.6); 
}
.product-card.machinelearning {
    --card-hover-shadow: 0 0px 35px rgba(139, 92, 246, 0.6); 
}
.product-card.nlp {
    --card-hover-shadow: 0 0px 35px rgba(239, 68, 68, 0.6);
}
.product-card.automation {
    --card-hover-shadow: 0 0px 35px rgba(245, 158, 11, 0.6); 
}
.product-card.security {
    --card-hover-shadow: 0 0px 35px rgba(96, 165, 250, 0.6);
}

.product-icon {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 1;
}

.product-icon svg {
  width: 28px;
  height: 28px;
}

.product-card h3 {
  font-family: var(--font-heading);
  color: var(--text-dark);
  font-size: 1.45rem;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-card p {
  color: var(--text-medium);
  margin-bottom: 25px;
  font-size: 1.05rem;
  line-height: 1.7;
  flex-grow: 1;
}

.product-card .learn-more {
  font-family: var(--font-heading);
  color: var(--accent-primary-darker);
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 0.3s ease, letter-spacing 0.3s ease;
  margin-top: auto;
  letter-spacing: 0.02em;
}

.product-card:hover .learn-more {
  color: var(--accent-violet);
  letter-spacing: 0.04em;
}

.product-card.aiworkers {
    --card-hover-shadow: 0 0px 35px rgba(208, 0, 111, 0.6);
}

/* --- 7. Contact Section & Form --- */
.contact-container {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: stretch; 
}

.contact-info-area {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

.contact-intro-text {
  margin-bottom: 30px;
  line-height: 1.6;
}

.contact-info-card {
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  padding: 35px;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  box-shadow: var(--card-shadow);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  flex-grow: 1;
}

.contact-info-card h3 {
  margin-bottom: 30px;
  font-size: 1.5rem;
  color: var(--text-dark);
  font-weight: 600;
}

.contact-info-item {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

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

.icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.icon-circle svg {
  width: 26px;
  height: 26px;
}

.contact-info-item p {
  margin-bottom: 0;
  line-height: 1.4;
}

.contact-info-item strong {
  color: var(--text-dark);
  font-weight: 600;
}

.contact-info-item a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition);
}

.contact-info-item a:hover {
  color: var(--accent-primary-darker);
  text-decoration: underline;
}

.contact-form-area {
  flex: 1.2; 
  min-width: 300px;
  display: flex;
  flex-direction: column;
}

.contact-form-container {
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  padding: 35px;
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(148, 163, 184, 0.22);
  transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition);
  flex-grow: 1;
}

.contact-form-container h3 {
  margin-bottom: 25px;
  font-size: 1.5rem;
  color: var(--text-dark);
  font-weight: 600;
}

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

.form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-medium);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 13px 16px;
  font-size: 1rem;
  color: var(--text-dark);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 12px;
  transition: border var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-light-gray);
  opacity: 0.8;
}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}

.form-group textarea {
  resize: vertical;
  min-height: 140px;
}

.btn-submit {
  position: relative;
  overflow: hidden;
  display: inline-block;
  background: var(--accent-gradient);
  color: #0c1222;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  box-shadow: 0 8px 24px rgba(34, 211, 238, 0.28);
}

.btn-submit:hover:not(:disabled) {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(34, 211, 238, 0.35);
}

.btn-submit:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
  transform: none;
}

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

.btn-secondary-accent {
  background: rgba(255, 255, 255, 0.9);
  color: #1e293b;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.35);
}

.btn-secondary-accent:hover:not(:disabled) {
  background: rgba(236, 254, 255, 0.95);
  color: #0f172a;
  border-color: rgba(34, 211, 238, 0.5);
}


#form-status {
  margin-top: 15px;
  font-weight: 500;
  min-height: 42px;
  padding: 8px;
  border-radius: 4px;
  line-height: 1.4;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  box-sizing: border-box;
  color: transparent;
  background-color: transparent;
  border: 1px solid transparent;
}

#form-status.success {
  color: var(--success-color);
  background-color: #e6ffed;
  border-color: var(--success-color);
}

#form-status.error {
  color: var(--error-color);
  background-color: #ffeeee;
  border-color: var(--error-color);
}

/* --- 8. Footer --- */
footer {
  text-align: center;
  padding: 36px 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(226, 232, 240, 0.88) 100%);
  color: var(--text-light-gray);
  font-size: 0.9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.35);
}

footer p {
  color: #64748b;
}

footer p span {
  color: var(--accent-primary);
  font-weight: 600;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 28px 32px;
  max-width: 920px;
  margin: 0 auto 32px;
  text-align: left;
}
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li {
  margin-bottom: 8px;
}
.footer-col a {
  color: var(--text-medium);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color var(--transition);
}
.footer-col a:hover {
  color: var(--accent-primary-darker);
  text-decoration: underline;
}
@media (max-width: 640px) {
  .footer-columns {
    text-align: center;
  }
}

/* --- 9. Site theme (light) --- */
body section:nth-child(even) {
  background: rgba(255, 255, 255, 0.55);
}
body section#products {
  background-color: transparent;
}
body .product-card {
  background: radial-gradient(circle at 50% 0%, rgba(34, 211, 238, 0.06), transparent 70%), rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.35);
}
body .product-card:hover {
  box-shadow: var(--card-hover-shadow);
}
body .product-card h3 {
  color: var(--text-dark);
}
body .contact-info-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(148, 163, 184, 0.35);
}
body .contact-info-item strong {
  color: var(--text-dark);
}
body .form-group input,
body .form-group textarea,
body .form-group select {
  background-color: #ffffff;
  color: var(--text-dark);
  border-color: rgba(148, 163, 184, 0.45);
}
body .form-group input::placeholder,
body .form-group textarea::placeholder {
  color: var(--text-light-gray);
}
body #form-status.success {
  color: #047857;
  background-color: #ecfdf5;
  border-color: rgba(16, 185, 129, 0.45);
}
body #form-status.error {
  color: #b91c1c;
  background-color: #fef2f2;
  border-color: rgba(239, 68, 68, 0.45);
}

/* --- 10. Chat Widget --- */
.chat-widget {
    position: fixed;
    width: var(--chat-widget-width);
    height: var(--chat-widget-height);
    background-color: var(--bg-off-white);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(34, 211, 238, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1001;
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease-out, visibility 0s .3s, background-color var(--transition), border-color var(--transition);
}

.chat-widget.open {
    opacity: 1;
    visibility: visible;
    transition: opacity .3s ease-out, visibility 0s 0s;
}
.chat-widget-header{
    background:var(--accent-gradient);
    color:#0c1222;
    padding:12px 16px;
    font-family: var(--font-body);
    font-weight:600;
    letter-spacing:0.02em;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-shrink:0;
    cursor: move; 
    user-select: none;
}
.chat-widget-header .close-chat{
    background:0 0;border:none;color:#0c1222;font-size:20px;cursor:pointer;padding:5px;opacity:0.75
}
.chat-widget-header .close-chat:hover{opacity:1}
.chat-messages{
    flex-grow:1;padding:10px;overflow-y:auto;background-color:var(--bg-off-white);border-bottom:1px solid var(--border-color);transition:background-color var(--transition),border-color var(--transition)
}
.chat-messages .message{
    margin-bottom:8px;padding:8px 12px;border-radius:15px;max-width:80%;word-wrap:break-word;line-height:1.4
}
.chat-messages .message.user{
    background:var(--accent-gradient);color:#0c1222;margin-left:auto;border-bottom-right-radius:5px;font-weight:500
}
.chat-messages .message.bot{
    background:rgba(241,245,249,0.95);color:var(--text-dark);margin-right:auto;border-bottom-left-radius:5px;border:1px solid rgba(148,163,184,0.2);transition:background-color var(--transition),color var(--transition)
}
.chat-status-bar{
    font-size:.8em;text-align:center;padding:8px 10px;color:var(--text-medium);background-color:#f1f1f1;border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);flex-shrink:0;transition:background-color var(--transition),border-color var(--transition)
}
.chat-input-area{
    display:flex;padding:10px;background-color:var(--bg-light);flex-shrink:0;align-items:center;transition:background-color var(--transition)
}
.chat-input-area input[type=text]{
    flex-grow:1;padding:10px;border:1px solid var(--border-color);border-radius:20px;margin-right:8px;font-size:.9rem;background:var(--bg-light);color:var(--text-dark);transition:all var(--transition)
}
.chat-input-area input[type=text]:focus{
    outline:0;border-color:var(--accent-primary);box-shadow:0 0 0 .1rem rgba(59,121,132,.2)
}
.chat-input-area button{
    background-color:var(--accent-primary);color:#fff;border:none;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;padding:0;margin-left:5px;flex-shrink:0;transition:background-color var(--transition)
}
.chat-input-area button:hover:not(:disabled){
    background-color:var(--accent-primary-darker)
}
#chatStopAudioBtn:hover:not(:disabled){
    background-color:var(--error-color)
}
.chat-input-area button#chatRecordVoiceBtn.recording{
    background-color:var(--error-color);animation:pulse 1.5s infinite
}
.loading-spinner{
    width:20px;height:20px;border:3px solid hsla(0,0%,100%,.3);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite
}
.chat-input-area button#chatRecordVoiceBtn.mic-inactive{
    background-color:#e9ecef;color:#adb5bd;cursor:not-allowed
}
.chat-input-area button#chatRecordVoiceBtn.mic-inactive:hover{
    background-color:#e9ecef
}
body .chat-messages .message.bot{
    background-color:#e2e8f0;color:var(--text-dark)
}
body .chat-status-bar{
    background-color:#2c3238
}
body .chat-input-area button#chatRecordVoiceBtn.mic-inactive{
    background-color:#e2e8f0;color:#94a3b8
}
body .chat-input-area button#chatRecordVoiceBtn.mic-inactive:hover{
    background-color:#cbd5e1
}
.chat-toggle-container {
  position: fixed;
  bottom: 150px;
  right: 7.5px;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity 0.2s ease-out, visibility 0s;
}
.chat-prompt-label {
  position: relative;
  background: rgba(255, 255, 255, 0.96);
  color: #1e293b;
  padding: 12px 18px;
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 500;
  text-align: center;
  max-width: 240px;
  line-height: 1.45;
  border: 1px solid rgba(34, 211, 238, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
}
.chat-prompt-label::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 30px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.96);
}
body .chat-prompt-label {
    background-color: var(--accent-primary);
}
body .chat-prompt-label::after {
    border-top-color: var(--accent-primary);
}
.chat-toggle-button{
    position: fixed;
    bottom: 20px;
    width:100px;
    height:100px;
    right:0px;
    background:var(--accent-gradient);
    color:#0c1222;
    border:2px solid rgba(255,255,255,0.35);
    border-radius:50%;
    font-size:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 12px 36px rgba(34,211,238,0.35);
    transition:transform .2s ease,box-shadow var(--transition);
    animation: chatPulse 3s ease-in-out infinite;
}
@keyframes chatPulse {
  0%, 100% { box-shadow: 0 12px 36px rgba(34, 211, 238, 0.35); }
  50% { box-shadow: 0 12px 48px rgba(34, 211, 238, 0.55), 0 0 0 8px rgba(34, 211, 238, 0.08); }
}
.chat-toggle-button:hover{
    transform:scale(1.06);
    box-shadow:0 16px 44px rgba(34,211,238,0.45);
}
.chat-toggle-button img {
    width: 120px;
    height: 120px;
}

/* --- 11. Animations & Keyframes --- */
@keyframes animated-gradient-background {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes logo-spin {
  0% { transform: rotateY(0) translateY(-50%); }
  50% { transform: rotateY(180deg) translateY(-50%); }
  to { transform: rotateY(360deg) translateY(-50%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(48px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes blurReveal {
  from { opacity: 0; filter: blur(10px); transform: translateY(20px); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes titleReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(14px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
@keyframes cardReveal {
  from { opacity: 0; transform: perspective(900px) rotateX(8deg) translateY(40px) scale(0.94); }
  to { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0) scale(1); }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); }
  70% { box-shadow: 0 0 0 10px transparent; }
  to { box-shadow: 0 0 0 0 transparent; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.55; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(4px); }
}
@keyframes orbFloat1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-20px, 20px) scale(0.95); }
}
@keyframes orbFloat2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-40px, 30px) scale(1.12); }
}
@keyframes orbFloat3 {
  0%, 100% { transform: translate(0, 0); opacity: 0.35; }
  50% { transform: translate(25px, -25px); opacity: 0.55; }
}
@keyframes iconPop {
  0% { transform: scale(0.6); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes modalEnter {
  from { opacity: 0; transform: scale(0.92) translateY(24px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Scroll-triggered entrance base */
.animate-on-scroll,
.stagger-child {
  opacity: 0;
  will-change: opacity, transform, filter;
}
.animate-on-scroll.is-visible { animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll.animate-title.is-visible { animation: titleReveal 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll.animate-from-left.is-visible { animation: fadeLeft 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll.animate-from-right.is-visible { animation: fadeRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll.animate-scale.is-visible { animation: scaleIn 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-on-scroll.animate-blur.is-visible { animation: blurReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.stagger-child.is-visible { animation: cardReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--stagger-i, 0) * 0.11s); }

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }
.delay-6 { animation-delay: 0.6s; }
.delay-7 { animation-delay: 0.7s; }
.delay-8 { animation-delay: 0.8s; }

/* Scroll progress (top edge) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 10010;
  background: var(--accent-gradient);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.55);
  pointer-events: none;
}

/* --- Interactive wow background --- */
.tech-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 110% 80% at 50% -15%, rgba(34, 211, 238, 0.14), transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 20%, rgba(129, 140, 248, 0.1), transparent 52%),
    radial-gradient(ellipse 55% 45% at 0% 80%, rgba(59, 121, 132, 0.08), transparent 50%),
    linear-gradient(180deg, #f4f7fb 0%, #e9eef4 48%, #eef2f7 100%);
}
.tech-background__aurora {
  position: absolute;
  inset: -35%;
  opacity: 0.35;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(34, 211, 238, 0.14) 55deg,
      transparent 110deg,
      rgba(129, 140, 248, 0.12) 200deg,
      transparent 280deg,
      rgba(59, 121, 132, 0.1) 320deg,
      transparent 360deg);
  animation: auroraSpin 70s linear infinite;
  filter: blur(40px);
}
.tech-background__beams {
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background:
    linear-gradient(105deg, transparent 42%, rgba(34, 211, 238, 0.07) 49%, transparent 56%),
    linear-gradient(-75deg, transparent 38%, rgba(129, 140, 248, 0.06) 46%, transparent 54%);
  background-size: 200% 200%;
  animation: beamSweep 18s ease-in-out infinite alternate;
}
.tech-background__glow {
  position: absolute;
  width: min(720px, 90vw);
  height: min(720px, 90vw);
  left: var(--mouse-x);
  top: var(--mouse-y);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.12) 0%, rgba(129, 140, 248, 0.05) 38%, transparent 68%);
  filter: blur(8px);
  transition: left 0.35s ease-out, top 0.35s ease-out;
  will-change: left, top;
}
.tech-background__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}
.tech-background__mesh {
  position: absolute;
  inset: -15%;
  opacity: 0.65;
  background:
    radial-gradient(ellipse 42% 32% at 18% 28%, rgba(34, 211, 238, 0.1), transparent 72%),
    radial-gradient(ellipse 38% 28% at 82% 62%, rgba(129, 140, 248, 0.09), transparent 70%),
    radial-gradient(ellipse 30% 24% at 48% 88%, rgba(59, 121, 132, 0.08), transparent 68%);
  animation: meshDrift 52s ease-in-out infinite alternate;
}
.tech-background__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, black 18%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 92% 82% at 50% 42%, black 18%, transparent 78%);
  animation: gridPulse 8s ease-in-out infinite alternate;
}
.tech-background__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(34, 211, 238, 0.22) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: 32px 32px;
  opacity: 0.35;
  mask-image: radial-gradient(ellipse 88% 78% at 50% 40%, black 12%, transparent 74%);
  -webkit-mask-image: radial-gradient(ellipse 88% 78% at 50% 40%, black 12%, transparent 74%);
}
.tech-background__circuit {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2322d3ee' stroke-width='0.6' opacity='0.9'%3E%3Cpath d='M20 40h60v40H20zM160 20h60v60h-60zM40 160h40v60H40zM140 140h80v40h-80z'/%3E%3Cpath d='M80 60h40M120 40v40M100 160v40M180 80v60M60 120h80'/%3E%3Ccircle cx='80' cy='60' r='2.5' fill='%2322d3ee'/%3E%3Ccircle cx='120' cy='80' r='2.5' fill='%23818cf8'/%3E%3Ccircle cx='60' cy='120' r='2.5' fill='%2322d3ee'/%3E%3Ccircle cx='180' cy='80' r='2.5' fill='%233B7984'/%3E%3Ccircle cx='100' cy='200' r='2.5' fill='%23818cf8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 280px 280px;
  animation: circuitDrift 120s linear infinite;
}
.tech-background__scanlines {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 4px,
    rgba(148, 163, 184, 0.022) 4px,
    rgba(148, 163, 184, 0.022) 5px
  );
}
.tech-background__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(148, 163, 184, 0.12) 100%);
}
@keyframes meshDrift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(2%, -1.5%) scale(1.03); }
}
@keyframes auroraSpin {
  to { transform: rotate(360deg); }
}
@keyframes beamSweep {
  0% { background-position: 0% 0%, 100% 100%; }
  100% { background-position: 100% 100%, 0% 0%; }
}
@keyframes gridPulse {
  0% { opacity: 0.85; }
  100% { opacity: 1; }
}
@keyframes circuitDrift {
  to { background-position: 280px 280px; }
}

.ambient-orbs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.ambient-orbs .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.28;
  mix-blend-mode: multiply;
}
.ambient-orbs .orb-1 {
  width: 520px;
  height: 520px;
  top: 4%;
  right: -12%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.55), transparent 70%);
  animation: orbFloat1 32s ease-in-out infinite;
}
.ambient-orbs .orb-2 {
  width: 440px;
  height: 440px;
  bottom: 8%;
  left: -10%;
  background: radial-gradient(circle, rgba(129, 140, 248, 0.5), transparent 70%);
  animation: orbFloat2 40s ease-in-out infinite;
}
.ambient-orbs .orb-3 {
  width: 360px;
  height: 360px;
  top: 46%;
  left: 40%;
  background: radial-gradient(circle, rgba(59, 121, 132, 0.45), transparent 70%);
  animation: orbFloat3 36s ease-in-out infinite;
}
.ambient-orbs .orb-4 {
  width: 280px;
  height: 280px;
  top: 18%;
  left: 12%;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.35), transparent 72%);
  animation: orbFloat2 44s ease-in-out infinite reverse;
  opacity: 0.28;
}

main, footer, .info-banner { position: relative; z-index: 1; }

/* Keep header pinned — must not inherit position:relative from layout rules above */
#siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

/* Info banner shimmer */
.info-banner { overflow: hidden; }
.info-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.12), transparent);
  animation: shimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Product horizontal showcase */
.products-showcase {
  position: relative;
  margin: 0 -12px;
  padding: 8px 0 16px;
}
.products-showcase-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-primary-darker);
  animation: hintPulse 2.2s ease-in-out infinite;
}
.products-showcase-hint .hint-arrow {
  display: inline-block;
  font-size: 1.1rem;
  opacity: 0.7;
}
.products-showcase-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding: 24px;
  padding: 16px 24px 32px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(34, 211, 238, 0.5) transparent;
}
.products-showcase-track::-webkit-scrollbar { height: 6px; }
.products-showcase-track::-webkit-scrollbar-thumb {
  background: var(--accent-gradient);
  border-radius: 999px;
}
#our-products .products-showcase-track .product-card {
  flex: 0 0 min(360px, 86vw);
  max-width: none;
  scroll-snap-align: center;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.2s ease, box-shadow var(--transition), border-color var(--transition);
}
#our-products .products-showcase-track .product-card:hover,
#our-products .products-showcase-track .product-card.is-tilted {
  --lift: -8px;
}
#our-products .products-showcase-track .product-card .product-image img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#our-products .products-showcase-track .product-card:hover .product-image img {
  transform: scale(1.06);
}
.showcase-progress {
  height: 3px;
  background: rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  margin: 0 24px 8px;
  overflow: hidden;
}
.showcase-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  border-radius: 999px;
  transition: width 0.15s ease-out;
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.4);
}

/* Our Products — interactive mind map */
.products-mindmap {
  position: relative;
  margin: 8px 0 0;
}
.products-mindmap-hint {
  text-align: center;
  margin-bottom: 22px;
  font-family: var(--font-heading);
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-primary-darker);
}
.products-mindmap-viewport {
  position: relative;
  width: 100%;
  height: min(78vh, 720px);
  min-height: 480px;
  border-radius: 28px;
  border: 1px solid rgba(34, 211, 238, 0.32);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.45) 18%, transparent 42%),
    radial-gradient(ellipse 70% 55% at 12% 16%, rgba(34, 211, 238, 0.22) 0%, transparent 52%),
    radial-gradient(ellipse 65% 50% at 90% 84%, rgba(129, 140, 248, 0.16) 0%, transparent 48%),
    linear-gradient(155deg, #f0f9ff 0%, #ecfeff 38%, #e0f2fe 72%, #f8fafc 100%);
  backdrop-filter: blur(12px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  box-shadow:
    inset 0 0 80px rgba(34, 211, 238, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 16px 48px rgba(8, 145, 178, 0.12);
}
.products-mindmap-viewport.is-dragging { cursor: grabbing; }
.mindmap-zoom-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 12;
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.mindmap-zoom-controls button {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(34, 211, 238, 0.35);
  background: rgba(255, 255, 255, 0.95);
  color: #0f172a;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.1);
  transition: background 0.2s, border-color 0.2s;
}
.mindmap-zoom-controls button:hover {
  background: rgba(34, 211, 238, 0.18);
  border-color: var(--accent-primary);
}
.mindmap-zoom-controls button[data-zoom="reset"] { font-size: 0.95rem; }
.products-mindmap-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1000px;
  height: 760px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
}
.products-mindmap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.products-mindmap-svg line {
  stroke: rgba(8, 145, 178, 0.28);
  stroke-width: 2;
  transition: stroke 0.25s, stroke-width 0.25s;
}
.products-mindmap-svg line.is-active {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45));
}
.products-mindmap-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 158px;
  height: 158px;
  border-radius: 50%;
  border: 2px solid rgba(34, 211, 238, 0.45);
  background: radial-gradient(circle at 30% 30%, rgba(34, 211, 238, 0.1), #ffffff 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  z-index: 12;
  padding: 12px;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.92),
    0 0 48px rgba(34, 211, 238, 0.28),
    0 8px 28px rgba(15, 23, 42, 0.08);
  transition: box-shadow 0.3s, border-color 0.3s;
}
.products-mindmap-center:hover,
.products-mindmap-center.is-active {
  border-color: var(--accent-primary);
  box-shadow: 0 0 56px rgba(34, 211, 238, 0.32);
}
.products-mindmap-center img {
  width: 72px;
  height: auto;
  object-fit: contain;
}
.products-mindmap-center span {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  text-align: center;
  line-height: 1.15;
}
.products-mindmap-center span em {
  font-style: normal;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.products-mindmap-node {
  position: absolute;
  width: 124px;
  height: 124px;
  margin: -62px 0 0 -62px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid rgba(148, 163, 184, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  z-index: 4;
  padding: 10px;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, opacity 0.25s;
}
.products-mindmap-node .node-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(0, 0, 0, 0.2);
}
.products-mindmap-node .node-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  line-height: 1.18;
  max-width: 108px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.products-mindmap-node:hover {
  transform: scale(1.1);
  z-index: 6;
  box-shadow: 0 10px 32px rgba(34, 211, 238, 0.2);
}
.products-mindmap-node.is-active {
  transform: scale(1.14);
  z-index: 8;
  box-shadow: 0 0 36px rgba(34, 211, 238, 0.35);
}
.products-mindmap-node.is-dimmed { opacity: 0.38; }
/* Mobile product ecosystem: company circle and text-only branches. */
.products-mobile-tree { display: none; }
@media (max-width: 768px) {
  #our-products .products-mindmap { display: none; }
  .products-mobile-tree {
    --tree-gap: 24px;
    --tree-line: rgba(8, 145, 178, 0.45);
    display: grid;
    grid-template-columns: clamp(64px, 18vw, 92px) minmax(0, 1fr);
    column-gap: var(--tree-gap);
    align-items: center;
    margin: 24px 0 8px;
    padding: 8px 0;
  }
  .products-mobile-tree__brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(34, 211, 238, 0.5);
    background: radial-gradient(circle at 30% 30%, #ecfeff, #fff 75%);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.18);
  }
  .products-mobile-tree__brand::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--tree-gap) / 2 + 2px);
    border-top: 2px solid var(--tree-line);
  }
  .products-mobile-tree__brand img {
    display: block;
    width: 76%;
    height: 76%;
    object-fit: contain;
    border-radius: 50%;
  }
  .products-mobile-tree__branches {
    min-width: 0;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .products-mobile-tree__branches > li {
    position: relative;
    padding: 7px 0;
    margin: 0;
  }
  .products-mobile-tree__branches > li::before {
    content: '';
    position: absolute;
    left: calc(var(--tree-gap) / -2);
    top: 0;
    bottom: 0;
    border-left: 2px solid var(--tree-line);
  }
  .products-mobile-tree__branches > li:first-child::before { top: 50%; }
  .products-mobile-tree__branches > li:last-child::before { bottom: 50%; }
  .products-mobile-tree__branches > li::after {
    content: '';
    position: absolute;
    left: calc(var(--tree-gap) / -2);
    top: 50%;
    width: calc(var(--tree-gap) / 2);
    border-top: 2px solid var(--branch-accent, var(--tree-line));
    pointer-events: none;
  }
  .products-mobile-tree__product {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-height: 98px;
    padding: 13px 25px 13px 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-left: 3px solid var(--branch-accent, #0891b2);
    border-radius: 14px;
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
    touch-action: pan-y;
  }
  .products-mobile-tree__product::after {
    content: '›';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--branch-accent, #0891b2);
    font-size: 1.4rem;
  }
  .products-mobile-tree__product:focus-visible {
    outline: 3px solid var(--branch-accent, #0891b2);
    outline-offset: 3px;
  }
  .products-mobile-tree__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .products-mobile-tree__summary {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
}

/* Centered product detail modal */
.product-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9500;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 3vw, 32px);
  background: rgba(4, 8, 18, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.product-detail-overlay.is-visible {
  display: flex;
  animation: productOverlayIn 0.28s ease;
}
.product-detail-modal {
  --product-accent: #22d3ee;
  --product-accent-bg: rgba(34, 211, 238, 0.1);
  position: relative;
  width: min(920px, 100%);
  max-height: min(92vh, 900px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background:
    linear-gradient(180deg, var(--product-accent-bg) 0%, transparent 28%),
    var(--bg-surface);
  border: 2px solid color-mix(in srgb, var(--product-accent) 45%, transparent);
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.55),
    0 0 48px color-mix(in srgb, var(--product-accent) 18%, transparent);
  animation: productModalIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-detail-modal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--product-accent), color-mix(in srgb, var(--product-accent) 55%, #fff));
  border-radius: 22px 22px 0 0;
  z-index: 2;
}
.product-detail-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--product-accent) 35%, transparent);
  background: color-mix(in srgb, var(--product-accent-bg) 80%, var(--bg-surface));
  color: var(--product-accent);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.product-detail-modal__close:hover {
  background: var(--product-accent-bg);
  border-color: var(--product-accent);
  transform: scale(1.05);
}
.product-detail-modal__scroll {
  overflow-y: auto;
  padding: clamp(20px, 3vw, 28px) clamp(24px, 4vw, 40px) clamp(28px, 4vw, 40px);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.product-detail-modal__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.product-detail-modal__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
}
.product-detail-modal .pop-image-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--product-accent) 30%, transparent);
  background: color-mix(in srgb, var(--product-accent-bg) 60%, rgba(0, 0, 0, 0.12));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-accent) 8%, transparent);
}
.product-detail-modal .pop-image {
  display: block;
  width: 100%;
  max-height: min(480px, 50vh);
  min-height: 220px;
  object-fit: contain;
  cursor: zoom-in;
  transition: opacity 0.25s;
}
.product-detail-modal .pop-image:hover { opacity: 0.92; }
.product-detail-modal .pop-image-hint {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--product-accent);
  padding: 10px 12px;
  background: var(--product-accent-bg);
  border-top: 1px solid color-mix(in srgb, var(--product-accent) 22%, transparent);
}
.product-detail-modal__text {
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--product-accent) 18%, transparent);
}
.product-detail-modal h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.65rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 10px;
  padding-right: 48px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--product-accent);
}
.product-detail-modal .pop-summary {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  color: color-mix(in srgb, var(--product-accent) 75%, var(--text-secondary));
  margin-bottom: 18px;
  line-height: 1.55;
}
.product-detail-modal .pop-body {
  font-size: clamp(0.98rem, 1.2vw, 1.06rem);
  line-height: 1.78;
  color: var(--text-secondary);
}
.product-detail-modal .pop-body p { margin-bottom: 12px; }
.product-detail-modal .pop-body ul {
  margin: 10px 0 14px 20px;
}
.product-detail-modal .pop-body li::marker {
  color: var(--product-accent);
}
@keyframes productOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes productModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@media (max-width: 640px) {
  .product-detail-modal .pop-image {
    min-height: 180px;
    max-height: 38vh;
  }
}
.image-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: zoom-out;
}
.image-lightbox.is-open {
  display: flex;
}
.image-lightbox img {
  max-width: min(96vw, 1400px);
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.image-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.image-lightbox__close:hover { background: rgba(255, 255, 255, 0.2); }
.products-mindmap-node {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(34, 211, 238, 0.35);
}
@media (max-width: 768px) {
  .products-mindmap-viewport { min-height: 400px; height: min(70vh, 560px); }
  .products-mindmap-node { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
  .products-mindmap-node .node-label { font-size: 0.7rem; max-width: 96px; }

  #products .product-grid,
  #servicesGrid {
    flex-direction: column;
    align-items: stretch;
  }
  #products .product-card {
    flex: 1 1 auto;
    max-width: 100%;
    width: 100%;
  }
}

/* Service cards: 3D tilt + icon pop */
#products .product-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --lift: 0px;
  min-width: 0;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift));
  transition: transform 0.2s ease, box-shadow var(--transition), border-color var(--transition);
}
#products .product-card:hover,
#products .product-card.is-tilted { --lift: -8px; }
#products .product-card.is-visible .product-icon {
  animation: iconPop 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--stagger-i, 0) * 0.08s + 0.2s);
}

.about-image.parallax-float {
  transition: transform 0.1s linear;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll, .stagger-child { opacity: 1 !important; transform: none !important; animation: none !important; filter: none !important; }
  .ambient-orbs, .info-banner::after, .products-showcase-hint, .products-mindmap-hint { display: none; animation: none; }
  .tech-background__mesh, .tech-background__aurora, .tech-background__beams, .tech-background__circuit { animation: none !important; }
  .tech-background__glow { display: none; }
  .tech-background__particles { display: none; }
  .scroll-progress { display: none; }
  #products .product-card, #our-products .product-card { transform: none !important; }
  .chat-toggle-button { animation: none !important; }
  .parallax-float { transform: none !important; }
}

/* --- 12. MODAL STYLES --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    padding: 20px;
}
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s 0s;
}
.modal-content {
    background-color: var(--bg-off-white);
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(34, 211, 238, 0.15);
    max-width: 900px;
    width: 100%;
    position: relative;
    transform: scale(0.92) translateY(20px);
    opacity: 0;
    border: 1px solid var(--border-color);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.modal-overlay.active .modal-content {
    opacity: 1;
    animation: modalEnter 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.modal-close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    z-index: 10;
    color: rgba(30, 41, 59, 0.65);
}
.modal-close-button:hover {
    color: var(--text-dark);
    transform: scale(1.1);
}
.modal-header {
    padding: 20px 70px 20px 30px; 
    transition: background-color var(--transition);
    flex-shrink: 0;
    text-align: left;
}
.modal-title {
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--text-dark);
    line-height: 1.2;
}
.modal-main-content {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    align-items: stretch;
}
.modal-body {
    flex: 1.5;
    padding: 30px 40px;
    overflow-y: auto;
    background-color: var(--bg-light);
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.modal-body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.modal-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 1.2em;
}
.modal-body p:last-child {
    margin-bottom: 0;
}
.modal-slogan {
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 25px;
    color: var(--text-dark);
}
.modal-image {
    flex: 1;
    width: 0;
    object-fit: cover;
    background-color: var(--bg-off-white);
}
/* Modal Theming */
.modal-content.chatbot .modal-header { background-color: var(--modal-chatbot-accent-color); }
.modal-content.dataanalysis .modal-header { background-color: var(--modal-dataanalysis-accent-color); }
.modal-content.machinelearning .modal-header { background-color: var(--modal-machinelearning-accent-color); }
.modal-content.nlp .modal-header { background-color: var(--modal-nlp-accent-color); }
.modal-content.automation .modal-header { background-color: var(--modal-automation-accent-color); }
.modal-content.security .modal-header { background-color: var(--modal-security-accent-color); }
.modal-content.aiworkers .modal-header { background-color: var(--modal-aiworkers-accent-color); }
.modal-content.chatbot .modal-slogan { color: var(--modal-chatbot-accent-color); }
.modal-content.dataanalysis .modal-slogan { color: var(--modal-dataanalysis-accent-color); }
.modal-content.machinelearning .modal-slogan { color: var(--modal-machinelearning-accent-color); }
.modal-content.nlp .modal-slogan { color: var(--modal-nlp-accent-color); }
.modal-content.automation .modal-slogan { color: var(--modal-automation-accent-color); }
.modal-content.security .modal-slogan { color: var(--modal-security-accent-color); }
.modal-content.aiworkers .modal-slogan { color: var(--modal-aiworkers-accent-color); }
body .modal-body {
    background-color: var(--bg-light);
}

/*
=================================================================
  13. RESPONSIVE DESIGN (NEW)
=================================================================
*/

/* --- Tablet and larger mobile screens --- */
@media (max-width: 1024px) {
  .company-header {
    padding: 0 20px;
  }
  .logo-img {
    left: 40px;
    width: 150px;
    height: 150px;
  }
  .company-title {
    margin-left: 80px;
  }
  .company-title h1 {
    font-size: 3rem;
  }
  .company-title .tagline {
    font-size: 0.95rem;
  }
  .product-card {
    /* Allow two cards per row on tablets */
    flex-basis: calc(50% - 15px);
  }
}


/* --- Mobile screens --- */
@media (max-width: 1024px) {
  #siteHeader {
    position: static;
    left: auto;
    right: auto;
    width: auto;
  }

   #siteHeader nav {
    display: none;
  }


  .chat-prompt-label {
    display: none !important;
  }
  /* --- General Typography & Layout --- */
  body {
    line-height: 1.7; 
  }
  section {
    padding: 60px 0;
  }
  section h2 {
    font-size: 2.1rem;
    margin-bottom: 40px;
  }
  section p, section ul {
    font-size: 1rem;
  }
  .container, .container-wide {
    padding: 0 15px;
  }
  
  /* --- Header & Navigation --- */
  #siteHeader .container {
    gap: 0;
  }
  .company-header {
    flex-direction: column;
    min-height: auto;
    padding: 15px 0;
    text-align: center;
  }
  .logo-img {
    position: static; /* Remove absolute positioning */
    transform: none; /* Reset transform */
    width: 120px;
    height: 120px;
    margin: 0 auto 15px auto; /* Center logo and add space below */
    animation: none; /* Optional: disable spin on mobile for performance */
  }
  .company-title {
    margin-left: 0; /* Reset margin */
  }
  .company-title h1 {
    font-size: 2.2rem;
  }
  .company-title .tagline {
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    word-spacing: 0.1em;
  }
  .language-selector {
    top: 15px;
    right: 15px;
    gap: 10px;
  }
  .language-selector img {
    width: 30px;
  }
  nav ul {
    gap: 8px;
    margin-top: 15px;
  }
  nav a {
    font-size: 0.9rem;
    padding: 6px 10px;
  }

  /* --- Sections --- */
  #about .about-content,
  .contact-container {
    flex-direction: column;
    gap: 30px;
  }
  .about-image {
    max-width: 100%;
    order: -1; /* Move image above the text on mobile */
  }
  #about .about-text {
    text-align: center;
  }

  /* --- Products --- */
  .product-grid {
    gap: 20px;
  }
  .product-card {
    padding: 25px 20px;
    text-align: center;
  }
  .product-icon {
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Contact Form --- */
  .contact-form-container, .contact-info-card {
    padding: 25px;
  }
  .contact-form-area {
    order: -1; /* Move form to the top on mobile */
  }
  .contact-info-area {
    text-align: center;
    order: 1; /* Move info block to the bottom on mobile */
  }
  .contact-info-item {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  
  /* --- Footer --- */
  footer p {
    flex-direction: column;
    gap: 5px;
  }
  
  /* --- Fixed UI Elements (Chat) --- */
  .chat-toggle-container {
    bottom: 80px; 
    right: 10px;
    gap: 8px;
  }
  .chat-prompt-label {
    max-width: 180px;
    font-size: 0.85rem;
    padding: 8px 12px;
  }
  .chat-toggle-button {
    width: 75px;
    height: 75px;
    bottom: 15px; 
    right: 15px;
  }
  .chat-toggle-button img {
    width: 90px;
    height: 90px;
  }
  .chat-widget.open {
    /* Make the chat window more prominent on mobile */
    width: 95vw;
    height: 85vh;
    max-width: 500px;
    max-height: 90vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 15px;
  }
  .resize-handle {
    display: none; /* Resizing is not practical on touch devices */
  }

  /* --- Modal Window --- */
  .modal-overlay {
    padding: 10px;
    align-items: flex-end; /* Align to bottom for easier reach */
  }
  .modal-overlay.active .modal-content {
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
  }
  .modal-content {
    max-height: 85vh;
    width: 100%;
    border-radius: 20px 20px 0 0; /* Rounded corners only on top */
    transform: translateY(100%); /* Start off-screen */
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.35s ease-out;
  }
  .modal-main-content {
    flex-direction: column;
    
  }
  .modal-image {
    flex: none; /* Reset flex properties */
    width: 100%;
    height: 180px;
    order: -1; /* Display image on top */
  }
  .modal-header {
    padding: 15px 50px 15px 20px;
  }
  .modal-close-button {
    font-size: 2.2rem;
    top: 5px;
    right: 10px;
  }
  .modal-title {
    font-size: 1.7rem;
  }
  .modal-body {
    padding: 20px;
  }
  .modal-slogan {
    font-size: 1.25rem;
  }


}



/* --- 14. MOBILE FLOATING NAVIGATION (NEW) --- */

/* The floating menu button */
.mobile-menu-toggle {
  display: none; /* Hidden on desktop */
  position: fixed;
  top: 20px;
  left: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--accent-primary);
  border: none;
  border-radius: 50%;
  z-index: 1005; /* High z-index to be on top */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

  /* Flexbox for centering the spans */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 12px;
}

.mobile-menu-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}

/* The full-screen navigation overlay */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1004; /* Just below the toggle button */
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.mobile-nav-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

/* The navigation links container inside the overlay */
.mobile-nav-overlay .mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.mobile-nav-overlay .mobile-nav li {
  margin: 10px 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.mobile-nav-overlay.open .mobile-nav li {
  opacity: 1;
  transform: translateY(0);
  transition-delay: var(--nav-delay, 0.1s);
}

.mobile-nav-overlay .mobile-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem; /* Big, tappable links */
  font-weight: 600;
  padding: 10px;
  display: block;
  transition: color 0.2s ease;
}

.mobile-nav-overlay .mobile-nav a:hover {
  color: var(--accent-primary);
}

/* Animate the hamburger icon to an 'X' */
.mobile-menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.mobile-menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}


/* Only show the floating button on mobile (matches the max-width:1024px header rules) */
@media (min-width: 1025px) {
  .mobile-menu-toggle {
    display: none;
  }
}

/* --- Alternative Keyframes for a Stronger Pulse --- */




/* Hide the hero overlay on mobile */
@media (max-width: 1000px) {
  #heroSection {
    display: none !important;
  }
}


/* === Bulletproof: keep header nav on one line on desktop === */
@media (min-width: 1025px) {
  /* Make the nav span the full header width (not shrink to content) */
  #siteHeader .container {
    align-items: stretch !important;
  }
  #siteHeader nav {
    width: 100% !important;
    overflow-x: auto;               /* fallback: sideways scroll if needed */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #siteHeader nav::-webkit-scrollbar { display: none; }

  #siteHeader nav ul {
    display: flex !important;
    flex-wrap: nowrap !important;   /* absolutely no wrapping */
    justify-content: center;
    gap: 14px !important;           /* a hair tighter */
  }
  #siteHeader nav li { flex: 0 0 auto !important; }  /* prevent flexing that can shove items */
  #siteHeader nav a {
    white-space: nowrap !important; /* prevent per-link line breaks */
    font-size: 0.98rem;
    padding: 6px 10px;
  }

  #siteHeader.is-scrolled nav {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    justify-content: stretch !important;
  }

  #siteHeader.is-scrolled nav ul {
    justify-content: space-evenly !important;
    gap: 4px 8px !important;
    margin-top: 0 !important;
    width: 100% !important;
    min-width: min-content !important;
    max-width: 100% !important;
  }

  #siteHeader.is-scrolled nav a {
    font-size: 0.88rem !important;
    padding: 6px 8px !important;
  }

  html[lang=el] #siteHeader.is-scrolled nav ul {
    justify-content: space-between !important;
    gap: 2px 4px !important;
  }

  html[lang=el] #siteHeader.is-scrolled nav a {
    font-size: 0.76rem !important;
    padding: 5px 5px !important;
  }
}


/* Our Products (distinct from Our Solutions) */
section#our-products { background: transparent; }
section#our-products::before { display: none; }
#our-products .product-grid:not(.products-showcase-track) .product-card {
  background: var(--bg-surface);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
body section#our-products { background: transparent; }
body #our-products .product-grid .product-card {
  background: rgba(255, 255, 255, 0.92); border-color: rgba(148, 163, 184, 0.35);
}


/* Force the mobile overlay menu to stack vertically */
@media (max-width: 1024px) {
  .mobile-nav-overlay .mobile-nav ul {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin: 0;
  }
  .mobile-nav-overlay .mobile-nav li {
    margin: 0; /* spacing handled by gap */
  }
  .mobile-nav-overlay .mobile-nav a {
    display: block;
    font-size: 2rem;       /* your existing size */
    padding: 10px 0;
  }
  /* Optional: remove the desktop underline animation inside overlay */
  .mobile-nav-overlay .mobile-nav a::after { display: none; }
}


/* Default: desktop & tablets → bottom-right */
.chat-widget {
  bottom: 20px;
  right: 20px;
  left: auto;
  top: auto;
}

/* Phones keep the centered modal-style you already set */
@media (max-width: 768px) {
  .chat-widget {
    bottom: auto;
    right: auto;
  }
  .chat-widget.open {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Optional: tighten tablet sizing and force bottom-right */
@media (min-width: 769px) and (max-width: 1024px) {
  .chat-widget {
    width: 460px;   /* tweak as you like */
    height: 640px;  /* tweak as you like */
  }
  .chat-widget.open {
    top: auto !important;
    left: auto !important;
    bottom: 20px !important;
    right: 20px !important;
    transform: none !important;
  }
}

/* Tablets: keep images fully visible inside cards */
@media (min-width: 769px) and (max-width: 1024px) {
  /* Any inline images placed in cards */
  .product-card img,
  #productCardsGrid img {
    width: 100%;
    height: auto;          /* keeps aspect ratio */
    object-fit: contain;   /* no cropping */
    display: block;
  }

  /* Just in case a card has overflow set somewhere */
  .product-card {
    overflow: visible;
  }
}
/* For elements that use background images inside cards */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-card .card-media-bg {
    background-size: contain;     /* fit fully */
    background-position: center;
    background-repeat: no-repeat;
    min-height: 200px;            /* give it some space to render */
  }
}
/* If you have a dedicated media wrapper in the card */
.product-card .card-media, 
#productCardsGrid .card-media {
  width: 100%;
  aspect-ratio: 16 / 9;   /* or 4/3 if that fits better */
  overflow: hidden;
}
.product-card .card-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* switch to 'contain' if you want zero crop */
}

/* Force single column on phones */
@media (max-width: 768px) {
  #our-products .product-grid {
    display: grid; /* keep grid instead of flex if you prefer */
    grid-template-columns: 1fr !important;
    gap: 20px;
  }

}


/* Make the input shrink to make room for buttons */
.chat-input-area {
  display: flex;               /* you already have this, re-state for clarity */
  align-items: center;
  gap: 8px;                    /* replaces per-element margins for cleaner layout */
}

.chat-input-area input[type="text"] {
  flex: 1 1 auto;              /* grow when space, shrink when not */
  min-width: 0;                /* 🔑 allows shrinking in a flex row */
  margin-right: 0 !important;  /* rely on gap instead of margin-right */
}

.chat-input-area button {
  flex: 0 0 auto;              /* buttons don’t shrink */
  margin-left: 0 !important;   /* rely on gap instead of per-button margins */
}

/* Mobile: slightly smaller buttons so 3 always fit */
@media (max-width: 768px) {
  .chat-input-area {
    gap: 6px;
  }
  #chatStopAudioBtn,
  #chatSendTextBtn,
  #chatRecordVoiceBtn {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}


/* === LIST & TEXT FORMATTING === */
.product-card ul,
.modal-content.product ul,
.message.bot ul {
  list-style: disc;
  list-style-position: inside;
  margin: 0.4rem 0 0.6rem 0;
  padding-left: 0;
}

.product-card li::marker,
.modal-content.product li::marker,
.message.bot li::marker {
  color: var(--accent, #3b82f6);
}

.product-card strong,
.modal-content.product strong,
.message.bot strong {
  color: var(--accent, #3b82f6);
  font-weight: 700;
}

.product-card p,
.modal-content.product p,
.message.bot p,
.product-card li,
.modal-content.product li,
.message.bot li {
  line-height: 1.5;
}

/* === GENERIC MEDIA === */
.product-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* === PRODUCT MODAL OVERLAY & STRUCTURE === */
.product-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.product-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90%;
  overflow-y: auto;
  position: relative;
}

.product-modal-image {
  width: 100%;
  height: 220px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.product-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-modal-title {
  margin: 1rem;
  font-size: 1.5rem;
}

.product-modal-body {
  padding: 0 1rem 1rem;
}

.modal-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #444;
}


.modal-close:hover {
  color: #222 !important;
}
/* === SERVICE MODAL === */
#serviceModalContent.product {
  --accent: #3b82f6;
  --accent-bg: rgba(59,130,246,0.1);
  border-radius: 12px;
  overflow: hidden;
  max-width: 800px;
  max-height: 100vh;
  height: auto;
}

#serviceModalContent.product #modalImage {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: 30vh !important;
  object-fit: contain !important;
  border-radius: 12px !important;
  -webkit-clip-path: inset(0 round 12px);
  clip-path: inset(0 round 12px);
  margin: 0 0 1rem 0 !important;
}

#serviceModalContent.product #modalTitle {
  margin: 1rem 1rem 0.5rem;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--accent, #3b82f6) !important;
}

#serviceModalContent.product .modal-slogan {
  margin: 0 1rem 0.75rem;
  font-weight: 500;
  color: #555;
}

#serviceModalContent.product #modalBody {
  padding: 0 1rem 1.25rem;
}

#serviceModalContent.product #modalBody ul {
  margin: 0.5rem 0 0.75rem 1.25rem;
}

/* === PRODUCT MODAL CONTENT === */
.modal-content.product {
  display: block;
}

.modal-content.product #modalImage {
  display: block;
  width: 100% !important;
  height: 600px;
  max-height: 30vh !important;
  object-fit: contain !important;
  margin: 0 0 1rem 0 !important;
  float: none !important;
  clear: both;
  border-radius: 12px !important;
  -webkit-clip-path: inset(0 round 12px);
  clip-path: inset(0 round 12px);
}

.modal-content.product #modalBody img {
  float: none !important;
  max-width: 100% !important;
}

.modal-content.product #modalTitle {
  margin: 0 1rem 0.5rem;
}

.modal-content.product .modal-slogan {
  margin: 0 1rem 0.75rem;
  color: #555;
}

.modal-content.product #modalBody {
  padding: 0 1rem 1.25rem;
  clear: both;
}

/* === PRODUCT MODAL WRAPPERS === */
#serviceModalContent.product .product-modal-image,
#serviceModalContent.product .modal-image,
#serviceModalContent.product .media,
#serviceModalContent.product .figure {
  height: auto !important;
  max-height: 300px !important;
  overflow: visible !important;
  float: none !important;
}

/* === TITLE COLORS === */
#serviceModalContent:not(.product) #modalTitle {
  color: #fff !important;
}

/* === SCROLLABLE BEHAVIOR === */
#serviceModalContent {
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#serviceModalContent::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@media (max-width: 768px) {
  #serviceModalContent.product {
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* === PRODUCT CARD GRID === */
.product-card .product-image,
#productCardsGrid .product-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(129, 140, 248, 0.08));
  position: relative;
  border: 1px solid rgba(148, 163, 184, 0.15);
}

.product-card .product-image > img,
#productCardsGrid .product-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* Product pop-up only */
#serviceModalContent.product .modal-close-button {
  color: #ef4444 !important;      /* red */
}
#serviceModalContent.product .modal-close-button:hover {
  color: #b91c1c !important;      /* darker on hover */
}

/* === PRESENTATION & DEMO CTA BUTTON === */
.demo-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  border: none;
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #0c1222;
  background-image: var(--accent-gradient);
  box-shadow: 0 14px 30px rgba(34, 211, 238, 0.28);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
  white-space: nowrap;
}

.demo-cta-btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.6);
  filter: brightness(1.06);
}

.demo-cta-btn:active {
  transform: translateY(1px) scale(0.99);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.5);
}

/* Compact version for header */
.demo-cta-header-btn {
  font-size: 0.8rem;
  padding: 0.45rem 1.2rem;
}

/* Centered wrapper under section titles */
.demo-cta-wrapper {
  margin: 0 auto 30px;
  display: flex;
  justify-content: center;
}

/* Position of the header button: under the flags */
.presentation-demo-header-btn {
  position: absolute;
  top: 70px;   /* tweak if needed */
  right: 20px; /* aligned with flags */
}

@media (max-width: 1024px) {
  .presentation-demo-header-btn {
    top: 70px;
    right: 15px;
    font-size: 0.75rem;
    padding: 0.4rem 0.9rem;
  }
}


@media (max-width: 768px) {
  .presentation-demo-header-btn {
    display: none !important;
  }
}

/* --- INFO BANNER: positive information-first message --- */
.info-banner {
  position: relative;
  z-index: 999;
  padding: 14px 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(236, 244, 252, 0.9) 50%, rgba(255, 255, 255, 0.92) 100%);
  border-bottom: 1px solid rgba(148, 163, 184, 0.28);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
}

.info-banner .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: left;
}

.info-banner-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1rem;
  color: #0c1222;
  background: var(--accent-gradient);
  box-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}

.info-banner p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #475569;
  max-width: 920px;
}

.info-banner p strong {
  color: #0891b2;
  font-weight: 600;
}

section h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-dark);
}

.mobile-menu-toggle {
  background: var(--accent-gradient) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.mobile-menu-toggle span {
  background-color: #0c1222 !important;
}

@media (max-width: 768px) {
  .info-banner .container {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .info-banner p {
    font-size: 0.9rem;
  }
}

/* --- B2B homepage narrative sections --- */
.homepage-hero {
  padding: clamp(48px, 8vw, 88px) 0 clamp(40px, 6vw, 64px);
}
.homepage-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.homepage-hero__eyebrow {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 14px;
}
.homepage-hero h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.35rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text-dark);
  margin-bottom: 18px;
}
.homepage-hero__sub {
  font-size: clamp(1.05rem, 1.8vw, 1.22rem);
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 28px;
  max-width: 38rem;
}
.homepage-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.homepage-hero__visual {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(34, 211, 238, 0.22);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
  background: var(--bg-surface);
}
.homepage-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.homepage-hero__pipeline {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(28px, 4vw, 40px);
  padding: 6px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 244, 252, 0.9) 100%);
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(34, 211, 238, 0.1);
}
.pipeline-step {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 14px;
  text-align: center;
  min-width: 120px;
}
.pipeline-step__num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: #0c1222;
  background: var(--accent-gradient);
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.35);
}
.pipeline-step__label {
  font-family: var(--font-heading);
  font-size: clamp(0.95rem, 1.4vw, 1.12rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
}
.pipeline-connector {
  flex: 0 0 auto;
  align-self: center;
  width: 28px;
  height: 2px;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0.2));
  position: relative;
}
.pipeline-connector::after {
  content: '';
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #22d3ee;
}
@media (max-width: 640px) {
  .homepage-hero__pipeline {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
  }
  .pipeline-connector {
    width: 2px;
    height: 20px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(34, 211, 238, 0.85), rgba(34, 211, 238, 0.2));
  }
  .pipeline-connector::after {
    right: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(50%);
    border: 6px solid transparent;
    border-top-color: #22d3ee;
    border-left-color: transparent;
  }
}

.b2b-section { padding: clamp(48px, 6vw, 72px) 0; }
.b2b-section--compact { padding: clamp(32px, 4vw, 48px) 0; }
.b2b-section--alt {
  background: rgba(255, 255, 255, 0.48);
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}
body .b2b-section--alt { background: rgba(255, 255, 255, 0.52); }

.b2b-lead {
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 46rem;
  margin: 0 auto 32px;
  text-align: center;
}
.b2b-lead--left { text-align: left; margin-left: 0; }

.credibility-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 16px;
}
.credibility-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg-surface);
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.pain-grid, .pillar-grid, .use-case-grid, .steps-grid, .persona-grid, .innovation-grid {
  display: grid;
  gap: 20px;
}
.pain-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 28px; }
.pillar-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 28px; }
.use-case-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 28px; }
.steps-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 28px; }
.persona-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 28px; }
.innovation-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 32px;
}
.innovation-card {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-surface);
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(12px);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.innovation-card:hover {
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
  transform: translateY(-3px);
}
.innovation-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  padding: 28px 24px 20px;
  background:
    radial-gradient(ellipse at 50% 0%, var(--innovation-glow, rgba(34, 211, 238, 0.12)), transparent 68%),
    rgba(241, 245, 249, 0.85);
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
}
.innovation-card__visual img {
  width: min(100%, 280px);
  height: auto;
  max-height: 160px;
  object-fit: contain;
  padding: 20px 26px;
  border-radius: 16px;
  background: var(--innovation-plate, rgba(226, 232, 240, 0.12));
  border: 1px solid var(--innovation-plate-border, rgba(226, 232, 240, 0.18));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.22);
}
.innovation-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 28px;
}
.innovation-card__body h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dark);
  margin-bottom: 14px;
}
.innovation-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.innovation-card__tags li {
  padding: 7px 11px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--innovation-accent, var(--accent-primary));
  background: var(--innovation-accent-bg, rgba(34, 211, 238, 0.1));
  border: 1px solid var(--innovation-accent-border, rgba(34, 211, 238, 0.22));
}
.innovation-card__body p {
  font-size: 0.96rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin: 0;
}
.innovation-card--anonymous {
  --innovation-accent: #60a5fa;
  --innovation-accent-bg: rgba(96, 165, 250, 0.12);
  --innovation-accent-border: rgba(96, 165, 250, 0.28);
  --innovation-glow: rgba(96, 165, 250, 0.16);
  --innovation-plate: linear-gradient(165deg, rgba(214, 230, 248, 0.22) 0%, rgba(186, 210, 236, 0.14) 100%);
  --innovation-plate-border: rgba(186, 210, 236, 0.28);
}
.innovation-card--flash {
  --innovation-accent: #fbbf24;
  --innovation-accent-bg: rgba(251, 191, 36, 0.12);
  --innovation-accent-border: rgba(251, 191, 36, 0.28);
  --innovation-glow: rgba(251, 191, 36, 0.14);
  --innovation-plate: linear-gradient(165deg, rgba(248, 236, 210, 0.22) 0%, rgba(232, 214, 178, 0.14) 100%);
  --innovation-plate-border: rgba(232, 214, 178, 0.28);
}
.innovation-card--follow-me {
  --innovation-accent: #22d3ee;
  --innovation-accent-bg: rgba(34, 211, 238, 0.12);
  --innovation-accent-border: rgba(34, 211, 238, 0.28);
  --innovation-glow: rgba(34, 211, 238, 0.14);
  --innovation-plate: linear-gradient(165deg, rgba(210, 244, 252, 0.22) 0%, rgba(178, 228, 242, 0.14) 100%);
  --innovation-plate-border: rgba(178, 228, 242, 0.28);
}
.innovation-card--green-ai {
  --innovation-accent: #4ade80;
  --innovation-accent-bg: rgba(74, 222, 128, 0.12);
  --innovation-accent-border: rgba(74, 222, 128, 0.28);
  --innovation-glow: rgba(74, 222, 128, 0.14);
  --innovation-plate: linear-gradient(165deg, rgba(210, 244, 224, 0.22) 0%, rgba(178, 228, 200, 0.14) 100%);
  --innovation-plate-border: rgba(178, 228, 200, 0.28);
}

.b2b-card {
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid rgba(148, 163, 184, 0.22);
  backdrop-filter: blur(12px);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.b2b-card:hover {
  border-color: rgba(34, 211, 238, 0.35);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.b2b-card h3 {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  margin-bottom: 10px;
  color: var(--text-dark);
}
.b2b-card p {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.b2b-card__link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--accent-primary);
  text-decoration: none;
}
.b2b-card__link:hover { text-decoration: underline; }

.step-card {
  text-align: center;
  padding: 28px 20px;
}
.step-card__num {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: #0c1222;
  background: var(--accent-gradient);
  margin-bottom: 14px;
}

.integration-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.integration-tag {
  padding: 10px 16px;
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--bg-surface);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Integrations — two-column connection list */
.integrations-mindmap {
  margin-top: 32px;
}
.integrations-mindmap__viewport {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 28px 26px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  background: linear-gradient(155deg, #ecfeff 0%, #f0f9ff 50%, #f8fafc 100%);
  border: 1px solid rgba(34, 211, 238, 0.22);
  box-shadow: 0 12px 36px rgba(8, 145, 178, 0.1);
}
.integrations-mindmap__mobile-lead {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 700;
  color: var(--accent-primary-darker);
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.integrations-mindmap__nodes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}
.integrations-mindmap__node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 1.1vw, 0.92rem);
  font-weight: 600;
  color: var(--text-primary);
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(34, 211, 238, 0.2);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.integrations-mindmap__node::before {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18);
}
.integrations-mindmap__node:hover {
  background: rgba(255, 255, 255, 0.96);
  border-color: rgba(34, 211, 238, 0.4);
  box-shadow: 0 6px 20px rgba(34, 211, 238, 0.12);
}
@media (max-width: 768px) {
  .integrations-mindmap__viewport {
    padding: 22px 18px 20px;
    gap: 16px;
  }
  .integrations-mindmap__mobile-lead {
    font-size: clamp(1rem, 2.8vw, 1.12rem);
  }
  .integrations-mindmap__nodes {
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(34, 211, 238, 0.2);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  }
  .integrations-mindmap__node {
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(8, 145, 178, 0.1);
    box-shadow: none;
    background: transparent;
    font-size: 0.88rem;
    padding: 15px 18px;
  }
  .integrations-mindmap__node:last-child {
    border-bottom: none;
  }
  .integrations-mindmap__node:hover {
    background: rgba(34, 211, 238, 0.06);
    box-shadow: none;
  }
}

.outcome-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
  list-style: none;
  padding: 0;
}
.outcome-list li {
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--bg-surface);
  border: 1px solid rgba(34, 211, 238, 0.18);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.outcome-list strong { color: var(--text-dark); display: block; margin-bottom: 6px; }

.final-cta-band {
  text-align: center;
  padding: clamp(48px, 7vw, 80px) 24px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 236, 248, 0.92) 100%);
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow: 0 20px 56px rgba(15, 23, 42, 0.08);
}
.final-cta-band h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--text-dark);
  margin-bottom: 14px;
}
.final-cta-band p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  max-width: 36rem;
  margin: 0 auto 28px;
  line-height: 1.7;
}
.final-cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.btn-secondary-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, 0.45);
  background: transparent;
  color: var(--accent-primary);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary-outline:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: var(--accent-primary);
}
.final-cta-band .btn-secondary-outline {
  color: #0891b2;
  border-color: rgba(8, 145, 178, 0.45);
}
.final-cta-band .btn-secondary-outline:hover { background: rgba(34, 211, 238, 0.12); }

.header-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}
.header-cta-row .demo-cta-btn { font-size: 0.82rem; padding: 0.5rem 1.15rem; }

.pricing-note {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--bg-surface);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.pricing-note p { color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }

@media (max-width: 900px) {
  .homepage-hero__grid { grid-template-columns: 1fr; }
  .homepage-hero__visual { order: -1; }
}

/* --- NESTOR AI (green theme, isolated) --- */
.nestor-section {
  padding: 56px 0 64px;
  background: transparent;
}
.nestor-section::before { display: none; }
.nestor-section--flagship {
  padding: clamp(32px, 4vw, 48px) 0;
}
.nestor-card {
  display: grid;
  grid-template-columns: minmax(200px, 28%) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  width: 100%;
  min-height: clamp(320px, 42vw, 420px);
  padding: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 64px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(10, 31, 22, 0.96) 0%, rgba(15, 45, 32, 0.9) 50%, rgba(8, 28, 20, 0.94) 100%);
  border: 1px solid rgba(126, 231, 135, 0.32);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(63, 185, 80, 0.1);
  position: relative;
  overflow: hidden;
}
.nestor-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 90% at 12% 50%, rgba(126, 231, 135, 0.12), transparent 58%),
    linear-gradient(rgba(126, 231, 135, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 231, 135, 0.04) 1px, transparent 1px);
  background-size: 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
}
.nestor-card > * { position: relative; z-index: 1; }
.nestor-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.nestor-card__logo {
  width: 100%;
  max-width: clamp(200px, 22vw, 300px);
  height: auto;
  filter: drop-shadow(0 12px 40px rgba(63, 185, 80, 0.35));
}
.nestor-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.nestor-card__label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #7ee787;
  margin-bottom: 14px;
}
.nestor-card__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5.5vw, 3.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.nestor-card__title span {
  background: linear-gradient(135deg, #7ee787, #3fb950);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nestor-card__subtitle {
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  color: #9cc9a8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 16px;
}
.nestor-card__highlight {
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 600;
  color: #7ee787;
  margin-bottom: 16px;
  line-height: 1.35;
}
.nestor-card__text {
  color: rgba(232, 245, 236, 0.92);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  line-height: 1.72;
  margin-bottom: 28px;
  max-width: none;
}
.nestor-learn-more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #7ee787 0%, #3fb950 50%, #2a8f52 100%);
  color: #0a1f16;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 10px 32px rgba(63, 185, 80, 0.38);
  transition: transform 0.2s, box-shadow 0.2s;
}
.nestor-learn-more:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(63, 185, 80, 0.48);
}
#nestor-flagship .nestor-card {
  width: 100%;
}
@media (max-width: 900px) {
  .nestor-card {
    grid-template-columns: 1fr;
    text-align: center;
    min-height: auto;
    padding: 36px 28px;
  }
  .nestor-card__logo {
    max-width: 200px;
    margin: 0 auto;
  }
  .nestor-card__body { align-items: center; }
  .nestor-learn-more { align-self: center; }
}

/* --- Architecture section background decor --- */
#how-it-works.architecture-banner {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(241, 245, 249, 0.98) 0%, rgba(236, 244, 252, 0.92) 100%);
}
#how-it-works.architecture-banner .container {
  position: relative;
  z-index: 1;
}
.architecture-banner__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.architecture-banner__art {
  position: absolute;
  width: min(640px, 92vw);
  height: min(480px, 72vh);
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-14deg);
  background:
    linear-gradient(145deg, rgba(34, 211, 238, 0.14) 0%, rgba(8, 145, 178, 0.08) 38%, rgba(139, 92, 246, 0.12) 100%);
  border: 1px solid rgba(34, 211, 238, 0.18);
  border-radius: 46% 54% 42% 58% / 52% 39% 61% 48%;
  box-shadow:
    0 40px 100px rgba(8, 145, 178, 0.1),
    inset 0 0 80px rgba(255, 255, 255, 0.35);
  opacity: 0.85;
}
.architecture-banner__art::after {
  content: '';
  position: absolute;
  inset: 18% 22%;
  border-radius: 58% 42% 64% 36% / 44% 58% 42% 56%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Architecture banner (markdown body) --- */
.architecture-banner__inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 52px) clamp(32px, 6vw, 56px);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(236, 244, 252, 0.94) 55%, rgba(224, 236, 248, 0.92) 100%);
  border: 1px solid rgba(34, 211, 238, 0.28);
  box-shadow:
    0 24px 64px rgba(15, 23, 42, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: visible;
}
.architecture-banner__inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0891b2 0%, #22d3ee 45%, #8b5cf6 100%);
}
.markdown-body {
  color: var(--text-dark);
  font-size: 0.95rem;
  line-height: 1.68;
}
.architecture-doc__header {
  position: static;
  width: auto;
  z-index: auto;
  text-align: center;
  margin-bottom: 1.75rem;
  padding: 0;
  border: none;
  box-shadow: none;
  background: transparent;
  backdrop-filter: none;
}
.markdown-body h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.28rem, 2.8vw, 1.85rem);
  font-weight: 700;
  line-height: 1.28;
  color: var(--text-dark);
  margin: 0 auto 1rem;
  max-width: 20em;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.architecture-doc__accent {
  display: block;
  margin-top: 0.15em;
  background: linear-gradient(120deg, #0891b2 0%, #0e7490 40%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.architecture-doc__eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0e7490;
  margin: 0 auto 1.1rem;
  text-align: center;
}
.architecture-doc__question {
  font-size: clamp(0.95rem, 1.75vw, 1.08rem);
  font-weight: 500;
  color: var(--text-dark);
  margin: 0 auto !important;
  max-width: 26em;
  padding: 16px 22px;
  border-radius: 14px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-top: 3px solid #0891b2;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  margin-bottom: 0 !important;
}
.architecture-doc__block {
  margin-bottom: 1.35rem;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.architecture-doc__vision {
  border-bottom: none;
}
.architecture-doc__cta {
  border-bottom: none;
}
.architecture-doc__brand:not(.architecture-doc__brand--lead) {
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 700;
  color: #0891b2;
  margin: 0 0 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.architecture-doc__brand--lead,
.markdown-body h2.architecture-doc__brand--lead {
  font-family: var(--font-heading);
  font-size: clamp(2.35rem, 6vw, 3.5rem) !important;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 2.5rem auto 0.75rem !important;
  color: #0f172a;
  text-transform: none;
  line-height: 1.08;
}
.architecture-doc__brand--lead .agents-text,
.architecture-doc__brand-inline .agents-text {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.architecture-doc__brand-inline {
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
}
.architecture-doc__highlight .architecture-doc__accent {
  display: inline;
  margin-top: 0;
}
.markdown-body h3 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.55rem;
  letter-spacing: -0.01em;
}
.markdown-body p {
  margin: 0 0 0.85rem;
  color: var(--text-secondary);
  overflow: visible;
}
.markdown-body p:last-child { margin-bottom: 0; }
.architecture-doc__block p,
.architecture-doc__insight p,
.architecture-doc__vision p,
.architecture-doc__cta p {
  color: var(--text-secondary);
  line-height: 1.72;
}
.architecture-doc__insight {
  margin: 1.25rem 0 1.5rem;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(34, 211, 238, 0.18);
  overflow: visible;
}
.architecture-doc.animate-on-scroll {
  opacity: 1;
  transform: none;
  animation: none;
}
.architecture-doc.animate-on-scroll.is-visible {
  animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.architecture-doc__quote-block {
  margin: 14px 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.07) 0%, rgba(139, 92, 246, 0.06) 100%);
  text-align: center;
}
.architecture-doc__quote-main {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.2vw, 1.35rem) !important;
  font-weight: 700;
  color: #0891b2 !important;
  margin: 0 !important;
  letter-spacing: -0.02em;
}
.architecture-doc__steps {
  list-style: none;
  margin: 12px 0 0.85rem;
  padding: 0;
  display: grid;
  gap: 10px;
}
.architecture-doc__steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(34, 211, 238, 0.16);
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0;
  counter-increment: arch-step;
}
.architecture-doc__steps {
  counter-reset: arch-step;
}
.architecture-doc__steps li::before {
  content: counter(arch-step) !important;
  display: flex !important;
  position: static !important;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #0891b2, #22d3ee);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 700;
}
.architecture-doc__highlight {
  margin-top: 1rem !important;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.07);
  border: 1px solid rgba(139, 92, 246, 0.18);
  color: var(--text-dark) !important;
  font-weight: 500;
}
.architecture-doc__vision p {
  font-size: 1rem;
  line-height: 1.7;
}
.architecture-doc__vision .architecture-doc__vision-lead {
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-dark);
}
.architecture-doc__cta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  text-align: center;
}
.architecture-doc__cta p {
  font-size: 1.02rem;
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 0 !important;
}
.markdown-body strong { color: var(--text-dark); font-weight: 700; }
.homepage-hero .credibility-strip { margin-top: 20px; }
.homepage-hero--compact { padding-bottom: clamp(28px, 4vw, 40px); }
.b2b-card p { font-size: 0.92rem; line-height: 1.55; }
.pain-grid.compact-grid,
.pillar-grid.compact-grid { gap: 14px; margin-top: 18px; }
.pain-grid.compact-grid .b2b-card,
.pillar-grid.compact-grid .b2b-card { padding: 18px 16px; }
.pain-grid.compact-grid h3,
.pillar-grid.compact-grid h3 { font-size: 1rem; margin-bottom: 6px; }


/* === MOBILE COMPATIBILITY POLISH === */
@media (max-width: 1024px) {
  /* No element should ever cause sideways scrolling on small screens */
  main img,
  main svg,
  main video,
  main iframe {
    max-width: 100%;
    height: auto;
  }

  /* Header CTA row sits below the (hidden) nav on mobile */
  .header-cta-row {
    margin: 12px 0 6px;
    padding: 0 12px;
  }
}

@media (max-width: 768px) {
  /* 16px minimum stops iOS Safari from auto-zooming on input focus */
  .form-group input,
  .form-group textarea,
  .form-group select,
  .chat-input-area input[type="text"] {
    font-size: 16px;
  }

  .homepage-hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .homepage-hero__sub { font-size: 1rem; }
  .b2b-lead { font-size: 1rem; }

  .final-cta-band { padding: 40px 18px; border-radius: 22px; }
  .pricing-note { padding: 22px 18px; }
  .innovation-card { border-radius: 18px; }

  /* Comfortable tap targets in the language selector */
  .language-selector a { padding: 4px; }
}

@media (max-width: 640px) {
  section h2 { font-size: 1.75rem; }

  /* Stack hero / band CTAs full-width for easy tapping */
  .homepage-hero__ctas,
  .final-cta-band__actions,
  .header-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .homepage-hero__ctas a,
  .final-cta-band__actions a,
  .header-cta-row a {
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
  }

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

  .credibility-pill {
    font-size: 0.76rem;
    padding: 8px 12px;
  }

  .nestor-card { padding: 28px 18px; }
  .homepage-hero__pipeline { border-radius: 16px; }
  .architecture-banner__inner { padding: 28px 22px; border-radius: 16px; }
  .markdown-body { font-size: 0.9rem; }
  .markdown-body h1 { font-size: 1.22rem; max-width: 100%; }
  .architecture-doc__eyebrow { font-size: 1.05rem; }
  .architecture-doc__question { font-size: 0.92rem; padding: 14px 16px; max-width: 100%; }
  .architecture-banner__art {
    width: min(420px, 110vw);
    height: min(320px, 55vh);
    opacity: 0.7;
  }
  .architecture-doc__brand--lead,
  .markdown-body h2.architecture-doc__brand--lead {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    margin-top: 2rem !important;
  }
}

/* Typography overrides — menus, buttons, forms use body font */
nav a,
.mobile-nav a,
.header-cta-row a,
.demo-cta-btn,
.btn-secondary-outline,
.btn-submit,
.btn-secondary-accent,
.chat-widget-header,
.chat-input-area button,
.mindmap-zoom-controls button,
.products-mindmap-hint,
.form-group label,
.form-group input,
.form-group textarea {
  font-family: var(--font-body) !important;
}


  
/* Stable initial content; decorative background effects are unchanged. */
.animate-on-scroll, .stagger-child,
.animate-on-scroll.is-visible, .stagger-child.is-visible {
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
  will-change: auto;
}
@media (min-width: 1025px) {
  main { padding-top: var(--site-header-height, 303px); }
}
#siteHeader.header-measuring, #siteHeader.header-measuring * {
  transition: none !important;
}
.nestor-card__logo { aspect-ratio: 2108 / 1892; object-fit: contain; }