/* ==========================================================================
   SENNU AI - 100% HUMAN BESPOKE EDITORIAL DESIGN SYSTEM
   Headlines & Serifs: Instrument Serif, Newsreader, Lora
   Body & Interface: Plus Jakarta Sans, Inter
   Palette: Warm Linen, Espresso Walnut Ink, Terracotta Clay, Olive Sage, Honey Amber
   Animations: Organic Fluid Breathing & Smooth Spring Physics
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Lora:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

:root {
  /* Human Color Tokens */
  --human-paper: #faf7f2;
  --human-paper-warm: #f5f0e6;
  --human-card: #ffffff;
  --human-card-subtle: #fcfbfa;
  --human-ink: #1e1b18;
  --human-ink-rich: #141210;
  --human-body: #3c352e;
  --human-muted: #6e6559;
  --human-faint: #9c9284;
  --human-line: #e6dfd3;
  --human-line-soft: rgba(215, 203, 187, 0.45);
  
  /* Human Accents */
  --human-terracotta: #c85a32;
  --human-terracotta-hover: #b54e28;
  --human-clay-glow: rgba(200, 90, 50, 0.22);
  --human-amber: #d9933b;
  --human-sage: #38664b;
  --human-sage-bg: rgba(56, 102, 75, 0.08);
  --human-deep-slate: #1e2630;
  --human-deep-hover: #181f27;

  /* Clean, Sharp, Modern Enterprise Typography Stack (Linear & Stripe Standard) */
  --font-serif: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Human Shadows */
  --shadow-human-sm: 0 2px 8px -1px rgba(60, 45, 30, 0.05), 0 1px 3px rgba(60, 45, 30, 0.03);
  --shadow-human-md: 0 8px 24px -4px rgba(60, 45, 30, 0.07), 0 2px 6px -1px rgba(60, 45, 30, 0.03);
  --shadow-human-lg: 0 16px 40px -8px rgba(60, 45, 30, 0.1), 0 4px 12px -2px rgba(60, 45, 30, 0.04);
  --shadow-human-hover: 0 20px 48px -10px rgba(60, 45, 30, 0.14), 0 8px 16px -4px rgba(60, 45, 30, 0.06);

  /* Human Motion Easings */
  --ease-human: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --------------------------------------------------------------------------
   1. GLOBAL TYPOGRAPHY & RESET
   -------------------------------------------------------------------------- */
html, body {
  background-color: var(--human-paper) !important;
  color: var(--human-ink) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body, p, span, div, li, a, button, input, textarea {
  font-family: var(--font-sans);
}

/* Modern Sharp Headlines & Accents */
.serif {
  font-family: var(--font-sans) !important;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--human-ink-rich);
}

h1.serif, h1 {
  font-family: var(--font-sans) !important;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--human-ink-rich);
  font-weight: 700 !important;
}

h2.serif, h2 {
  font-family: var(--font-sans) !important;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--human-ink-rich);
  font-weight: 600 !important;
}

h3 {
  font-family: var(--font-sans) !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--human-ink-rich);
}

h3.serif, .serif-title {
  font-family: var(--font-sans) !important;
  font-size: 19px;
  font-weight: 600 !important;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--human-ink-rich);
}

/* Card Titles & Mini Headers */
.weeks-grid h3,
.deliverables-grid h3,
.outcome-card h3 {
  font-family: var(--font-sans) !important;
  font-size: 18px;
  font-weight: 600 !important;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #1a1814;
}

/* Elegant emphasis in headings */
h1 span, h2 span, h3 span, .serif span[style*="italic"], em, i {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: var(--human-terracotta);
}

/* Body Copy Enhancements */
p {
  color: var(--human-body);
  line-height: 1.6;
  font-size: clamp(15px, 1.1vw, 17px);
}

.weeks-grid p,
.deliverables-grid p,
.connectors-grid p {
  font-size: 14px;
  line-height: 1.55;
  color: #4a4539;
}

/* --------------------------------------------------------------------------
   2. HUMAN STRUCTURE & SURFACES (BACKGROUNDS & BORDERS)
   -------------------------------------------------------------------------- */
#root, [id="root"] > div {
  background-color: var(--human-paper) !important;
  color: var(--human-ink) !important;
}

/* Subtle Organic Paper Grain Effect */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: radial-gradient(var(--human-ink) 1px, transparent 0);
  background-size: 24px 24px;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION BAR (TACTILE TRANSLUCENT PAPER GLASS)
   -------------------------------------------------------------------------- */
nav.fixed {
  background: rgba(250, 247, 242, 0.92) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid var(--human-line) !important;
  box-shadow: 0 4px 20px -2px rgba(60, 45, 30, 0.03) !important;
  transition: all 0.3s var(--ease-human) !important;
}

nav a, nav button {
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  color: var(--human-body) !important;
  transition: color 0.2s var(--ease-human) !important;
}

nav a:hover, nav button:hover {
  color: var(--human-terracotta) !important;
}

/* Nav Logo */
nav a.group span {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--human-ink-rich) !important;
}

nav svg {
  color: var(--human-terracotta) !important;
}

/* Nav Dropdown Menu */
nav .group .bg-white {
  background: #ffffff !important;
  border: 1px solid var(--human-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-human-lg) !important;
  padding: 8px !important;
  animation: humanSubmenuIn 0.25s var(--ease-human) forwards !important;
}

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

nav .group .bg-white a {
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.18s var(--ease-human) !important;
}

nav .group .bg-white a:hover {
  background: var(--human-paper-warm) !important;
  transform: translateX(3px);
}

nav .group .bg-white a div:first-child {
  color: var(--human-ink-rich) !important;
  font-weight: 600 !important;
}

nav .group .bg-white a div:last-child {
  color: var(--human-muted) !important;
}

/* --------------------------------------------------------------------------
   4. BUTTONS & CALL-TO-ACTION (TACTILE HUMAN CRAFT)
   -------------------------------------------------------------------------- */
.primary-btn,
a[href*="calendly"],
button:has(svg.lucide-arrow-right),
nav a[href*="calendly"] {
  background: linear-gradient(135deg, var(--human-deep-slate) 0%, #2b3947 100%) !important;
  color: #ffffff !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 14px -2px rgba(30, 38, 48, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: all 0.28s var(--ease-human) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}

.primary-btn:hover,
a[href*="calendly"]:hover,
button:has(svg.lucide-arrow-right):hover,
nav a[href*="calendly"]:hover {
  background: linear-gradient(135deg, var(--human-terracotta) 0%, #df6d45 100%) !important;
  box-shadow: 0 8px 24px -4px rgba(200, 90, 50, 0.38), 0 2px 6px rgba(200, 90, 50, 0.2) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

.primary-btn:active,
a[href*="calendly"]:active,
button:has(svg.lucide-arrow-right):active,
nav a[href*="calendly"]:active {
  transform: translateY(1px) scale(0.99) !important;
  box-shadow: 0 2px 8px rgba(200, 90, 50, 0.2) !important;
}

/* Ghost Buttons */
.ghost-btn {
  background: transparent !important;
  border: 1px solid var(--human-line) !important;
  color: var(--human-body) !important;
  border-radius: 9999px !important;
  padding: 12px 24px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
  transition: all 0.25s var(--ease-human) !important;
}

.ghost-btn:hover {
  background: var(--human-paper-warm) !important;
  color: var(--human-ink-rich) !important;
  border-color: var(--human-terracotta) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   5. CARDS & SECTIONS (ORGANIC ELEVATION & NATURAL BORDERS)
   -------------------------------------------------------------------------- */
.outcome-card,
[class*="case-card"],
.build-card,
.systems-panel,
.service-mini,
div[style*="background: rgb(255, 255, 255)"],
div[style*="background:#fff"],
div[style*="background: white"],
div[style*="background: #ffffff"] {
  background: #ffffff !important;
  border: 1px solid var(--human-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-human-sm) !important;
  transition: all 0.35s var(--ease-human) !important;
}

.outcome-card:hover,
[class*="case-card"]:hover,
.build-card:hover {
  border-color: rgba(200, 90, 50, 0.4) !important;
  box-shadow: var(--shadow-human-hover) !important;
  transform: translateY(-4px) !important;
}

/* Service Mini Cards in Hero */
.service-mini {
  border-radius: 12px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--human-line) !important;
  box-shadow: var(--shadow-human-sm) !important;
  transition: all 0.25s var(--ease-human) !important;
  cursor: default;
}

.service-mini:hover {
  transform: translateX(4px) !important;
  border-color: var(--human-terracotta) !important;
  box-shadow: var(--shadow-human-md) !important;
}

.service-mini > div:first-child {
  background: rgba(200, 90, 50, 0.08) !important;
  border-radius: 10px !important;
}

.service-mini svg {
  stroke: var(--human-terracotta) !important;
}

.service-mini p {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--human-ink-rich) !important;
}

/* Systems Panel on Hero Right */
.systems-panel {
  border-radius: 16px !important;
  padding: 18px 20px !important;
  border: 1px solid var(--human-line) !important;
  box-shadow: var(--shadow-human-md) !important;
}

.systems-panel p:first-child {
  color: var(--human-terracotta) !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
}

.systems-item {
  transition: transform 0.2s var(--ease-human);
}

.systems-item:hover {
  transform: translateX(3px);
}

.systems-item p {
  color: var(--human-body) !important;
  font-weight: 500 !important;
}

/* --------------------------------------------------------------------------
   6. HERO INFOGRAPHIC & SENNU ENGINE (WARM ORGANIC BREATHING FLOW)
   -------------------------------------------------------------------------- */
.engine-node {
  background: #ffffff !important;
  border: 1.5px solid var(--human-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -4px var(--human-clay-glow), 0 2px 8px rgba(60, 45, 30, 0.05) !important;
  transition: transform 0.4s var(--ease-human), box-shadow 0.4s var(--ease-human) !important;
}

.engine-node:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 16px 40px -4px rgba(200, 90, 50, 0.35) !important;
}

.engine-node svg path {
  fill: var(--human-terracotta) !important;
  transition: fill 0.3s ease;
}

.engine-node p {
  font-family: var(--font-sans) !important;
  font-weight: 700 !important;
  color: var(--human-ink-rich) !important;
  letter-spacing: -0.01em !important;
}

/* Organic Pulse Rings (Human Breathing) */
@keyframes humanPulseRing {
  0% {
    transform: scale(0.96);
    opacity: 0.75;
    border-color: rgba(200, 90, 50, 0.7);
  }
  50% {
    transform: scale(1.22);
    opacity: 0.3;
    border-color: rgba(217, 147, 59, 0.45);
  }
  100% {
    transform: scale(1.42);
    opacity: 0;
    border-color: rgba(200, 90, 50, 0);
  }
}

.pulse-ring {
  border: 2px solid rgba(200, 90, 50, 0.6) !important;
  border-radius: 20px !important;
  animation: humanPulseRing 4.2s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;
}

.engine-node .pulse-ring-2 {
  animation-delay: 2.1s !important;
}

/* Infographic SVG Connecting Lines */
.bg-line {
  stroke: var(--human-line) !important;
  stroke-width: 1.5 !important;
  stroke-dasharray: 4 4 !important;
  opacity: 0.85 !important;
}

/* Animated Data Flow (Warm Terracotta & Honey) */
@keyframes humanPacketFlow {
  0% { stroke-dashoffset: 100; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

.packet-line {
  stroke: var(--human-terracotta) !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  filter: drop-shadow(0 0 4px rgba(200, 90, 50, 0.5)) !important;
  animation: humanPacketFlow 2.8s var(--ease-human) infinite !important;
}

/* Model Badges (Claude, OpenAI, Gemini) */
.engine-center div[title] {
  background: var(--human-paper) !important;
  border: 1px solid var(--human-line) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-human-sm) !important;
  transition: all 0.2s var(--ease-human) !important;
}

.engine-center div[title]:hover {
  transform: translateY(-2px) scale(1.08) !important;
  border-color: var(--human-terracotta) !important;
  box-shadow: 0 4px 12px rgba(200, 90, 50, 0.25) !important;
}

/* --------------------------------------------------------------------------
   7. SECTION HIGHLIGHTS & HUMAN TONALITY
   -------------------------------------------------------------------------- */
/* Section: Dark Call-to-Action with warm human charcoal and glow */
section[style*="background: rgb(37, 52, 71)"],
section[style*="background:#253447"],
section[style*="background: #253447"] {
  background: linear-gradient(160deg, #18202a 0%, #1e2936 60%, #16202c 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

section[style*="background: rgb(37, 52, 71)"]::before,
section[style*="background:#253447"]::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -80px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(200, 90, 50, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

section[style*="background: rgb(37, 52, 71)"] h2,
section[style*="background:#253447"] h2 {
  color: #fffdf9 !important;
}

section[style*="background: rgb(37, 52, 71)"] p,
section[style*="background:#253447"] p {
  color: #c8d2de !important;
}

section[style*="background: rgb(37, 52, 71)"] button,
section[style*="background:#253447"] button {
  background: var(--human-paper) !important;
  color: var(--human-deep-slate) !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 14px 28px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.28s var(--ease-human) !important;
}

section[style*="background: rgb(37, 52, 71)"] button:hover,
section[style*="background:#253447"] button:hover {
  background: #ffffff !important;
  color: var(--human-terracotta) !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 8px 28px rgba(200, 90, 50, 0.3) !important;
}

/* Badges, tags, pill accents */
span[style*="border-radius: 999px"],
span[style*="border-radius:999px"],
.rounded-full {
  background: var(--human-paper-warm) !important;
  border-color: var(--human-line) !important;
  color: var(--human-body) !important;
  font-family: var(--font-sans) !important;
  font-weight: 500 !important;
}

/* Green dot pulse for live statuses */
span[style*="background: rgb(43, 138, 79)"],
span[style*="background:#2b8a4f"] {
  background: var(--human-sage) !important;
  box-shadow: 0 0 8px rgba(56, 102, 75, 0.5) !important;
  animation: humanStatusPulse 2.4s ease-in-out infinite !important;
}

@keyframes humanStatusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
}

/* Metrics and numbers */
.case-stats span,
[class*="text-4xl"],
[class*="text-5xl"],
[class*="text-6xl"],
div:has(> p) > span[style*="font-size"] {
  font-family: var(--font-serif) !important;
  color: var(--human-ink-rich) !important;
  font-variant-numeric: normal !important;
}

/* Footer & Dividers */
footer, .border-t, .border-b, hr, .divide-y > * {
  border-color: var(--human-line) !important;
}

/* --------------------------------------------------------------------------
   8. ENTRANCE & FADE ANIMATIONS (HUMAN NATURAL CURVES)
   -------------------------------------------------------------------------- */
@keyframes humanFadeUp {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-0 { animation: humanFadeUp 0.8s var(--ease-human) 0.05s both !important; }
.anim-1 { animation: humanFadeUp 0.8s var(--ease-human) 0.18s both !important; }
.anim-2 { animation: humanFadeUp 0.8s var(--ease-human) 0.32s both !important; }
.anim-3 { animation: humanFadeUp 0.8s var(--ease-human) 0.46s both !important; }

/* --------------------------------------------------------------------------
   9. RESPONSIVE TOUCH FRIENDLY ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  h1.serif, h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }
  .primary-btn, a[href*="calendly"] {
    width: 100% !important;
    text-align: center !important;
    padding: 14px 20px !important;
  }
}

/* --------------------------------------------------------------------------
   10. NOLQA PORTFOLIO PARTNERS SECTION
   -------------------------------------------------------------------------- */
.portfolio-partners-section {
  background: var(--human-card) !important;
  border-top: 1px solid var(--human-line) !important;
  border-bottom: 1px solid var(--human-line) !important;
}

.portfolio-card {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-human) !important;
}

.portfolio-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--human-terracotta) !important;
  box-shadow: var(--shadow-human-hover) !important;
  background: #ffffff !important;
}

.portfolio-card:hover svg {
  transform: translate(2px, -2px);
  stroke: var(--human-terracotta) !important;
  opacity: 1 !important;
}

.portfolio-card svg {
  transition: transform 0.25s var(--ease-spring), stroke 0.25s ease, opacity 0.25s ease;
}


/* --------------------------------------------------------------------------
   11. PILL BUTTON (IMAGE 2) & SENNU AI DEMO MODAL (IMAGE 1)
   -------------------------------------------------------------------------- */
.btn-pill-audit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #182230 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.btn-pill-audit:hover {
  background: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28) !important;
  color: #ffffff !important;
}

.btn-pill-audit:active {
  transform: translateY(0) scale(0.98) !important;
}

.btn-pill-audit .btn-arrow {
  display: inline-block !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.btn-pill-audit:hover .btn-arrow {
  transform: translateX(4px) !important;
}

.btn-pill-audit.btn-pill-lg {
  padding: 16px 34px !important;
  font-size: 16px !important;
}

.btn-pill-audit.btn-pill-light {
  background: #ffffff !important;
  color: #182230 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
}

.btn-pill-audit.btn-pill-light:hover {
  background: #f8f6f1 !important;
  color: #0f172a !important;
}

/* Modal Backdrop */
.demo-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-modal-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* Modal Container */
.demo-modal-container {
  background: #ffffff;
  width: 100%;
  max-width: 880px;
  border-radius: 16px;
  box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  transform: scale(0.96) translateY(12px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-modal-backdrop.is-open .demo-modal-container {
  transform: scale(1) translateY(0);
}

/* Corner Ribbon */
.demo-modal-ribbon {
  position: absolute;
  top: 18px;
  right: -30px;
  transform: rotate(45deg);
  background: #475569;
  color: #ffffff;
  padding: 4px 34px;
  font-size: 9px;
  letter-spacing: 0.06em;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  pointer-events: none;
  z-index: 10;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Close Button */
.demo-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(241, 245, 249, 0.85);
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: all 0.2s ease;
}

.demo-modal-close:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: scale(1.08);
}

/* Modal Grid */
.demo-modal-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow-y: auto;
}

/* Left Column */
.demo-modal-left {
  padding: 44px 34px;
  border-right: 1px solid #eef2f6;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.demo-bird-icon {
  margin-bottom: 24px;
}

.demo-title {
  font-family: var(--font-sans) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

.demo-desc {
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 !important;
}

/* Right Column */
.demo-modal-right {
  padding: 40px 44px;
  background: #ffffff;
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

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

.demo-form label {
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
}

.demo-form label .req {
  color: #ef4444;
}

.demo-form input,
.demo-form select {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  font-family: var(--font-sans) !important;
  font-size: 14px !important;
  color: #0f172a !important;
  background: #ffffff !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.demo-form input:focus,
.demo-form select:focus {
  border-color: #0069ff !important;
  box-shadow: 0 0 0 3px rgba(0, 105, 255, 0.12) !important;
}

.demo-form input::placeholder {
  color: #94a3b8;
}

.demo-form .select-wrapper {
  position: relative;
}

.demo-form select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px !important;
}

.demo-submit-btn {
  background: #0069ff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 9999px !important;
  padding: 12px 36px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0, 105, 255, 0.25) !important;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.demo-submit-btn:hover {
  background: #0056d6 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 16px rgba(0, 105, 255, 0.35) !important;
}

.demo-submit-btn:active {
  transform: scale(0.98) !important;
}

/* Success State */
.demo-success-state {
  text-align: center;
  padding: 40px 20px;
}

.demo-success-state .success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: bold;
  margin: 0 auto 18px auto;
}

.demo-success-state h4 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px 0;
}

.demo-success-state p {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .demo-modal-grid {
    grid-template-columns: 1fr;
  }
  .demo-modal-left {
    padding: 30px 24px 20px;
    border-right: none;
    border-bottom: 1px solid #eef2f6;
  }
  .demo-modal-right {
    padding: 24px;
  }
}

/* --------------------------------------------------------------------------
   12. UNIQUE P&L IMPACT BENTO CARDS
   -------------------------------------------------------------------------- */
.unique-impact-card {
  position: relative;
  transition: all 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.unique-impact-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 42px -8px rgba(60, 45, 30, 0.12), 0 0 0 1px rgba(200, 90, 50, 0.18) !important;
  border-color: rgba(200, 90, 50, 0.3) !important;
}

.unique-impact-card:hover .card-accent-glow {
  height: 4px !important;
  box-shadow: 0 0 12px rgba(200, 90, 50, 0.4);
}

.unique-impact-card:hover .card-icon-wrap {
  transform: scale(1.08);
}

/* --------------------------------------------------------------------------
   13. UNIQUE CASE STUDY SHOWCASE & 6-STAGE SERVICES CARDS
   -------------------------------------------------------------------------- */
.unique-case-showcase {
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.unique-case-showcase:hover {
  box-shadow: 0 24px 50px -10px rgba(60, 45, 30, 0.1) !important;
  border-color: rgba(200, 90, 50, 0.35) !important;
}

.unique-srv-card {
  position: relative;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.unique-srv-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(200, 90, 50, 0.35) !important;
  box-shadow: 0 20px 42px -8px rgba(60, 45, 30, 0.12), 0 0 0 1px rgba(200, 90, 50, 0.15) !important;
  background: #ffffff !important;
}

.unique-srv-card .srv-arrow {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.unique-srv-card:hover .srv-arrow {
  transform: translateX(4px);
}

.unique-srv-card:hover .srv-top-accent {
  height: 4px !important;
}

@media (max-width: 900px) {
  .unique-case-showcase {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}



/* --------------------------------------------------------------------------
   14. DARK CTA BANNER CONTRAST & WHITE PILL BUTTON (IMAGE 1 & IMAGE 4)
   -------------------------------------------------------------------------- */
.final-cta,
[style*="background: rgb(37, 52, 71)"],
[style*="background:#253447"],
[style*="background: #253447"] {
  background: #182230 !important;
  color: #ffffff !important;
}

.final-cta h2,
.final-cta .serif,
[style*="background: rgb(37, 52, 71)"] h2,
[style*="background: rgb(37, 52, 71)"] .serif {
  color: #ffffff !important;
  font-family: var(--font-serif) !important;
}

.final-cta p,
[style*="background: rgb(37, 52, 71)"] p {
  color: #cbd5e1 !important;
  font-family: var(--font-sans) !important;
}

/* White Pill Button on Dark Banner */
.final-cta button,
.final-cta a,
[style*="background: rgb(37, 52, 71)"] button,
[style*="background: rgb(37, 52, 71)"] a,
.btn-pill-light {
  background: #ffffff !important;
  color: #182230 !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 9999px !important;
  padding: 12px 28px !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.final-cta button:hover,
.final-cta a:hover,
[style*="background: rgb(37, 52, 71)"] button:hover,
.btn-pill-light:hover {
  background: #f8f6f1 !important;
  color: #0f172a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25) !important;
}

.final-cta button .btn-arrow,
.btn-pill-light .btn-arrow {
  color: #182230 !important;
}

/* --------------------------------------------------------------------------
   15. DARK CONSOLE & OPS WIDGET HIGH CONTRAST (IMAGE 1)
   -------------------------------------------------------------------------- */
[style*="background: rgb(28, 42, 60)"],
[style*="background: rgb(37, 52, 71)"],
[style*="background: rgb(30, 44, 62)"],
[style*="background:#1c2a3c"],
[style*="background: #1c2a3c"],
[style*="background: #182230"],
[style*="background: rgb(24, 34, 48)"] {
  color: #e2e8f0 !important;
}

[style*="background: rgb(28, 42, 60)"] p,
[style*="background: rgb(37, 52, 71)"] p,
[style*="background: rgb(30, 44, 62)"] p,
[style*="background: #182230"] p,
[style*="background: rgb(28, 42, 60)"] div,
[style*="background: rgb(28, 42, 60)"] span {
  font-family: inherit;
}

/* Lighten numbers and metrics in dark console */
[style*="background: rgb(28, 42, 60)"] p[style*="font-weight: 700"],
[style*="background: rgb(28, 42, 60)"] p[style*="ui-monospace"] {
  color: #f1f5f9 !important;
}

[style*="background: rgb(28, 42, 60)"] p[style*="color: rgb(136, 163, 194)"],
[style*="background: rgb(28, 42, 60)"] p[style*="letter-spacing"] {
  color: #94a3b8 !important;
}

[style*="background: rgb(28, 42, 60)"] span[style*="rgb(164, 212, 180)"] {
  color: #34d399 !important;
  font-weight: 700 !important;
}

[style*="background: rgb(28, 42, 60)"] svg[stroke="#88a3c2"] {
  stroke: #38bdf8 !important;
}

[style*="background: rgb(28, 42, 60)"] svg[stroke="#4a6b94"] {
  stroke: #34d399 !important;
}

/* --------------------------------------------------------------------------
   16. 100% HUMAN CRAFTSMANSHIP & EDITORIAL CARDS
   Zero Artificial/AI Mini-Widgets. Handcrafted Typography & Human Outcomes.
   -------------------------------------------------------------------------- */
.human-editorial-card {
  position: relative;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease !important;
}

.human-editorial-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 50px -12px rgba(60, 45, 30, 0.12), 0 0 0 1px rgba(200, 90, 50, 0.2) !important;
  border-color: rgba(200, 90, 50, 0.35) !important;
}

.human-editorial-card:hover .card-top-bar {
  opacity: 1 !important;
  height: 5px !important;
}

.human-editorial-card:hover .human-display-metric {
  transform: scale(1.02);
}

.human-display-metric {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block;
}

.human-srv-card {
  position: relative;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.32s ease !important;
}

.human-srv-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 48px -10px rgba(60, 45, 30, 0.1), 0 0 0 1px rgba(200, 90, 50, 0.25) !important;
  border-color: rgba(200, 90, 50, 0.35) !important;
  background: #ffffff !important;
}

.human-srv-card:hover .card-top-bar {
  opacity: 1 !important;
  height: 4px !important;
}

.human-srv-card .human-arrow {
  display: inline-block;
  transition: transform 0.24s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.human-srv-card:hover .human-arrow {
  transform: translateX(5px);
}

.human-srv-link:hover {
  color: #c85a32 !important;
}

.human-check-item {
  transition: color 0.2s ease;
}

.human-srv-card:hover .human-check-item {
  color: #1e1b18 !important;
}


/* Hide Backed by / Official Partners section */
.partners-grid, section:has(.partners-grid) {
  display: none !important;
}