/* ========================================
   BASE TEMPLATE STYLES
   Only global components - NO section-specific styles
   ======================================== */

/* ========================================
   GLOBAL SECTION STYLES
   ======================================== */

/* Section Badge - Universal */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(246, 114, 20, 0.1);
  border: 1px solid rgba(246, 114, 20, 0.28);
  color: #f67214;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.badge-dot-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 3;
  background: #f67214;
  box-shadow: 0 0 0 7px rgba(246, 114, 20, 0.12);
  animation: badgePulse 2s ease-in-out infinite;
}

/* Section Title - Universal */
.section-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #0f172a;
  font-weight: 800;
  margin: 0 0 16px;
}

.title-highlight {
  color: #f67214;
}

@keyframes badgePulse {

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

  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Responsive Section Badge Styles */
@media (max-width: 768px) {
  .section-badge {
    font-size: 10px;
    padding: 7px 16px;
    gap: 7px;
  }

  .badge-dot-pulse {
    width: 7px;
    height: 7px;
  }

  .section-title {
    font-size: clamp(1.5rem, 5vw, 2.25rem);
  }
}

@media (max-width: 480px) {
  .section-badge {
    font-size: 9px;
    padding: 6px 14px;
    gap: 6px;
  }

  .badge-dot-pulse {
    width: 6px;
    height: 6px;
  }

  .section-title {
    font-size: clamp(2rem, 4.5vw, 1.75rem);
  }
}

/* ========================================
   CSS VARIABLES & BASE STYLES
   ======================================== */

:root {
  --color-accent: #f67214;
  --color-accent-deep: #d85f0f;
  --color-bg: #fffdf9;
  --color-bg-dark: #0b1118;
  --color-bg-warm: #fff3ec;
  --color-surface: #ffffff;
  --color-text: #111111;
  --color-text-muted: #555b63;
  --color-text-inverse: #f5efe8;
  --color-border: rgba(17, 17, 17, 0.08);
  --shadow-xl: 0 32px 70px rgba(12, 18, 28, 0.12);
  --shadow-lg: 0 18px 45px rgba(12, 18, 28, 0.1);
  --container-max: 1180px;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 6rem;
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fffdfa;
  color: var(--color-text);
  font-family: "Instrument Sans", system-ui, sans-serif;
  line-height: 1.5;
  padding-top: 74.6px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 991px) {
  body {
    padding-top: 70px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top: 64px;
  }
}

@media (max-width: 575px) {
  body {
    padding-top: 60px;
  }
}

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

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

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.page-shell {
  position: relative;
  overflow: clip;
}

.container {
  width: min(calc(100% - 2rem), var(--container-max));
  margin: 0 auto;
}

/* ========================================
   HEADER STYLES
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 74.6px;
  padding: 12px 3vw;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
}

.site-header.is-scrolled,
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

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

.logo-container img {
  display: block;
  width: auto;
}

.site-logo {
  display: block;
  height: 40px;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li a {
  position: relative;
  color: #1f2a3b;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-menu li a:hover {
  color: #ea6d13;
}

.nav-menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: #ea6d13;
  transition: width 0.3s ease;
}

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

.nav-menu li a.active {
  color: #ea6d13;
}

.login-btn {
  background: #ea6d13;
  color: #fff;
  border: none;
  padding: 12px 50px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(234, 109, 19, 0.2);
  transition: all 0.3s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(234, 109, 19, 0.35);
  color: #fff;
  filter: brightness(1.05);
}

/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: relative;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.hamburger span {
  width: 28px;
  height: 3px;
  background: #172033;
  border-radius: 3px;
  transition: all 0.3s ease;
  display: block;
  position: absolute;
}

.hamburger span:nth-child(1) {
  top: 10px;
}

.hamburger span:nth-child(2) {
  top: 18px;
}

.hamburger span:nth-child(3) {
  top: 26px;
}

.hamburger.active span:nth-child(1) {
  top: 18px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: 18px;
  transform: rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
  position: fixed;
  top: 74.6px;
  left: 0;
  width: 100%;
  height: calc(100vh - 74.6px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  padding: 32px 20px;
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  overflow-y: auto;
}

.mobile-menu.active {
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.mobile-menu ul li a {
  display: block;
  padding: 16px 0;
  color: #172033;
  font-weight: 600;
  font-size: 18px;
  border-bottom: none;
  text-decoration: none;
  transition: color 0.3s ease;
}

.mobile-menu ul li a:hover,
.mobile-menu ul li a.active {
  color: #ea6d13;
  text-decoration: none;
}

.mobile-menu .login-btn {
  width: 100% !important;
  margin-top: 48px !important;
  display: block !important;
  padding: 16px 32px !important;
  background: #f67214 !important;
  color: #ffffff !important;
  border-radius: 50px !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  text-align: center !important;
  text-decoration: none !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(246, 114, 20, 0.2) !important;
  transition: all 0.3s ease !important;
}

.mobile-menu .login-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(246, 114, 20, 0.3) !important;
  background: #ea6d13 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

/* ========================================
   FOOTER STYLES
   ======================================== */

.site-footer {
  background: #f8f9fa;
  padding: 16px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 0;
}

.footer-content {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.footer-copyright {
  margin: 0;
  color: #64748b;
  font-size: 15px;
  font-weight: 600;
}

.footer-link {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-link:hover {
  color: var(--color-accent-deep);
  text-decoration: underline;
}

/* ========================================
   WAITLIST MODAL STYLES
   ======================================== */

.modal-content-premium {
  border-radius: 24px;
  border: none;
  padding: 40px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

.modal-title {
  font-family: "Outfit", sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
}

.text-orange {
  color: var(--color-accent);
}

.modal-subtitle {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
}

.form-label {
  font-weight: 600;
  font-size: 14px;
  color: #334155;
  margin-bottom: 8px;
  display: block;
}

.premium-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.premium-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(246, 114, 20, 0.1);
}

/* Minimal intl-tel-input styling to match form design */
.iti {
  width: 100%;
  display: block;
}

.iti__input {
  width: 100%;
  padding: 14px 16px;
  padding-left: 52px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #ffffff;
}

.iti__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(246, 114, 20, 0.1);
}

.btn-waitlist {
  background: linear-gradient(135deg, var(--color-accent), #ff8c42);
  color: #ffffff;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(246, 114, 20, 0.25);
}

.btn-waitlist:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.35);
}

.waitlist-modal-message {
  font-size: 14px;
  font-weight: 500;
}

.modal-footer-text {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
}

.btn-close {
  background: transparent;
  border: none;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.btn-close:hover {
  opacity: 1;
}

/* ========================================
   BACK TO TOP BUTTON
   ======================================== */

.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--color-accent);
  color: #ffffff;
  border: none;
  border-radius: 50%;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(246, 114, 20, 0.3);
  transition: all 0.3s ease;
  z-index: 999;
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(246, 114, 20, 0.4);
}

.back-to-top.show {
  display: flex;
}

/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 991px) {
  .header-nav {
    display: none !important;
  }

  .hamburger {
    display: flex !important;
  }

  .site-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    padding: 16px 24px !important;
    min-height: 70px !important;
  }

  .logo-container {
    flex-shrink: 0;
    max-width: 70%;
  }

  .site-logo {
    max-width: 100%;
    height: 36px !important;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: 14px 20px !important;
    min-height: 64px !important;
  }

  .site-logo {
    height: 33px !important;
    width: auto !important;
  }

  .logo-container {
    max-width: 70%;
  }

  .hamburger {
    margin-left: auto;
    flex-shrink: 0;
  }

  .modal-content-premium {
    padding: 28px 20px;
  }

  .modal-title {
    font-size: 22px;
  }

  /* Ensure form inputs stack properly on tablet */
  .row.g-3>.col-md-6 {
    width: 100%;
  }

  .premium-input,
  .iti__input {
    font-size: 14px;
    padding: 12px 14px;
  }

  .iti__input {
    padding-left: 50px;
  }

  .btn-waitlist {
    padding: 14px 28px;
    font-size: 14px;
  }

  .mobile-menu {
    top: 64px !important;
    height: calc(100vh - 64px) !important;
  }
}

@media (max-width: 575px) {
  .site-header {
    padding: 12px 16px !important;
    min-height: 60px !important;
  }

  .site-logo {
    height: 33px !important;
    width: auto !important;
  }

  .logo-container {
    max-width: 65%;
  }

  .hamburger {
    width: 40px;
    height: 40px;
    margin-left: auto;
  }

  .hamburger span {
    width: 28px;
    height: 2.5px;
  }

  .hamburger span:nth-child(1) {
    top: 12px;
  }

  .hamburger span:nth-child(2) {
    top: 19px;
  }

  .hamburger span:nth-child(3) {
    top: 26px;
  }

  .mobile-menu {
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    padding: 24px 16px;
  }

  .modal-content-premium {
    padding: 24px 16px;
  }

  .modal-title {
    font-size: 20px;
  }

  .modal-subtitle {
    font-size: 14px;
  }

  .form-label {
    font-size: 13px;
  }

  .premium-input,
  .iti__input {
    font-size: 14px;
    padding: 12px 14px;
  }

  .iti__input {
    padding-left: 48px;
  }

  .btn-waitlist {
    padding: 14px 24px;
    font-size: 14px;
  }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
}

/* ========================================
   CINEMATIC HERO — MEETING AI
   ======================================== */
.hero-section {
  padding: 0;
  background: linear-gradient(135deg, #fffdfa 0%, #fff7ef 42%, #f8fbff 100%);
  min-height: auto;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 66% 42%, #000 0, transparent 68%);
  opacity: .75;
  pointer-events: none;
}

.hero-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(86px, 8vw, 118px) 32px clamp(54px, 6vw, 84px);
  width: 100%;
  position: relative;
  z-index: 2;
}


.dash-wrap {
  position: relative;
  height: 590px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, .9);
  border-radius: 22px;
  box-shadow: 0 32px 86px rgba(15, 23, 42, .16);
  overflow: hidden;
  transform: rotateX(1.5deg) rotateY(-2deg);
  transition: .6s ease;
}

.dash-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 42px 104px rgba(15, 23, 42, .2);
}

.dash-bar {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px;
  background: linear-gradient(180deg, #fff, #f8fafc);
  border-bottom: 1px solid rgba(226, 232, 240, .9);
}

.dash-dots {
  display: flex;
  gap: 6px;
}

.dd {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dd.r {
  background: #ff5f56;
}

.dd.y {
  background: #ffbd2e;
}

.dd.g {
  background: #27c93f;
}

.dash-pill {
  flex: 1;
  text-align: center;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.dash-live {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: emailPulse 2s infinite;
}

.dash-live-txt {
  font-size: 12px;
  font-weight: 700;
  color: #22c55e;
}

/* VIEWPORT & SCENES */
.dash-viewport {
  position: relative;
  height: 540px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  overflow: hidden;
}

.dash-scene {
  position: absolute;
  inset: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  overflow: hidden;
}

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

.ds-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  padding: 28px 28px 24px;
}

/* ── SCENE 1: Record / Upload ─────────────────────────────── */
.s1-lottie-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s ease;
}

.s1-lottie-intro.hidden {
  opacity: 0;
  pointer-events: none;
}

.s1-lottie-badge {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #ef4444;
}

.s1-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  animation: emailPulse 1.2s ease-in-out infinite;
}

.s1-dashboard {
  position: relative;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.s1-dashboard.visible {
  opacity: 1;
}

/* ── SCENE 1: Record / Upload ─────────────────────────────── */
.s1-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: 22px 24px;
  overflow: hidden;
}

/* Header row */
.s1-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.s1-rec-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 900;
  color: #ef4444;
  letter-spacing: 0.05em;
}

.s1-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  animation: pulse-dot 1.2s ease-in-out infinite;
}

.s1-meeting-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.s1-timer {
  font-size: 13px;
  font-weight: 700;
  color: #64748b;
  font-variant-numeric: tabular-nums;
  background: #f1f5f9;
  padding: 4px 10px;
  border-radius: 6px;
}

/* Source chips */
.s1-sources {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.s1-src-label {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.s1-src-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.s1-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
}

.s1-chip-live {
  background: #fff5ed;
  border-color: #fdba74;
  color: #c2410c;
}

.s1-chip-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f67214;
  animation: pulse-dot 1.5s infinite;
}

.s1-chip-upload {
  background: #f8fafc;
  color: #64748b;
}

.s1-chip-upload svg {
  opacity: 0.6;
}

/* Waveform */
.s1-wave-row {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 12px 14px;
}

.s1-waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 36px;
}

.wave-bar {
  flex: 1;
  background: #f67214;
  border-radius: 2px;
  opacity: 0.75;
  animation: wave var(--dur) ease-in-out infinite alternate;
}

.wave-bar:nth-child(odd) {
  background: #fb923c;
  opacity: 0.9;
}

@keyframes wave {
  0% {
    height: var(--min);
  }

  100% {
    height: var(--max);
  }
}

/* Transcript */
.s1-transcript {
  background: #fff;
  border-radius: 12px;
  flex: 1;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 14px;
  overflow: hidden;
}

.s1-tx-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.s1-tx-label {
  font-size: 14px;
  font-weight: 800;
  color: #334155;
}

.s1-ai-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #f67214;
  background: #fff5ed;
  padding: 4px 10px;
  border-radius: 20px;
}

.s1-ai-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f67214;
  animation: pulse-dot 1.5s infinite;
}

.s1-tx-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.s1-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.s1-spk {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
}

.s1-spk-a {
  color: #3b82f6;
}

.s1-spk-b {
  color: #10b981;
}

.s1-spk-c {
  color: #f59e0b;
}

.s1-txt {
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}

.s1-cursor {
  display: inline-block;
  animation: blink 1s infinite;
  color: #f67214;
  font-weight: 300;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* AI Output tags row */
.s1-output-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.s1-out-label {
  font-size: 10px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
  margin-right: 4px;
}

.s1-out-tag {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}

.s1-out-green {
  background: #dcfce7;
  color: #166534;
}

.s1-out-blue {
  background: #dbeafe;
  color: #1e40af;
}

.s1-out-orange {
  background: #ffedd5;
  color: #9a3412;
}

/* Scene 2 */
.ds-agent-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.ds-agent-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f67214, #ff914d);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.ds-agent-name {
  font-weight: 700;
  color: #0f172a;
  font-size: 15px;
}

.ds-agent-sub {
  font-size: 12px;
  color: #64748b;
}

.ds-search-box {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #0f172a;
}

.ds-search-icon {
  color: #94a3b8;
}

.ds-searching {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
  margin-top: 8px;
}

.ds-searching.visible {
  display: flex;
}

.ds-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: #f67214;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.ds-cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

.ds-cards.visible {
  display: flex;
  animation: fadeUp 0.4s ease;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.ds-card {
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.ds-card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ds-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
}

.ds-tag.coord {
  background: #e0e7ff;
  color: #4338ca;
}

.ds-tag.bim {
  background: #fce7f3;
  color: #be185d;
}

.ds-card-date {
  font-size: 12px;
  color: #94a3b8;
}

.ds-card-text {
  font-size: 13px;
  color: #334155;
  margin-bottom: 10px;
}

.ds-rel-bar {
  height: 4px;
  background: #f1f5f9;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.ds-rel-fill {
  height: 100%;
  background: #22c55e;
}

.ds-rel-lbl {
  font-size: 11px;
  color: #64748b;
  text-align: right;
}

/* Scene 3 */
.ds-echo {
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  font-size: 14px;
  color: #334155;
  display: flex;
  gap: 10px;
}

.ds-answer {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(246, 114, 20, 0.2);
  box-shadow: 0 8px 24px rgba(246, 114, 20, 0.08);
  overflow: hidden;
}

.ds-answer-head {
  background: #fff5ed;
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #c2410c;
  font-size: 13px;
  border-bottom: 1px solid rgba(246, 114, 20, 0.1);
}

.ds-src-count {
  font-weight: 600;
  color: #f67214;
  background: #fff;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
}

.ds-answer-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ds-ans-row {
  display: flex;
  gap: 12px;
}

.ds-ans-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.ds-ans-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 3px;
}

.ds-ans-text {
  font-size: 13px;
  color: #0f172a;
  line-height: 1.5;
}

.ds-answer-tags {
  padding: 10px 18px;
  background: #f8fafc;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  gap: 8px;
}

.ds-atag {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}

.ds-atag.green {
  background: #dcfce7;
  color: #166534;
}

.ds-atag.blue {
  background: #e0f2fe;
  color: #075985;
}

.ds-atag.orange {
  background: #ffedd5;
  color: #9a3412;
}

/* Hero responsive */
@media (max-width: 1024px) {
  .dash-wrap {
    max-width: 680px;
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
  .hero-container {
    padding: clamp(70px, 7vw, 90px) 24px clamp(40px, 5vw, 60px);
  }

  .hero-h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
  }

  .hero-desc {
    font-size: clamp(15px, 1.4vw, 17px);
  }

  .dash-wrap {
    height: 520px;
    transform: none;
  }

  .dash-wrap:hover {
    transform: translateY(-2px);
  }

  .dash-viewport {
    height: 470px;
  }
}

@media (max-width: 768px) {
  .hero-container {
    padding: 40px 20px 60px;
    gap: 40px;
  }

  .hero-badge {
    font-size: 10px;
    padding: 7px 16px;
    margin-bottom: 16px;
  }

  .hero-badge-dot {
    width: 7px;
    height: 7px;
  }

  .hero-h1 {
    font-size: clamp(1.75rem, 6vw, 2.35rem);
    line-height: 1.12;
    margin-bottom: 14px;
  }

  .hero-desc {
    font-size: 15px;
    margin-bottom: 18px;
  }

  .hero-steps {
    gap: 10px;
    margin-bottom: 28px;
  }

  .hero-step {
    padding: 12px;
    gap: 12px;
  }

  .hs-num-circle {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .hs-title {
    font-size: 14.5px;
  }

  .hs-desc {
    font-size: 12px;
  }

  .hero-btn-primary {
    padding: 14px 24px;
    font-size: 15px;
  }

  .dash-wrap {
    height: 520px;
    border-radius: 18px;
  }

  .dash-bar {
    height: 44px;
    padding: 0 14px;
  }

  .dash-pill {
    font-size: 11px;
  }

  .dash-viewport {
    height: 476px;
  }

  .s1-wrap {
    padding: 14px;
    gap: 10px;
  }

  .s1-header {
    padding-bottom: 10px;
  }

  .s1-meeting-name {
    font-size: 13px;
  }

  .s1-timer {
    font-size: 12px;
    padding: 3px 8px;
  }

  .s1-sources {
    gap: 8px;
  }

  .s1-src-chips {
    flex-wrap: wrap;
    gap: 6px;
  }

  .s1-chip {
    padding: 6px 12px;
    font-size: 12px;
  }

  .s1-wave-row {
    padding: 10px 12px;
  }

  .s1-waveform {
    height: 32px;
  }

  .s1-transcript {
    padding: 12px;
  }

  .s1-tx-bar {
    margin-bottom: 10px;
  }

  .s1-tx-label {
    font-size: 13px;
  }

  .s1-ai-chip {
    font-size: 11px;
    padding: 3px 8px;
  }

  .s1-tx-body {
    gap: 8px;
  }

  .s1-line {
    gap: 6px;
  }

  .s1-spk {
    font-size: 12px;
  }

  .s1-txt {
    font-size: 12px;
  }

  .s1-output-row {
    padding-top: 10px;
    gap: 6px;
  }

  .s1-out-tag {
    font-size: 11px;
    padding: 4px 10px;
  }

  /* Scene 2 - Compact */
  .ds-agent-header {
    gap: 10px;
    margin-bottom: 6px;
  }

  .ds-agent-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .ds-agent-name {
    font-size: 14px;
  }

  .ds-agent-sub {
    font-size: 11px;
  }

  .ds-search-box {
    padding: 12px;
    font-size: 13px;
  }

  .ds-card {
    padding: 12px;
  }

  .ds-card-text {
    font-size: 12px;
  }

  /* Scene 3 - Compact */
  .ds-echo {
    padding: 12px;
    font-size: 13px;
  }

  .ds-answer-head {
    padding: 10px 14px;
    font-size: 12px;
  }

  .ds-answer-body {
    padding: 14px;
    gap: 12px;
  }

  .ds-ans-text {
    font-size: 12px;
  }

  .ds-answer-tags {
    padding: 8px 14px;
  }

  .ds-atag {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (max-width: 575px) {
  .hero-container {
    padding: 70px 16px 50px;
    gap: 36px;
  }

  .hero-section {
    min-height: auto;
  }

  .hero-badge {
    font-size: 9px;
    padding: 6px 14px;
    margin-bottom: 14px;
  }

  .hero-badge-dot {
    width: 6px;
    height: 6px;
  }

  .hero-h1 {
    font-size: clamp(1.5rem, 7vw, 2rem);
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .hero-steps {
    gap: 8px;
    margin-bottom: 24px;
  }

  .hero-step {
    padding: 10px 12px;
    gap: 10px;
    border-radius: 12px;
  }

  .hs-num-circle {
    width: 32px;
    height: 32px;
    font-size: 10px;
  }

  .hs-title {
    font-size: 13.5px;
  }

  .hs-desc {
    font-size: 11px;
  }

  .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-btn-primary {
    width: 100%;
    justify-content: center;
    padding: 13px 20px;
    font-size: 14px;
  }

  .dash-wrap {
    height: 480px;
    border-radius: 16px;
  }

  .dash-bar {
    height: 42px;
    padding: 0 12px;
  }

  .dash-dots {
    gap: 5px;
  }

  .dd {
    width: 9px;
    height: 9px;
  }

  .dash-pill {
    font-size: 10px;
  }

  .dash-live-dot {
    width: 7px;
    height: 7px;
  }

  .dash-live-txt {
    font-size: 11px;
  }

  .dash-viewport {
    height: 438px;
  }

  .s1-wrap {
    padding: 12px;
    gap: 9px;
  }

  .s1-header {
    gap: 10px;
    padding-bottom: 9px;
  }

  .s1-rec-pill {
    padding: 3px 8px;
    font-size: 10px;
  }

  .s1-rec-dot {
    width: 6px;
    height: 6px;
  }

  .s1-meeting-name {
    font-size: 12px;
  }

  .s1-timer {
    font-size: 11px;
    padding: 3px 7px;
  }

  .s1-sources {
    gap: 7px;
  }

  .s1-src-label {
    font-size: 9px;
  }

  .s1-src-chips {
    gap: 5px;
  }

  .s1-chip {
    padding: 5px 10px;
    font-size: 11px;
  }

  .s1-chip-dot-live {
    width: 6px;
    height: 6px;
  }

  .s1-wave-row {
    padding: 9px 10px;
  }

  .s1-waveform {
    height: 28px;
  }

  .s1-transcript {
    padding: 10px;
  }

  .s1-tx-bar {
    margin-bottom: 9px;
  }

  .s1-tx-label {
    font-size: 12px;
  }

  .s1-ai-chip {
    font-size: 10px;
    padding: 3px 7px;
  }

  .s1-ai-dot {
    width: 5px;
    height: 5px;
  }

  .s1-tx-body {
    gap: 7px;
  }

  .s1-line {
    gap: 6px;
    flex-wrap: wrap;
  }

  .s1-spk {
    font-size: 11px;
  }

  .s1-txt {
    font-size: 11px;
  }

  .s1-output-row {
    padding-top: 9px;
    gap: 5px;
  }

  .s1-out-label {
    font-size: 9px;
  }

  .s1-out-tag {
    font-size: 10px;
    padding: 3px 8px;
  }

  /* Scene 2 - Mobile Optimized */
  .ds-inner {
    padding: 12px;
    gap: 10px;
  }

  .ds-agent-header {
    gap: 9px;
    margin-bottom: 5px;
  }

  .ds-agent-icon {
    width: 34px;
    height: 34px;
    font-size: 15px;
    border-radius: 10px;
  }

  .ds-agent-name {
    font-size: 13px;
  }

  .ds-agent-sub {
    font-size: 10px;
  }

  .ds-search-box {
    padding: 11px;
    font-size: 12px;
  }

  .ds-searching {
    font-size: 12px;
    margin-top: 6px;
  }

  .ds-spinner {
    width: 12px;
    height: 12px;
  }

  .ds-cards {
    gap: 8px;
  }

  .ds-card {
    padding: 11px;
  }

  .ds-card-top {
    margin-bottom: 5px;
  }

  .ds-tag {
    font-size: 10px;
    padding: 2px 7px;
  }

  .ds-card-date {
    font-size: 11px;
  }

  .ds-card-text {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .ds-rel-bar {
    height: 3px;
    margin-bottom: 3px;
  }

  .ds-rel-lbl {
    font-size: 10px;
  }

  /* Scene 3 - Mobile Optimized */
  .ds-echo {
    padding: 11px;
    font-size: 12px;
    gap: 8px;
  }

  .ds-answer {
    border-radius: 14px;
  }

  .ds-answer-head {
    padding: 9px 12px;
    font-size: 11px;
  }

  .ds-src-count {
    font-size: 10px;
    padding: 2px 7px;
  }

  .ds-answer-body {
    padding: 12px;
    gap: 10px;
  }

  .ds-ans-row {
    gap: 10px;
  }

  .ds-ans-icon {
    font-size: 16px;
  }

  .ds-ans-label {
    font-size: 10px;
    margin-bottom: 2px;
  }

  .ds-ans-text {
    font-size: 11px;
  }

  .ds-answer-tags {
    padding: 7px 12px;
    gap: 6px;
  }

  .ds-atag {
    font-size: 10px;
    padding: 3px 7px;
  }

  /* Lottie intro adjustments */
  .s1-lottie-intro {
    padding: 10px;
  }

  .s1-lottie-badge {
    bottom: 30px;
    padding: 6px 12px;
    font-size: 11px;
  }

  .s1-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .s1-meeting-name {
    font-size: 11px;
    flex-basis: 100%;
  }

  .s1-timer {
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .hero-h1 {
    font-size: 1.5rem;
  }

  .hero-desc {
    font-size: 13px;
  }

  .hero-btn-primary {
    font-size: 13px;
    padding: 12px 18px;
  }

  .dash-wrap {
    height: 380px;
  }

  .dash-viewport {
    height: 336px;
  }
}

/* Global CTA button */
.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: linear-gradient(135deg, #f67214, #e05a00);
  color: #ffffff;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(246, 114, 20, 0.3);
  transition: all 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(246, 114, 20, 0.4);
  color: #ffffff;
  filter: brightness(1.05);
}

/* 2. WORKFLOW SECTION */
.workflow-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #ffffff;
}

.workflow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 48px;
  align-items: center;
}

.workflow-intro {
  font-size: 1.15rem;
  color: #555b63;
  line-height: 1.6;
  margin-bottom: 32px;
}

.meeting-types {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.type-pill {
  padding: 10px 20px;
  background: #f8fafc;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  color: #334155;
  transition: all 0.3s ease;
}

.type-pill:hover {
  background: #ffffff;
  border-color: #f67214;
  color: #f67214;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(246, 114, 20, 0.1);
}

.content-box {
  background: #fffdfa;
  border: 1px solid rgba(246, 114, 20, 0.1);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(246, 114, 20, 0.04);
}

.content-box h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 24px;
}

.workflow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.workflow-list li {
  display: flex;
  gap: 16px;
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
}

.list-icon {
  flex-shrink: 0;
  font-size: 18px;
  margin-top: -2px;
}

.workflow-list li strong {
  color: #1e293b;
  display: block;
  font-size: 16px;
}

@media (max-width: 991px) {
  .workflow-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 575px) {
  .content-box {
    padding: 24px;
  }

  .workflow-intro {
    font-size: 1rem;
  }
}

/* 3. PROBLEM SECTION */
.problem-section {
  padding: clamp(64px, 10vw, 120px) 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.text-white {
  color: #ffffff !important;
}

.text-gray {
  color: #94a3b8 !important;
}

.badge-dark {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
}

.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin-top: 56px;
  align-items: flex-start;
}

.problem-intro {
  font-size: 1.15rem;
  line-height: 1.7;
  margin-bottom: 40px;
}

.question-cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.question-card {
  background: #fffdfa;
  border: 1px solid rgba(246, 114, 20, 0.1);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(246, 114, 20, 0.04);
}

.question-card:hover {
  background: #ffffff;
  border-color: rgba(246, 114, 20, 0.4);
  transform: translateX(8px);
  box-shadow: 0 10px 25px rgba(246, 114, 20, 0.08);
}

.q-icon {
  font-size: 20px;
  opacity: 0.6;
}

.question-card p {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin: 0;
}

.impact-box {
  background: rgba(246, 114, 20, 0.05);
  border: 1px solid rgba(246, 114, 20, 0.15);
  border-radius: 32px;
  padding: 48px;
}

.warning-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.warning-icon {
  font-size: 24px;
}

.warning-header h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.impact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.impact-title {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #f67214;
  margin-bottom: 6px;
}

.impact-list p {
  font-size: 15px;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 991px) {
  .problem-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }

  .impact-box {
    padding: 32px;
  }
}

@media (max-width: 575px) {
  .question-card {
    padding: 16px;
  }

  .impact-box {
    padding: 24px;
  }
}

/* 4. INTRO SECTION */
.intro-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #ffffff;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 48px;
  align-items: center;
}

.intro-text {
  font-size: 1.15rem;
  color: #555b63;
  line-height: 1.6;
  margin-bottom: 32px;
}

.platform-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.platform-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  padding: 12px 20px;
  background: #f8fafc;
  border-radius: 12px;
  width: fit-content;
}

.intro-action-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
}

.action-steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.step {
  display: flex;
  gap: 24px;
}

.step-num {
  font-family: "Outfit", sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: rgba(246, 114, 20, 0.2);
  line-height: 1;
}

.step-content h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
}

.step-content p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 991px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

@media (max-width: 575px) {
  .intro-action-card {
    padding: 24px;
  }
}

/* 5. PROCESS SECTION */
.process-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #fffdfa;
}

.section-intro {
  max-width: 700px;
  font-size: 1.15rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 56px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 64px;
}

.process-step {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 24px;
  padding: 32px;
  transition: all 0.3s ease;
}

.process-step:hover {
  border-color: rgba(246, 114, 20, 0.2);
  box-shadow: 0 12px 30px rgba(246, 114, 20, 0.05);
  transform: translateY(-4px);
}

.p-step-icon {
  width: 56px;
  height: 56px;
  background: #fff8f1;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 24px;
}

.p-step-content h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
}

.p-step-content p {
  font-size: 15px;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

.deliverables-box {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.deliverables-box h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.deliverables-grid {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  justify-content: center;
}

.deliverable {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
}

.d-icon {
  font-size: 20px;
}

@media (max-width: 991px) {
  .process-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 575px) {
  .deliverables-box {
    padding: 24px;
  }

  .deliverables-grid {
    gap: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 6. AGENT SECTION */
.agent-section {
  padding: clamp(64px, 10vw, 120px) 0;
  background: #fffdfa;
  position: relative;
}

.badge-orange {
  background: rgba(246, 114, 20, 0.15) !important;
  border-color: rgba(246, 114, 20, 0.4) !important;
  color: #f67214 !important;
}

.agent-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  margin-top: 56px;
  align-items: center;
}

.search-interface {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.05);
}

.search-bar {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.search-query {
  font-size: 14px;
  color: #94a3b8;
}

.room-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.room-tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 100px;
  background: #ffffff;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.chat-bubbles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-bubble {
  max-width: 90%;
  padding: 16px 20px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.6;
}

.chat-bubble.user {
  align-self: flex-end;
  background: #f67214;
  color: #ffffff;
  font-weight: 600;
  border-bottom-right-radius: 4px;
}

.chat-bubble.ai {
  align-self: flex-start;
  background: #ffffff;
  color: #334155;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.ai-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 11px;
}

.ai-badge {
  color: #f67214;
  font-weight: 800;
  text-transform: uppercase;
}

.ai-source {
  color: #64748b;
}

.chat-bubble.ai strong {
  color: #0f172a;
}

.agent-intro {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 40px;
}

.example-queries {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 48px;
}

.query-item {
  display: flex;
  gap: 16px;
  align-items: center;
}

.q-bullet {
  font-size: 18px;
}

.query-item p {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #334155;
  margin: 0;
}

.agent-highlight {
  background: linear-gradient(135deg, rgba(246, 114, 20, 0.1), transparent);
  border-left: 4px solid #f67214;
  padding: 24px;
  border-radius: 0 16px 16px 0;
}

.agent-highlight p {
  font-size: 16px;
  color: #475569;
  margin: 0;
  line-height: 1.6;
}

.agent-highlight strong {
  color: #f67214;
}

@media (max-width: 991px) {
  .agent-grid {
    grid-template-columns: 1fr;
    gap: 64px;
  }
}

@media (max-width: 575px) {
  .search-interface {
    padding: 20px;
  }

  .chat-bubble {
    max-width: 100%;
  }
}

/* 7. OUTPUT SECTION */
.output-section {
  padding: clamp(64px, 8vw, 100px) 0;
  background: #ffffff;
}

.output-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 56px;
}

.output-card {
  padding: 40px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.output-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08);
}

.card-header {
  margin-bottom: 24px;
}

.card-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 16px;
}

.output-card h3 {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-list li {
  font-size: 15px;
  color: #64748b;
  padding-left: 24px;
  position: relative;
}

.card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: inherit;
  font-weight: bold;
}

.card-text {
  font-size: 15px;
  line-height: 1.6;
  color: #64748b;
  margin-bottom: 24px;
}

.card-tag {
  margin-top: auto;
  padding: 6px 14px;
  background: rgba(246, 114, 20, 0.1);
  color: #f67214;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
  width: fit-content;
}

/* Color Accents */
.card-blue {
  border-top: 6px solid #3b82f6;
}

.card-green {
  border-top: 6px solid #10b981;
}

.card-orange {
  border-top: 6px solid #f67214;
}

@media (max-width: 991px) {
  .output-cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 575px) {
  .output-card {
    padding: 32px 24px;
  }
}

/* 8. SHIFT SECTION (DARK GLASSMORPHISM - COMPACT & PREMIUM) */
.shift-section.shift-dark {
  padding: clamp(60px, 8vw, 100px) 0;
  background: #080c17;
  /* Deep premium dark background */
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.shift-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
}

.shift-main-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.title-arrow {
  color: #f67214;
  /* Brand orange */
  display: inline-block;
  padding: 0 8px;
}

.shift-sub-title {
  font-size: clamp(1.05rem, 1.8vw, 1.15rem);
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

.shift-panels-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 980px;
  /* Perfectly compact container */
  margin: 0 auto;
  position: relative;
}

.shift-panel-box {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.panel-box-before {
  border: 1px solid rgba(239, 68, 68, 0.25);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 35px rgba(239, 68, 68, 0.08);
}

.panel-box-before:hover {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 45px rgba(239, 68, 68, 0.15);
  transform: translateY(-4px);
}

.panel-box-after {
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4), 0 0 35px rgba(16, 185, 129, 0.08);
}

.panel-box-after:hover {
  border-color: rgba(16, 185, 129, 0.55);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 45px rgba(16, 185, 129, 0.15);
  transform: translateY(-4px);
}

.panel-box-header {
  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: "Outfit", sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  width: fit-content;
}

.pill-before {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pill-after {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.panel-flow-path {
  font-size: 0.95rem;
  font-style: italic;
  color: #94a3b8;
  line-height: 1.4;
}

.panel-box-body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Tightly framed, compact steps */
}

.shift-step-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  /* Tightly framed padding */
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  /* Sleek rounded corners */
  transition: all 0.3s ease;
}

.step-before:hover {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
  transform: translateX(4px);
}

.step-after:hover {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.2);
  transform: translateX(4px);
}

.step-icon-box {
  width: 38px;
  height: 38px;
  /* Compact icon box */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-icon-box svg {
  width: 18px;
  height: 18px;
}

.icon-before {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.icon-after {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.step-text-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.step-text-col h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  /* Compact title */
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.step-text-col p {
  font-size: 0.85rem;
  /* Compact description */
  color: #94a3b8;
  margin: 0;
  line-height: 1.35;
}

.panel-box-footer {
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.footer-before {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.footer-after {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

/* VS Glowing Badge */
.shift-vs-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  /* Compact VS badge */
  border-radius: 50%;
  background: linear-gradient(135deg, #f67214, #d85f0f);
  color: #ffffff;
  font-family: "Outfit", sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 0 25px rgba(246, 114, 20, 0.6);
  z-index: 10;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .shift-panels-container {
    grid-template-columns: 1fr;
    gap: 32px;
    max-width: 680px;
  }

  .shift-vs-badge {
    margin: 8px auto;
  }
}

@media (max-width: 575px) {
  .shift-section.shift-dark {
    padding: 50px 0;
  }

  .panel-box-header {
    padding: 20px 20px 16px;
  }

  .panel-box-body {
    padding: 20px;
    gap: 12px;
  }

  .shift-step-card {
    padding: 12px 16px;
    gap: 14px;
  }

  .step-icon-box {
    width: 36px;
    height: 36px;
  }

  .step-icon-box svg {
    width: 16px;
    height: 16px;
  }

  .step-text-col h4 {
    font-size: 0.95rem;
  }

  .step-text-col p {
    font-size: 0.8rem;
  }

  .panel-box-footer {
    padding: 14px 20px;
    font-size: 0.8rem;
  }

  .shift-main-title {
    font-size: clamp(1.75rem, 6vw, 2.2rem);
  }
}

/* 9. WHY IT MATTERS SECTION (PREMIUM SAAS) */
.matters-section {
  padding: clamp(80px, 10vw, 120px) 0;
  background-color: #ffffff;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
}

.matters-container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

.matters-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.matters-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 20px;
}

.matters-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  color: #64748b;
  margin-bottom: 24px;
}

.fragment-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.f-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.f-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
  border-color: #94a3b8;
  color: #0f172a;
}

.f-tag svg {
  width: 18px;
  height: 18px;
  color: #f67214;
  /* Orange accent */
}

/* Premium Split Content Container */
.matters-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* Left Side: Impact Panel */
.impact-panel {
  padding: 48px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.impact-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 32px;
  line-height: 1.3;
}

.impact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.impact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.1rem;
  color: #475569;
  line-height: 1.5;
}

.check-icon-pro {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(246, 114, 20, 0.1);
  color: #f67214;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.check-icon-pro svg {
  width: 14px;
  height: 14px;
}

.impact-list strong {
  color: #0f172a;
  font-weight: 700;
}

/* Right Side: Benefits Panel */
.benefits-panel {
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.b-panel-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 24px;
}

.b-grid-pro {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.b-card-pro {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all 0.3s ease;
}

.b-card-pro:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
  transform: translateY(-2px);
}

.b-icon-pro {
  width: 44px;
  height: 44px;
  background: #f1f5f9;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #334155;
}

.b-icon-pro svg {
  width: 20px;
  height: 20px;
}

.b-card-pro p {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 991px) {
  .matters-content {
    grid-template-columns: 1fr;
  }

  .impact-panel {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
}

@media (max-width: 575px) {
  .matters-section {
    padding: 60px 0;
  }

  .impact-panel,
  .benefits-panel {
    padding: 32px 24px;
  }

  .b-grid-pro {
    grid-template-columns: 1fr;
  }

  .impact-title {
    font-size: 1.35rem;
  }
}

/* 10. BUILT FOR PROJECT TEAMS SECTION (LIGHT & PREMIUM) */
.teams-section {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.teams-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(circle, rgba(246, 114, 20, 0.03) 0%, rgba(255, 255, 255, 0) 70%);
  z-index: 0;
}

.teams-split-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Left Side */
.teams-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.teams-main-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.5rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: #0f172a;
  margin-top: 24px;
  margin-bottom: 40px;
}

.audience-list-light {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.audience-list-light li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.25rem;
  font-weight: 600;
  color: #334155;
  transition: all 0.3s ease;
}

.audience-list-light li:hover {
  color: #0f172a;
  transform: translateX(8px);
}

.a-icon-light {
  width: 28px;
  height: 28px;
  background: #fff4ed;
  color: #f67214;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px #fffdfa;
}

.a-icon-light svg {
  width: 14px;
  height: 14px;
}

/* Right Side */
.teams-right {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 32px;
  padding: 48px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03);
}

.workflows-title-light {
  font-family: "Outfit", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 32px;
}

.workflows-grid-light {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.workflow-card-light {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 20px 24px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.workflow-card-light:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
  border-color: #cbd5e1;
}

.w-icon-light {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.w-icon-light svg {
  width: 22px;
  height: 22px;
}

.icon-blue {
  background: #eff6ff;
  color: #3b82f6;
}

.icon-green {
  background: #ecfdf5;
  color: #10b981;
}

.icon-purple {
  background: #f5f3ff;
  color: #8b5cf6;
}

.icon-orange {
  background: #fff7ed;
  color: #f97316;
}

.w-text-light h4 {
  font-family: "Outfit", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 4px 0;
}

.w-text-light p {
  font-size: 0.95rem;
  color: #64748b;
  margin: 0;
}

@media (max-width: 991px) {
  .teams-split-layout {
    grid-template-columns: 1fr;
    gap: 56px;
  }

  .teams-right {
    padding: 40px 32px;
  }
}

@media (max-width: 575px) {
  .teams-right {
    padding: 32px 20px;
  }

  .workflow-card-light {
    padding: 16px;
    gap: 16px;
  }

  .w-icon-light {
    width: 40px;
    height: 40px;
  }

  .w-icon-light svg {
    width: 18px;
    height: 18px;
  }

  .w-text-light h4 {
    font-size: 1.05rem;
  }

  .w-text-light p {
    font-size: 0.85rem;
  }

  .audience-list-light li {
    font-size: 1.1rem;
  }
}

/* FINAL CTA SECTION */
.cta-section {
  padding: clamp(80px, 10vw, 120px) 0;
  background: #ffffff;
}

.cta-card {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 40px;
  background: #fffdfa;
  border: 1px solid rgba(246, 114, 20, 0.1);
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(246, 114, 20, 0.05);
}

.cta-description {
  font-size: 1.25rem;
  color: #64748b;
  margin: 24px 0 40px;
}

@media (max-width: 767px) {
  .cta-card {
    padding: 48px 24px;
    border-radius: 24px;
  }
}

/* ── ANIMATIONS ─────────────────────────────────────────── */
@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.4);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(246, 114, 20, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(246, 114, 20, 0);
  }
}

/* Specific pulse for red REC dot */
.s1-rec-dot {
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.ds-searching.visible {
  display: flex;
  opacity: 1;
  animation: fadeIn 0.3s ease forwards;
}

.ds-cards.visible {
  display: flex;
  opacity: 1;
}

.ds-card {
  animation: slideInUp 0.5s ease backwards;
}

.ds-card:nth-child(2) {
  animation-delay: 0.15s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* ── SCENE 1 LOTTIE INTRO ───────────────────────────────── */
.s1-lottie-intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: linear-gradient(160deg, #fff9f5 0%, #ffffff 50%, #fff5ee 100%);
  z-index: 2;
  transition: opacity 0.9s ease;
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.s1-lottie-intro.hidden {
  opacity: 0;
  pointer-events: none;
}

.s1-lottie-badge {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f67214;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(246, 114, 20, 0.25);
  padding: 9px 20px;
  border-radius: 24px;
  box-shadow: 0 4px 16px rgba(246, 114, 20, 0.12);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.6s ease 0.3s both;
}

/* Dashboard layer — hidden until Lottie fades out */
.s1-dashboard {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
  z-index: 1;
}

.s1-dashboard.visible {
  opacity: 1;
  pointer-events: auto;
}


/* ========================================
   BREADCRUMB NAVIGATION
   ======================================== */

.breadcrumb-nav {
  margin-bottom: 40px;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
}

.breadcrumb-link {
  position: relative;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.breadcrumb-link:hover {
  color: var(--color-accent);
}

.breadcrumb-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}

.breadcrumb-link:hover::after {
  width: 100%;
}

.breadcrumb-separator {
  font-size: 14px;
  color: #cbd5e1;
  font-weight: 400;
  user-select: none;
}

.breadcrumb-current {
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.breadcrumb-link-current {
  position: relative;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
}

.breadcrumb-link-current::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
}

/* ========================================
   BREADCRUMB IN CTA SECTION (DARK THEME)
   ======================================== */

.breadcrumb-cta {
  margin-top: 48px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  padding: 0 20px;
}

.breadcrumb-cta.breadcrumb-left {
  justify-content: flex-start;
}

.breadcrumb-cta .breadcrumb-link {
  color: rgba(255, 255, 255, 0.6);
}

.breadcrumb-cta .breadcrumb-link:hover {
  color: var(--color-accent);
}

.breadcrumb-cta .breadcrumb-separator {
  color: rgba(255, 255, 255, 0.3);
}

.breadcrumb-cta .breadcrumb-link-current {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb-cta .breadcrumb-link-current::after {
  background: var(--color-accent);
}

.breadcrumb-cta .breadcrumb-link-current-plain {
  position: relative;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

/* ========================================
   SECTION 9 — FINAL CTA (DARK THEME)
   ======================================== */

.final-cta-dark {
  position: relative;
  padding: 100px 0 0 0;
  background: linear-gradient(180deg, #0a0e1a 0%, #0f1419 50%, #1a1f2e 100%);
  overflow: hidden;
}

/* Animated Stars Background */
.cta-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(2px 2px at 90% 60%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 15% 90%, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200% 200%;
  animation: starsMove 60s linear infinite;
  opacity: 0.6;
  pointer-events: none;
}

@keyframes starsMove {
  0% {
    background-position: 0% 0%;
  }

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

/* Glowing Orbs */
.cta-glow-orb {
  position: absolute;
  z-index: 3;
  filter: blur(80px);
  opacity: 0.3;
  pointer-events: none;
  animation: orbFloat 8s ease-in-out infinite;
}

.cta-glow-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(246, 114, 20, 0.4), transparent);
  top: -200px;
  right: -100px;
  animation-delay: 0s;
}

.cta-glow-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 140, 66, 0.3), transparent);
  bottom: -150px;
  left: -100px;
  animation-delay: 2s;
}

.cta-glow-3 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(246, 114, 20, 0.25), transparent);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 4s;
}

@keyframes orbFloat {

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

  33% {
    transform: translate(30px, -30px) scale(1.1);
  }

  66% {
    transform: translate(-30px, 30px) scale(0.9);
  }
}

/* Content */
.cta-content-dark {
  position: relative;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  z-index: 1;
}

/* Badge */
.cta-badge-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(246, 114, 20, 0.1);
  border: 2px solid rgba(246, 114, 20, 0.3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 32px;
  box-shadow: 0 0 30px rgba(246, 114, 20, 0.2);
  animation: badgeGlow 3s ease-in-out infinite;
}

@keyframes badgeGlow {

  0%,
  100% {
    box-shadow: 0 0 30px rgba(246, 114, 20, 0.2);
  }

  50% {
    box-shadow: 0 0 50px rgba(246, 114, 20, 0.4);
  }
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  z-index: 3;
  animation: pulse 2s infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.7);
  }

  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 10px rgba(246, 114, 20, 0);
  }
}

/* Title */
.cta-title-dark {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 16px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Subtitle */
.cta-subtitle-dark {
  font-size: clamp(1.25rem, 2.5vw, 1.625rem);
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 48px;
  line-height: 1.6;
  font-weight: 500;
}

.cta-accent-text {
  background: linear-gradient(135deg, var(--color-accent), #ff8c42);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  position: relative;
  display: inline-block;
}

/* Button Group */
.cta-button-group {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

/* Primary Button with Shine Effect */
.btn-cta-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 48px;
  background: linear-gradient(135deg, var(--color-accent), #ff8c42);
  color: #ffffff;
  border: none;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow:
    0 0 0 0 rgba(246, 114, 20, 0.4),
    0 12px 40px rgba(246, 114, 20, 0.4),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
}

/* Shine Effect */
.btn-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
  z-index: -1;
}

.btn-cta-primary:hover .btn-shine {
  left: 100%;
}

.btn-cta-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 8px rgba(246, 114, 20, 0.2),
    0 20px 60px rgba(246, 114, 20, 0.6),
    inset 0 -2px 8px rgba(0, 0, 0, 0.2);
}

.btn-cta-primary:active {
  transform: translateY(-2px) scale(1);
}

.btn-cta-primary svg {
  transition: transform 0.3s ease;
}

.btn-cta-primary:hover svg {
  transform: translateX(5px);
}

/* Note */
.cta-note-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  font-weight: 500;
}

.cta-note-dark svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* Responsive Breadcrumb in CTA */
@media (max-width: 767px) {
  .breadcrumb-cta {
    margin-top: 36px;
  }

  .breadcrumb-cta .breadcrumb-link,
  .breadcrumb-cta .breadcrumb-link-current,
  .breadcrumb-cta .breadcrumb-link-current-plain {
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .breadcrumb-cta {
    margin-top: 32px;
  }

  .breadcrumb-cta .breadcrumb-link,
  .breadcrumb-cta .breadcrumb-link-current,
  .breadcrumb-cta .breadcrumb-link-current-plain {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .breadcrumb-nav {
    margin-bottom: 25px;
    padding: 0 16px;
  }

  .breadcrumb-list {
    gap: 6px;
  }

  .breadcrumb-link,
  .breadcrumb-separator,
  .breadcrumb-current {
    font-size: 11px;
  }
}

/* Responsive CTA Dark Theme */
@media (max-width: 991px) {
  .final-cta-dark {
    padding: 80px 0 0 0;
  }

  .cta-badge-dark {
    margin-bottom: 28px;
  }

  .cta-title-dark {
    margin-bottom: 20px;
  }

  .cta-subtitle-dark {
    margin-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .final-cta-dark {
    padding: 70px 0 0 0;
  }

  .cta-badge-dark {
    padding: 8px 20px;
    font-size: 11px;
    margin-bottom: 24px;
  }

  .cta-title-dark {
    margin-bottom: 18px;
  }

  .cta-subtitle-dark {
    margin-bottom: 36px;
  }

  .btn-cta-primary {
    padding: 18px 40px;
    font-size: 17px;
  }

  .cta-button-group {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 575px) {
  .final-cta-dark {
    padding: 60px 0 0 0;
  }

  .cta-badge-dark {
    padding: 7px 18px;
    font-size: 10px;
  }

  .btn-cta-primary {
    width: 100%;
    justify-content: center;
    padding: 16px 36px;
    font-size: 16px;
  }

  .cta-note-dark {
    font-size: 13px;
  }

  .cta-glow-1,
  .cta-glow-2,
  .cta-glow-3 {
    filter: blur(60px);
  }
}


/* Extra Small Screens - Ultra Compact Dashboard */
@media (max-width: 400px) {
  .dash-wrap {
    height: 460px;
  }

  .dash-bar {
    height: 40px;
    padding: 0 10px;
  }

  .dash-dots {
    gap: 4px;
  }

  .dd {
    width: 8px;
    height: 8px;
  }

  .dash-pill {
    font-size: 9px;
  }

  .dash-live-dot {
    width: 6px;
    height: 6px;
  }

  .dash-live-txt {
    font-size: 10px;
  }

  .dash-viewport {
    height: 420px;
  }

  .s1-wrap {
    padding: 10px;
    gap: 8px;
  }

  .s1-header {
    gap: 8px;
    padding-bottom: 8px;
  }

  .s1-rec-pill {
    padding: 2px 7px;
    font-size: 9px;
  }

  .s1-meeting-name {
    font-size: 11px;
  }

  .s1-timer {
    font-size: 10px;
    padding: 2px 6px;
  }

  .s1-sources {
    gap: 6px;
  }

  .s1-src-label {
    font-size: 8px;
  }

  .s1-src-chips {
    gap: 4px;
  }

  .s1-chip {
    padding: 4px 8px;
    font-size: 10px;
  }

  .s1-wave-row {
    padding: 8px;
  }

  .s1-waveform {
    height: 24px;
  }

  .s1-transcript {
    padding: 8px;
  }

  .s1-tx-bar {
    margin-bottom: 8px;
  }

  .s1-tx-label {
    font-size: 11px;
  }

  .s1-ai-chip {
    font-size: 9px;
    padding: 2px 6px;
  }

  .s1-tx-body {
    gap: 6px;
  }

  .s1-spk {
    font-size: 10px;
  }

  .s1-txt {
    font-size: 10px;
  }

  .s1-output-row {
    padding-top: 8px;
    gap: 4px;
  }

  .s1-out-label {
    font-size: 8px;
  }

  .s1-out-tag {
    font-size: 9px;
    padding: 2px 7px;
  }

  /* Scene 2 - Extra Small */
  .ds-inner {
    padding: 10px;
    gap: 8px;
  }

  .ds-agent-header {
    gap: 8px;
  }

  .ds-agent-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }

  .ds-agent-name {
    font-size: 12px;
  }

  .ds-agent-sub {
    font-size: 9px;
  }

  .ds-search-box {
    padding: 10px;
    font-size: 11px;
  }

  .ds-card {
    padding: 10px;
  }

  .ds-tag {
    font-size: 9px;
  }

  .ds-card-date {
    font-size: 10px;
  }

  .ds-card-text {
    font-size: 10px;
  }

  /* Scene 3 - Extra Small */
  .ds-echo {
    padding: 10px;
    font-size: 11px;
  }

  .ds-answer-head {
    padding: 8px 10px;
    font-size: 10px;
  }

  .ds-src-count {
    font-size: 9px;
  }

  .ds-answer-body {
    padding: 10px;
    gap: 8px;
  }

  .ds-ans-icon {
    font-size: 14px;
  }

  .ds-ans-label {
    font-size: 9px;
  }

  .ds-ans-text {
    font-size: 10px;
  }

  .ds-answer-tags {
    padding: 6px 10px;
    gap: 5px;
  }

  .ds-atag {
    font-size: 9px;
    padding: 2px 6px;
  }

  .s1-lottie-badge {
    bottom: 25px;
    padding: 5px 10px;
    font-size: 10px;
  }
}

/* ========================================
   SECTION 2 - FRAGMENTATION WALL
   ======================================== */
.frag-section {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.frag-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}

.frag-content {
  position: relative;
  z-index: 2;
}

.frag-text-blocks {
  margin-top: 40px;
}

.frag-p-lead {
  font-size: 1.25rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 90%;
}

.frag-meeting-intel-clean {
  margin-bottom: 40px;
}

.frag-intel-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}

.frag-list-clean {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.frag-list-clean li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #334155;
  background: #f8fafc;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  transition: all 0.2s ease;
}

.frag-list-clean li:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.f-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #f67214;
}


.frag-reveal-text {
  opacity: 0;
  transform: translateY(20px);
  margin-top: 40px;
  padding: 20px 24px;
  background: rgba(239, 68, 68, 0.04);
  border-left: 4px solid #ef4444;
  border-radius: 0 12px 12px 0;
}

.frag-p-heavy {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.frag-p-buried {
  font-size: 1.05rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.6;
  margin: 0;
}

.frag-silence-box {
  opacity: 0;
  margin-top: 40px;
  position: relative;
  padding-left: 30px;
}

.frag-silence-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--color-accent);
  border-radius: 4px;
}

.frag-p-final {
  font-size: 2rem;
  font-weight: 900;
  color: #0f172a;
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.03em;
  margin: 0;
}

/* --- VISUAL RIGHT SIDE --- */
.frag-visual {
  position: relative;
  height: 560px;
  width: 100%;
  border-radius: 32px;
  background: #fdfdfd;
  border: 1px solid #edf2f7;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.frag-visual.is-fragmented {
  filter: grayscale(1) contrast(0.9);
  background: #f8fafc;
}

.frag-state {
  position: absolute;
  inset: 0;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* STATE 1: ACTIVE MEETING */
.frag-meeting-ui {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03), 0 1px 3px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(17, 17, 17, 0.05);
  display: flex;
  flex-direction: column;
}

.f-topbar {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  gap: 16px;
}

.f-dots {
  display: flex;
  gap: 6px;
}

.f-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.f-dot.red {
  background: #ef4444;
}

.f-dot.yellow {
  background: #f59e0b;
}

.f-dot.green {
  background: #10b981;
}

.f-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #334155;
  flex: 1;
}

.f-rec-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
  animation: pulseRec 1.5s infinite;
}

@keyframes pulseRec {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  }
}

.f-body {
  flex: 1;
  padding: 24px;
  position: relative;
  /* Key for absolute children */
  display: flex;
  flex-direction: column;
}

.f-waveform-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 80px;
  margin-bottom: 30px;
}

.f-waveform {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 40px;
}

.f-bar {
  width: 4px;
  background: var(--color-accent);
  border-radius: 2px;
  animation: wavePulse 1s ease-in-out infinite alternate;
}

.f-bar:nth-child(2n) {
  animation-delay: 0.2s;
}

.f-bar:nth-child(3n) {
  animation-delay: 0.4s;
}

@keyframes wavePulse {
  0% {
    height: 10px;
    opacity: 0.5;
  }

  100% {
    height: 35px;
    opacity: 1;
  }
}

.f-waveform-lbl {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.f-chips {
  position: absolute;
  inset: 0;
  /* Take up full body area */
  pointer-events: none;
}

.f-chip {
  position: absolute;
  padding: 12px 20px;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid #f1f5f9;
  z-index: 10;
  white-space: nowrap;
}

.f-chip .f-icon {
  font-size: 1.2rem;
}

/* Spread them out properly across the 100% width/height of the body */
#fc1 {
  top: 15%;
  left: 15%;
}

#fc2 {
  top: 30%;
  right: 12%;
}

#fc3 {
  bottom: 25%;
  left: 10%;
}

#fc4 {
  bottom: 15%;
  right: 15%;
}

#fc5 {
  top: 50%;
  left: 45%;
  transform: translateX(-50%);
}

.scatter-state {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.f-file-card {
  position: absolute;
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(226, 232, 240, 0.8);
  opacity: 0;
  /* GSAP will reveal */
  min-width: 280px;
}

.f-icon-box {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  background: #f1f5f9;
}

.file-mp4 {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.file-pdf {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.file-mail {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

.file-txt {
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
}

.file-slack {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.1);
}

.f-file-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.f-file-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.f-file-size {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 500;
}

/* File destination coordinates - carefully staggered to create a beautiful floating arrangement without ugly overlaps */
#ff1 {
  top: 8%;
  left: 5%;
  z-index: 1;
}

#ff3 {
  top: 18%;
  right: 5%;
  z-index: 2;
}

#ff5 {
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

#ff4 {
  bottom: 18%;
  left: 5%;
  z-index: 3;
}

#ff2 {
  bottom: 8%;
  right: 5%;
  z-index: 4;
}

/* RE-PURPOSED: Light Mesh Gradient Overlay for "Chaos" State */
.frag-overlay-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(246, 114, 20, 0.05) 0%, transparent 40%),
    radial-gradient(circle at bottom left, rgba(59, 130, 246, 0.05) 0%, transparent 40%),
    rgba(248, 250, 252, 0.7);
  backdrop-filter: blur(8px);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .frag-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .frag-visual {
    height: 500px;
  }

  /* Increased height for breathing room */

  /* Scale down cards on tablet so they fit perfectly */
  .f-file-card {
    min-width: 240px;
    padding: 12px 16px;
  }

  .f-icon-box {
    width: 36px;
    height: 36px;
  }

  .f-file-title {
    font-size: 0.9rem;
  }

  /* Tablet specific staggered scatter */
  #ff1 {
    top: 8%;
    left: 2%;
    z-index: 1;
  }

  #ff3 {
    top: 22%;
    right: 2%;
    z-index: 2;
  }

  #ff5 {
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
  }

  #ff4 {
    bottom: 22%;
    left: 2%;
    z-index: 3;
  }

  #ff2 {
    bottom: 8%;
    right: 2%;
    z-index: 4;
  }
}

@media (max-width: 575px) {
  .frag-section {
    padding: 60px 0;
  }

  .frag-visual {
    height: 350px;
  }

  .f-chip {
    font-size: 0.75rem;
    padding: 8px 12px;
  }

  /* Mobile File Cards */
  .f-file-card {
    min-width: 200px;
    padding: 10px 14px;
    gap: 10px;
  }

  .f-file-title {
    font-size: 0.8rem;
  }

  .f-file-size {
    font-size: 0.65rem;
  }

  .f-icon-box {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    border-radius: 8px;
  }

  #fc1 {
    top: 10%;
    left: 5%;
  }

  #fc2 {
    top: 25%;
    right: 5%;
  }

  #fc3 {
    bottom: 20%;
    left: 5%;
  }

  #fc4 {
    bottom: 10%;
    right: 5%;
  }

  #fc5 {
    top: 45%;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Scatter State scaled down to prevent overlap */
  #ff1 {
    top: 5%;
    left: 2%;
    transform: scale(0.9);
  }

  #ff2 {
    bottom: 5%;
    right: 2%;
    transform: scale(0.9);
  }

  #ff3 {
    top: 35%;
    right: -5%;
    transform: scale(0.85);
    z-index: 1;
  }

  #ff4 {
    bottom: 30%;
    left: -5%;
    transform: scale(0.85);
    z-index: 2;
  }

  #ff5 {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.05);
    z-index: 10;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  }
}

/* ========================================
   SECTION 4 — INTRODUCING MEETING AI
   "Meetings In → Intelligence Out"
   ======================================== */

/* ── Section Shell ── */
.s4-section {
  position: relative;
  background: #fafafa;
  padding: 100px 0 80px;
  overflow: hidden;
}

/* Radial ambient glow */
.s4-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(246, 114, 20, .06) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(246, 114, 20, .04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(37, 99, 235, .03) 0%, transparent 60%);
  pointer-events: none;
}

/* Subtle grid texture */
.s4-grid-texture {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(17, 17, 17, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ── Container ── */
.s4-container {
  position: relative;
  z-index: 1;
  max-width: 1440px !important;
  width: 100%;
  margin: 0 auto;
  padding: 0 4vw;
}

/* ── TOP CONTENT ── */
.s4-top {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 64px;
}

/* Badge */
.s4-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(246, 114, 20, .09);
  border: 1px solid rgba(246, 114, 20, .25);
  color: #f67214;
  font-family: 'Outfit', sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Heading */
.s4-heading {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #111;
  margin: 0 0 18px;
}

.s4-heading-accent {
  color: #f67214;
}

/* Subtext */
.s4-subtext {
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: clamp(.95rem, 1.6vw, 1.08rem);
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.s4-br-desktop {
  display: inline;
}

/* ── WORKFLOW GRID ── */
.s4-workflow {
  display: grid;
  grid-template-columns: minmax(0, 420px) auto minmax(0, 420px);
  gap: 0 100px;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Dynamic SVG overlay — JS draws real bezier paths here */
.s4-svg-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

/* ── COLUMNS ── */
.s4-col {
  position: relative;
  z-index: 1;
}

.s4-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 18px;
}

.s4-col-center .s4-col-label {
  margin-bottom: 48px;
}

.s4-col-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(246, 114, 20, .12);
  color: #f67214;
  font-size: 9px;
  font-weight: 900;
  flex-shrink: 0;
}

/* ── LEFT: SOURCE CARDS ── */
.s4-col-left {
  min-width: 0;
  max-width: 420px;
  width: 420px;
}

.s4-col-right {
  min-width: 0;
  max-width: 420px;
  width: 420px;
}

.s4-source-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Source card base */
.s4-src-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .07);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(12, 18, 28, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: default;
}

.s4-src-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(12, 18, 28, .09);
  border-color: rgba(246, 114, 20, .2);
}

/* Icon wrap */
.s4-src-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s4-src-icon-wrap img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.s4-icon-ifmeets {
  background: rgba(246, 114, 20, .1);
}

.s4-icon-zoom {
  background: rgba(37, 99, 235, .08);
}

.s4-icon-teams {
  background: rgba(124, 58, 237, .08);
}

.s4-icon-meet {
  background: rgba(22, 163, 74, .08);
}

/* Source info */
.s4-src-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-src-name {
  font-family: 'Outfit', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s4-src-sub {
  font-size: 13px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Status badges */
.s4-src-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  letter-spacing: .3px;
}

.s4-status-live {
  color: #16a34a;
  background: rgba(22, 163, 74, .1);
  border: 1px solid rgba(22, 163, 74, .2);
  border-radius: 999px;
  padding: 3px 9px;
}

.s4-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  animation: s4Pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes s4Pulse {

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

  50% {
    opacity: .6;
    transform: scale(1.3);
  }
}

.s4-status-done {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(22, 163, 74, .12);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s4-status-processing {
  color: #f67214;
}

.s4-spin {
  animation: s4Spin 1.2s linear infinite;
}

@keyframes s4Spin {
  to {
    transform: rotate(360deg);
  }
}

.s4-status-upload {
  color: #888;
}

/* Upload drop zone */
.s4-upload-zone {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1.5px dashed rgba(246, 114, 20, .3);
  border-radius: 16px;
  background: rgba(246, 114, 20, .03);
  color: #888;
  font-size: 13.5px;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.s4-upload-zone:hover {
  border-color: rgba(246, 114, 20, .55);
  background: rgba(246, 114, 20, .06);
  color: #f67214;
}

/* ── CENTER: AI CORE ── */
.s4-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  flex-shrink: 0;
  overflow: visible;
}

.s4-ai-core {
  position: relative;
  width: 280px;
  height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* Pulsing rings */
.s4-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(246, 114, 20, .15);
  animation: s4RingPulse 3s ease-in-out infinite;
}

.s4-ring-1 {
  inset: 20px;
  animation-delay: 0s;
}

.s4-ring-2 {
  inset: 8px;
  border-color: rgba(246, 114, 20, .1);
  animation-delay: .6s;
}

.s4-ring-3 {
  inset: -6px;
  border-color: rgba(246, 114, 20, .06);
  animation-delay: 1.2s;
}

@keyframes s4RingPulse {

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

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

/* Core inner */
.s4-core-inner {
  position: relative;
  z-index: 2;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(246, 114, 20, .22);
  box-shadow:
    0 0 0 10px rgba(246, 114, 20, .06),
    0 16px 48px rgba(246, 114, 20, .14),
    0 6px 18px rgba(12, 18, 28, .09);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  animation: s4CoreFloat 4s ease-in-out infinite;
}

@keyframes s4CoreFloat {

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

  50% {
    transform: translateY(-4px);
  }
}

.s4-core-icon {
  animation: s4StarSpin 8s linear infinite;
}

@keyframes s4StarSpin {
  to {
    transform: rotate(360deg);
  }
}

.s4-core-label {
  font-family: 'Outfit', sans-serif;
  font-size: 14.5px;
  font-weight: 800;
  color: #111;
  letter-spacing: -.01em;
}

.s4-core-sub {
  font-size: 12.5px;
  color: #f67214;
  font-weight: 600;
  font-family: 'Outfit', sans-serif;
  letter-spacing: .5px;
}

/* Floating labels around core */
.s4-float-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: 1.5px solid rgba(246, 114, 20, 0.4);
  border-radius: 999px;
  font-size: 13px;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  color: #0f172a;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(246, 114, 20, 0.15);
  animation: s4LabelFloat 3s ease-in-out infinite;
}

/* Float labels — top/bottom only; side connections drawn by SVG JS */
.s4-fl-top {
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: 0s;
}

.s4-fl-bottom {
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  animation-delay: .75s;
}

/* Side labels hidden — visual connection is the animated SVG paths */
.s4-fl-left {
  display: none;
}

.s4-fl-right {
  display: none;
}

@keyframes s4LabelFloat {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-3px);
  }
}

/* col-right width set above alongside col-left */

.s4-output-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.s4-out-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .07);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(12, 18, 28, .05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: default;
  animation: s4CardIn .5s ease both;
}

.s4-out-card:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 24px rgba(12, 18, 28, .09);
  border-color: rgba(246, 114, 20, .18);
}

.s4-out-card-1 {
  animation-delay: .1s;
}

.s4-out-card-2 {
  animation-delay: .2s;
}

.s4-out-card-3 {
  animation-delay: .3s;
}

.s4-out-card-4 {
  animation-delay: .4s;
}

@keyframes s4CardIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.s4-out-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s4-out-orange {
  background: rgba(246, 114, 20, .12);
  color: #f67214;
}

.s4-out-green {
  background: rgba(22, 163, 74, .1);
  color: #16a34a;
}

.s4-out-blue {
  background: rgba(37, 99, 235, .09);
  color: #2563eb;
}

.s4-out-purple {
  background: rgba(124, 58, 237, .09);
  color: #7c3aed;
}

.s4-out-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.s4-out-name {
  font-family: 'Outfit', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.s4-out-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.s4-out-chevron {
  color: #ccc;
  flex-shrink: 0;
  transition: color .2s;
}

.s4-out-card:hover .s4-out-chevron {
  color: #f67214;
}

/* Mobile output cards — hidden on desktop */
.s4-output-mobile {
  display: none;
}

/* ── BOTTOM TRUST STRIP ── */
.s4-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 38px;
  padding-top: 0px;
  border-top: 1px solid rgba(17, 17, 17, .07);
}

.s4-trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  background: #ffffff;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  box-shadow: 0 1px 3px rgba(12, 18, 28, .03);
  white-space: nowrap;
  transition: all .2s ease;
}

.s4-trust-item svg {
  color: #f67214;
  width: 14px;
  height: 14px;
  stroke-width: 2.5px;
}

.s4-trust-item:hover {
  background: rgba(246, 114, 20, .03);
  border-color: rgba(246, 114, 20, .3);
  color: #f67214;
  box-shadow: 0 2px 6px rgba(246, 114, 20, .08);
}

/* ─────────────────────────────────────────
   SECTION 4 — RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────── */

/* ── TABLET (≤ 1024px) ── */
@media (max-width: 1024px) {
  .s4-section {
    padding: 80px 0 64px;
  }

  .s4-top {
    margin-bottom: 48px;
  }

  .s4-workflow {
    grid-template-columns: minmax(0, 290px) auto minmax(0, 290px);
    gap: 0 40px;
  }

  .s4-col-center {
    width: 200px;
  }

  .s4-ai-core {
    width: 190px;
    height: 190px;
  }

  .s4-core-inner {
    width: 115px;
    height: 115px;
  }

  .s4-col-left,
  .s4-col-right {
    width: 290px;
    max-width: 290px;
  }

  .s4-svg-overlay {
    display: none;
  }
}

/* ── SEMI-STACKED TABLET (≤ 900px) ── */
@media (max-width: 900px) {
  .s4-workflow {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 40px;
    justify-content: stretch;
  }

  .s4-col-left,
  .s4-col-right {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
  }

  .s4-col-center {
    width: 100%;
    align-items: center;
  }

  .s4-ai-core {
    width: 200px;
    height: 200px;
  }

  .s4-core-inner {
    width: 120px;
    height: 120px;
  }

  .s4-fl-top {
    top: -24px;
  }

  .s4-fl-bottom {
    bottom: -24px;
  }

  .s4-svg-overlay {
    display: none;
  }

  /* Vertical connector line */
  .s4-col-left::after {
    content: '';
    display: block;
    width: 2px;
    height: 36px;
    border-left: 2px dashed rgba(246, 114, 20, .55);
    margin: 15px auto 0;
    position: relative;
    z-index: 2;
  }

  .s4-col-center::after {
    content: '';
    display: block;
    width: 2px;
    height: 36px;
    border-left: 2px dashed rgba(246, 114, 20, .55);
    margin: 28px auto 0;
    /* Pushed down to start cleanly below the Indexing Discussions capsule */
    position: relative;
    z-index: 2;
  }
}

/* ── MOBILE (≤ 640px) ── */
@media (max-width: 640px) {
  .s4-section {
    padding: 64px 0 48px;
  }

  .s4-top {
    margin-bottom: 36px;
  }

  .s4-heading {
    font-size: clamp(1.75rem, 7vw, 2.2rem);
  }

  .s4-subtext {
    font-size: .93rem;
  }

  .s4-br-desktop {
    display: none;
  }

  /* Source cards — compact */
  .s4-src-card {
    padding: 9px 12px;
    gap: 9px;
  }

  .s4-src-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }

  .s4-src-name {
    font-size: 12px;
  }

  .s4-src-sub {
    font-size: 10px;
  }

  /* Upload zone */
  .s4-upload-zone {
    font-size: 11px;
    padding: 9px 12px;
  }

  /* AI Core */
  .s4-ai-core {
    width: 190px;
    height: 190px;
  }

  .s4-core-inner {
    width: 115px;
    height: 115px;
  }

  .s4-core-label {
    font-size: 12px;
  }

  .s4-core-sub {
    font-size: 10px;
  }

  .s4-col-center .s4-col-label {
    margin-bottom: 42px;
  }

  .s4-fl-left {
    left: -95px;
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .s4-fl-right {
    right: -95px;
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .s4-fl-top {
    top: -24px;
    font-size: 11.5px;
    padding: 6px 12px;
  }

  .s4-fl-bottom {
    bottom: -24px;
    font-size: 11.5px;
    padding: 6px 12px;
  }

  /* HIDE desktop output list, SHOW mobile swipeable */
  .s4-output-list {
    display: none;
  }

  .s4-output-mobile {
    display: block;
  }

  .s4-col-right {
    max-width: 100%;
  }

  /* Mobile swipe track */
  .s4-mobile-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 16px;
  }

  .s4-mobile-track::-webkit-scrollbar {
    display: none;
  }

  .s4-mobile-card {
    scroll-snap-align: center;
    flex: 0 0 72vw;
    max-width: 260px;
    background: #fff;
    border: 1px solid rgba(17, 17, 17, .07);
    border-radius: 16px;
    padding: 20px 18px;
    box-shadow: 0 4px 16px rgba(12, 18, 28, .07);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .s4-mc-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .s4-mc-orange .s4-mc-icon {
    background: rgba(246, 114, 20, .12);
    color: #f67214;
  }

  .s4-mc-green .s4-mc-icon {
    background: rgba(22, 163, 74, .1);
    color: #16a34a;
  }

  .s4-mc-blue .s4-mc-icon {
    background: rgba(37, 99, 235, .09);
    color: #2563eb;
  }

  .s4-mc-purple .s4-mc-icon {
    background: rgba(124, 58, 237, .09);
    color: #7c3aed;
  }

  .s4-mc-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: #111;
    margin: 0;
  }

  .s4-mc-desc {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.5;
  }

  /* Colored bottom bar */
  .s4-mc-bar {
    height: 3px;
    border-radius: 999px;
    margin-top: auto;
  }

  .s4-bar-orange {
    background: #f67214;
  }

  .s4-bar-green {
    background: #16a34a;
  }

  .s4-bar-blue {
    background: #2563eb;
  }

  .s4-bar-purple {
    background: #7c3aed;
  }

  /* Swipe dots */
  .s4-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
  }

  .s4-mdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(17, 17, 17, .15);
    transition: background .25s ease, width .25s ease;
  }

  .s4-mdot-active {
    background: #f67214;
    width: 18px;
    border-radius: 999px;
  }

  /* Trust strip on mobile */
  .s4-trust-strip {
    gap: 8px 12px;
    margin-top: 40px;
    padding-top: 24px;
  }

  .s4-trust-item {
    font-size: 10.5px;
    padding: 6px 11px;
  }
}

/* ── VERY SMALL MOBILE (≤ 400px) ── */
@media (max-width: 400px) {
  .s4-mobile-card {
    flex: 0 0 82vw;
  }

  .s4-fl-left,
  .s4-fl-right {
    display: none;
  }
}

/* ========================================
   SECTION 5 — THE X-RAY SCANNER (WHAT HAPPENS)
   ======================================== */
.s5-section {
  padding: 120px 0;
  background: #fdfdfd;
  position: relative;
  overflow: hidden;
}

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

.s5-header .section-intro {
  margin: 20px auto 0;
  max-width: 700px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #475569;
  line-height: 1.6;
}

/* --- THE UNIFIED DASHBOARD CONTAINER --- */
.s5-dashboard {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 40px 100px -20px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.02);
  padding: 40px;
  overflow: hidden;
  /* Subtle internal mesh grid to make it feel like a workspace */
  background-image: radial-gradient(rgba(246, 114, 20, 0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* SVG Line Connector layer */
.s5-dash-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.s5-dash-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 280px 300px;
  gap: 40px;
  align-items: center;
}

/* --- COL 1: CHAT UI --- */
.s5-chat-window {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.s5-chat-topbar {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  gap: 12px;
}

.s5-chat-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #334155;
  flex: 1;
  text-align: center;
}

.s5-chat-timer {
  font-size: 0.75rem;
  font-weight: 600;
  color: #ef4444;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
}

.s5-chat-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.s5-msg {
  display: flex;
  gap: 12px;
  opacity: 0.4;
  /* Dimmed initially, GSAP will highlight */
  transition: opacity 0.3s ease;
  position: relative;
  padding-right: 120px;
  /* Give room for absolute tags so they never overlap text */
}

.s5-msg.highlight {
  opacity: 1;
}

.s5-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3b82f6;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.s5-msg-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.s5-msg-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
}

.s5-msg-time {
  font-size: 0.7rem;
  font-weight: 500;
  color: #94a3b8;
  margin-left: 6px;
}

.s5-msg-bubble {
  font-size: 0.9rem;
  color: #334155;
  background: #f1f5f9;
  padding: 10px 14px;
  border-radius: 0 12px 12px 12px;
  line-height: 1.4;
  max-width: 100%;
}

/* Floating Tags */
.s5-float-tag {
  position: absolute;
  top: 50%;
  right: 0px;
  /* Align precisely to the padded edge */
  transform: translateY(-50%) scale(0.8);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  opacity: 0;
  z-index: 10;
}

.s5-tag-topic {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.s5-tag-decision {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.s5-tag-action {
  background: #fff7ed;
  color: #f67214;
  border: 1px solid #ffedd5;
}

/* --- COL 2: THE AI CORE --- */
.s5-engine-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.s5-terminal {
  background: #0f172a;
  border-radius: 14px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.3);
  border: 1px solid #334155;
  transform: scale(1.05);
  /* Highlight the terminal as the hero piece */
}

.s5-term-header {
  background: #1e293b;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 0.7rem;
  color: #94a3b8;
  text-align: center;
  border-bottom: 1px solid #334155;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.s5-term-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'Consolas', 'Courier New', monospace;
  font-size: 0.75rem;
}

.s5-term-line {
  color: #64748b;
  display: flex;
  justify-content: space-between;
  opacity: 0.3;
  transition: all 0.2s ease;
}

.s5-term-line.active {
  color: #e2e8f0;
  opacity: 1;
}

.s5-cursor {
  color: #f67214;
  margin-right: 6px;
  font-weight: bold;
}

.s5-t-done {
  color: #10b981;
  font-weight: bold;
  opacity: 0;
}

.s5-term-line.active .s5-t-done {
  opacity: 1;
}

/* --- COL 3: RICH DOCUMENTS --- */
.s5-docs-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.s5-doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  padding: 16px 20px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.02);
  width: 100%;
  position: relative;
  opacity: 0;
  transform: translateX(20px);
  overflow: hidden;
}

/* Beautiful colored side indicator */
.s5-doc-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}

.doc-blue::before {
  background: #3b82f6;
}

.doc-green::before {
  background: #10b981;
}

.doc-orange::before {
  background: #f67214;
}

.s5-doc-icon {
  font-size: 1.2rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #edf2f7;
  color: #64748b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

/* Color-coded icons matching the side border */
.doc-blue .s5-doc-icon {
  color: #3b82f6;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.doc-green .s5-doc-icon {
  color: #10b981;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.doc-orange .s5-doc-icon {
  color: #f67214;
  background: #fff7ed;
  border-color: #ffedd5;
}

.s5-doc-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.s5-doc-info strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0f172a;
}

.s5-doc-info span {
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
}

.s5-doc-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #64748b;
  letter-spacing: 0.5px;
}

/* Responsive Unified Dashboard */
@media (max-width: 991px) {
  .s5-dash-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .s5-dashboard {
    padding: 24px;
  }

  .s5-engine-col {
    max-width: 300px;
    margin: 0 auto;
    width: 100%;
  }

  .s5-float-tag {
    right: 10px;
  }

  /* Pull tags in on mobile */
}

/* ========================================
   SECTION 6 — CHAT-BASED MEETING AGENT
   ======================================== */
.s6-section {
  padding: 100px 0;
  background: #080c17;
  /* Deep dark premium theme */
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.s6-container {
  position: relative;
  z-index: 2;
}

.s6-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  /* Give right side slightly more room */
  gap: 80px;
  align-items: center;
}

/* --- LEFT COLUMN: VISUALS (GLASSMORPHISM) --- */
.s6-visual-col {
  position: relative;
  width: 100%;
}

.s6-float-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.5;
}

.s6-float-orb.orb-1 {
  width: 300px;
  height: 300px;
  background: #f67214;
  top: -50px;
  left: -50px;
  animation: s6OrbFloat 15s ease-in-out infinite alternate;
}

.s6-float-orb.orb-2 {
  width: 250px;
  height: 250px;
  background: #3b82f6;
  bottom: -30px;
  right: -30px;
  animation: s6OrbFloat 12s ease-in-out infinite alternate-reverse;
}

@keyframes s6OrbFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }

  100% {
    transform: translate(30px, 40px) scale(1.1);
  }
}

.s6-glass-panel {
  position: relative;
  z-index: 2;
  max-width: 580px;
  /* Constrain width so it looks like a real app window */
  margin: 0 auto;
  /* Center it within its column */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.s6-glass-header {
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
}

.s6-mac-dots {
  display: flex;
  gap: 6px;
}

.s6-mac-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.s6-mac-dots span:nth-child(1) {
  background: #ff5f56;
}

.s6-mac-dots span:nth-child(2) {
  background: #ffbd2e;
}

.s6-mac-dots span:nth-child(3) {
  background: #27c93f;
}

.s6-header-title {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
  padding-right: 46px;
  /* offset for dots to center text */
}

.s6-glass-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.s6-rooms-wrapper {
  overflow-x: auto;
  scrollbar-width: none;
}

.s6-rooms-wrapper::-webkit-scrollbar {
  display: none;
}

.s6-rooms {
  display: flex;
  gap: 12px;
}

.s6-room {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #94a3b8;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}

.s6-room:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.s6-room.active {
  background: rgba(246, 114, 20, 0.15);
  border-color: rgba(246, 114, 20, 0.5);
  color: #f67214;
}

.s6-chat-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 280px;
}

.s6-chat-bubble {
  max-width: 85%;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.3;
  /* Default state before GSAP */
}

.s6-user-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.s6-ai-bubble {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #cbd5e1;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.s6-ai-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  align-items: center;
}

.s6-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #60a5fa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.s6-source-badge {
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.s6-typing-dots {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}

.s6-typing-dots span {
  width: 6px;
  height: 6px;
  background: #64748b;
  border-radius: 50%;
  animation: s6Typing 1.4s infinite both;
}

.s6-typing-dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.s6-typing-dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes s6Typing {

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

  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.s6-search-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  margin-top: 10px;
}

.s6-search-icon {
  color: #94a3b8;
}

.s6-search-placeholder {
  color: #64748b;
  font-size: 0.95rem;
}

/* --- RIGHT COLUMN: CONTENT --- */
.s6-badge {
  margin-bottom: 24px;
  background: rgba(246, 114, 20, 0.1) !important;
  color: #f67214 !important;
  border: 1px solid rgba(246, 114, 20, 0.2) !important;
}

.s6-title {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.s6-intro {
  font-size: 1.15rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 40px;
}

.s6-features {
  margin-bottom: 40px;
}

.s6-f-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e2e8f0;
  margin-bottom: 20px;
}

.s6-f-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s6-f-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 1.05rem;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.03);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.2s ease;
}

.s6-f-list li:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(5px);
}

.s6-f-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.s6-cta-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(246, 114, 20, 0.15) 0%, rgba(246, 114, 20, 0.05) 100%);
  border: 1px solid rgba(246, 114, 20, 0.3);
  border-radius: 16px;
}

.s6-cta-icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f67214;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.s6-cta-text {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #e2e8f0;
}

.s6-cta-text strong {
  color: #fff;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
  .s6-section {
    padding: 60px 0;
    overflow-x: hidden;
    width: 100vw;
    box-sizing: border-box;
  }

  .s6-container {
    padding: 0 15px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .s6-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    width: 100%;
  }

  .s6-visual-col,
  .s6-content-col {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .s6-visual-col {
    order: 2;
    /* visual on bottom for mobile */
  }

  .s6-content-col {
    order: 1;
    /* content on top for mobile */
    max-width: 380px;
    /* Match the compact width of the glass panel */
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }

  .s6-glass-panel {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .s6-rooms-wrapper {
    max-width: 100%;
  }

  .s6-glass-body {
    padding: 16px;
    gap: 16px;
  }

  .s6-chat-bubble {
    max-width: 100%;
    padding: 12px 14px;
    font-size: 0.9rem;
    word-break: break-word;
  }

  .s6-ai-badge {
    font-size: 0.7rem;
  }

  .s6-title {
    font-size: clamp(1.8rem, 7vw, 2.2rem);
    margin-bottom: 16px;
    text-align: left;
    /* Left-align heading on mobile */
    word-break: break-word;
  }

  .s6-f-title {
    text-align: left;
    /* Left-align feature title on mobile */
  }

  .s6-intro {
    font-size: 1rem;
    word-break: break-word;
    text-align: left;
    /* Left-align intro on mobile */
  }

  .s6-f-list li {
    font-size: 1rem;
    word-break: break-word;
    box-sizing: border-box;
    /* Prevent padding from causing overflow */
    width: 100%;
  }

  .s6-cta-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 16px;
  }

  .s6-cta-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ========================================
   SECTION 7 — OUTPUTS (BENTO BOX)
   ======================================== */
.s7-section {
  padding: 100px 0;
  /* Reduced padding so it's not so bulky */
  background: #f8fafc;
  color: #0f172a;
  position: relative;
  overflow: hidden;
}

/* Background Glowing Orbs for depth */
.s7-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
}

.s7-bg-orb.s7-orb-1 {
  width: 600px;
  height: 600px;
  background: #f67214;
  top: -100px;
  left: -200px;
}

.s7-bg-orb.s7-orb-2 {
  width: 500px;
  height: 500px;
  background: #3b82f6;
  bottom: -100px;
  right: -100px;
}

.s7-container {
  max-width: 1200px;
  /* Wider container for 3 cards */
  margin: 0 auto;
  padding: 0 5%;
  position: relative;
  z-index: 2;
}

.s7-header {
  text-align: center;
  margin-bottom: 64px;
}

.s7-badge {
  background: rgba(246, 114, 20, 0.1);
  color: #f67214;
  border: 1px solid rgba(246, 114, 20, 0.2);
  display: inline-flex;
  margin-bottom: 24px;
}

.s7-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3rem);
  /* Slightly smaller than before so it fits */
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 20px;
  color: #0f172a;
  letter-spacing: -0.02em;
}

.s7-intro {
  font-size: 1.15rem;
  color: #64748b;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 3 Column Grid */
.s7-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Card Styling */
.s7-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 28px;
  /* Reduced padding to not feel massive */
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -5px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  opacity: 0;
  /* for GSAP */
  transform: translateY(30px);
  /* for GSAP */
}

/* Hover effects with colored glow */
.s7-card:hover {
  transform: translateY(-8px) !important;
}

.s7-card-blue:hover {
  box-shadow: 0 30px 60px -15px rgba(59, 130, 246, 0.25), 0 0 40px rgba(59, 130, 246, 0.1);
}

.s7-card-green:hover {
  box-shadow: 0 30px 60px -15px rgba(16, 185, 129, 0.25), 0 0 40px rgba(16, 185, 129, 0.1);
}

.s7-card-orange:hover {
  box-shadow: 0 30px 60px -15px rgba(246, 114, 20, 0.25), 0 0 40px rgba(246, 114, 20, 0.1);
}

.s7-card-header {
  margin-bottom: 20px;
}

.s7-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.s7-card-blue .s7-icon-wrap {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  color: #3b82f6;
}

.s7-card-green .s7-icon-wrap {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #10b981;
}

.s7-card-orange .s7-icon-wrap {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  color: #f67214;
}

.s7-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
}

.s7-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.s7-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.05rem;
  color: #334155;
}

.s7-check {
  margin-top: 3px;
  flex-shrink: 0;
}

.s7-card-blue .s7-check {
  color: #3b82f6;
}

.s7-card-green .s7-check {
  color: #10b981;
}

.s7-card-desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 24px;
  flex-grow: 1;
}

.s7-card-tag {
  display: inline-block;
  padding: 6px 14px;
  background: #fff7ed;
  color: #f67214;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

@media (max-width: 991px) {
  .s7-cards-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* ===== Section 1 (Hero) (build_s4.py) ===== */
/* ==========================================================================
   SECTION 4: CUSTOM AI SKILLS (DARK THEME)
   ========================================================================== */

.section-skills-dark {
  position: relative;
  background-color: #040914; /* Deep dark navy */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 120px 0;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
}

/* Background Glows */
.glow-bg {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.glow-orange { top: -100px; left: -100px; background: #f97316; }
.glow-blue { top: 30%; left: 50%; transform: translateX(-50%); background: #3b82f6; opacity: 0.1; }
.glow-purple { bottom: -100px; right: -100px; background: #8b5cf6; opacity: 0.15; }

.relative { position: relative; }
.z-10 { z-index: 10; }

/* Header */
.skills-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  color: #fdba74;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.badge-dot-orange {
  width: 6px; height: 6px; border-radius: 50%; background: #f97316;
  box-shadow: 0 0 8px #f97316;
}

.skills-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 20px 0;
}
.text-gradient-orange {
  background: linear-gradient(90deg, #f97316, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skills-subtitle {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

/* 3-Column Grid */
.skills-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 60px auto;
}

.skill-card {
  flex: 1;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  height: 260px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
}
.sc-orange { box-shadow: 0 10px 40px rgba(249, 115, 22, 0.03); }
.sc-blue { box-shadow: 0 10px 40px rgba(59, 130, 246, 0.03); }
.sc-purple { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.03); }

.sc-orange:hover { border-color: rgba(249, 115, 22, 0.3); }
.sc-blue:hover { border-color: rgba(59, 130, 246, 0.3); }
.sc-purple:hover { border-color: rgba(139, 92, 246, 0.3); }

.sc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sc-icon-box {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bg-orange-dark { background: rgba(249, 115, 22, 0.1); }
.bg-blue-dark { background: rgba(59, 130, 246, 0.1); }
.bg-purple-dark { background: rgba(139, 92, 246, 0.1); }

.sc-title {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
  margin: 0;
}

.sc-desc {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 auto 0;
}

.sc-footer {
  margin-top: 20px;
}

.sc-pill {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
.pill-orange { background: rgba(249, 115, 22, 0.1); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.2); }
.pill-blue { background: rgba(59, 130, 246, 0.1); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }
.pill-purple { background: rgba(139, 92, 246, 0.1); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.2); }

/* Connectors */
.sc-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Bottom Alert */
.skills-bottom-alert {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 100px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(10px);
}
.skills-bottom-alert p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
}
.skills-bottom-alert strong {
  color: #f8fafc;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
  .skills-grid {
    flex-direction: column;
    gap: 20px;
  }
  .sc-connector {
    transform: rotate(90deg);
    margin: -10px 0;
  }
  .skill-card {
    width: 100%;
    height: auto;
  }
  .skills-bottom-alert {
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    flex-direction: column;
  }
}


/* ===== Section 2 (build_s4.py) ===== */
/* ==========================================================================
   SECTION 4: CUSTOM AI SKILLS (DARK THEME)
   ========================================================================== */

.section-skills-dark {
  position: relative;
  background-color: #040914; /* Deep dark navy */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 120px 0;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
}

/* Background Glows */
.glow-bg {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.glow-orange { top: -100px; left: -100px; background: #f97316; }
.glow-blue { top: 30%; left: 50%; transform: translateX(-50%); background: #3b82f6; opacity: 0.1; }
.glow-purple { bottom: -100px; right: -100px; background: #8b5cf6; opacity: 0.15; }

.relative { position: relative; }
.z-10 { z-index: 10; }

/* Header */
.skills-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  color: #fdba74;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.badge-dot-orange {
  width: 6px; height: 6px; border-radius: 50%; background: #f97316;
  box-shadow: 0 0 8px #f97316;
}

.skills-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 20px 0;
}
.text-gradient-orange {
  background: linear-gradient(90deg, #f97316, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skills-subtitle {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

/* 3-Column Grid */
.skills-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 60px auto;
}

.skill-card {
  flex: 1;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  height: 260px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
}
.sc-orange { box-shadow: 0 10px 40px rgba(249, 115, 22, 0.03); }
.sc-blue { box-shadow: 0 10px 40px rgba(59, 130, 246, 0.03); }
.sc-purple { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.03); }

.sc-orange:hover { border-color: rgba(249, 115, 22, 0.3); }
.sc-blue:hover { border-color: rgba(59, 130, 246, 0.3); }
.sc-purple:hover { border-color: rgba(139, 92, 246, 0.3); }

.sc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sc-icon-box {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bg-orange-dark { background: rgba(249, 115, 22, 0.1); }
.bg-blue-dark { background: rgba(59, 130, 246, 0.1); }
.bg-purple-dark { background: rgba(139, 92, 246, 0.1); }

.sc-title {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
  margin: 0;
}

.sc-desc {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 auto 0;
}

.sc-footer {
  margin-top: 20px;
}

.sc-pill {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
.pill-orange { background: rgba(249, 115, 22, 0.1); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.2); }
.pill-blue { background: rgba(59, 130, 246, 0.1); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }
.pill-purple { background: rgba(139, 92, 246, 0.1); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.2); }

/* Connectors */
.sc-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Bottom Alert */
.skills-bottom-alert {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 100px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(10px);
}
.skills-bottom-alert p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
}
.skills-bottom-alert strong {
  color: #f8fafc;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
  .skills-grid {
    flex-direction: column;
    gap: 20px;
  }
  .sc-connector {
    transform: rotate(90deg);
    margin: -10px 0;
  }
  .skill-card {
    width: 100%;
    height: auto;
  }
  .skills-bottom-alert {
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    flex-direction: column;
  }
}


/* ===== Section 4 (build_s4.py) ===== */
/* ==========================================================================
   SECTION 4: CUSTOM AI SKILLS (DARK THEME)
   ========================================================================== */

.section-skills-dark {
  position: relative;
  background-color: #040914; /* Deep dark navy */
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: 120px 0;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
}

/* Background Glows */
.glow-bg {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}
.glow-orange { top: -100px; left: -100px; background: #f97316; }
.glow-blue { top: 30%; left: 50%; transform: translateX(-50%); background: #3b82f6; opacity: 0.1; }
.glow-purple { bottom: -100px; right: -100px; background: #8b5cf6; opacity: 0.15; }

.relative { position: relative; }
.z-10 { z-index: 10; }

/* Header */
.skills-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dark-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  color: #fdba74;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 24px;
}
.badge-dot-orange {
  width: 6px; height: 6px; border-radius: 50%; background: #f97316;
  box-shadow: 0 0 8px #f97316;
}

.skills-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.1;
  margin: 0 0 20px 0;
}
.text-gradient-orange {
  background: linear-gradient(90deg, #f97316, #fb923c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.skills-subtitle {
  font-size: 18px;
  color: #cbd5e1;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
}

/* 3-Column Grid */
.skills-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto 60px auto;
}

.skill-card {
  flex: 1;
  background: rgba(15, 23, 42, 0.4);
  border-radius: 20px;
  padding: 32px 28px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  height: 260px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.skill-card:hover {
  transform: translateY(-5px);
}
.sc-orange { box-shadow: 0 10px 40px rgba(249, 115, 22, 0.03); }
.sc-blue { box-shadow: 0 10px 40px rgba(59, 130, 246, 0.03); }
.sc-purple { box-shadow: 0 10px 40px rgba(139, 92, 246, 0.03); }

.sc-orange:hover { border-color: rgba(249, 115, 22, 0.3); }
.sc-blue:hover { border-color: rgba(59, 130, 246, 0.3); }
.sc-purple:hover { border-color: rgba(139, 92, 246, 0.3); }

.sc-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.sc-icon-box {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.bg-orange-dark { background: rgba(249, 115, 22, 0.1); }
.bg-blue-dark { background: rgba(59, 130, 246, 0.1); }
.bg-purple-dark { background: rgba(139, 92, 246, 0.1); }

.sc-title {
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.3;
  margin: 0;
}

.sc-desc {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0 0 auto 0;
}

.sc-footer {
  margin-top: 20px;
}

.sc-pill {
  display: inline-block;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 100px;
  letter-spacing: 0.5px;
}
.pill-orange { background: rgba(249, 115, 22, 0.1); color: #fdba74; border: 1px solid rgba(249, 115, 22, 0.2); }
.pill-blue { background: rgba(59, 130, 246, 0.1); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.2); }
.pill-purple { background: rgba(139, 92, 246, 0.1); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.2); }

/* Connectors */
.sc-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Bottom Alert */
.skills-bottom-alert {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 100px;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  backdrop-filter: blur(10px);
}
.skills-bottom-alert p {
  margin: 0;
  color: #cbd5e1;
  font-size: 14px;
}
.skills-bottom-alert strong {
  color: #f8fafc;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 991px) {
  .skills-grid {
    flex-direction: column;
    gap: 20px;
  }
  .sc-connector {
    transform: rotate(90deg);
    margin: -10px 0;
  }
  .skill-card {
    width: 100%;
    height: auto;
  }
  .skills-bottom-alert {
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    flex-direction: column;
  }
}


/* ===== Section 5 (s5_advanced.py) ===== */
/* ==========================================================================
   ADVANCED UI STYLES FOR SECTION 5
   ========================================================================== */

/* Advanced Radial Network */
.radial-network.advanced {
  height: 400px;
}
.rn-lines {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 400px;
}

.advanced-core .rn-glow-strong {
  position: absolute;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(249,115,22,0.35) 0%, rgba(249,115,22,0) 70%);
  border-radius: 50%;
  animation: pulseGlowStrong 2s infinite alternate;
}
@keyframes pulseGlowStrong {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0.5; }
}

.rn-core-inner {
  position: relative;
  width: 120px; height: 120px;
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2), inset 0 0 0 4px rgba(255,255,255,0.8);
  border: 1px solid rgba(249, 115, 22, 0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 4;
}
.rn-core-inner span {
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 900; text-align: center; color: #0f172a; margin-top: 6px; line-height: 1.1; letter-spacing: 0.5px;
}
.core-icon-spin {
  animation: spinSlow 15s linear infinite;
}
@keyframes spinSlow { 100% { transform: rotate(360deg); } }

.advanced-node {
  min-width: 90px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.advanced-node:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.1), 0 4px 8px rgba(0,0,0,0.04);
  border-color: rgba(249, 115, 22, 0.3);
  z-index: 10;
}
.advanced-node .rn-icon-wrapper {
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: 6px;
}
.advanced-node .rn-icon-wrapper svg { width: 18px; height: 18px; }
.advanced-node small { font-size: 11px; font-weight: 800; color: #1e293b; letter-spacing: 0.3px; }

/* Adjusting node positions for 500x400 grid */
.advanced .n-top { top: 0px; left: 50%; transform: translateX(-50%); }
.advanced .n-top-right { top: 40px; right: 0px; }
.advanced .n-right { top: 50%; right: -20px; transform: translateY(-50%); }
.advanced .n-bottom-right { bottom: 40px; right: 0px; }
.advanced .n-bottom { bottom: 0px; left: 50%; transform: translateX(-50%); }
.advanced .n-bottom-left { bottom: 40px; left: 0px; }
.advanced .n-left { top: 50%; left: -20px; transform: translateY(-50%); }
.advanced .n-top-left { top: 40px; left: 0px; }


/* Advanced Connected Platforms */
.advanced-ps {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02), inset 0 2px 0 rgba(255,255,255,1);
  margin-top: 20px;
}
.ps-header-adv {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px;
}
.ps-pulse-dot {
  width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.ps-title-adv {
  font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 800; color: #0f172a; margin: 0;
}

.ps-grid-adv {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.ps-card-adv {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.ps-card-adv:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  border-color: rgba(15,23,42,0.1);
}
.ps-card-label {
  font-size: 13px; font-weight: 600; color: #64748b; margin: 0; text-align: center;
}
.text-orange { color: #f97316 !important; }
.custom-integration {
  background: rgba(249,115,22,0.02);
  border: 1px dashed rgba(249,115,22,0.3);
}
.custom-integration:hover {
  border: 1px solid rgba(249,115,22,0.5);
  background: rgba(249,115,22,0.05);
}

.ps-footer-box {
  background: #f1f5f9;
  border-radius: 100px;
  padding: 10px 20px;
  text-align: center;
}
.ps-footer { font-size: 12px; color: #64748b; margin: 0; font-weight: 500; }


/* ===== Section 6 (build_s6.py) ===== */
/* ==========================================================================
   SECTION 6 — HOW IT WORKS (PREMIUM CINEMATIC FLOW)
   ========================================================================== */
.section-how {
  background: #ffffff;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  font-family: "Outfit", "Instrument Sans", sans-serif;
}
/* Massive blurred workflow gradient */
.how-bg-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1400px; height: 800px;
  background: radial-gradient(circle at center, rgba(249,115,22,0.04) 0%, rgba(99,102,241,0.02) 40%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.section-how .container { position: relative; z-index: 2; }

/* HEADER */
.how-header {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 90px;
}
.how-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; color: #ea580c; background: #fff7ed;
  border: 1px solid rgba(249,115,22,0.2); border-radius: 100px;
  padding: 5px 14px; margin-bottom: 18px;
}
.how-badge-dot {
  width: 7px; height: 7px; background: #f97316; border-radius: 50%;
  box-shadow: 0 0 8px rgba(249,115,22,0.5); animation: pulseDot 2s infinite;
}
.how-title {
  font-family: "Outfit", sans-serif; font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800; color: #0f172a; line-height: 1.2; margin: 0 0 16px 0; letter-spacing: -0.5px;
}
.how-subtitle {
  font-size: 15px; color: #64748b; margin: 0; line-height: 1.6;
}

/* JOURNEY CONTAINER */
.how-journey {
  position: relative;
  max-width: 1200px; margin: 0 auto;
}

/* ANIMATED CONNECTOR SVG */
.how-connector {
  position: absolute;
  top: 100px; left: 0;
  width: 100%; height: 200px;
  z-index: 1; pointer-events: none;
}
.how-path-bg {
  fill: none; stroke: url(#flowGrad); stroke-width: 3;
  stroke-dasharray: 8 8; opacity: 0.5;
}
.how-path-active {
  fill: none; stroke: #f97316; stroke-width: 3;
  stroke-dasharray: 2000; stroke-dashoffset: 2000;
  animation: flowLine 6s ease-in-out infinite; opacity: 0.8;
  filter: drop-shadow(0 0 8px rgba(249,115,22,0.6));
}
@keyframes flowLine {
  0% { stroke-dashoffset: 2000; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -2000; }
}
.how-arrow { animation: floatArrow 3s ease-in-out infinite alternate; }
@keyframes floatArrow {
  0% { transform: translate(var(--tx), calc(var(--ty) - 5px)); }
  100% { transform: translate(var(--tx), calc(var(--ty) + 5px)); }
}
.how-arrow:nth-child(3) { --tx: 300px; --ty: 60px; }
.how-arrow:nth-child(4) { --tx: 580px; --ty: 80px; }
.how-arrow:nth-child(5) { --tx: 880px; --ty: 60px; }


/* CARDS GRID */
.how-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative; z-index: 2;
}

/* PREMIUM ELEVATED CARDS */
.how-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 36px 24px 24px 24px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03), 0 0 0 1px rgba(0,0,0,0.04) inset;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  margin-top: 0; /* Ensure no margin-top by default */
}
.how-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 50px rgba(15,23,42,0.08), 0 0 0 1px rgba(255,255,255,0.5) inset;
}

/* STEP NUMBER OFFSET */
.hc-number {
  position: absolute;
  top: -24px; left: 24px;
  font-family: "Outfit", sans-serif;
  font-size: 32px; font-weight: 800;
  color: var(--hc-color);
  background: #ffffff;
  padding: 0 10px;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* GLOWING ORBITAL ICON */
.hc-icon-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hc-bg) 0%, transparent 70%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 24px; margin-top: 10px;
}
.hc-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 8px 24px var(--hc-glow);
  display: flex; align-items: center; justify-content: center;
  color: var(--hc-color);
}

/* CONTENT */
.hc-title {
  font-family: "Outfit", sans-serif; font-size: 18px; font-weight: 800;
  color: #0f172a; margin: 0 0 10px 0; letter-spacing: -0.3px;
}
.hc-desc {
  font-size: 15px; color: #64748b; line-height: 1.6; margin: 0 0 24px 0;
  flex: 1; /* Pushes attributes to bottom */
}

/* INTELLIGENT WORKFLOW ROWS */
.hc-attrs {
  display: flex; flex-direction: column; gap: 8px;
}
.hc-attr {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #1e293b;
  transition: all 0.2s;
}
.how-card:hover .hc-attr {
  background: var(--hc-bg);
  border-color: var(--hc-glow);
}
.hc-attr svg {
  color: var(--hc-color); flex-shrink: 0;
}

/* COLOR THEMES */
.hc-orange { --hc-color: #f97316; --hc-bg: rgba(249,115,22,0.1); --hc-glow: rgba(249,115,22,0.15); }
.hc-blue   { --hc-color: #3b82f6; --hc-bg: rgba(59,130,246,0.1); --hc-glow: rgba(59,130,246,0.15); }
.hc-purple { --hc-color: #a855f7; --hc-bg: rgba(168,85,247,0.1); --hc-glow: rgba(168,85,247,0.15); }
.hc-green  { --hc-color: #22c55e; --hc-bg: rgba(34,197,94,0.1);  --hc-glow: rgba(34,197,94,0.15); }

/* DESKTOP STAGGERED LAYOUT */
@media (min-width: 1201px) {
  .how-card.hc-blue, .how-card.hc-green {
    transform: translateY(40px);
  }
  .how-card.hc-blue:hover, .how-card.hc-green:hover {
    transform: translateY(32px) scale(1.01);
  }
  .how-card.hc-orange:hover, .how-card.hc-purple:hover {
    transform: translateY(-8px) scale(1.01);
  }
}

/* RESPONSIVE DESIGN */
@media (max-width: 1200px) {
  .section-how { padding: 90px 0; }
  .how-header { margin-bottom: 70px; }
  .how-cards { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 24px !important;
  }
  .how-connector { display: none; }
  .how-card { 
    margin-top: 0 !important; /* Remove margin-top, use gap only */
  }
}

@media (max-width: 991px) {
  .section-how { padding: 100px 0 180px 0; }
  .how-header { margin-bottom: 60px; }
  .how-title { font-size: clamp(1.75rem, 4vw, 2.2rem); }
  .how-subtitle { font-size: 14px; }
  .how-cards { 
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 20px !important;
  }
  .how-card { 
    padding: 32px 20px 20px 20px;
    margin-top: 0 !important; /* Remove margin-top, use gap only */
  }
  .hc-number { 
    font-size: 28px; 
    top: -20px; 
    left: 20px;
  }
  .hc-icon-ring { 
    width: 56px; 
    height: 56px; 
    margin-bottom: 20px;
  }
  .hc-icon { 
    width: 42px; 
    height: 42px;
  }
  .hc-title { font-size: 17px; }
  .hc-desc { font-size: 14px; margin-bottom: 20px; }
  .hc-attr { 
    padding: 9px 11px; 
    font-size: 11.5px;
  }
}

@media (max-width: 768px) {
  .section-how { padding: 90px 0 200px 0; }
  .section-how .container {
    padding: 0 20px;
    max-width: 100%;
  }
  .how-header { margin-bottom: 50px; }
  .how-badge { font-size: 10px; padding: 4px 12px; }
  .how-badge-dot { width: 6px; height: 6px; }
  .how-title { 
    font-size: clamp(1.5rem, 5vw, 1.9rem);
    margin-bottom: 12px;
  }
  .how-subtitle { font-size: 13px; }
  .how-cards { 
    grid-template-columns: 1fr !important; 
    gap: 20px !important;
    max-width: 500px;
    margin: 0 auto;
    padding: 0;
  }
  .how-card { 
    padding: 38px 22px 22px 22px;
    margin-top: 0 !important; /* Remove margin-top, use gap only */
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    align-items: start;
    position: relative;
  }
  
  .hc-number { 
    font-size: 24px; 
    top: -14px; 
    left: 22px;
    padding: 0 8px;
    position: absolute;
    z-index: 10;
  }
  
  .hc-icon-ring { 
    width: 48px; 
    height: 48px; 
    margin-bottom: 0;
    margin-top: 8px;
    margin-right: 14px;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  
  .hc-icon { 
    width: 36px; 
    height: 36px;
  }
  
  .hc-icon svg { 
    width: 18px; 
    height: 18px;
  }
  
  .hc-title { 
    font-size: 19px; 
    margin-bottom: 0;
    word-wrap: break-word;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .hc-desc { 
    font-size: 15.5px; 
    margin-bottom: 18px;
    line-height: 1.5;
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 16px;
    color: #64748b;
    font-weight: 400;
    word-wrap: break-word;
  }
  .hc-attrs { 
    gap: 9px;
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .hc-attr { 
    padding: 11px 14px; 
    font-size: 13px;
    gap: 10px;
    word-wrap: break-word;
    white-space: normal;
    border-radius: 10px;
    font-weight: 600;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
  }
  .hc-attr svg { 
    width: 15px; 
    height: 15px;
  }
}

@media (max-width: 575px) {
  .section-how { padding: 12px 0 35px 0; }
  .section-how .container {
    padding: 0 16px;
    max-width: 100%;
  }
  .how-header { margin-bottom: 40px; padding: 0 0; }
  .how-badge { 
    font-size: 9px; 
    padding: 4px 11px;
    gap: 6px;
  }
  .how-badge-dot { width: 5px; height: 5px; }
  .how-title { 
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    line-height: 1.15;
    word-wrap: break-word;
  }
  .how-subtitle { 
    font-size: 12.5px;
    line-height: 1.5;
    word-wrap: break-word;
  }
  .how-cards { 
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    max-width: 100%;
    padding: 0;
  }
  .how-card { 
    padding: 32px 18px 18px 18px;
    margin-top: 0 !important; /* Remove margin-top, use gap only */
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
  }
  .hc-number { 
    font-size: 22px; 
    top: -12px; 
    left: 18px;
    padding: 0 8px;
    border-radius: 10px;
    position: absolute;
    z-index: 10;
  }
  
  /* Create horizontal layout for icon and title on mobile */
  .how-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0;
    align-items: start;
    position: relative;
    padding-top: 36px;
  }
  
  .hc-icon-ring { 
    width: 44px; 
    height: 44px; 
    margin-bottom: 0;
    margin-top: 6px;
    margin-right: 12px;
    flex-shrink: 0;
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  
  .hc-icon { 
    width: 32px; 
    height: 32px;
  }
  
  .hc-icon svg { 
    width: 16px; 
    height: 16px;
  }
  
  .hc-title { 
    font-size: 18px; 
    margin-bottom: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    font-weight: 700;
    line-height: 1.3;
  }
  
  .hc-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #64748b;
    font-weight: 400;
  }
  
  .hc-attrs {
    grid-column: 1 / -1;
    grid-row: 3;
  }
  .hc-desc { 
    font-size: 15px; 
    margin-bottom: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
  .hc-attrs { gap: 8px; }
  .hc-attr { 
    padding: 10px 12px; 
    font-size: 12px;
    gap: 8px;
    border-radius: 8px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    font-weight: 600;
    background: rgba(248, 250, 252, 0.8);
    border: 1px solid rgba(226, 232, 240, 0.6);
  }
  .hc-attr svg { 
    width: 14px; 
    height: 14px;
    flex-shrink: 0;
  }
}


/* ===== Section 7 (pro_s7.py) ===== */
/* PROFESSIONAL DESIGN OVERRIDES */
.carousel-card {
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.04) !important;
  border-top: none !important; /* Removed unprofessional thick border */
  box-shadow: 0 15px 40px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02) !important;
  padding: 36px 32px 32px 32px !important;
  border-radius: 24px !important;
  text-align: left !important;
  align-items: flex-start !important;
}

.cc-icon {
  width: 64px !important; height: 64px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--cc-bg) 100%) !important;
  border: 1px solid var(--cc-glow) !important;
  box-shadow: 0 8px 20px var(--cc-glow) !important;
  margin-bottom: 24px !important;
}

.cc-title {
  text-align: left !important;
  width: 100%;
}

.cc-desc {
  text-align: left !important;
  width: 100%;
  font-size: 14px !important;
  flex-grow: 0 !important;
}

.cc-features {
  margin-top: 0;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; text-align: left;
}

.cc-f-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; color: #475569; font-weight: 500;
  line-height: 1.3;
}

.cc-f-item svg { 
  width: 16px; height: 16px; 
  color: var(--cc-color); 
  flex-shrink: 0;
}


/* ===== Section 8 (rebuild_s8.py) ===== */
/* ==========================================================================
   SECTION 8 — ACTIONABLE INTELLIGENCE (NODE GRAPH)
   ========================================================================== */
.section-intelligence {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f2 100%);
  position: relative;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
}

/* Subtle dot grid in background */
.intel-bg-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.8;
  z-index: 0;
}

.intel-container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 1300px;
}

/* --- RIGHT COLUMN: CONTENT & ROWS --- */
.intel-content {
  display: flex;
  flex-direction: column;
}

.intel-desc {
  font-size: 17px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 40px;
  font-weight: 500;
}

.intel-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.i-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  transition: all 0.2s;
  cursor: pointer;
}

.i-row:hover {
  transform: translateX(6px);
}

.i-row:hover .i-row-arrow svg {
  stroke: #f97316;
  transform: translateX(4px);
}

.i-row-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(249,115,22,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.i-row-text {
  flex-grow: 1;
}

.i-row-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.i-row-text p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

.i-row-arrow svg {
  transition: all 0.2s;
}

/* Emotional Anchor Card */
.intel-goal-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(249,115,22,0.06), 0 4px 10px rgba(0,0,0,0.02);
  text-align: center;
  overflow: hidden;
}

.goal-glow-bg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 100px;
  background: #f97316;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.intel-goal-card h4 {
  position: relative; z-index: 1;
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: #f97316;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.intel-goal-card p {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 15px;
  color: #334155;
  font-weight: 600;
}

/* --- LEFT COLUMN: THE NODE GRAPH --- */
.intel-visual {
  width: 100%;
  position: relative;
}

.intel-graph {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
}

/* SVG Lines */
.intel-lines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  filter: url(#glow-blur);
}

.anim-line {
  fill: none;
  stroke: url(#line-glow);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
  animation: flowLines 30s linear infinite;
  opacity: 0.6;
}

@keyframes flowLines {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* Inputs */
.intel-inputs {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; gap: 14px;
}

.intel-input-title {
  font-size: 12px; font-weight: 800; color: #94a3b8;
  letter-spacing: 1px; margin-bottom: 8px; padding-left: 8px;
}

.intel-in-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 10px 20px 10px 14px;
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600; color: #334155;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.in-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.c-purple { background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.5); }
.c-orange { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.5); }
.c-blue { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.5); }
.c-green { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }

/* Core Engine */
.intel-core {
  position: absolute;
  top: 50%; left: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.core-pulse-1, .core-pulse-2 {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #f97316;
  animation: corePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.core-pulse-1 { width: 140px; height: 140px; animation-delay: 0s; }
.core-pulse-2 { width: 140px; height: 140px; animation-delay: 1.5s; }

.core-box {
  position: relative;
  width: 140px; height: 140px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #f97316;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 0 40px rgba(249,115,22,0.3), inset 0 0 20px rgba(249,115,22,0.1);
  text-align: center;
  z-index: 2;
}

.core-box span {
  font-size: 13px; font-weight: 850; color: #0f172a; line-height: 1.2;
}

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

/* Output Cards */
.intel-card {
  position: absolute;
  width: 220px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.02);
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: floatLayer 8s ease-in-out infinite;
}

.ic-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}

.ic-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(249,115,22,0.1);
  color: #f97316;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.c-green-bg { background: rgba(34,197,94,0.1); }
.c-blue-bg { background: rgba(59,130,246,0.1); }
.c-purple-bg { background: rgba(168,85,247,0.1); }

.ic-title-box {
  display: flex; flex-direction: column; gap: 2px;
}

.ic-title {
  font-size: 13.5px; font-weight: 800; color: #0f172a; line-height: 1.1;
}

.ic-tag {
  font-size: 9px; font-weight: 800; color: #f97316;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.ic-desc {
  font-size: 11.5px; color: #64748b; margin: 0; line-height: 1.4;
}

@keyframes floatLayer {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
  .intel-container { grid-template-columns: 1fr; }
  .intel-visual { order: 2; margin-top: 40px; }
  .intel-content { order: 1; }
  .intel-graph { aspect-ratio: 4/3; }
}

@media (max-width: 768px) {
  .section-intelligence { padding: 80px 0; }
  .intel-graph { aspect-ratio: 1/1.2; transform: scale(0.9); transform-origin: top center; }
  .intel-inputs { display: none; /* Hide inputs on mobile to reduce clutter */ }
  .intel-core { left: 50%; }
  
  /* Re-position cards for mobile core at 50% */
  .intel-card { width: 180px; padding: 12px; }
  .ic-title { font-size: 12px; }
  .ic-desc { font-size: 10.5px; }
  .intel-card:nth-of-type(1) { top: 15% !important; left: 25% !important; }
  .intel-card:nth-of-type(2) { top: 15% !important; left: 75% !important; }
  .intel-card:nth-of-type(3) { top: 50% !important; left: 85% !important; }
  .intel-card:nth-of-type(4) { top: 85% !important; left: 75% !important; }
  .intel-card:nth-of-type(5) { top: 85% !important; left: 25% !important; }
  .intel-card:nth-of-type(6) { top: 50% !important; left: 15% !important; }
  .intel-card:nth-of-type(7) { display: none; /* hide extra cards to keep it clean */ }
}


/* ===== fix_css patches (fix_css.py) ===== */
/* ==========================================================================
   SECTION 2: OPERATIONAL REALITY
   ========================================================================== */

/* --- Base Section Styles --- */
.reality-section {
  position: relative;
  width: 100%;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff8f2 100%);
  overflow: hidden;
  z-index: 10;
}

/* Faint Grid Texture Overlay */
.reality-bg-grid {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(246, 114, 20, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 114, 20, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  z-index: 1;
  pointer-events: none;
}

.reality-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Top Header Area --- */
.reality-header {
  max-width: 700px;
  margin: 0 auto 60px;
}
.reality-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(246, 114, 20, 0.08);
  border: 1px solid rgba(246, 114, 20, 0.2);
  color: #f67214;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.reality-badge .badge-dot-pulse {
  width: 6px; height: 6px;
  background: #f67214;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.7);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(246, 114, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0); }
}

.reality-header .section-title {
  font-family: "Outfit", sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.reality-header .title-highlight {
  color: #f67214;
}
.reality-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

/* --- Split Layout Grid --- */
.reality-split-view {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 60px;
}

/* Column Base Styling */
.reality-col {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02);
}

.col-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.col-badge.green-badge {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
.col-badge.red-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.col-subtitle {
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  color: #475569;
  margin-bottom: 32px;
  font-weight: 600;
}

/* --- Center Divider Beam --- */
.reality-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
}
.divider-beam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(246, 114, 20, 0.1) 20%, 
    rgba(246, 114, 20, 0.8) 50%, 
    rgba(246, 114, 20, 0.1) 80%, 
    transparent 100%);
  box-shadow: 0 0 15px rgba(246, 114, 20, 0.4);
}
.divider-orb {
  width: 80px; height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 1.5px solid rgba(246, 114, 20, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 30px rgba(246, 114, 20, 0.2);
}
.divider-orb::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(246, 114, 20, 0.05);
}
.orb-text {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #f67214;
  text-align: center;
  line-height: 1.2;
}
.divider-arrows {
  position: absolute;
  z-index: 1;
}

/* ==========================================================================
   LEFT COLUMN: Diversity Grid
   ========================================================================== */
.diversity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.diversity-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.diversity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.dc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
}

/* Node Layouts */
.dc-flow { position: relative; }
.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  position: relative;
}
.fn-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
}
.fn-icon.green { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.fn-icon.blue { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.fn-icon.orange { color: #f67214; background: rgba(246, 114, 20, 0.1); }
.fn-icon.purple { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }

.fn-label {
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  color: #475569;
  font-weight: 700;
}

/* Linear Flow */
.linear-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.linear-flow .flow-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(15,23,42,0.1) 0, rgba(15,23,42,0.1) 4px, transparent 4px, transparent 8px);
  margin: -14px 4px 0;
  z-index: 1;
}

/* Circular/Branching Flow */
.circular-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.cf-top, .cf-bottom {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 2;
}
.cf-lines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

.dc-status {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ==========================================================================
   RIGHT COLUMN: Chaos Canvas
   ========================================================================== */
.chaos-canvas {
  position: relative;
  width: 100%;
  height: 400px;
}
.chaos-card {
  position: absolute;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  animation: floatChaos 6s ease-in-out infinite;
}
@keyframes floatChaos {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.cc-header {
  display: flex; align-items: center; gap: 6px;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 800; color: #0f172a;
}
.cc-warning {
  font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 700; color: #dc2626;
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(220, 38, 38, 0.2);
}

/* Search Card */
.search-card { top: 0; left: 0; width: 220px; animation-delay: 0s; z-index: 5; }
.search-bar { 
  display: flex; align-items: center; gap: 6px;
  border: 1px solid rgba(15,23,42,0.1); border-radius: 6px; padding: 6px 8px;
  font-size: 11px; color: #64748b; background: #f8fafc; font-weight: 500;
}
.search-result { font-size: 10px; color: #475569; padding-left: 2px; font-weight: 600; }

/* Sheet Card */
.sheet-card { top: 10px; right: 0; width: 260px; animation-delay: -1.5s; z-index: 4; }
.sheet-title { font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.sheet-grid { display: flex; flex-direction: column; gap: 2px; }
.sg-row { display: flex; gap: 2px; height: 12px; }
.sg-row.header .sg-cell { background: #e2e8f0; height: 16px; }
.sg-cell { background: #f1f5f9; border-radius: 2px; flex: 1; }
.sg-cell.w-20 { flex: 0.5; } .sg-cell.w-30 { flex: 0.8; } .sg-cell.w-40 { flex: 1.2; }
.sg-cell.green { background: rgba(16, 185, 129, 0.2); }

/* Review Card */
.review-card { top: 130px; left: 0; width: 200px; animation-delay: -3s; z-index: 6; }
.review-text { font-size: 12px; font-weight: 600; color: #1e293b; }
.review-progress { display: flex; align-items: center; gap: 8px; }
.rp-bar { flex: 1; height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; }
.rp-fill { height: 100%; background: #f59e0b; border-radius: 2px; }
.rp-pct { font-size: 11px; font-weight: 800; color: #0f172a; }

/* Team Card */
.team-card { top: 160px; right: 0; width: 240px; animation-delay: -4.5s; z-index: 5; }
.team-chain { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.tc-avatar { width: 24px; height: 24px; border-radius: 50%; background: #f8fafc; border: 1px solid rgba(15,23,42,0.1); display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.tc-arrow { color: #cbd5e1; }

/* Email Card */
.email-card { bottom: 0; left: 5%; width: 90%; animation-delay: -2s; z-index: 7; }
.split-body { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.el-header { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.el-count { font-size: 14px; font-weight: 800; color: #dc2626; }
.el-label { font-size: 11px; color: #475569; font-weight: 600; }
.el-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.el-box { width: 8px; height: 8px; border: 1px solid #cbd5e1; border-radius: 2px; }
.el-subj { font-size: 11px; color: #1e293b; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-time { font-size: 10px; color: #64748b; font-weight: 500; }
.meeting-block { background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mb-header { font-size: 11px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 4px; }
.mb-time { font-size: 12px; font-weight: 700; color: #dc2626; }

/* ==========================================================================
   BOTTOM: Insight Chips
   ========================================================================== */
.reality-insights { margin-top: 20px; }
.insights-title { font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
.insights-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.insight-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid rgba(15,23,42,0.06);
  padding: 8px 16px; border-radius: 100px;
  font-family: "Instrument Sans", sans-serif; font-size: 12px; font-weight: 600; color: #334155;
  box-shadow: 0 4px 10px rgba(15,23,42,0.02);
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR SECTION 2
   ========================================================================== */
@media (max-width: 1200px) {
  .reality-split-view { gap: 20px; }
  .reality-col { padding: 24px; }
  .chaos-canvas { height: 420px; }
  .sheet-card { width: 220px; }
  .team-card { width: 200px; }
}

@media (max-width: 991px) {
  .reality-split-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
  }
  .reality-divider {
    width: 100%;
    height: 80px;
    flex-direction: row;
  }
  .divider-beam {
    top: 50%; left: 0; right: 0; bottom: auto;
    width: 100%; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(246, 114, 20, 0.8) 50%, transparent 100%);
  }
  .divider-arrows { display: none; }
  .chaos-canvas { height: 480px; }
  .search-card { left: 10%; }
  .sheet-card { right: 10%; }
  .review-card { left: 10%; top: 120px; }
  .team-card { right: 10%; top: 160px; }
}

@media (max-width: 767px) {
  .reality-section { padding: 60px 0 80px; }
  .reality-header .section-title { font-size: 32px; }
  .reality-desc { font-size: 14px; }
  .reality-desc br { display: none; }
  
  .diversity-grid { grid-template-columns: 1fr; }
  
  .chaos-canvas {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .chaos-card {
    position: relative;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    animation: none;
    transform: none !important;
  }
  .split-body { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .reality-header .section-title { font-size: 28px; }
  .insight-chip { font-size: 11px; padding: 6px 12px; }
}


/* ===== patch styles (patch_style.py) ===== */

.p2-hub-core:hover {
  transform: scale(1.05);
  box-shadow: 
    0 20px 42px rgba(246, 114, 20, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 0 0 7px rgba(246, 114, 20, 0.18);
}

.ai-neural-icon {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.neural-spark {
  transform-origin: center;
  animation: sparkPulse 2s ease-in-out infinite;
}

.inner-orbit-spin {
  transform-origin: center;
  animation: innerOrbit 8s linear infinite;
}

@keyframes sparkPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.7)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)); }
}

@keyframes innerOrbit {
  100% { transform: rotate(360deg); }
}

.p2-hub-label {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1.2px;
  line-height: 1;
}




/* ===== Grid override — pure 2-col, no top header ===== */
.s5-grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 48px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

.section-connect {
  padding: 80px 0;
}

@media (max-width: 991px) {
  .s5-grid { grid-template-columns: 1fr; gap: 36px; }
}


/* ===Sec5 from s5_final.py=== */
/* ==========================================================================
   SECTION 5 — CLEAN COMPACT PROFESSIONAL (v5 FINAL)
   ========================================================================== */
.s5 {
  background: #ffffff;
  padding: 80px 0;
}
.s5-wrap {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: 60px;
  align-items: start;
}
.s5-col { display: flex; flex-direction: column; }

/* Badge shared */
.s5-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #ea580c;
  background: rgba(249,115,22,0.07);
  border: 1px solid rgba(249,115,22,0.18);
  border-radius: 100px;
  padding: 4px 12px;
  margin-bottom: 14px;
  width: fit-content;
}
.s5-badge-dot {
  width: 6px; height: 6px;
  background: #f97316; border-radius: 50%;
  box-shadow: 0 0 6px rgba(249,115,22,0.5);
  animation: pulseDot 2s infinite;
  flex-shrink: 0;
}

/* LEFT heading */
.s5-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0 0 8px 0;
  letter-spacing: -0.4px;
}
.s5-orange { color: #f97316; }
.s5-sub {
  font-size: 13.5px;
  color: #64748b;
  margin: 0 0 22px 0;
  line-height: 1.5;
}

/* Sources 2-col grid */
.s5-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.s5-src {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  background: #f8fafc;
  border: 1px solid #e8edf5;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  transition: all 0.2s ease;
  cursor: default;
}
.s5-src:hover {
  background: #fff;
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 2px 10px rgba(249,115,22,0.07);
  transform: translateY(-1px);
}
.s5-src-full { grid-column: span 2; }
.s5-src-ico {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── RIGHT PANEL ── */
.s5-int-panel {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.s5-int-title {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}
.s5-int-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 22px 0;
}

/* Integration rows */
.s5-int-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.s5-int-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.2s ease;
}
.s5-int-row:hover {
  border-color: rgba(249,115,22,0.25);
  box-shadow: 0 3px 12px rgba(249,115,22,0.06);
  transform: translateY(-1px);
}
.s5-int-row-custom {
  border-style: dashed;
  border-color: rgba(249,115,22,0.2);
  background: rgba(249,115,22,0.015);
}
.s5-int-row-custom:hover {
  border-color: rgba(249,115,22,0.4);
  background: rgba(249,115,22,0.03);
}

/* Logo box */
.s5-int-logo {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 7px 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 100px;
}
.s5-int-logo img {
  width: 100%; height: auto;
  display: block;
}
.s5-int-plus {
  width: 36px; height: 36px;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.15);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.s5-int-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}
.s5-int-name {
  font-family: "Outfit", sans-serif;
  font-size: 13px; font-weight: 700; color: #0f172a;
}
.s5-int-type {
  font-size: 11px; color: #94a3b8;
}

/* Status pills */
.s5-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Outfit", sans-serif;
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 100px;
  letter-spacing: 0.3px; flex-shrink: 0;
}
.s5-pill-live {
  background: rgba(34,197,94,0.08);
  color: #16a34a;
  border: 1px solid rgba(34,197,94,0.2);
}
.s5-pill-dot {
  width: 5px; height: 5px; background: #22c55e;
  border-radius: 50%; animation: pulseDot 2s infinite;
}
.s5-pill-req {
  background: rgba(249,115,22,0.07);
  color: #ea580c;
  border: 1px solid rgba(249,115,22,0.2);
}

/* Footer note */
.s5-int-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 10px;
}
.s5-int-note svg { flex-shrink: 0; margin-top: 2px; }
.s5-int-note p { font-size: 12.5px; color: #64748b; margin: 0; line-height: 1.5; }
.s5-int-note strong { color: #0f172a; }

/* Responsive */
@media (max-width: 900px) {
  .s5-wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .s5-sources { grid-template-columns: 1fr; }
  .s5-src-full { grid-column: span 1; }
}


/* ===Sec5 from s5_premium.py=== */
/* ==========================================================================
   SECTION 5 — PREMIUM REDESIGN v6
   ========================================================================== */
.s5 {
  background: radial-gradient(circle at 10% 20%, rgba(249, 115, 22, 0.015) 0%, transparent 45%),
              radial-gradient(circle at 90% 80%, rgba(99, 102, 241, 0.02) 0%, transparent 45%),
              #ffffff;
  padding: 50px 0;
  position: relative;
}
.s5-wrap {
  display: grid;
  grid-template-columns: 50fr 50fr;
  gap: 64px;
  align-items: center;
}
.s5-col { display: flex; flex-direction: column; }

/* Shared badge */
.s5-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Outfit", sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: 0.8px; color: #ea580c;
  background: rgba(249,115,22,0.08); border: 1px solid rgba(249,115,22,0.2);
  border-radius: 100px; padding: 4px 12px; margin-bottom: 16px; width: fit-content;
}
.s5-badge-dot {
  width: 6px; height: 6px; background: #f97316; border-radius: 50%;
  box-shadow: 0 0 6px rgba(249,115,22,0.6); animation: pulseDot 2s infinite; flex-shrink: 0;
}

/* LEFT heading */
.s5-title {
  font-family: "Outfit", sans-serif; font-size: clamp(1.6rem, 2.3vw, 2.1rem);
  font-weight: 800; color: #0f172a; line-height: 1.25; margin: 0 0 10px 0; letter-spacing: -0.4px;
}
.s5-orange { color: #f97316; }
.s5-sub { font-size: 13.5px; color: #64748b; margin: 0 0 24px 0; line-height: 1.5; }

/* Source cards grid */
.s5-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s5-src {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #eaeff6;
  border-left: 3px solid #cbd5e1; /* Clean neutral grey border by default */
  border-radius: 12px;
  font-size: 13.5px; font-weight: 600; color: #1e293b;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.015);
}
.s5-src:hover {
  background: #ffffff;
  border-color: rgba(249, 115, 22, 0.25);
  border-left-color: #f97316; /* Lights up brand orange on hover */
  box-shadow: 0 12px 24px -8px rgba(249, 115, 22, 0.12), 0 0 16px -2px rgba(15, 23, 42, 0.02);
  transform: translateY(-3px) scale(1.015);
}
.s5-src-full { grid-column: span 2; }
.s5-src-ico {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: #64748b; /* Cohesive neutral grey icon by default */
  background: #f1f5f9; /* Cohesive neutral grey backdrop by default */
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.s5-src:hover .s5-src-ico {
  color: #f97316; /* Transitions to brand orange on hover */
  background: rgba(249, 115, 22, 0.08); /* Glowing orange backdrop on hover */
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(249, 115, 22, 0.15);
}

/* ── RIGHT PANEL ── */
.s5-int-panel {
  background: linear-gradient(145deg, #ffffff 0%, #fbfcfe 100%);
  border: 1px solid #e4eaf4;
  border-radius: 24px; padding: 36px;
  box-shadow: 0 25px 65px -15px rgba(15, 23, 42, 0.06), 0 0 45px -10px rgba(99, 102, 241, 0.04);
  position: relative; overflow: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.s5-int-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 35px 80px -20px rgba(15, 23, 42, 0.08), 0 0 50px -5px rgba(249, 115, 22, 0.06);
}
.s5-panel-blob {
  position: absolute !important; border-radius: 50%; pointer-events: none; z-index: 0;
}
.s5-blob-1 {
  top: -60px; right: -60px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(249,115,22,0.08) 0%, transparent 70%);
}
.s5-blob-2 {
  bottom: -50px; left: -50px; width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 70%);
}
.s5-int-panel > *:not(.s5-panel-blob) { position: relative; z-index: 1; }

.s5-badge-right { margin-bottom: 14px; }

.s5-int-title {
  font-family: "Outfit", sans-serif; font-size: 19px; font-weight: 800;
  color: #0f172a; line-height: 1.35; margin: 0 0 10px 0; letter-spacing: -0.3px;
}
.s5-int-desc { font-size: 13.5px; color: #64748b; line-height: 1.65; margin: 0 0 22px 0; }
.s5-supported-label {
  font-size: 11px; font-weight: 700; color: #94a3b8; letter-spacing: 0.5px;
  text-transform: uppercase; margin: 0 0 12px 0;
}

/* Integration rows */
.s5-int-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.s5-int-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: #ffffff; border: 1px solid #e8eef6; border-radius: 14px;
  transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.015);
}
/* Procore row — orange left accent */
.s5-int-procore { border-left: 3px solid #e85726; }
.s5-int-procore:hover {
  border-color: #e85726;
  box-shadow: 0 12px 24px -10px rgba(232, 87, 38, 0.12), 0 4px 12px rgba(15, 23, 42, 0.015);
  transform: translateX(4px);
}
/* Autodesk row — dark accent */
.s5-int-autodesk { border-left: 3px solid #0f172a; }
.s5-int-autodesk:hover {
  border-color: #0f172a;
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.015);
  transform: translateX(4px);
}
/* Custom row — orange dashed */
.s5-int-custom {
  border-style: dashed; border-color: rgba(249,115,22,0.25);
  border-left: 3px dashed #f97316;
  background: rgba(249,115,22,0.01);
}
.s5-int-custom:hover {
  border-color: #f97316;
  background: rgba(249,115,22,0.03);
  box-shadow: 0 12px 24px -10px rgba(249,115,22,0.12), 0 4px 12px rgba(15, 23, 42, 0.015);
  transform: translateX(4px);
}

/* Logo boxes */
.s5-int-logo-wrap {
  width: 120px; height: 48px; background: #ffffff; border: 1px solid #e2e8f0;
  border-radius: 10px; padding: 4px 8px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: all 0.28s ease;
  overflow: hidden;
}
.s5-int-logo-wrap img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain; display: block;
  transform: scale(1.6);
  transition: all 0.28s ease;
}
.s5-int-row:hover .s5-int-logo-wrap img {
  transform: scale(1.7);
}
.s5-int-row:hover .s5-int-logo-wrap {
  border-color: rgba(249, 115, 22, 0.3);
}

.s5-int-plus-wrap {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, rgba(249,115,22,0.1) 0%, rgba(249,115,22,0.05) 100%);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.s5-int-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s5-int-name {
  font-family: "Outfit", sans-serif; font-size: 13.5px; font-weight: 700; color: #0f172a;
}
.s5-int-type { font-size: 11.5px; color: #94a3b8; }

/* Pills */
.s5-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: "Outfit", sans-serif; font-size: 10px; font-weight: 800;
  padding: 4px 10px; border-radius: 100px; letter-spacing: 0.3px; flex-shrink: 0;
}
.s5-pill-live { background: rgba(34,197,94,0.08); color: #16a34a; border: 1px solid rgba(34,197,94,0.2); }
.s5-pill-dot { width: 5px; height: 5px; background: #22c55e; border-radius: 50%; animation: pulseDot 2s infinite; }
.s5-pill-req { background: rgba(249,115,22,0.08); color: #ea580c; border: 1px solid rgba(249,115,22,0.2); }

/* Footer note */
.s5-int-note {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #f0fdf4 0%, #f8fffa 100%);
  border: 1px solid rgba(34,197,94,0.25); border-radius: 12px;
}
.s5-note-ico {
  width: 28px; height: 28px; background: rgba(34,197,94,0.1);
  border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.s5-int-note p { font-size: 12.5px; color: #374151; margin: 0; line-height: 1.5; }
.s5-int-note strong { color: #0f172a; }

/* Responsive */
@media (max-width: 900px) {
  .s5-wrap { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 540px) {
  .s5-sources { grid-template-columns: 1fr; }
  .s5-src-full { grid-column: span 1; }
}


/* ===Sec5 from redesign_s5.py=== */
/* ==========================================================================
   SECTION 5 — CONNECT PROJECT DATA (FULL REDESIGN v3)
   ========================================================================== */
.section-connect {
  background: #ffffff;
  padding: 90px 0;
  font-family: "Instrument Sans", "Outfit", sans-serif;
}

/* Header */
.s5-top-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 60px;
  gap: 16px;
}
.s5-heading {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.5px;
}

/* 2-column grid */
.s5-grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 60px;
  align-items: start;
  max-width: 1300px;
  margin: 0 auto;
}

/* ===== LEFT SIDE ===== */
.s5-left-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 28px;
  padding: 20px;
  background: #fff7ed;
  border-radius: 16px;
  border: 1px solid rgba(249,115,22,0.12);
}
.s5-lh-icon {
  width: 44px; height: 44px;
  background: rgba(249,115,22,0.1);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.s5-lh-title {
  font-family: "Outfit", sans-serif;
  font-size: 16px; font-weight: 800; color: #0f172a;
  margin: 0 0 4px 0;
}
.s5-lh-sub {
  font-size: 13px; color: #64748b; margin: 0; line-height: 1.4;
}

/* Data Sources Grid */
.ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ds-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  transition: all 0.25s ease;
  cursor: default;
}
.ds-card:hover {
  background: #ffffff;
  border-color: rgba(249,115,22,0.3);
  box-shadow: 0 4px 14px rgba(249,115,22,0.08);
  transform: translateY(-2px);
}
.ds-card-wide {
  grid-column: span 2;
}
.ds-icon {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-label {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}

/* ===== RIGHT SIDE ===== */
.cpi-panel {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  border-radius: 24px;
  padding: 36px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(15,23,42,0.2);
}
/* Subtle background glow decoration */
.cpi-panel::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(249,115,22,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.cpi-panel::after {
  content: "";
  position: absolute;
  bottom: -60px; left: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cpi-accent-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: #f97316;
  letter-spacing: 1px;
}
.cpi-accent-dot {
  width: 7px; height: 7px;
  background: #f97316;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(249,115,22,0.6);
  animation: pulseDot 2s infinite;
}

.cpi-title {
  font-family: "Outfit", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #f8fafc;
  line-height: 1.3;
  margin: 0 0 14px 0;
  letter-spacing: -0.3px;
}
.cpi-desc {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.65;
  margin: 0 0 28px 0;
}

/* Divider */
.cpi-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.cpi-div-line {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.07);
}
.cpi-div-icon {
  width: 30px; height: 30px;
  background: rgba(249,115,22,0.12);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}

/* Integration Cards */
.int-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.int-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.int-card:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(249,115,22,0.3);
  transform: translateX(4px);
}
.int-card-custom {
  border-style: dashed;
  border-color: rgba(249,115,22,0.2);
  background: rgba(249,115,22,0.03);
}
.int-card-custom:hover {
  border-color: rgba(249,115,22,0.5);
  background: rgba(249,115,22,0.06);
}
.int-card-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.int-status-dot {
  width: 8px; height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
  flex-shrink: 0;
}
.int-logo-wrap {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 8px 14px;
}
.int-logo-wrap img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.int-plus-icon {
  width: 36px; height: 36px;
  background: rgba(249,115,22,0.1);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.int-custom-text {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #f97316;
}
.int-badge {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  background: rgba(34,197,94,0.1);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 100px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.int-badge-outline {
  background: rgba(249,115,22,0.08);
  color: #fdba74;
  border-color: rgba(249,115,22,0.2);
}

/* Footer note */
.cpi-footer-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(34,197,94,0.06);
  border: 1px solid rgba(34,197,94,0.15);
  border-radius: 12px;
}
.cpi-footer-note svg { flex-shrink: 0; margin-top: 2px; }
.cpi-footer-note p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}
.cpi-footer-note strong { color: #f0f9ff; }

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .s5-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .s5-top-header {
    text-align: left;
    align-items: flex-start;
  }
}
@media (max-width: 600px) {
  .ds-grid {
    grid-template-columns: 1fr;
  }
  .ds-card-wide { grid-column: span 1; }
}



/* ==========================================================================
   ADVANCED UI STYLES FOR SECTION 5
   ========================================================================== */

/* Advanced Radial Network */
.radial-network.advanced {
  height: 400px;
}
.rn-lines {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 500px; height: 400px;
}

.advanced-core .rn-glow-strong {
  position: absolute;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(249,115,22,0.35) 0%, rgba(249,115,22,0) 70%);
  border-radius: 50%;
  animation: pulseGlowStrong 2s infinite alternate;
}
@keyframes pulseGlowStrong {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0.5; }
}

.rn-core-inner {
  position: relative;
  width: 120px; height: 120px;
  background: linear-gradient(135deg, #ffffff 0%, #fff7ed 100%);
  border-radius: 50%;
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2), inset 0 0 0 4px rgba(255,255,255,0.8);
  border: 1px solid rgba(249, 115, 22, 0.3);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 4;
}
.rn-core-inner span {
  font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 900; text-align: center; color: #0f172a; margin-top: 6px; line-height: 1.1; letter-spacing: 0.5px;
}
.core-icon-spin {
  animation: spinSlow 15s linear infinite;
}
@keyframes spinSlow { 100% { transform: rotate(360deg); } }

.advanced-node {
  min-width: 90px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 20px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.02);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.advanced-node:hover {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, 0.1), 0 4px 8px rgba(0,0,0,0.04);
  border-color: rgba(249, 115, 22, 0.3);
  z-index: 10;
}
.advanced-node .rn-icon-wrapper {
  width: 32px; height: 32px; border-radius: 8px; margin-bottom: 6px;
}
.advanced-node .rn-icon-wrapper svg { width: 18px; height: 18px; }
.advanced-node small { font-size: 11px; font-weight: 800; color: #1e293b; letter-spacing: 0.3px; }

/* Adjusting node positions for 500x400 grid */
.advanced .n-top { top: 0px; left: 50%; transform: translateX(-50%); }
.advanced .n-top-right { top: 40px; right: 0px; }
.advanced .n-right { top: 50%; right: -20px; transform: translateY(-50%); }
.advanced .n-bottom-right { bottom: 40px; right: 0px; }
.advanced .n-bottom { bottom: 0px; left: 50%; transform: translateX(-50%); }
.advanced .n-bottom-left { bottom: 40px; left: 0px; }
.advanced .n-left { top: 50%; left: -20px; transform: translateY(-50%); }
.advanced .n-top-left { top: 40px; left: 0px; }


/* Advanced Connected Platforms */
.advanced-ps {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.02), inset 0 2px 0 rgba(255,255,255,1);
  margin-top: 20px;
}
.ps-header-adv {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px;
}
.ps-pulse-dot {
  width: 8px; height: 8px; background: #22c55e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.ps-title-adv {
  font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 800; color: #0f172a; margin: 0;
}

.ps-grid-adv {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.ps-card-adv {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px 16px;
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.ps-card-adv:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
  border-color: rgba(15,23,42,0.1);
}
.ps-card-label {
  font-size: 13px; font-weight: 600; color: #64748b; margin: 0; text-align: center;
}
.text-orange { color: #f97316 !important; }
.custom-integration {
  background: rgba(249,115,22,0.02);
  border: 1px dashed rgba(249,115,22,0.3);
}
.custom-integration:hover {
  border: 1px solid rgba(249,115,22,0.5);
  background: rgba(249,115,22,0.05);
}

.ps-footer-box {
  background: #f1f5f9;
  border-radius: 100px;
  padding: 10px 20px;
  text-align: center;
}
.ps-footer { font-size: 12px; color: #64748b; margin: 0; font-weight: 500; }


/* ===Sec7 from mobile_fix_s7.py=== */
/* MOBILE CAROUSEL FIXES - REMOVED DUPLICATE, SEE LINE 11408 FOR COMPLETE MOBILE STYLES */


/* ===Sec7 from beautify_s7.py=== */
/* SUPER AWESOME CARD OVERRIDES */
.carousel-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border: 1px solid #e2e8f0 !important;
  border-top: 5px solid var(--cc-color) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06), 0 5px 15px rgba(0,0,0,0.03) !important;
  padding: 36px 32px 28px 32px !important;
  justify-content: flex-start !important;
}

.cc-icon {
  width: 72px !important; height: 72px !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #ffffff 0%, var(--cc-bg) 100%) !important;
  border: 1px solid var(--cc-glow) !important;
  box-shadow: 0 12px 24px var(--cc-glow), inset 0 2px 4px rgba(255,255,255,1) !important;
  margin-bottom: 24px !important;
}

.cc-icon svg { 
  width: 32px !important; height: 32px !important; 
  stroke-width: 1.5 !important;
}

.cc-title {
  font-size: 21px !important; 
  font-weight: 800 !important; 
  color: #0f172a !important; 
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.5px !important;
}

.cc-desc {
  font-size: 15.5px !important; 
  color: #334155 !important; 
  line-height: 1.6 !important; 
  font-weight: 500 !important;
  flex-grow: 0 !important;
}

.cc-action {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px dashed #cbd5e1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--cc-color); font-weight: 700; font-size: 13.5px;
  text-transform: uppercase; letter-spacing: 0.5px;
  width: 100%;
  transition: all 0.3s ease;
}

.carousel-card:hover .cc-action {
  gap: 12px;
}




/* Impact Badge & Card Detail Styles */
.cc-impact-badge {
  display: inline-flex;
  align-items: center;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--cc-impact-bg, rgba(249, 115, 22, 0.08));
  color: var(--cc-impact-color, #f97316);
  border: 1px solid var(--cc-impact-border, rgba(249, 115, 22, 0.15));
  margin-top: -4px;
  margin-bottom: 16px;
  width: fit-content;
  align-self: flex-start;
  letter-spacing: 0.2px;
}
.cc-detail {
  font-size: 15px;
  color: #64748b;
  line-height: 1.5;
  margin: 0 0 20px 0;
  text-align: left;
}

/* Thematic Color Bindings for Impact Badge */
.c-orange {
  --cc-theme: #f97316;
  --cc-theme-glow: rgba(249, 115, 22, 0.15);
  --cc-impact-bg: rgba(249, 115, 22, 0.08);
  --cc-impact-color: #ea580c;
  --cc-impact-border: rgba(249, 115, 22, 0.18);
}
.c-blue {
  --cc-theme: #3b82f6;
  --cc-theme-glow: rgba(59, 130, 246, 0.15);
  --cc-impact-bg: rgba(59, 130, 246, 0.08);
  --cc-impact-color: #2563eb;
  --cc-impact-border: rgba(59, 130, 246, 0.18);
}
.c-purple {
  --cc-theme: #a855f7;
  --cc-theme-glow: rgba(168, 85, 247, 0.15);
  --cc-impact-bg: rgba(168, 85, 247, 0.08);
  --cc-impact-color: #9333ea;
  --cc-impact-border: rgba(168, 85, 247, 0.18);
}
.c-green {
  --cc-theme: #22c55e;
  --cc-theme-glow: rgba(34, 197, 94, 0.15);
  --cc-impact-bg: rgba(34, 197, 94, 0.08);
  --cc-impact-color: #16a34a;
  --cc-impact-border: rgba(34, 197, 94, 0.18);
}


/* ===Sec7 from build_s7.py=== */
/* ==========================================================================
   SECTION 7 — 3D CAROUSEL WORKFLOWS
   ========================================================================== */
.section-carousel {
  padding: 120px 0;
  background: #f8fafc;
  overflow: hidden; /* Important to hide massive 3D overflow */
  position: relative;
  font-family: "Outfit", sans-serif;
}
.section-carousel::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at center, rgba(168,85,247,0.05) 0%, transparent 60%);
  pointer-events: none;
}
.s7-header {
  margin-bottom: 80px; position: relative; z-index: 10;
}

/* --- 3D SCENE --- */
:root {
  --tz-radius: 760px;
  --card-w: 360px;
  --card-h: 420px;
}
@media (max-width: 1024px) {
  :root { 
    --tz-radius: 700px; 
    --card-w: 330px; 
    --card-h: 400px; 
  }
}
/* MOBILE RESPONSIVE STYLES MOVED TO LINE 11408 - DUPLICATE REMOVED */

.carousel-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  perspective: 1500px; /* 3D Camera Depth */
}
.carousel-scene {
  width: var(--card-w);
  height: var(--card-h);
  margin: 0 auto;
  position: relative;
  transform-style: preserve-3d;
}
.carousel-spinner {
  width: 100%; height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 3D CARDS --- */
.carousel-card {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  left: 0; top: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 24px;
  padding: 30px 24px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.05), 0 0 0 1px rgba(0,0,0,0.02);
  transition: all 0.4s ease;
  user-select: none;
}


/* 3D Placement Math (360 / 12 = 30deg steps) */
.carousel-card:nth-child(1)  { transform: rotateY(0deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(2)  { transform: rotateY(30deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(3)  { transform: rotateY(60deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(4)  { transform: rotateY(90deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(5)  { transform: rotateY(120deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(6)  { transform: rotateY(150deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(7)  { transform: rotateY(180deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(8)  { transform: rotateY(210deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(9)  { transform: rotateY(240deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(10) { transform: rotateY(270deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(11) { transform: rotateY(300deg) translateZ(var(--tz-radius)); }
.carousel-card:nth-child(12) { transform: rotateY(330deg) translateZ(var(--tz-radius)); }

/* Card Content Styling */
.cc-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  background: var(--cc-bg);
  color: var(--cc-color);
  box-shadow: 0 8px 20px var(--cc-glow);
  transition: all 0.3s;
}
.cc-icon svg { width: 28px; height: 28px; }

.cc-title {
  font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 10px 0;
  letter-spacing: -0.3px;
}
.cc-desc {
  font-size: 13px; color: #64748b; line-height: 1.5; margin: 0;
}


/* Themes */
.c-purple { --cc-color: #a855f7; --cc-bg: rgba(168,85,247,0.1); --cc-glow: rgba(168,85,247,0.2); }
.c-orange { --cc-color: #f97316; --cc-bg: rgba(249,115,22,0.1); --cc-glow: rgba(249,115,22,0.2); }
.c-blue   { --cc-color: #3b82f6; --cc-bg: rgba(59,130,246,0.1); --cc-glow: rgba(59,130,246,0.2); }
.c-green  { --cc-color: #22c55e; --cc-bg: rgba(34,197,94,0.1);  --cc-glow: rgba(34,197,94,0.2); }

/* CONTROLS */
.carousel-controls {
  display: flex; justify-content: center; gap: 20px;
  margin-top: 80px; position: relative; z-index: 10;
}

.btn-carousel {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex; align-items: center; justify-content: center;
  color: #0f172a; cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.2s;
}
.btn-carousel:hover {
  background: #f97316; color: #ffffff; border-color: #f97316;
  box-shadow: 0 8px 24px rgba(249,115,22,0.3);
  transform: translateY(-2px);
}
/* 3D CAROUSEL SCRIPT REMOVED FROM CSS */


/* ===Sec7 from pro_s7.py=== */
/* PROFESSIONAL DESIGN OVERRIDES */
@media (min-width: 769px) {
  .carousel-card {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    border-top: none !important; /* Removed unprofessional thick border */
    box-shadow: 0 15px 40px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.02) !important;
    padding: 36px 32px 32px 32px !important;
    border-radius: 24px !important;
    text-align: left !important;
    align-items: flex-start !important;
  }

  .cc-icon {
    width: 64px !important; height: 64px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--cc-bg) 100%) !important;
    border: 1px solid var(--cc-glow) !important;
    box-shadow: 0 8px 20px var(--cc-glow) !important;
    margin-bottom: 24px !important;
  }

  .cc-title {
    text-align: left !important;
    width: 100%;
  }

  .cc-desc {
    text-align: left !important;
    width: 100%;
    font-size: 14px !important;
  }

  .cc-features {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
    display: flex; flex-direction: column; gap: 10px;
    width: 100%; text-align: left;
  }

  .cc-f-item {
    display: flex; align-items: center; gap: 10px;
    font-size: 14.5px; color: #475569; font-weight: 500;
    line-height: 1.3;
  }

  .cc-f-item svg { 
    width: 16px; height: 16px; 
    color: var(--cc-color); 
    flex-shrink: 0;
  }
}

/* ===Sec7 Mobile — Clean snap-scroll card swiper === */
@media (max-width: 768px) {
  /* Section stays contained */
  .section-carousel {
    overflow: hidden !important;
    padding: 70px 0 50px 0 !important;
  }

  /* Wrapper: full width, no 3D, no perspective */
  .carousel-wrapper {
    perspective: none !important;
    overflow: visible !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  /* Scene: horizontal scroll track */
  .carousel-scene {
    width: 100% !important;
    height: auto !important;
    perspective: none !important;
    transform-style: flat !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 16px 0 24px 0 !important;
    margin: 0 !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }
  .carousel-scene::-webkit-scrollbar { display: none !important; }

  /* Spinner: flat flex row */
  .carousel-spinner {
    width: auto !important;
    height: auto !important;
    transform-style: flat !important;
    transform: none !important;
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
    /* Leading/trailing half-gap padding so center card is centered */
    padding: 0 calc(50vw - 160px) !important; /* Adjusted for 320px wide cards (width 300px + 10px margins) */
  }

  /* Cards: fixed width, full opacity, snap to center */
  .carousel-card {
    position: static !important;
    width: 300px !important;
    height: auto !important;
    min-height: auto !important;
    flex-shrink: 0 !important;
    scroll-snap-align: center !important;
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    padding: 26px 22px 22px 22px !important;
    margin: 0 10px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Active center card gets elevated treatment */
  .carousel-card.is-center {
    transform: scale(1.02) !important;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.11), 0 0 0 1.5px rgba(249, 115, 22, 0.2) !important;
    border-color: rgba(249, 115, 22, 0.18) !important;
  }

  /* Content sizes */
  .cc-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 14px !important;
    margin-bottom: 16px !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--cc-bg) 100%) !important;
    border: 1px solid var(--cc-glow) !important;
    box-shadow: 0 8px 20px var(--cc-glow) !important;
  }
  .cc-icon svg { width: 24px !important; height: 24px !important; }
  .cc-title { font-size: 19px !important; font-weight: 800 !important; margin-bottom: 10px !important; text-align: left !important; width: 100% !important; }
  .cc-impact-badge { font-size: 11px !important; padding: 4px 10px !important; margin-bottom: 12px !important; display: inline-flex !important; }
  .cc-desc { font-size: 13.5px !important; line-height: 1.5 !important; margin-bottom: 10px !important; text-align: left !important; width: 100% !important; font-weight: 600 !important; flex-grow: 0 !important; }
  .cc-detail { display: block !important; font-size: 12.5px !important; line-height: 1.5 !important; margin-bottom: 14px !important; text-align: left !important; width: 100% !important; color: #64748b !important; flex-grow: 0 !important; }
  .cc-features { padding-top: 14px !important; gap: 9px !important; margin-top: 0 !important; width: 100% !important; border-top: 1px solid #f1f5f9 !important; display: flex !important; flex-direction: column !important; flex-grow: 0 !important; }
  .cc-f-item { font-size: 12.5px !important; display: flex !important; align-items: center !important; gap: 8px !important; line-height: 1.4 !important; }
  .cc-f-item svg { width: 14px !important; height: 14px !important; }

  /* Dot indicators */
  .carousel-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 16px !important;
  }

  /* Controls below */
  .carousel-controls {
    margin-top: 24px !important;
    gap: 16px !important;
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    justify-content: center !important;
  }
  .btn-carousel {
    width: 44px !important;
    height: 44px !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08) !important;
  }
}

@media (max-width: 480px) {
  .carousel-card {
    width: 280px !important;
    min-height: auto !important;
    height: auto !important;
    padding: 26px 20px 22px 20px !important;
    margin: 0 8px !important;
  }
  .carousel-spinner {
    padding: 0 calc(50vw - 148px) !important; /* Adjusted for 280px + 16px margins */
  }
  .cc-icon { width: 56px !important; height: 56px !important; margin-bottom: 14px !important; }
  .cc-icon svg { width: 26px !important; height: 26px !important; }
  .cc-title { font-size: 18px !important; margin-bottom: 9px !important; }
  .cc-impact-badge { font-size: 10.5px !important; padding: 4px 9px !important; margin-bottom: 10px !important; }
  .cc-desc { font-size: 13px !important; margin-bottom: 8px !important; line-height: 1.5 !important; }
  .cc-detail { font-size: 12px !important; margin-bottom: 12px !important; line-height: 1.5 !important; }
  .cc-features { padding-top: 12px !important; gap: 8px !important; }
  .cc-f-item { font-size: 12px !important; gap: 7px !important; }
  .cc-f-item svg { width: 13px !important; height: 13px !important; }
}


/* ===Sec8 from rebuild_s8.py=== */
/* ==========================================================================
   SECTION 8 — ACTIONABLE INTELLIGENCE (NODE GRAPH)
   ========================================================================== */
.section-intelligence {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #fff8f2 100%);
  position: relative;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
}

/* Subtle dot grid in background */
.intel-bg-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.8;
  z-index: 0;
}

.intel-container {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
  max-width: 1300px;
}

/* --- RIGHT COLUMN: CONTENT & ROWS --- */
.intel-content {
  display: flex;
  flex-direction: column;
}

.intel-desc {
  font-size: 17px;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 40px;
  font-weight: 500;
}

.intel-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
}

.i-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(15,23,42,0.06);
  transition: all 0.2s;
  cursor: pointer;
}

.i-row:hover {
  transform: translateX(6px);
}

.i-row:hover .i-row-arrow svg {
  stroke: #f97316;
  transform: translateX(4px);
}

.i-row-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(249,115,22,0.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.i-row-text {
  flex-grow: 1;
}

.i-row-text h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.i-row-text p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.4;
}

.i-row-arrow svg {
  transition: all 0.2s;
}

/* Emotional Anchor Card */
.intel-goal-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 20px 40px rgba(249,115,22,0.06), 0 4px 10px rgba(0,0,0,0.02);
  text-align: center;
  overflow: hidden;
}

.goal-glow-bg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 100px;
  background: #f97316;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.intel-goal-card h4 {
  position: relative; z-index: 1;
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 800;
  color: #f97316;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.intel-goal-card p {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 15px;
  color: #334155;
  font-weight: 600;
}

/* --- LEFT COLUMN: THE NODE GRAPH --- */
.intel-visual {
  width: 100%;
  position: relative;
}

.intel-graph {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
}

/* SVG Lines */
.intel-lines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  filter: url(#glow-blur);
}

.anim-line {
  fill: none;
  stroke: url(#line-glow);
  stroke-width: 2.5;
  stroke-dasharray: 8 6;
  animation: flowLines 30s linear infinite;
  opacity: 0.6;
}

@keyframes flowLines {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* Inputs */
.intel-inputs {
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  z-index: 3;
  display: flex; flex-direction: column; gap: 14px;
}

.intel-input-title {
  font-size: 12px; font-weight: 800; color: #94a3b8;
  letter-spacing: 1px; margin-bottom: 8px; padding-left: 8px;
}

.intel-in-pill {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 10px 20px 10px 14px;
  border-radius: 100px;
  font-size: 13.5px; font-weight: 600; color: #334155;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.in-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.c-purple { background: #a855f7; box-shadow: 0 0 8px rgba(168,85,247,0.5); }
.c-orange { background: #f97316; box-shadow: 0 0 8px rgba(249,115,22,0.5); }
.c-blue { background: #3b82f6; box-shadow: 0 0 8px rgba(59,130,246,0.5); }
.c-green { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,0.5); }

/* Core Engine */
.intel-core {
  position: absolute;
  top: 50%; left: 45%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.core-pulse-1, .core-pulse-2 {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid #f97316;
  animation: corePulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.core-pulse-1 { width: 140px; height: 140px; animation-delay: 0s; }
.core-pulse-2 { width: 140px; height: 140px; animation-delay: 1.5s; }

.core-box {
  position: relative;
  width: 140px; height: 140px;
  background: #ffffff;
  border-radius: 50%;
  border: 2px solid #f97316;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 0 40px rgba(249,115,22,0.3), inset 0 0 20px rgba(249,115,22,0.1);
  text-align: center;
  z-index: 2;
}

.core-box span {
  font-size: 13px; font-weight: 850; color: #0f172a; line-height: 1.2;
}

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

/* Output Cards */
.intel-card {
  position: absolute;
  width: 220px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,0.08);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 15px 35px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.02);
  z-index: 4;
  transform: translate(-50%, -50%);
  animation: floatLayer 8s ease-in-out infinite;
}

.ic-header {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}

.ic-icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: rgba(249,115,22,0.1);
  color: #f97316;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.c-green-bg { background: rgba(34,197,94,0.1); }
.c-blue-bg { background: rgba(59,130,246,0.1); }
.c-purple-bg { background: rgba(168,85,247,0.1); }

.ic-title-box {
  display: flex; flex-direction: column; gap: 2px;
}

.ic-title {
  font-size: 13.5px; font-weight: 800; color: #0f172a; line-height: 1.1;
}

.ic-tag {
  font-size: 9px; font-weight: 800; color: #f97316;
  text-transform: uppercase; letter-spacing: 0.5px;
}

.ic-desc {
  font-size: 11.5px; color: #64748b; margin: 0; line-height: 1.4;
}

@keyframes floatLayer {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -10px; }
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 1024px) {
  .intel-container { grid-template-columns: 1fr; }
  .intel-visual { order: 2; margin-top: 40px; }
  .intel-content { order: 1; }
  .intel-graph { aspect-ratio: 4/3; }
}

@media (max-width: 768px) {
  .section-intelligence { padding: 80px 0; }
  .intel-graph { aspect-ratio: 1/1.2; transform: scale(0.9); transform-origin: top center; }
  .intel-inputs { display: none; /* Hide inputs on mobile to reduce clutter */ }
  .intel-core { left: 50%; }
  
  /* Re-position cards for mobile core at 50% */
  .intel-card { width: 180px; padding: 12px; }
  .ic-title { font-size: 12px; }
  .ic-desc { font-size: 10.5px; }
  .intel-card:nth-of-type(1) { top: 15% !important; left: 25% !important; }
  .intel-card:nth-of-type(2) { top: 15% !important; left: 75% !important; }
  .intel-card:nth-of-type(3) { top: 50% !important; left: 85% !important; }
  .intel-card:nth-of-type(4) { top: 85% !important; left: 75% !important; }
  .intel-card:nth-of-type(5) { top: 85% !important; left: 25% !important; }
  .intel-card:nth-of-type(6) { top: 50% !important; left: 15% !important; }
  .intel-card:nth-of-type(7) { display: none; /* hide extra cards to keep it clean */ }
}


/* ===Sec8 from rebuild_s8_coverflow.py=== */
/* ==========================================================================
   SECTION 8 — OUTPUT (3D COVER FLOW)
   ========================================================================== */
.section-intelligence {
  padding: 120px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
  font-family: "Outfit", sans-serif;
}

.intel-bg-glow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.8;
  z-index: 0;
}

.intel-desc {
  font-size: 18px;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

/* 3D COVER FLOW CONTAINER */
.cf-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: -10px auto 0;
  perspective: 1200px;
  z-index: 2;
  overflow: hidden;
  padding: 20px 0 60px 0; /* padding for overflow scale */
}

.cf-track {
  position: relative;
  height: 450px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.cf-card {
  position: absolute;
  width: 320px;
  height: 420px;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, z-index 0.6s step-end;
  will-change: transform, opacity;
  cursor: pointer;
}

.cf-card-inner {
  width: 100%; height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 20px;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Active card highlight */
.cf-card.is-active .cf-card-inner {
  box-shadow: 0 30px 60px rgba(249,115,22,0.15), 0 0 0 1px rgba(249,115,22,0.3);
}

/* --- UI MOCKUPS SECTION --- */
.cf-ui-box {
  flex: 1;
  background: #0f172a; /* Deep dark bg for UI mockups */
  position: relative;
  padding: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-mockup {
  width: 100%; height: 100%;
  background: #1e293b;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 16px;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}

.ui-topbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ui-dots { display: flex; gap: 4px; }
.ud { width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.ui-title { font-size: 11px; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }

/* 1. Reports Mockup */
.rm-chart-container { position: relative; height: 60px; margin-bottom: 16px; }
.rm-line { width: 100%; height: 100%; }
.rm-gradient { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(249,115,22,0.2) 0%, transparent 100%); pointer-events: none; }
.rm-stats { display: flex; gap: 10px; margin-bottom: 16px; }
.rm-stat { flex: 1; background: rgba(0,0,0,0.2); padding: 10px; border-radius: 8px; text-align: center; }
.rs-val { font-size: 16px; font-weight: 800; color: #fff; }
.rs-lbl { font-size: 10px; color: #64748b; }
.text-green { color: #22c55e; }
.rm-btn { background: #f97316; color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 10px; border-radius: 6px; }

/* 2. AI Summaries Mockup */
.ai-sparkles { color: #f97316; }
.sm-messy-thread { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; opacity: 0.5; }
.sm-line { height: 6px; background: #334155; border-radius: 3px; }
.w-80 { width: 80%; } .w-60 { width: 60%; } .w-90 { width: 90%; } .w-40 { width: 40%; } .mt-2 { margin-top: 8px; }
.sm-arrow { text-align: center; color: #f97316; margin-bottom: 10px; font-weight: bold; }
.sm-clean-summary { background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.2); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sm-bullet { display: flex; gap: 8px; font-size: 11px; color: #e2e8f0; align-items: flex-start; line-height: 1.4; }
.sm-bullet span { width: 6px; height: 6px; background: #f97316; border-radius: 50%; margin-top: 4px; flex-shrink: 0; box-shadow: 0 0 8px #f97316; }

/* 3. Search Mockup */
.sh-searchbar { background: #0f172a; border: 1px solid #334155; border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sh-searchbar svg { width: 16px; height: 16px; }
.sh-searchbar span { font-size: 12px; color: #fff; }
.sh-results { display: flex; flex-direction: column; gap: 10px; }
.sh-result { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 10px; border-radius: 8px; display: flex; gap: 10px; align-items: center; }
.sh-res-icon { font-size: 20px; }
.sh-res-text { display: flex; flex-direction: column; gap: 2px; }
.sh-res-text strong { font-size: 11px; color: #3b82f6; }
.sh-res-text span { font-size: 10px; color: #94a3b8; }

/* 4. Review Mockup */
.rv-blueprint { flex: 1; background: #0f172a; border: 1px solid #334155; border-radius: 8px; position: relative; background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 20px 20px; overflow: hidden;}
.rv-box { position: absolute; border-width: 2px; border-style: dashed; border-radius: 4px; animation: pulseRed 2s infinite; }
.rv-clash { top: 20px; left: 20px; width: 60px; height: 40px; border-color: #ef4444; background: rgba(239,68,68,0.1); }
.rv-missing { bottom: 20px; right: 20px; width: 80px; height: 30px; border-color: #eab308; background: rgba(234,179,8,0.1); animation-delay: 1s; }
.rv-tooltip { position: absolute; top: -25px; left: -10px; background: #1e293b; color: #fff; font-size: 9px; padding: 4px 8px; border-radius: 4px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1); }
@keyframes pulseRed { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); } 70% { box-shadow: 0 0 0 10px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }

/* 5. Logs Mockup */
.lg-timeline { position: relative; padding-left: 20px; display: flex; flex-direction: column; gap: 20px; }
.lg-timeline::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: #334155; }
.lg-item { position: relative; }
.lg-dot { position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.bg-orange { background: #f97316; color: #f97316; } .bg-blue { background: #3b82f6; color: #3b82f6; } .bg-green { background: #22c55e; color: #22c55e; }
.lg-txt { font-size: 11px; color: #e2e8f0; line-height: 1.4; }
.lg-txt strong { color: #fff; }
.lg-time { font-size: 9px; color: #64748b; margin-top: 2px; }

/* 6. Diff Mockup */
.df-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.df-lbl { font-size: 11px; color: #94a3b8; }
.df-val { font-size: 12px; font-weight: 700; color: #fff; }
.text-red { color: #ef4444; }
.df-delta { text-align: right; font-size: 10px; color: #ef4444; margin-top: 4px; padding: 4px 8px; background: rgba(239,68,68,0.1); border-radius: 4px; display: inline-block; float: right; }
.mt-3 { margin-top: 16px; }

/* 7. Docs Mockup */
.dc-folder { display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 8px; margin-bottom: 10px; transition: background 0.2s; }
.dc-folder:hover { background: rgba(255,255,255,0.08); }
.dc-f-icon { font-size: 18px; }
.dc-f-txt { flex: 1; font-size: 12px; color: #e2e8f0; font-weight: 500; }
.dc-badge { background: #3b82f6; color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 10px; font-weight: bold; }

/* 8. Dash Mockup */
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; }
.ds-donut-box { display: flex; align-items: center; justify-content: center; position: relative; }
.ds-donut { width: 80px; height: 80px; border-radius: 50%; background: conic-gradient(#f97316 0% 75%, #334155 75% 100%); display: flex; align-items: center; justify-content: center; }
.ds-donut::before { content: ''; width: 60px; height: 60px; background: #1e293b; border-radius: 50%; }
.ds-donut-lbl { position: absolute; text-align: center; font-size: 14px; font-weight: bold; color: #fff; }
.ds-donut-lbl span { font-size: 9px; color: #94a3b8; font-weight: normal; }
.ds-bars { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ds-bar { height: 8px; background: #0f172a; border-radius: 4px; overflow: hidden; }
.dsb-fill { height: 100%; background: #f97316; border-radius: 4px; }
.bg-purple { background: #a855f7; }

/* 9. Email Mockup */
.em-header { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 12px; }
.em-header span { font-size: 10px; color: #94a3b8; }
.em-body { font-size: 11px; color: #e2e8f0; line-height: 1.6; font-style: italic; background: rgba(255,255,255,0.02); padding: 12px; border-left: 2px solid #f97316; margin-bottom: 16px; }
.em-btn { background: #22c55e; color: #fff; font-size: 12px; font-weight: 700; text-align: center; padding: 10px; border-radius: 6px; cursor: pointer; }


/* --- BOTTOM TEXT CONTENT --- */
.cf-content {
  height: 130px;
  background: #ffffff;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cf-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(249,115,22,0.1);
  color: #f97316;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.cf-text h4 {
  font-size: 18px; font-weight: 800; color: #0f172a; margin: 0 0 4px 0;
}
.cf-text p {
  font-size: 13px; color: #64748b; margin: 0; line-height: 1.4; font-weight: 500;
}


/* CONTROLS */
.cf-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 20px;
}
.cf-btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #0f172a;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.cf-btn:hover {
  background: #f97316;
  color: #fff;
  border-color: #f97316;
}
.cf-btn svg { width: 20px; height: 20px; }

.cf-dots { display: flex; gap: 8px; }
.cf-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #cbd5e1; cursor: pointer; transition: all 0.3s;
}
.cf-dot.is-active {
  background: #f97316;
  width: 24px; border-radius: 10px;
}

/* Emotional Anchor Card */
.intel-goal-card {
  position: relative;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(249,115,22,0.2);
  border-radius: 20px;
  padding: 36px;
  box-shadow: 0 20px 40px rgba(249,115,22,0.06), 0 4px 10px rgba(0,0,0,0.02);
  text-align: center;
  overflow: hidden;
}

.goal-glow-bg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 150px; height: 100px;
  background: #f97316;
  filter: blur(60px);
  opacity: 0.15;
  z-index: 0;
  pointer-events: none;
}

.intel-goal-card h4 {
  position: relative; z-index: 1;
  margin: 0 0 10px 0;
  font-size: 26px;
  font-weight: 800;
  color: #f97316;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.intel-goal-card p {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 16px;
  color: #334155;
  font-weight: 600;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  .section-intelligence { padding: 80px 0; }
  .cf-track { height: 400px; }
  .cf-card { width: 280px; height: 380px; }
  .cf-content { padding: 16px; height: 110px; }
  .cf-text h4 { font-size: 16px; }
  .cf-text p { font-size: 12px; }
  .cf-icon { width: 36px; height: 36px; }
  .cf-ui-box { padding: 12px; }
  .intel-goal-card { padding: 24px; }
  .intel-goal-card h4 { font-size: 20px; }
}
/* === 3D COVER FLOW CAROUSEL LOGIC REMOVED FROM CSS === */


/* ===Patch from update_p3_css.py=== */
/* --- Panel 3: Build AI Skill (Advanced Dashboard) --- */

.p3-header {
  margin-bottom: 12px;
}
.p3-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.p3-title {
  font-family: "Outfit", sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px 0;
}
.p3-subtitle {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px;
  color: #64748b;
  margin: 0;
  max-width: 90%;
  line-height: 1.4;
}

/* Stat Cards Layout */
.p3-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.p3-stat-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.p3-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  border-color: rgba(246, 114, 20, 0.15);
}

.p3-stat-icon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.p3-stat-label {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
}
.p3-stat-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p3-stat-icon.green { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.p3-stat-icon.orange { background: rgba(246, 114, 20, 0.1); color: #f67214; }
.p3-stat-icon.blue { background: rgba(37, 99, 235, 0.1); color: #2563eb; }

.p3-trend {
  font-size: 10px;
  font-weight: 700;
  font-family: "Outfit", sans-serif;
}
.p3-trend.up { color: #16a34a; }

.p3-big-num {
  font-family: "Outfit", sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #0f172a;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -1px;
}
.p3-unit {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0;
  margin-left: 2px;
}
.p3-stat-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 10.5px;
  color: #64748b;
  line-height: 1.35;
  margin-top: auto;
}

/* Gauge specific */
.p3-gauge-card {
  grid-row: span 2;
}
.p3-gauge-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 6px auto 10px;
}
.p3-gauge-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.p3-gauge-num {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 900;
  color: #0f172a;
}
.p3-gauge-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
}
.p3-detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  line-height: 1.3;
}
.p3-detail-label {
  color: #64748b;
  font-family: "Instrument Sans", sans-serif;
}
.p3-detail-val {
  font-weight: 700;
  font-family: "Outfit", sans-serif;
}
.p3-detail-val.text-green {
  color: #16a34a;
}

/* Mini charts */
.p3-bar-mini {
  width: 100%;
  height: 5px;
  background: #f1f5f9;
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.p3-bar-fill {
  height: 100%;
  background: #16a34a;
  border-radius: 3px;
  transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.p3-mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  margin-bottom: 8px;
}
.p3-mb {
  flex: 1;
  background: #e2e8f0;
  border-radius: 2px 2px 0 0;
  transition: transform 0.6s ease;
  transform-origin: bottom;
  transform: scaleY(0);
}
.p3-mb.h-40 { height: 40%; }
.p3-mb.h-60 { height: 60%; }
.p3-mb.h-30 { height: 30%; }
.p3-mb.h-80 { height: 80%; }
.p3-mb.h-100 { height: 100%; }
.p3-mb.active { background: #f67214; }

.p3-stars {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  font-size: 14px;
}
.star.filled { color: #f59e0b; }
.star.half { color: #fcd34d; }

/* Agent Log */
.p3-agent-log {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 12px;
  padding: 12px;
}
.p3-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}
.p3-log-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.p3-log-title {
  font-family: "Outfit", sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #334155;
}
.p3-log-live {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #f67214;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(246, 114, 20, 0.1);
  padding: 4px 8px;
  border-radius: 6px;
}

.p3-log-feed {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.finding-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.finding-item.checked, .finding-item.pending {
  opacity: 1;
  transform: translateY(0);
}

.f-tag {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.f-tag.rfi { background: #fee2e2; color: #dc2626; }
.f-tag.spec { background: #e0e7ff; color: #4f46e5; }
.f-tag.qa { background: #fef3c7; color: #d97706; }

.f-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.f-text {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12.5px;
  color: #334155;
  line-height: 1.4;
  font-weight: 500;
}
.finding-item.pending .f-text {
  color: #64748b;
  font-style: italic;
}
.f-status {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
}
.f-status.resolved { color: #16a34a; }
.f-status.processing { color: #f67214; display: flex; align-items: center; gap: 4px; }

.f-time {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
}


/* ===Patch from fix_css.py=== */
/* ==========================================================================
   SECTION 2: OPERATIONAL REALITY
   ========================================================================== */

/* --- Base Section Styles --- */
.reality-section {
  position: relative;
  width: 100%;
  padding: 100px 0 120px;
  background: linear-gradient(180deg, #fffdfa 0%, #fff8f2 100%);
  overflow: hidden;
  z-index: 10;
}

/* Faint Grid Texture Overlay */
.reality-bg-grid {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-image: 
    linear-gradient(rgba(246, 114, 20, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 114, 20, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center top;
  z-index: 1;
  pointer-events: none;
}

.reality-container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Top Header Area --- */
.reality-header {
  max-width: 700px;
  margin: 0 auto 60px;
}
.reality-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(246, 114, 20, 0.08);
  border: 1px solid rgba(246, 114, 20, 0.2);
  color: #f67214;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.reality-badge .badge-dot-pulse {
  width: 6px; height: 6px;
  background: #f67214;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.7);
  animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
  0% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.7); }
  70% { box-shadow: 0 0 0 6px rgba(246, 114, 20, 0); }
  100% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0); }
}

.reality-header .section-title {
  font-family: "Outfit", sans-serif;
  font-size: 46px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.reality-header .title-highlight {
  color: #f67214;
}
.reality-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

/* --- Split Layout Grid --- */
.reality-split-view {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: stretch;
  margin-bottom: 60px;
}

/* Column Base Styling */
.reality-col {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.02);
}

.col-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 12px;
}
.col-badge.green-badge {
  background: rgba(22, 163, 74, 0.1);
  color: #16a34a;
  border: 1px solid rgba(22, 163, 74, 0.2);
}
.col-badge.red-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.col-subtitle {
  font-family: "Instrument Sans", sans-serif;
  font-size: 15px;
  color: #475569;
  margin-bottom: 32px;
  font-weight: 600;
}

/* --- Center Divider Beam --- */
.reality-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 80px;
}
.divider-beam {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(246, 114, 20, 0.1) 20%, 
    rgba(246, 114, 20, 0.8) 50%, 
    rgba(246, 114, 20, 0.1) 80%, 
    transparent 100%);
  box-shadow: 0 0 15px rgba(246, 114, 20, 0.4);
}
.divider-orb {
  width: 80px; height: 80px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 1.5px solid rgba(246, 114, 20, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 30px rgba(246, 114, 20, 0.2);
}
.divider-orb::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(246, 114, 20, 0.05);
}
.orb-text {
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #f67214;
  text-align: center;
  line-height: 1.2;
}
.divider-arrows {
  position: absolute;
  z-index: 1;
}

/* ==========================================================================
   LEFT COLUMN: Diversity Grid
   ========================================================================== */
.diversity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.diversity-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  padding: 16px;
  position: relative;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.diversity-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.dc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 20px;
}

/* Node Layouts */
.dc-flow { position: relative; }
.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  position: relative;
}
.fn-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: #f8fafc;
}
.fn-icon.green { color: #16a34a; background: rgba(22, 163, 74, 0.1); }
.fn-icon.blue { color: #2563eb; background: rgba(37, 99, 235, 0.1); }
.fn-icon.orange { color: #f67214; background: rgba(246, 114, 20, 0.1); }
.fn-icon.purple { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }

.fn-label {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  color: #475569;
  font-weight: 700;
}

/* Linear Flow */
.linear-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.linear-flow .flow-line {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(15,23,42,0.1) 0, rgba(15,23,42,0.1) 4px, transparent 4px, transparent 8px);
  margin: -14px 4px 0;
  z-index: 1;
}

/* Circular/Branching Flow */
.circular-flow {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.cf-top, .cf-bottom {
  display: flex;
  justify-content: space-around;
  position: relative;
  z-index: 2;
}
.cf-lines {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 1;
}

.dc-status {
  position: absolute;
  bottom: -6px; left: 50%;
  transform: translateX(-50%);
  width: 20px; height: 20px;
  background: #fff;
  border: 1px solid rgba(15,23,42,0.06);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* ==========================================================================
   RIGHT COLUMN: Chaos Canvas
   ========================================================================== */
.chaos-canvas {
  position: relative;
  width: 100%;
  height: 400px;
}
.chaos-card {
  position: absolute;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  animation: floatChaos 6s ease-in-out infinite;
}
@keyframes floatChaos {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.cc-header {
  display: flex; align-items: center; gap: 6px;
  font-family: "Outfit", sans-serif; font-size: 13px; font-weight: 800; color: #0f172a;
}
.cc-warning {
  font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 700; color: #dc2626;
  margin-top: 4px; padding-top: 8px; border-top: 1px dashed rgba(220, 38, 38, 0.2);
}

/* Search Card */
.search-card { top: 0; left: 0; width: 220px; animation-delay: 0s; z-index: 5; }
.search-bar { 
  display: flex; align-items: center; gap: 6px;
  border: 1px solid rgba(15,23,42,0.1); border-radius: 6px; padding: 6px 8px;
  font-size: 11px; color: #64748b; background: #f8fafc; font-weight: 500;
}
.search-result { font-size: 10px; color: #475569; padding-left: 2px; font-weight: 600; }

/* Sheet Card */
.sheet-card { top: 10px; right: 0; width: 260px; animation-delay: -1.5s; z-index: 4; }
.sheet-title { font-size: 11px; font-weight: 700; color: #334155; margin-bottom: 4px; }
.sheet-grid { display: flex; flex-direction: column; gap: 2px; }
.sg-row { display: flex; gap: 2px; height: 12px; }
.sg-row.header .sg-cell { background: #e2e8f0; height: 16px; }
.sg-cell { background: #f1f5f9; border-radius: 2px; flex: 1; }
.sg-cell.w-20 { flex: 0.5; } .sg-cell.w-30 { flex: 0.8; } .sg-cell.w-40 { flex: 1.2; }
.sg-cell.green { background: rgba(16, 185, 129, 0.2); }

/* Review Card */
.review-card { top: 130px; left: 0; width: 200px; animation-delay: -3s; z-index: 6; }
.review-text { font-size: 12px; font-weight: 600; color: #1e293b; }
.review-progress { display: flex; align-items: center; gap: 8px; }
.rp-bar { flex: 1; height: 4px; background: #f1f5f9; border-radius: 2px; overflow: hidden; }
.rp-fill { height: 100%; background: #f59e0b; border-radius: 2px; }
.rp-pct { font-size: 11px; font-weight: 800; color: #0f172a; }

/* Team Card */
.team-card { top: 160px; right: 0; width: 240px; animation-delay: -4.5s; z-index: 5; }
.team-chain { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.tc-avatar { width: 24px; height: 24px; border-radius: 50%; background: #f8fafc; border: 1px solid rgba(15,23,42,0.1); display: flex; align-items: center; justify-content: center; color: #94a3b8; }
.tc-arrow { color: #cbd5e1; }

/* Email Card */
.email-card { bottom: 0; left: 5%; width: 90%; animation-delay: -2s; z-index: 7; }
.split-body { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.el-header { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.el-count { font-size: 14px; font-weight: 800; color: #dc2626; }
.el-label { font-size: 11px; color: #475569; font-weight: 600; }
.el-item { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.el-box { width: 8px; height: 8px; border: 1px solid #cbd5e1; border-radius: 2px; }
.el-subj { font-size: 11px; color: #1e293b; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.el-time { font-size: 10px; color: #64748b; font-weight: 500; }
.meeting-block { background: rgba(139, 92, 246, 0.05); border: 1px solid rgba(139, 92, 246, 0.1); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.mb-header { font-size: 11px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 4px; }
.mb-time { font-size: 12px; font-weight: 700; color: #dc2626; }

/* ==========================================================================
   BOTTOM: Insight Chips
   ========================================================================== */
.reality-insights { margin-top: 20px; }
.insights-title { font-family: "Outfit", sans-serif; font-size: 16px; font-weight: 700; color: #0f172a; margin-bottom: 20px; }
.insights-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.insight-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid rgba(15,23,42,0.06);
  padding: 8px 16px; border-radius: 100px;
  font-family: "Instrument Sans", sans-serif; font-size: 12px; font-weight: 600; color: #334155;
  box-shadow: 0 4px 10px rgba(15,23,42,0.02);
}

/* ==========================================================================
   RESPONSIVE DESIGN FOR SECTION 2
   ========================================================================== */
@media (max-width: 1200px) {
  .reality-split-view { gap: 20px; }
  .reality-col { padding: 24px; }
  .chaos-canvas { height: 420px; }
  .sheet-card { width: 220px; }
  .team-card { width: 200px; }
}

@media (max-width: 991px) {
  .reality-split-view {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 30px;
  }
  .reality-divider {
    width: 100%;
    height: 80px;
    flex-direction: row;
  }
  .divider-beam {
    top: 50%; left: 0; right: 0; bottom: auto;
    width: 100%; height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, transparent 0%, rgba(246, 114, 20, 0.8) 50%, transparent 100%);
  }
  .divider-arrows { display: none; }
  .chaos-canvas { height: 480px; }
  .search-card { left: 10%; }
  .sheet-card { right: 10%; }
  .review-card { left: 10%; top: 120px; }
  .team-card { right: 10%; top: 160px; }
}

@media (max-width: 767px) {
  .reality-section { padding: 60px 0 80px; }
  .reality-header .section-title { font-size: 32px; }
  .reality-desc { font-size: 14px; }
  .reality-desc br { display: none; }
  
  .diversity-grid { grid-template-columns: 1fr; }
  
  .chaos-canvas {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .chaos-card {
    position: relative;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    width: 100% !important;
    animation: none;
    transform: none !important;
  }
  .split-body { grid-template-columns: 1fr; }
}

@media (max-width: 375px) {
  .reality-header .section-title { font-size: 28px; }
  .insight-chip { font-size: 11px; padding: 6px 12px; }
}


/* ===Patch from patch_style.py=== */

.p2-hub-core:hover {
  transform: scale(1.05);
  box-shadow: 
    0 20px 42px rgba(246, 114, 20, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 0 0 7px rgba(246, 114, 20, 0.18);
}

.ai-neural-icon {
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6));
}

.neural-spark {
  transform-origin: center;
  animation: sparkPulse 2s ease-in-out infinite;
}

.inner-orbit-spin {
  transform-origin: center;
  animation: innerOrbit 8s linear infinite;
}

@keyframes sparkPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(255,255,255,0.7)); }
  50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,255,255,0.95)); }
}

@keyframes innerOrbit {
  100% { transform: rotate(360deg); }
}

.p2-hub-label {
  font-family: "Outfit", sans-serif;
  font-size: 8px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 1.2px;
  line-height: 1;
}

/* --- Panel 3: Build AI Skill (Advanced Dashboard) --- */
.skill-live-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.2);
  color: #16a34a;
  padding: 4px 8px;
  border-radius: 8px;
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 800;
}
.live-dot { width: 6px; height: 6px; background: #16a34a; border-radius: 50%; }
.live-dot.pulse { animation: statusDotPulse 2s infinite; }

.skill-dashboard-canvas {
  flex-grow: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 12px;
  height: 100%;
}

.dash-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-card:hover {
  border-color: rgba(246, 114, 20, 0.12);
  box-shadow: 0 8px 30px rgba(246, 114, 20, 0.04);
}

.card-title {
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Gauge Chart */
.gauge-card { 
  align-items: center; 
  justify-content: center; 
  text-align: center;
}
.gauge-wrapper { 
  position: relative; 
  width: 72px; 
  height: 72px; 
  margin-bottom: 10px; 
}
.gauge-svg { 
  width: 100%; 
  height: 100%; 
  transform: rotate(-90deg); 
  transform-origin: center;
}
.radial-bg { 
  stroke: #f1f5f9; 
  stroke-width: 6; 
}
.radial-fill { 
  stroke-width: 6; 
  stroke-linecap: round; 
  transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1); 
}
.gauge-val { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  display: flex; 
  align-items: baseline; 
}
.val-num { 
  font-family: "Outfit", sans-serif; 
  font-size: 15px; 
  font-weight: 800; 
  color: #0f172a; 
  letter-spacing: -0.5px;
}

/* Metric Chart */
.metric-card { 
  position: relative; 
  justify-content: space-between;
}
.metric-icon { 
  position: absolute; 
  top: 14px; 
  right: 14px; 
  color: #f67214;
  opacity: 0.85;
}
.metric-val { 
  font-family: "Outfit", sans-serif; 
  font-size: 26px; 
  font-weight: 800; 
  color: #0f172a; 
  line-height: 1.1; 
  margin-top: 4px; 
  letter-spacing: -0.5px;
}
.metric-unit { 
  font-size: 11px; 
  color: #64748b; 
  font-weight: 600; 
  margin-left: 2px; 
}
.metric-chart { 
  display: flex; 
  align-items: flex-end; 
  gap: 4px; 
  height: 30px; 
  margin-top: auto; 
  padding-top: 10px;
}
.bar { 
  flex: 1; 
  background: rgba(246, 114, 20, 0.1); 
  border-radius: 3px 3px 0 0; 
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bar.h-40 { height: 40%; } 
.bar.h-60 { height: 60%; } 
.bar.h-30 { height: 30%; } 
.bar.h-80 { height: 80%; } 
.bar.h-100 { height: 100%; background: linear-gradient(to top, #f67214, #ff8c3a); }

/* Action Log Feed */
.insights-card.col-span-2 { grid-column: span 2; }
.card-hdr { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 12px; 
  border-bottom: 1px solid rgba(15, 23, 42, 0.05); 
  padding-bottom: 8px; 
}
.hdr-link { 
  font-family: "Outfit", sans-serif;
  font-size: 10px; 
  font-weight: 700; 
  color: #f67214; 
  cursor: pointer; 
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.insights-feed { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}
.finding-item { 
  display: flex; 
  align-items: center; 
  gap: 10px; 
  padding: 8px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.01);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.finding-item.checked, .finding-item.pending {
  opacity: 1;
  transform: translateY(0);
}

.finding-item .f-icon { 
  width: 20px; 
  height: 20px; 
  border-radius: 6px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  flex-shrink: 0; 
  transition: all 0.3s ease;
}
.finding-item .f-icon.success { background: rgba(22, 163, 74, 0.1); color: #16a34a; }
.finding-item .f-icon.loading { background: rgba(246, 114, 20, 0.1); color: #f67214; }
.finding-item.pending .f-icon.loading { animation: pulseBg 1.5s ease-in-out infinite alternate; }

@keyframes pulseBg {
  0% { background: rgba(246, 114, 20, 0.08); }
  100% { background: rgba(246, 114, 20, 0.2); }
}

.load-dot { 
  width: 6px; 
  height: 6px; 
  background: #f67214; 
  border-radius: 50%; 
  animation: statusDotPulse 1.2s infinite; 
}
.finding-item .f-text { 
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px; 
  font-weight: 500; 
  color: #334155; 
  line-height: 1.4; 
  flex-grow: 1; 
}
.finding-item.pending .f-text { color: #64748b; font-style: italic; }
.finding-item .f-time { 
  font-family: "Outfit", sans-serif;
  font-size: 9px; 
  font-weight: 600; 
  color: #94a3b8; 
  flex-shrink: 0; 
}

/* --- Frame Footer --- */
.frame-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  flex-shrink: 0;
}

.step-bullets { display: flex; gap: 6px; }
.step-bullets .bullet { width: 16px; height: 5px; border-radius: 3px; background: rgba(15, 23, 42, 0.08); cursor: pointer; transition: all 0.3s ease; }
.step-bullets .bullet.active { background: #f67214; width: 24px; }

.engine-status { font-family: "Outfit", sans-serif; font-size: 10px; font-weight: 800; }
.status-label { color: #64748b; margin-right: 4px; }
.status-val.text-orange { color: #f67214; }
.status-val.text-green { color: #16a34a; }
.status-val.text-blue { color: #2563eb; }

/* ================================================
   ANIMATIONS & KEYFRAMES
   ================================================ */
@keyframes stepGlowPulse { 0% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0.4); } 70% { box-shadow: 0 0 0 8px rgba(246, 114, 20, 0); } 100% { box-shadow: 0 0 0 0 rgba(246, 114, 20, 0); } }
@keyframes statusDotPulse { 0% { transform: scale(0.95); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(0.95); opacity: 0.8; } }
@keyframes floatEffect { 0% { transform: translateY(0px); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0px); } }
@keyframes lineFlow { to { stroke-dashoffset: -120; } }
@keyframes moveDot { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes radarPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } }
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spin-rev { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }


/* ===Patch from s5_icons.py=== */
/* New styling for radial nodes with SVGs */
.rn-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.rn-icon-wrapper {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rn-icon-wrapper.blue-bg { background: #eff6ff; color: #3b82f6; }
.rn-icon-wrapper.red-bg { background: #fef2f2; color: #ef4444; }
.rn-icon-wrapper.green-bg { background: #f0fdf4; color: #22c55e; }
.rn-icon-wrapper.purple-bg { background: #faf5ff; color: #a855f7; }
.rn-icon-wrapper.indigo-bg { background: #eef2ff; color: #6366f1; }
.rn-icon-wrapper.orange-bg { background: #fff7ed; color: #f97316; }
.rn-icon-wrapper.yellow-bg { background: #fefce8; color: #eab308; }


/* === JAVASCRIPT CAROUSEL LOGIC REMOVED FROM CSS === */
/* Dim and blur background cards in 3D carousel */
.carousel-card {
  transition: transform 0.8s ease-in-out, opacity 0.6s ease-in-out, filter 0.6s ease-in-out !important;
}

@media (min-width: 769px) {
  .carousel-card.is-background {
    opacity: 0.3 !important;
    filter: blur(5px) !important;
    -webkit-filter: blur(5px) !important;
    pointer-events: none;
  }
}


/* ===Patch from desktop_ring.py=== */
@media (min-width: 769px) {
  .carousel-card {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,1) !important;
  }
}
@media (min-width: 769px) {
  .carousel-card {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.03), inset 0 0 0 1px rgba(255,255,255,1) !important;
  }
}




/* ==========================================
   CRITICAL PATCHES: Recovered missing classes
   ========================================== */

/* Hero Section - Critical Layout */
.hero-grid { 
  display: grid; 
  grid-template-columns: 1.05fr 0.95fr; 
  gap: 60px; 
  align-items: center; 
}
.hero-content { 
  display: flex; 
  flex-direction: column; 
  gap: 20px; 
  align-items: flex-start; 
  max-width: 580px; 
}
.hero-title { 
  font-family: "Outfit", sans-serif; 
  font-size: clamp(2.2rem, 4vw, 3.4rem); 
  font-weight: 800; 
  color: #111827; 
  line-height: 1.15; 
  letter-spacing: -0.03em; 
  margin: 0;
}
.hero-ctas { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
  flex-wrap: wrap; 
}
.hero-desc-wrapper { 
  display: flex; 
  flex-direction: column; 
  gap: 8px; 
}
.hero-desc {
  font-size: clamp(14px, 1.2vw, 15px);
  line-height: 1.45;
  color: #4b5563;
  margin: 0;
  font-weight: 600;
  max-width: 100%;
}
.hero-desc strong {
  color: #111827;
  font-weight: 700;
}
.hero-desc-accent { 
  font-size: clamp(14px, 1.2vw, 15px); 
  color: #4b5563; 
  line-height: 1.45; 
  margin: 0;
}
.hero-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 440px;
  margin: 0;
}
.hero-step-card { 
  background: white; 
  border: 1px solid #e5e7eb; 
  border-radius: 10px; 
  padding: 10px 14px; 
  display: flex; 
  align-items: center; 
  gap: 12px; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.04); 
  cursor: pointer; 
  transition: all 0.3s ease; 
}
.hero-step-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.06);
}
.hero-step-card.active {
  border-color: #f67214;
  background: #fffbf7;
  box-shadow: 0 6px 16px rgba(246, 114, 20, 0.06);
  transform: translateX(4px);
}
.step-icon-wrapper { 
  width: 32px; 
  height: 32px; 
  background: rgba(246,114,20,0.1); 
  border-radius: 8px; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  color: #f67214; 
  flex-shrink: 0; 
  transition: all 0.3s ease;
}
.hero-step-card.active .step-icon-wrapper {
  background: #f67214;
  color: #ffffff;
}
.step-icon-wrapper .step-num {
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem !important;
  font-weight: 800;
  color: #f67214;
  line-height: 1;
  transition: all 0.3s ease;
}
.hero-step-card.active .step-num {
  color: #ffffff !important;
}
.step-icon-pulse { animation: stepPulse 2s ease-in-out infinite; }
@keyframes stepPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.step-card-title { font-weight: 700; color: #111827; font-size: 0.9rem; }
.step-card-content { font-size: 0.8rem; color: #6b7280; }
.step-1-custom { grid-column: 1 / -1; }
.btn-primary-cta { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: linear-gradient(135deg, #f67214, #ff914d); 
  color: white; 
  border: none; 
  padding: 12px 26px; 
  border-radius: 100px; 
  font-weight: 700; 
  font-size: 0.95rem; 
  cursor: pointer; 
  transition: all 0.3s ease; 
  text-decoration: none; 
  box-shadow: 0 8px 20px rgba(246,114,20,0.22);
}
.btn-primary-cta:hover { 
  background: linear-gradient(135deg, #e05e0c, #f67214); 
  transform: translateY(-2px); 
  box-shadow: 0 12px 28px rgba(246,114,20,0.3); 
}
.waitlist-trigger { cursor: pointer; }
.hero-animation-column { position: relative; display: flex; flex-direction: column; gap: 16px; }
.hero-animation-frame { 
  border-radius: 20px; 
  overflow: hidden; 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  box-shadow: 0 24px 60px rgba(0,0,0,0.1); 
  height: 600px; 
  display: flex; 
  flex-direction: column; 
}
.hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(246,114,20,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(246,114,20,0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.hero-glow-1 { position: absolute; top: -60px; right: -60px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(246,114,20,0.1) 0%, transparent 70%); pointer-events: none; }
.hero-glow-2 { position: absolute; bottom: -60px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(246,114,20,0.06) 0%, transparent 70%); pointer-events: none; }

/* Introducing / Custom Skills Section */
.introducing-section { position: relative; padding: clamp(80px, 10vw, 120px) 0; background: #0a0a0f; overflow: hidden; }
.intel-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 60px; gap: 16px; }
.intel-header h2 { font-family: "Outfit", sans-serif; font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 800; color: #f1f5f9; line-height: 1.15; }
.intel-goal-typography { font-size: 1.1rem; color: #64748b; max-width: 600px; line-height: 1.7; }
.intel-header .section-badge { background: rgba(246,114,20,0.15); border-color: rgba(246,114,20,0.3); color: #fb923c; }
.igt-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(246,114,20,0.08) 0%, transparent 70%); pointer-events: none; }

/* Platform cards */
.platform-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 20px; transition: all 0.3s ease; }
.platform-card:hover { background: rgba(255,255,255,0.08); border-color: rgba(246,114,20,0.3); transform: translateY(-4px); }
.pc-icon { margin-bottom: 12px; }
.pc-name { font-weight: 600; color: #f1f5f9; margin-bottom: 6px; }
.pc-status { font-size: 0.8rem; color: #10b981; }
.pc-info { font-size: 0.85rem; color: #64748b; }

/* Workflow / Skill cards */
.wf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.wf-list-card { background: white; border: 1px solid #e5e7eb; border-radius: 20px; padding: 32px; }
.wf-card-header { font-family: "Outfit", sans-serif; font-size: 1.3rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
.wf-card-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(246,114,20,0.08); color: #f67214; border: 1px solid rgba(246,114,20,0.2); border-radius: 100px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; margin-bottom: 20px; }
.wf-card-subtitle { font-size: 0.9rem; color: #6b7280; margin-bottom: 24px; }
.wf-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
.wf-item:last-child { border-bottom: none; }
.wf-check { width: 22px; height: 22px; background: rgba(246,114,20,0.1); border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #f67214; flex-shrink: 0; margin-top: 2px; }
.wf-icon { width: 36px; height: 36px; background: #f3f4f6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6b7280; flex-shrink: 0; }
.wf-item-title { font-weight: 600; color: #111827; font-size: 0.95rem; }
.wf-item-desc { font-size: 0.85rem; color: #6b7280; margin-top: 2px; }
.wf-details { display: flex; flex-direction: column; gap: 2px; }
.wf-network { position: relative; height: 300px; display: flex; align-items: center; justify-content: center; }

/* General utility and shared */
.stat-box { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; }
.stat-value { font-size: 1.5rem; font-weight: 800; color: #111827; }
.stat-label { font-size: 0.8rem; color: #6b7280; }
.float-1 { animation: float1 3s ease-in-out infinite; }
.float-2 { animation: float2 3.5s ease-in-out infinite; }
.float-3 { animation: float3 4s ease-in-out infinite; }
.float-4 { animation: float4 3.2s ease-in-out infinite; }
.float-5 { animation: float5 2.8s ease-in-out infinite; }
@keyframes float1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float2 { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
@keyframes float3 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes float4 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes float5 { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(6px); } }
.green-pulse { animation: gPulse 1.5s ease-in-out infinite; }
@keyframes gPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.ambient-orange-glow { position: absolute; background: radial-gradient(circle, rgba(246,114,20,0.12) 0%, transparent 60%); pointer-events: none; }
.conn-line { fill: none !important; stroke: rgba(246,114,20,0.3); stroke-dasharray: 4,3; animation: dashFlow 2s linear infinite; }
@keyframes dashFlow { to { stroke-dashoffset: -14; } }
.window-controls { display: flex; gap: 6px; align-items: center; }
.window-actions { display: flex; gap: 6px; }
.window-title { font-size: 0.8rem; color: #6b7280; font-weight: 500; }
.frame-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: #f8f8fb; border-bottom: 1px solid #e8ecf0; border-radius: 12px 12px 0 0; }
.frame-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* Responsive fixes */
@media (max-width: 991px) {
  .hero-grid { grid-template-columns: 1fr; }
  .breaks-v2-grid { grid-template-columns: 1fr; }
  .wf-split { grid-template-columns: 1fr; }
}

/* Bootstrap-compatible utilities */
.d-flex { display: flex; }
.align-items-start { align-items: flex-start; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.position-relative { position: relative; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.p-0 { padding: 0 !important; }
.w-100 { width: 100% !important; }
.border-0 { border: 0 !important; }

/* ====================================================
   HERO ANIMATION PANELS & SWAPPING FRAME CONTROLS
   ==================================================== */

.animation-panel {
  display: none;
  animation: panelFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animation-panel.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

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

/* ====================================================
   STEP 1: MAP YOUR WORKFLOW (PREMIUM VISUAL STYLES)
   ==================================================== */

.workflow-canvas.step-1-custom {
  background: linear-gradient(135deg, rgba(255, 253, 250, 0.7) 0%, rgba(255, 247, 239, 0.8) 100%);
  border: 1px solid rgba(246, 114, 20, 0.12);
  border-radius: 16px;
  padding: 24px;
  box-shadow: inset 0 0 20px rgba(246, 114, 20, 0.02);
}

.wf-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 767px) {
  .wf-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.wf-list-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.04);
}

.wf-card-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(246, 114, 20, 0.08);
  color: #f67214;
  border: 1px solid rgba(246, 114, 20, 0.16);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.wf-card-subtitle {
  font-family: "Outfit", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #111827;
  margin-top: 6px;
  margin-bottom: 12px;
}

.wf-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  margin-bottom: 6px;
  opacity: 0;
  transform: translateY(8px);
}

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

.animation-panel.active .wf-item {
  animation: wfItemFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes wfItemFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(226, 232, 240, 0.65);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02);
  }
}

.animation-panel.active .wf-item:nth-child(2) { animation-delay: 0.08s; }
.animation-panel.active .wf-item:nth-child(3) { animation-delay: 0.16s; }
.animation-panel.active .wf-item:nth-child(4) { animation-delay: 0.24s; }
.animation-panel.active .wf-item:nth-child(5) { animation-delay: 0.32s; }
.animation-panel.active .wf-item:nth-child(6) { animation-delay: 0.4s; }

.wf-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wf-icon svg {
  width: 16px;
  height: 16px;
}

.bg-orange-100 { background: rgba(246, 114, 20, 0.1) !important; }
.text-orange-500 { color: #f67214 !important; }
.bg-blue-100 { background: rgba(37, 99, 235, 0.1) !important; }
.text-blue-500 { color: #2563eb !important; }
.bg-green-100 { background: rgba(22, 163, 74, 0.1) !important; }
.text-green-500 { color: #16a34a !important; }
.bg-purple-100 { background: rgba(124, 58, 237, 0.1) !important; }
.text-purple-500 { color: #7c3aed !important; }
.bg-indigo-100 { background: rgba(79, 70, 229, 0.1) !important; }
.text-indigo-500 { color: #4f46e5 !important; }

.wf-details {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wf-item-title {
  font-family: "Outfit", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2937;
}

.wf-item-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
  line-height: 1.3;
}

.wf-check {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.animation-panel.active .wf-item .wf-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.45s;
}

.wf-network {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.net-line {
  stroke: rgba(246, 114, 20, 0.2);
  stroke-width: 1.5;
  stroke-dasharray: 4, 4;
  fill: none;
  animation: netLineFlow 6s linear infinite;
}

@keyframes netLineFlow {
  to {
    stroke-dashoffset: -40;
  }
}

.net-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nc-pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 114, 20, 0.25) 0%, transparent 70%);
  animation: ncPulseAnim 2.5s infinite ease-in-out;
}

@keyframes ncPulseAnim {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.35); opacity: 0.95; }
}

.nc-core {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f67214 0%, #d85f0f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(246, 114, 20, 0.35), inset 0 2px 4px rgba(255, 255, 255, 0.25);
  z-index: 2;
}

.net-sat {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: all 0.3s ease;
  animation: floatEffect 3s ease-in-out infinite alternate;
}

.net-sat:hover {
  transform: scale(1.15) !important;
  border-color: #f67214 !important;
  box-shadow: 0 8px 20px rgba(246, 114, 20, 0.16);
}

.net-sat.n1 { top: 12%; left: 22%; border-color: #f67214; animation-delay: 0s; }
.net-sat.n2 { top: 12%; left: 76%; border-color: #2563eb; animation-delay: 0.4s; }
.net-sat.n3 { top: 52%; left: 86%; border-color: #16a34a; animation-delay: 0.8s; }
.net-sat.n4 { top: 82%; left: 63%; border-color: #7c3aed; animation-delay: 1.2s; }
.net-sat.n5 { top: 68%; left: 14%; border-color: #f67214; animation-delay: 1.6s; }

/* ====================================================
   STEP 2: CONNECT DATA (PREMIUM VISUAL STYLES)
   ==================================================== */

.p2-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 20px 20px;
  background: linear-gradient(135deg, rgba(255, 253, 250, 0.7) 0%, rgba(255, 247, 239, 0.8) 100%);
  border: 1px solid rgba(246, 114, 20, 0.12);
  border-radius: 16px;
  gap: 16px;
}

.p2-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dashed rgba(246, 114, 20, 0.15);
  padding-bottom: 12px;
}

.p2-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p2-title {
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.p2-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 10.5px;
  color: #64748b;
  margin: 0;
  max-width: 420px;
  line-height: 1.45;
}

.p2-header-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.16);
  border-radius: 6px;
  padding: 4px 8px;
  font-family: "Outfit", sans-serif;
  font-size: 9px;
  font-weight: 850;
  color: #16a34a;
  flex-shrink: 0;
  text-transform: uppercase;
}

.status-dot.green-pulse {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
  animation: statusDotPulse 2s infinite;
}

.p2-canvas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  position: relative;
  height: 280px;
  width: 100%;
}

.p2-platforms {
  position: relative;
  width: 32%;
  height: 100%;
  z-index: 3;
}

.p2-platforms.left {
  align-items: flex-start;
}

.p2-platforms.right {
  align-items: flex-end;
}

.p2-canvas .platform-card {
  position: absolute;
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(to right, #ffffff 0%, #fcfdfe 100%);
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}

.p-card-1, .p-card-2, .p-card-3, .p-card-4, .p-card-5, .p-card-6 {
  border-left: 3px solid #f67214 !important;
}

.p2-platforms .platform-card:nth-child(1) { top: calc(20% - 27px); }
.p2-platforms .platform-card:nth-child(2) { top: calc(50% - 27px); }
.p2-platforms .platform-card:nth-child(3) { top: calc(80% - 27px); }

.p2-canvas .platform-card:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(246, 114, 20, 0.25);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.p2-canvas .platform-card .pc-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 0;
  background: rgba(246, 114, 20, 0.08) !important;
  color: #f67214 !important;
}

.p2-canvas .platform-card .pc-icon svg {
  width: 16px;
  height: 16px;
}

.p2-canvas .platform-card .pc-info {
  display: flex;
  flex-direction: column;
}

.p2-canvas .platform-card .pc-name {
  font-family: "Outfit", sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #1f2937;
  line-height: 1.2;
}

.p2-canvas .platform-card .pc-status {
  font-family: "Instrument Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  margin-top: 2px;
}

.p2-canvas .platform-card .pc-status.synced { color: #16a34a; }
.p2-canvas .platform-card .pc-status.connecting { color: #f67214; }
.p2-canvas .platform-card .pc-status.parsing { color: #2563eb; }

.animation-panel.active .p2-platforms.left .platform-card {
  animation: pcSlideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animation-panel.active .p2-platforms.right .platform-card {
  animation: pcSlideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.animation-panel.active .p2-platforms.left .platform-card:nth-child(1) { animation-delay: 0.05s; }
.animation-panel.active .p2-platforms.left .platform-card:nth-child(2) { animation-delay: 0.18s; }
.animation-panel.active .p2-platforms.left .platform-card:nth-child(3) { animation-delay: 0.3s; }

.animation-panel.active .p2-platforms.right .platform-card:nth-child(1) { animation-delay: 0.12s; }
.animation-panel.active .p2-platforms.right .platform-card:nth-child(2) { animation-delay: 0.24s; }
.animation-panel.active .p2-platforms.right .platform-card:nth-child(3) { animation-delay: 0.36s; }

.p2-connections {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.p2-connections .conn-line {
  fill: none !important;
  stroke-dasharray: 4, 4;
  animation: connDashFlow 2s linear infinite;
}

.p2-connections path {
  fill: none !important;
}

@keyframes connDashFlow {
  to {
    stroke-dashoffset: -20;
  }
}

.p2-ai-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p2-hub-glow {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 114, 20, 0.25) 0%, transparent 70%);
  animation: ncPulseAnim 3s infinite ease-in-out;
}

.p2-hub-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px dashed rgba(246, 114, 20, 0.2);
}

.p2-hub-ring.r1 {
  width: 90px;
  height: 90px;
  animation: hub-spin 10s linear infinite;
}

.p2-hub-ring.r2 {
  width: 78px;
  height: 78px;
  border: 1px dotted rgba(37, 99, 235, 0.25);
  animation: hub-spin-rev 8s linear infinite;
}

.p2-hub-ring.r3-spin {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(246, 114, 20, 0.12);
  border-top-color: #f67214;
  animation: hub-spin 3s linear infinite;
}

.p2-hub-core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7e29 0%, #f67214 100%);
  border: 2px solid #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(246, 114, 20, 0.35);
  z-index: 5;
}

.ai-neural-icon {
  width: 22px;
  height: 22px;
  animation: floatEffect 2.5s ease-in-out infinite alternate;
}

.p2-hub-label {
  font-family: "Outfit", sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.5px;
  margin-top: 1px;
}

@keyframes hub-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes hub-spin-rev {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

/* Entry Slide Animations for Platform Cards (Step 2) */
@keyframes pcSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pcSlideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* =============================================================
   DESKTOP HERO ANIMATION FRAME - FULL-HEIGHT PANEL FIX
   All three step panels fill the frame exactly, no scrolling.
   ============================================================= */

/* Step 1: panel-header-desc label */
.panel-step-1 .panel-header-desc { flex-shrink: 0; margin-bottom: 8px; }
.panel-step-1 .panel-header-desc h3 { font-family: "Outfit", sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin: 0; }

/* Step 1: workflow canvas stretches to fill panel */
.panel-step-1 .workflow-canvas.step-1-custom { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px; overflow: hidden; }
.panel-step-1 .wf-split { flex: 1; min-height: 0; align-items: stretch; }
.panel-step-1 .wf-list-card { overflow: hidden; display: flex; flex-direction: column; padding: 12px; }
.panel-step-1 .wf-item { padding: 6px 8px; margin-bottom: 3px; }
.panel-step-1 .wf-network { height: 100%; min-height: 200px; }

/* Step 2: p2-layout fills the panel */
.panel-step-2 .p2-layout { flex: 1; min-height: 0; overflow: hidden; }
.panel-step-2 .p2-canvas { flex: 1; min-height: 0; }

/* Step 3: stats row is fixed, agent log is flexible */
.panel-step-3 { padding: 14px 16px; gap: 8px; }
.panel-step-3 .p3-header { margin-bottom: 6px; flex-shrink: 0; }
.panel-step-3 .p3-stats-row { flex-shrink: 0; margin-bottom: 8px; gap: 8px; }
.panel-step-3 .p3-stat-card { padding: 10px; }
.panel-step-3 .p3-gauge-wrap { width: 70px; height: 70px; margin: 4px auto 6px; }
.panel-step-3 .p3-agent-log { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 10px; }
.panel-step-3 .p3-log-header { flex-shrink: 0; margin-bottom: 8px; padding-bottom: 8px; }
.panel-step-3 .p3-log-feed { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; gap: 8px; }
.panel-step-3 .p3-log-feed::-webkit-scrollbar { display: none; }
.panel-step-3 .finding-item { padding: 8px 10px; }

/* Guarantee wf-split never collapses to 1-col inside the hero frame */
@media (min-width: 768px) { .panel-step-1 .wf-split { grid-template-columns: 1.15fr 0.85fr !important; } }



/* ==========================================================================
   SECTION 3 - WHY IT BREAKS (CONSOLIDATED & PREMIUM REDESIGN)
   ========================================================================== */

.section-breaks-v2 {
  position: relative;
  padding: clamp(80px, 10vw, 130px) 0;
  background: #ffffff;
  overflow: hidden;
}

.breaks-v2-grid {
  display: grid;
  grid-template-columns: 42fr 58fr;
  gap: 60px;
  align-items: flex-start;
}

.breaks-v2-left {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.breaks-v2-left .section-badge {
  align-self: flex-start; /* Fix stretching of badge */
  margin-bottom: 12px;    /* Compact margin */
}

.breaks-v2-left .section-title {
  margin-bottom: 12px;    /* Compact margin */
}

.breaks-v2-right {
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

.breaks-v2-intro {
  margin-bottom: 10px;
}

.intro-problem {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.subsection-heading {
  font-size: 0.82rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 12px;
  margin-bottom: 8px;
}

/* --- Problem interactive list: sleek, compact and premium --- */
.problem-list {
  display: flex;
  flex-direction: column;
  gap: 6px; /* Compact gap */
}

.problem-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px; /* Compact padding */
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.04);
  background: transparent;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.problem-item:hover {
  background: #f8fafc;
  border-color: #f1f5f9;
  transform: translateX(4px);
}

.problem-item.active {
  background: #ffffff;
  border-color: rgba(246, 114, 20, 0.15);
  box-shadow: 0 4px 20px rgba(246, 114, 20, 0.05);
}

.pi-indicator {
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 4px;
  background: linear-gradient(to bottom, #f67214, #ff8a3d);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transform: scaleY(0.3);
  border-radius: 0 4px 4px 0;
}

.problem-item.active .pi-indicator {
  opacity: 1;
  transform: scaleY(1);
}

.pi-icon {
  width: 36px;
  height: 36px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.pi-icon svg {
  width: 18px;
  height: 18px;
}

.problem-item.active .pi-icon,
.problem-item:hover .pi-icon {
  background: rgba(246, 114, 20, 0.08);
  border-color: rgba(246, 114, 20, 0.15);
  color: #f67214;
}

.pi-content {
  flex: 1;
}

.pi-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.pi-subtitle {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
}

/* --- Reality Alert Box --- */
.reality-alert-box {
  background: linear-gradient(135deg, rgba(255, 248, 244, 0.95) 0%, rgba(255, 243, 235, 0.95) 100%);
  border: 1px solid rgba(246, 114, 20, 0.15);
  border-left: 4px solid #f67214;
  border-radius: 14px;
  padding: 12px 16px; /* Compact padding */
  margin-top: 16px;    /* Compact margin */
  box-shadow: 0 4px 15px rgba(246, 114, 20, 0.03);
}

.rab-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.rab-title {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #ea580c;
  letter-spacing: 0.09em;
  margin: 0;
}

.rab-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.rab-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rab-item-icon {
  color: #ea580c;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.rab-item-text {
  font-size: 0.82rem;
  color: #475569;
  font-weight: 500;
}

/* --- Right Column Carousel and Device Frame --- */
.carousel-frame-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 540px; /* Reduced width */
  margin: 0 auto;   /* Centered in the right column */
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); /* Parent gets unified shadow */
  border: 1px solid #e2e8f0;                       /* Parent gets unified border */
  overflow: hidden;                                /* Clips dots and header corners */
  background: #f8fafc;
}

.carousel-container-v2 {
  position: relative;
  background: #f8fafc;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  height: 480px;
  /* Removed duplicate border-radius, shadows, and borders */
}

.carousel-window-header {
  height: 36px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  position: relative;
  z-index: 10;
}
.carousel-window-header .window-controls {
  display: flex;
  gap: 6px;
}
.carousel-window-header .window-controls .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
}
.carousel-window-header .window-controls .dot.red { background: #ef4444; }
.carousel-window-header .window-controls .dot.yellow { background: #f59e0b; }
.carousel-window-header .window-controls .dot.green { background: #10b981; }
.carousel-window-header .window-title {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
  margin-right: 36px; /* Balance out controls on left */
}

.carousel-slide-v2 {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  opacity: 0;
  padding: 16px 20px 12px;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  overflow: hidden;
}

.carousel-slide-v2.active {
  display: flex;
  pointer-events: all;
  animation: fadeInSlide 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.slide-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(246,114,20,0.08);
  border: 1px solid rgba(246,114,20,0.2);
  color: #f67214;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 100px;
  align-self: flex-start;
  flex-shrink: 0;
}

.slide-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
}

.slide-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.slide-title {
  font-family: "Outfit", sans-serif;
  font-size: 1rem; /* Shrank to 1rem */
  font-weight: 700;
  color: #0f172a;
}

.slide-desc {
  font-size: 0.8rem; /* Shrank to 0.8rem */
  color: #475569;
  line-height: 1.4;
}

.slide-stats {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-top: 2px;
}

.slide-stats .stat-box {
  padding: 4px 10px; /* Compact padding */
  min-width: 72px;   /* Compact width */
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.slide-stats .stat-value {
  font-size: 1.1rem;
  font-weight: 800;
  color: #f67214;
  display: block;
  line-height: 1.1;
}

.slide-stats .stat-label {
  font-size: 0.7rem;
  color: #64748b;
  display: block;
  margin-top: 1px;
}

.carousel-dots-v2 {
  display: flex;
  gap: 6px;
  padding: 12px 20px;
  border-top: 1px solid #e8ecf0;
  background: #f8fafc;
  justify-content: center;
  /* Removed duplicate border-radius, shadows, and borders */
}

.dot-v2 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.dot-v2.active {
  background: #f67214;
  width: 16px;
  border-radius: 99px;
}

/* --- Shared Visual Assets and Warning Bars inside Slides --- */
.s1-visual, .s2-visual, .s3-visual,
.s4-visual, .s5-visual, .s6-visual {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s1-warning-bar, .s2-confusion-bar, .s3-confusion-bar,
.s4-confusion-bar, .s5-buried-alert, .s6-time-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: #92400e;
  font-weight: 600;
  margin-top: 6px;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}

.s2-confusion-bar, .s5-buried-alert {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

/* --- Slide 1 details --- */
.s1-visual {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.s1-visual .s1-search-bar {
  width: 100%;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11px;
  color: #334155;
  margin-bottom: 8px;
  height: 34px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}
.s1-query {
  font-size: 11px;
  color: #334155;
}
.s1-cursor {
  animation: blink 1s step-end infinite;
  color: #f67214;
}
.s1-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 420px;
}
.s1-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  font-size: 10.5px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02);
  transition: all 0.2s ease;
}
.s1-result-item:hover {
  transform: translateX(4px);
  border-color: #f67214;
}
.s1-active-item {
  border-color: rgba(246, 114, 20, 0.25);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(246, 114, 20, 0.08);
}
.s1-stale {
  opacity: 0.6;
}
.s1-file-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.s1-icon-pdf {
  background: rgba(239,68,68,0.1);
  color: #dc2626;
}
.s1-icon-dwg {
  background: rgba(37,99,235,0.1);
  color: #2563eb;
}
.s1-file-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.s1-file-name {
  font-size: 10.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s1-file-meta {
  font-size: 9px;
  color: #94a3b8;
}
.s1-tag {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}
.s1-tag-old {
  background: #fee2e2;
  color: #dc2626;
}
.s1-tag-maybe {
  background: #fef3c7;
  color: #d97706;
}
.s1-tag-warn {
  background: #e0e7ff;
  color: #4f46e5;
}

/* --- Slide 2 details --- */
.s2-rfi-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}
.s2-rfi-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
}
.s2-rfi-id {
  font-size: 10px;
  font-weight: 800;
  color: #f67214;
  background: rgba(246,114,20,0.1);
  padding: 1px 5px;
  border-radius: 4px;
}
.s2-rfi-title {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
}
.s2-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s2-source-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  transition: all 0.2s ease;
  background: #ffffff;
}
.s2-source-item:hover {
  transform: translateX(4px);
}
.s2-excel {
  background: rgba(22, 163, 74, 0.03);
  border-left: 3px solid #16a34a;
  border-color: rgba(22, 163, 74, 0.12);
}
.s2-email {
  background: rgba(37, 99, 235, 0.03);
  border-left: 3px solid #2563eb;
  border-color: rgba(37, 99, 235, 0.12);
}
.s2-procore {
  background: rgba(246, 114, 20, 0.03);
  border-left: 3px solid #f67214;
  border-color: rgba(246, 114, 20, 0.12);
}
.s2-source-icon {
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.s2-source-info {
  display: flex;
  flex-direction: column;
}
.s2-source-name {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
}
.s2-source-status {
  font-size: 9px;
  font-weight: 600;
}

/* Mobile Responsive Styles for Step 2 Card */
@media (max-width: 768px) {
  .p2-layout {
    padding: 16px;
  }
  
  .p2-header {
    margin-bottom: 8px;
    padding-bottom: 8px;
  }
  
  .p2-title {
    font-size: 16px !important;
    margin-bottom: 8px;
  }
  
  .p2-desc {
    font-size: 13px !important;
    line-height: 1.5;
  }
  
  .p2-header-badge {
    font-size: 11px;
    padding: 5px 10px;
  }
  
  /* Hide status text on mobile (Synced, Live, Connecting, etc.) */
  .pc-status {
    display: none !important;
  }
  
  /* Make platform cards bigger and adjust layout */
  .platform-card {
    padding: 12px 14px !important;
    min-height: 60px;
  }
  
  .pc-icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  .pc-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  .pc-name {
    font-size: 13px !important;
    font-weight: 700;
  }
  
  /* Make AI Engine more compact */
  .p2-hub-core {
    width: 90px !important;
    height: 90px !important;
  }
  
  .ai-neural-icon {
    width: 28px !important;
    height: 28px !important;
  }
  
  .p2-hub-label {
    font-size: 9px !important;
    letter-spacing: 1px;
    margin-top: 4px;
  }
  
  /* Adjust canvas height */
  .p2-canvas {
    min-height: 400px;
  }
  
  .s2-rfi-card {
    max-width: 100%;
    padding: 14px 16px;
    border-radius: 14px;
  }
  
  .s2-rfi-header {
    gap: 8px;
    padding-bottom: 8px;
  }
  
  .s2-rfi-id {
    font-size: 11px;
    padding: 2px 6px;
  }
  
  .s2-rfi-title {
    font-size: 13px;
  }
  
  .s2-sources {
    gap: 8px;
  }
  
  .s2-source-item {
    padding: 8px 12px;
    gap: 8px;
    border-radius: 10px;
  }
  
  .s2-source-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
  }
  
  .s2-source-name {
    font-size: 12px;
  }
  
  .s2-source-status {
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .p2-layout {
    padding: 12px;
  }
  
  .p2-header {
    margin-bottom: 6px;
    padding-bottom: 6px;
  }
  
  .p2-title {
    font-size: 15px !important;
  }
  
  .p2-desc {
    font-size: 12px !important;
  }
  
  .p2-header-badge {
    font-size: 10px;
    padding: 4px 8px;
  }
  
  /* Platform cards */
  .platform-card {
    padding: 10px 12px !important;
    min-height: 55px;
  }
  
  .pc-icon {
    width: 32px !important;
    height: 32px !important;
  }
  
  .pc-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  
  .pc-name {
    font-size: 10px !important;
  }
  
  /* AI Engine even more compact */
  .p2-hub-core {
    width: 80px !important;
    height: 80px !important;
  }
  
  .ai-neural-icon {
    width: 24px !important;
    height: 24px !important;
  }
  
  .p2-hub-label {
    font-size: 8px !important;
  }
  
  .p2-canvas {
    min-height: 350px;
  }
  
  .s2-rfi-card {
    padding: 12px 14px;
    border-radius: 12px;
  }
  
  .s2-rfi-id {
    font-size: 10px;
  }
  
  .s2-rfi-title {
    font-size: 12px;
  }
  
  .s2-sources {
    gap: 7px;
  }
  
  .s2-source-item {
    padding: 7px 10px;
    gap: 7px;
  }
  
  .s2-source-icon {
    width: 22px;
    height: 22px;
  }
  
  .s2-source-name {
    font-size: 11px;
  }
  
  .s2-source-status {
    font-size: 9px;
  }
}

/* --- Slide 3 details --- */
.s3-doc-preview {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}
.s3-doc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
}
.s3-doc-name {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.s3-version-badge {
  font-size: 9px;
  font-weight: 800;
  background: rgba(246,114,20,0.1);
  color: #ea580c;
  padding: 1px 5px;
  border-radius: 4px;
}
.s3-doc-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.s3-doc-line {
  height: 5px;
  background: #f1f5f9;
  border-radius: 2px;
}
.s3-line-short {
  width: 60%;
}
.s3-line-marked {
  position: relative;
  background: rgba(239,68,68,0.04);
  border: 1px dashed rgba(239,68,68,0.25);
  display: flex;
  align-items: center;
  padding-left: 4px;
  height: 8px;
}
.s3-markup-indicator {
  display: flex;
  align-items: center;
}
.s3-comments {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s3-comment {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.s3-comment-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
}
.s3-avatar-pm {
  background: linear-gradient(135deg,#f67214,#ff914d);
}
.s3-avatar-eng {
  background: linear-gradient(135deg,#2563eb,#60a5fa);
}
.s3-comment-content {
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 6px 10px;
  flex: 1;
}
.s3-comment-author {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 1px;
}
.s3-comment-text {
  font-size: 10px;
  color: #334155;
}

/* --- Slide 4 details --- */
.s4-coord-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}
.s4-question {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
}
.s4-q-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg,#7c3aed,#a78bfa);
  flex-shrink: 0;
}
.s4-q-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
}
.s4-q-author {
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
}
.s4-q-text {
  font-size: 11.5px;
  font-weight: 600;
  color: #1e293b;
}
.s4-q-time {
  font-size: 9px;
  color: #94a3b8;
}
.s4-channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s4-channel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #ffffff;
}
.s4-channel:hover {
  transform: translateX(4px);
}
.s4-channel:nth-child(1) { background: rgba(37,99,235,0.03); border-color: rgba(37,99,235,0.12); border-left: 3px solid #2563eb; }
.s4-channel:nth-child(2) { background: rgba(124,58,237,0.03); border-color: rgba(124,58,237,0.12); border-left: 3px solid #7c3aed; }
.s4-channel:nth-child(3) { background: rgba(22,163,74,0.03); border-color: rgba(22,163,74,0.12); border-left: 3px solid #16a34a; }
.s4-channel-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.s4-icon-email {
  background: #ffffff;
  color: #2563eb;
}
.s4-icon-slack {
  background: #ffffff;
  color: #7c3aed;
}
.s4-icon-phone {
  background: #ffffff;
  color: #16a34a;
}
.s4-channel-name {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.s4-channel-status {
  font-size: 9px;
  font-weight: 600;
}

/* --- Slide 5 details --- */
.s5-email-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}
.s5-thread-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 4px;
}
.s5-thread-title {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.s5-thread-count {
  font-size: 9px;
  font-weight: 800;
  background: #fee2e2;
  color: #dc2626;
  padding: 1px 5px;
  border-radius: 4px;
}
.s5-messages {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.s5-message {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}
.s5-message:hover {
  transform: translateX(4px);
}
.s5-msg-important {
  background: rgba(239, 68, 68, 0.03);
  border: 1px solid rgba(239, 68, 68, 0.15);
  border-left: 3px solid #ef4444;
}
.s5-msg-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #94a3b8;
  flex-shrink: 0;
}
.s5-dot-important {
  background: #ef4444;
}
.s5-msg-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.s5-msg-from {
  font-size: 9.5px;
  font-weight: 700;
  color: #334155;
}
.s5-msg-preview {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.s5-msg-time {
  font-size: 9px;
  color: #94a3b8;
  flex-shrink: 0;
}

/* --- Slide 6 details --- */
.s6-report-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 12px 14px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.05);
  backdrop-filter: blur(8px);
}
.s6-report-header {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 6px;
}
.s6-report-title {
  font-size: 11px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.s6-report-week {
  font-size: 9px;
  font-weight: 800;
  background: rgba(246,114,20,0.1);
  color: #ea580c;
  padding: 1px 5px;
  border-radius: 4px;
}
.s6-sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.s6-source-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #94a3b8;
  letter-spacing: 0.05em;
}
.s6-source-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #ffffff;
}
.s6-source-item:hover {
  transform: translateX(4px);
}
.s6-source-item:nth-child(2) { background: rgba(22, 163, 74, 0.03); border-color: rgba(22, 163, 74, 0.12); border-left: 3px solid #16a34a; }
.s6-source-item:nth-child(3) { background: rgba(37, 99, 235, 0.03); border-color: rgba(37, 99, 235, 0.12); border-left: 3px solid #2563eb; }
.s6-source-item:nth-child(4) { background: rgba(239, 68, 68, 0.03); border-color: rgba(239, 68, 68, 0.12); border-left: 3px solid #dc2626; }
.s6-source-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.s6-icon-excel {
  background: #ffffff;
  color: #16a34a;
}
.s6-icon-email {
  background: #ffffff;
  color: #2563eb;
}
.s6-icon-pdf {
  background: #ffffff;
  color: #dc2626;
}
.s6-source-name {
  font-size: 10px;
  font-weight: 700;
  color: #1e293b;
  flex: 1;
}
.s6-copy-indicator {
  color: #94a3b8;
}

/* --- Bottom Warning Banner --- */
.breaks-v2-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(246, 114, 20, 0.04);
  border: 1px solid rgba(246, 114, 20, 0.12);
  border-radius: 12px;
  padding: 12px 18px;
  margin: 18px auto 0;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.breaks-v2-bottom:hover {
  background: rgba(246, 114, 20, 0.06);
  border-color: rgba(246, 114, 20, 0.2);
}

.breaks-v2-bottom .bottom-icon {
  color: #f67214;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  animation: pulseWarning 2s infinite ease-in-out;
}

@keyframes pulseWarning {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}

.breaks-v2-bottom .bottom-content {
  flex: 1;
}

.breaks-v2-bottom .bottom-title {
  font-family: "Outfit", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  letter-spacing: -0.01em;
}

/* --- Responsive Layout for Section 3 Breaks v2 --- */
@media (max-width: 991px) {
  .breaks-v2-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .breaks-v2-right {
    position: relative;
    top: 0;
  }
  .carousel-container-v2 {
    height: 480px;
  }
}/* ==========================================
   SECTION 10: WHY THIS MATTERS (PREMIUM)
   ========================================== */

.wtm-section {
  position: relative;
  background: linear-gradient(180deg, #ffffff 0%, #fff9f4 100%);
  padding: clamp(80px, 9vw, 120px) 0;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
}

.wtm-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(246, 114, 20, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(246, 114, 20, 0.028) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.wtm-bg-glow {
  position: absolute;
  bottom: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 500px;
  background: radial-gradient(ellipse at center, rgba(246,114,20,0.07) 0%, transparent 70%);
  pointer-events: none;
}

.wtm-top {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}
.wtm-title { margin-top: 20px; margin-bottom: 20px; }
.wtm-desc {
  font-size: 1.1rem;
  color: #64748b;
  line-height: 1.75;
  max-width: 640px;
  margin: 0 auto;
}

.wtm-transform-row {
  display: grid;
  grid-template-columns: 1fr 72px 1fr;
  gap: 0;
  align-items: stretch;
  position: relative;
}
@media (max-width: 991px) {
  .wtm-transform-row { grid-template-columns: 1fr; gap: 24px; }
}

.wtm-panel {
  border-radius: 24px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}
.wtm-panel-left {
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(15,23,42,0.07);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0.92;
}
.wtm-panel-right {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(246,114,20,0.14);
  box-shadow: 0 16px 48px rgba(246,114,20,0.07), 0 2px 0 rgba(246,114,20,0.12) inset;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.wtm-panel-right::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(246,114,20,0.1) 0%, transparent 70%);
  pointer-events: none;
}

.wtm-panel-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
  align-self: flex-start;
}
.wtm-tag-muted { background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0; }
.wtm-tag-active { background: rgba(246,114,20,0.08); color: #f67214; border: 1px solid rgba(246,114,20,0.2); }

.wtm-ops-list { display: flex; flex-direction: column; }
.wtm-op-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(15,23,42,0.05);
  transition: background 0.25s ease;
}
.wtm-op-row:last-child { border-bottom: none; }
.wtm-panel-left .wtm-op-row:hover { background: rgba(15,23,42,0.02); border-radius: 10px; padding-left: 8px; }
.wtm-op-ai:hover { background: rgba(246,114,20,0.04) !important; border-radius: 10px !important; padding-left: 8px !important; }

.wtm-op-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: #f8f8fb;
  border: 1px solid #e8ecf0;
  display: flex; align-items: center; justify-content: center;
  color: #94a3b8; flex-shrink: 0;
}
.wtm-op-icon svg { width: 18px; height: 18px; }
.wtm-icon-ai { background: rgba(246,114,20,0.07); border-color: rgba(246,114,20,0.18); color: #f67214; }

.wtm-op-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wtm-op-label { font-size: 0.98rem; font-weight: 600; color: #374151; line-height: 1.3; }
.wtm-panel-right .wtm-op-label { color: #111827; }
.wtm-op-sub { font-size: 0.82rem; color: #94a3b8; line-height: 1.4; }

.wtm-op-status {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600;
  padding: 4px 10px; border-radius: 100px;
  flex-shrink: 0; white-space: nowrap;
}
.wtm-status-slow { background: #f8f8fb; color: #94a3b8; border: 1px solid #e8ecf0; }
.wtm-status-active { background: rgba(246,114,20,0.08); color: #f67214; border: 1px solid rgba(246,114,20,0.2); }
.wtm-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.wtm-status-active .wtm-status-dot { animation: wtm-blink-dot 1.6s ease-in-out infinite; }
@keyframes wtm-blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

.wtm-center-flow {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; padding: 0 4px; position: relative;
}
@media (max-width: 991px) {
  .wtm-center-flow { flex-direction: row; justify-content: center; padding: 4px 0; }
}
.wtm-flow-track {
  flex: 1; width: 2px;
  background: linear-gradient(180deg, transparent, rgba(246,114,20,0.25), transparent);
  position: relative; overflow: hidden;
  min-height: 60px; max-height: 200px; border-radius: 99px;
}
@media (max-width: 991px) {
  .wtm-flow-track { width: auto; flex: 1; height: 2px; min-height: unset; max-height: unset; background: linear-gradient(90deg, transparent, rgba(246,114,20,0.25), transparent); }
}

.wtm-flow-particle {
  position: absolute;
  width: 4px; height: 14px;
  background: linear-gradient(180deg, #f67214, transparent);
  border-radius: 99px;
  left: 50%; transform: translateX(-50%);
  animation: wtm-flow-down 1.8s ease-in-out infinite;
}
.wtm-fp-2 { animation-delay: 0.6s; }
.wtm-fp-3 { animation-delay: 1.2s; }
@keyframes wtm-flow-down {
  0% { top: -14px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (max-width: 991px) {
  .wtm-flow-particle { height: 4px; width: 14px; top: 50%; transform: translateY(-50%); left: -14px; background: linear-gradient(90deg, #f67214, transparent); animation: wtm-flow-right 1.8s ease-in-out infinite; }
}
@keyframes wtm-flow-right {
  0% { left: -14px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.wtm-flow-arrow {
  width: 46px; height: 46px; border-radius: 50%;
  background: #f67214; color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 10px rgba(246,114,20,0.08), 0 6px 20px rgba(246,114,20,0.3);
  animation: wtm-arrow-pulse 2.4s ease-in-out infinite;
}
.wtm-flow-arrow svg { width: 20px; height: 20px; }
@media (max-width: 991px) {
  .wtm-flow-arrow svg { transform: rotate(90deg); }
}
@keyframes wtm-arrow-pulse {
  0%, 100% { box-shadow: 0 0 0 10px rgba(246,114,20,0.08), 0 6px 20px rgba(246,114,20,0.3); }
  50% { box-shadow: 0 0 0 16px rgba(246,114,20,0.04), 0 6px 28px rgba(246,114,20,0.4); }
}

.wtm-insight-strip { margin-top: 60px; display: flex; justify-content: center; }
.wtm-insight-inner {
  display: flex; align-items: center; gap: 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(246,114,20,0.16);
  border-radius: 100px; padding: 18px 36px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px rgba(246,114,20,0.08), 0 1px 0 rgba(246,114,20,0.1) inset;
  max-width: 700px;
}
.wtm-insight-icon {
  width: 40px; height: 40px; background: #f67214;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(246,114,20,0.35);
}
.wtm-insight-icon svg { width: 20px; height: 20px; }
.wtm-insight-text { font-size: 1.05rem; color: #64748b; margin: 0; line-height: 1.5; font-family: "Instrument Sans", sans-serif; }
.wtm-insight-text strong { color: #111827; font-weight: 700; }

@media (max-width: 991px) {
  .wtm-top { margin-bottom: 48px; }
  .wtm-panel { padding: 28px; }
  .wtm-insight-inner { flex-direction: column; border-radius: 20px; text-align: center; padding: 24px 28px; }
}
@media (max-width: 767px) {
  .wtm-section { padding: 72px 0; }
  .wtm-top { margin-bottom: 40px; }
  .wtm-desc { font-size: 1rem; }
  .wtm-panel { padding: 22px; border-radius: 18px; }
  .wtm-op-row { gap: 10px; padding: 12px 0; }
  .wtm-op-label { font-size: 0.93rem; }
  .wtm-insight-inner { padding: 20px; }
  .wtm-insight-text { font-size: 0.97rem; }
}
@media (max-width: 480px) {
  .wtm-op-status { display: none; }
  .wtm-panel-tag { font-size: 0.72rem; padding: 5px 12px; }
}

/* ============================================================
   FIX: OPERATIONAL OUTPUTS SECTION (#output / .section-intelligence)
   Heading was white-on-white; bottom text wrong color and misaligned
   ============================================================ */

/* 1. Fix main heading "The output depends on" - was light color on white bg */
#output .intel-header h2,
#output .section-title,
.section-intelligence .intel-header h2,
.section-intelligence .section-title {
  color: #0f172a !important;
  font-weight: 800 !important;
}

/* 2. Fix intel-desc paragraph */
#output .intel-desc,
.section-intelligence .intel-desc {
  color: #475569 !important;
}

/* 3. Bottom goal typography block - centered layout */
.intel-goal-typography {
  position: relative;
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 0 10px;
  margin: 0 auto !important;
}


/* 4. "Reduce repetitive operational effort." - bold dark black centered */
.intel-goal-typography h4,
.intel-goal-typography .text-gradient {
  font-family: "Outfit", sans-serif !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #0f172a !important;
  background-clip: unset !important;
  text-align: center !important;
  margin: 0 0 6px 0 !important;
  letter-spacing: -0.4px !important;
  line-height: 1.2 !important;
}

/* 5. "Single platform access to project intelligence." - centered dark gray */
.intel-goal-typography p {
  font-size: 1.05rem !important;
  color: #475569 !important;
  text-align: center !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* 6. Glow overlay stays behind text */
.igt-glow {
  pointer-events: none;
  z-index: 0;
}

/* 7. Move the coverflow cards upwards to reduce the gap with the header */
.cf-container {
  margin-top: -65px !important;
}

@media (max-width: 768px) {
  .cf-container {
    margin-top: -35px !important;
  }
}

/* ============================================================
   SECTION 11 — BUILT FOR CONSTRUCTION TEAMS
   ============================================================ */
.teams-section {
  position: relative;
  background: linear-gradient(180deg, #fff9f4 0%, #ffffff 100%);
  padding: clamp(80px, 9vw, 120px) 0;
  overflow: hidden;
  font-family: "Instrument Sans", sans-serif;
}

.teams-bg-glow {
  position: absolute;
  top: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(246,114,20,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.teams-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(249, 115, 22, 0.07);
  border: 1px solid rgba(249, 115, 22, 0.18);
  color: #f97316;
  font-family: "Outfit", sans-serif;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 24px;
}

.teams-badge-dot {
  width: 6px;
  height: 6px;
  background: #f97316;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(249,115,22,0.6);
  animation: pulseDot 2s infinite;
}

.teams-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.teams-title {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}

.teams-title span {
  color: #f97316;
}

.teams-subtitle {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: #475569;
  line-height: 1.6;
  font-weight: 500;
}

.teams-grid {
  display: grid;
  grid-template-columns: 52fr 48fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 1;
}

@media (max-width: 1024px) {
  .teams-grid {
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

.teams-col-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}

.teams-col-subtitle {
  font-size: 0.92rem;
  color: #64748b;
  margin-bottom: 30px;
  line-height: 1.4;
}

/* LEFT COLUMN - ROLES GRID */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

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

.role-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(15,23,42,0.02);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.role-card:hover {
  transform: translateY(-4px);
  border-color: rgba(249, 115, 22, 0.25);
  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.06);
}

.role-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.role-icon-box.orange-theme {
  background: rgba(249, 115, 22, 0.08);
  color: #f97316;
}

.role-icon-box.indigo-theme {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.role-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.role-card-desc {
  font-size: 0.84rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* RIGHT COLUMN - TIMELINE */
.workflow-timeline {
  position: relative;
  padding-left: 56px;
}

.workflow-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 15px;
  bottom: 15px;
  width: 2px;
  background: linear-gradient(180deg, #f97316 0%, rgba(99, 102, 241, 0.2) 100%);
}

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

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

.timeline-dot {
  position: absolute;
  left: -56px;
  top: 12px;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  color: #64748b;
  z-index: 2;
  transition: all 0.3s ease;
}

.timeline-item:hover .timeline-dot {
  border-color: #f97316;
  color: #f97316;
  box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
}

.timeline-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 4px 15px rgba(15,23,42,0.02);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.timeline-card:hover {
  transform: translateX(4px);
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.05);
}

.timeline-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 12px;
}

.timeline-card-title {
  font-family: "Outfit", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.2px;
}

.timeline-card-desc {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

.timeline-icon {
  color: #64748b;
  opacity: 0.7;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.timeline-item:hover .timeline-icon {
  color: #6366f1;
  opacity: 1;
}