/* OctopIQ marka katmanı: #FAFAFA · #0F172A · #0284C7 */
:root {
  --brand-bg: #fafafa;
  --brand-ink: #0f172a;
  --brand-accent: #0284c7;
}
body {
  background: var(--brand-bg);
}

/* Header layout & styling: transparent floating header with difference/anti invert mode */
.nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  width: 100% !important;
  max-width: 1380px !important;
  height: 82px !important;
  margin: 0 auto !important;
  background: transparent !important;
  mix-blend-mode: difference !important;
}

.fixedBrandMark {
  position: fixed !important;
  z-index: 51 !important;
  top: 22px !important;
  left: max(44px, calc((100vw - 1380px) / 2 + 44px)) !important;
  width: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  pointer-events: none !important;
}
.fixedBrandMark > img {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: none !important;
  object-fit: contain !important;
}
.fixedBrandMark > strong {
  display: inline-block !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.06em !important;
  color: #121a2e !important;
}
.fixedBrandMark > strong > span {
  color: #0281c5 !important;
}

.brandSpacer {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  flex: none !important;
}

.nav .brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.nav .brand strong {
  visibility: hidden !important;
}

.nav .navlinks a {
  color: #ffffff !important;
  transition: opacity 0.2s ease !important;
}
.nav .navlinks a:hover {
  opacity: 0.75 !important;
}

.nav .languageToggle {
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background: transparent !important;
  color: #ffffff !important;
  border-radius: 99px !important;
  padding: 6px 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: border-color 0.2s ease, opacity 0.2s ease !important;
}
.nav .languageToggle:hover {
  border-color: #ffffff !important;
}

.nav .navcta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 17px !important;
  border-radius: 99px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  width: auto !important;
  transition: border-color 0.2s, background-color 0.2s !important;
}
.nav .navcta:hover {
  border-color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
.nav .navcta .linkIcon {
  margin-left: 4px !important;
  width: 15px !important;
  height: 15px !important;
  stroke: currentColor !important;
}

:is(.navcta, .button) :is(.roll-content, .roll-word, .roll-char, .roll-track, .roll-line) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.button {
  gap: 10px !important;
}

/* Master Buttons: Brand blue (#0284C7) & crisp pure white text */
.button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 24px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}
.button:hover {
  transform: translateY(-1px) !important;
}

/* Primary Button: Deep Tok Navy Blue (#133d73) with pure white text and crisp neutral shadow (no glow) */
.button.primary,
.button.primary:visited {
  background: #133d73 !important;
  color: #ffffff !important;
  border: 1px solid #133d73 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
.button.primary:hover {
  background: #0d2f59 !important;
  border-color: #0d2f59 !important;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.16), 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}
.button.primary :is(.roll-content, .roll-word, .roll-char, .roll-track, .roll-line, span) {
  color: #ffffff !important;
}
.button.primary .linkIcon {
  stroke: #ffffff !important;
  stroke-width: 1.8 !important;
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
}

/* Ghost Button: Crisp slate on clean white with border */
.button.ghost,
.button.ghost:visited {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
.button.ghost:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.08) !important;
}
.button.ghost :is(.roll-content, .roll-word, .roll-char, .roll-track, .roll-line, span) {
  color: #0f172a !important;
}
.button.ghost .linkIcon {
  stroke: #64748b !important;
  stroke-width: 1.8 !important;
  width: 15px !important;
  height: 15px !important;
  flex: none !important;
}

/* Ad Workspace & Campaign Draft Card refinement */
.adWorkspace {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
  transform: none !important;
}
.adWorkspaceTop h3 {
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
.adWorkspaceTop > span {
  color: #0284c7 !important;
  background: #f0f9ff !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.adFormats button {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-weight: 500 !important;
  border-radius: 99px !important;
  padding: 6px 14px !important;
  transition: all 0.2s ease !important;
}
.adFormats button:hover {
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
}
.adFormats button[aria-pressed='true'] {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.adCreative {
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
  background: #f8fafc !important;
}
.adCreative img {
  object-fit: cover !important;
  filter: contrast(1.02) !important;
}
.adCreative > span {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 9px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  background: rgba(15, 23, 42, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: #ffffff !important;
  letter-spacing: -0.01em !important;
}
.adPlan > b {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.adPlan > p {
  color: #475569 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}
.adPlan > span {
  color: #0284c7 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.adWorkspace .visualCaption {
  color: #94a3b8 !important;
  font-size: 11px !important;
}

/* Commerce Board card refinement */
.commerceBoard {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}
.commerceBoard h3 {
  color: #0f172a !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
.boardProduct {
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
.boardProduct img {
  border-radius: 8px !important;
}
.boardProduct b {
  color: #0f172a !important;
}
.boardProduct small {
  color: #64748b !important;
}
.boardProduct i {
  color: #0284c7 !important;
  background: #f0f9ff !important;
  border: 1px solid #e0f2fe !important;
  border-radius: 99px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* Enhanced Spacing & Breathing Room: open up sections so the page feels airy, relaxed and non-cramped */
.hero {
  padding-bottom: 90px !important;
}
.capabilities {
  margin: 110px auto 140px !important;
}
.storyHeading {
  margin-bottom: 48px !important;
}
.storyHeading > p {
  line-height: 1.7 !important;
  color: #475569 !important;
}
.capabilityGrid {
  gap: 24px !important;
}

.tour {
  margin: 140px auto 150px !important;
}
.sectionIntro {
  margin-bottom: 48px !important;
}
.sectionIntro > p {
  line-height: 1.7 !important;
  color: #475569 !important;
}

.modules.moduleSection {
  margin: 140px auto 150px !important;
}
.module {
  margin: 0 auto 150px !important;
  gap: 90px !important;
}
.moduleCopy > p {
  line-height: 1.75 !important;
  margin: 18px 0 24px !important;
}
.moduleCopy .featureList {
  margin: 24px 0 30px !important;
  gap: 14px !important;
}

.intelligenceSection {
  margin: 140px auto 150px !important;
}
.intelligenceHeading {
  margin-bottom: 48px !important;
}

.storyVideo {
  margin: 140px auto 150px !important;
}

/* Agency Section refinement: harmonious styling */
.agencySection {
  margin: 140px auto 150px !important;
}
.agencyCopy h2 {
  color: #0f172a !important;
  font-weight: 600 !important;
  letter-spacing: -0.05em !important;
}
.agencyCopy em {
  color: #0284c7 !important;
  font-style: normal !important;
}
.agencyCopy > p {
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.agencyCopy .featureList {
  list-style: none !important;
  padding: 0 !important;
  margin: 22px 0 28px !important;
  display: grid !important;
  gap: 12px !important;
}
.agencyCopy .featureList li {
  color: #334155 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.agencyCopy .featureList li::before {
  content: "✓" !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #e0f2fe !important;
  color: #0284c7 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  flex: none !important;
}
.agencyVisual {
  border-radius: 24px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
}
.agencyReport {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.07) !important;
}
.agencyReport h3 {
  color: #0f172a !important;
}
.agencyReport b {
  color: #0f172a !important;
}
.reportIcon {
  background: #e0f2fe !important;
  color: #0284c7 !important;
}

/* FAQ Section spacing */
.faqSection {
  margin: 140px auto 160px !important;
}
.faqSection > h2 {
  margin-bottom: 44px !important;
  color: #0f172a !important;
}
.faqItems summary {
  padding: 26px 0 !important;
}

@media (max-width: 760px) and (min-width: 681px) {
  .fixedBrandMark {
    left: 24px !important;
  }
}
@media (max-width: 680px) {
  .fixedBrandMark {
    top: 18px !important;
    left: 18px !important;
    width: 32px !important;
    height: 32px !important;
  }
  .fixedBrandMark > img {
    width: 32px !important;
    height: 32px !important;
  }
  .brandSpacer {
    width: 32px !important;
    height: 32px !important;
  }
  .hero {
    padding-bottom: 45px !important;
  }
  .capabilities,
  .tour,
  .modules.moduleSection,
  .intelligenceSection,
  .storyVideo,
  .agencySection,
  .faqSection {
    margin-top: 75px !important;
    margin-bottom: 85px !important;
  }
  .module {
    margin-bottom: 85px !important;
    gap: 35px !important;
  }
}

/* Walkthrough Marketplace Badges */
.demoStep .channelValues {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  width: 100% !important;
  margin-top: 10px !important;
}
.demoStep .channelValues .chItem {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  padding: 3px 7px !important;
  font-size: 11px !important;
  color: #334155 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}
.demoStep .channelValues .chMark {
  font-size: 9px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 1px 4px !important;
  border-radius: 4px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}
.demoStep .channelValues .chTy {
  background: #fff3eb !important;
  color: #f27a1a !important;
}
.demoStep .channelValues .chHb {
  background: #fff1f0 !important;
  color: #ff6000 !important;
}
.demoStep .channelValues .chAmz {
  background: #eff6ff !important;
  color: #2563eb !important;
}
.demoStep .channelValues .chItem small {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  flex: 1 !important;
}
.demoStep .channelValues .chItem i {
  font-style: normal !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: #f1f5f9 !important;
  padding: 2px 5px !important;
  border-radius: 4px !important;
}

/* Expanding CTA Banner (Strictly NO GRADIENT - Solid Clean Crisp Card) */
.ctaSection .ctaPanel {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.06), 0 4px 16px rgba(15, 23, 42, 0.03) !important;
}
.ctaCopy {
  width: 100%;
  max-width: 640px;
}
.ctaCopy h2 em {
  font-style: normal !important;
  color: #133d73 !important;
}
.ctaCopy > p {
  font-size: 17px !important;
  color: #64748b !important;
  margin: 0 auto 28px !important;
  line-height: 1.6 !important;
}

/* Waitlist / Early Access Form */
.waitlistForm {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 16px;
}
.waitlistInputWrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 4px 4px 4px 18px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.waitlistInputWrap:focus-within {
  border-color: #133d73;
  box-shadow: 0 0 0 3px rgba(19, 61, 115, 0.12);
}
.waitlistInputWrap input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: #0f172a;
}
.waitlistInputWrap input::placeholder {
  color: #94a3b8;
}
.waitlistInputWrap button {
  flex-shrink: 0;
  padding: 10px 20px !important;
  font-size: 13px !important;
}
.waitlistFeedback {
  min-height: 24px;
  margin-top: 8px;
  font-size: 13px;
  text-align: center;
}
.waitlistSuccess {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #047857;
  font-weight: 600;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 4px 14px;
  border-radius: 999px;
}
.waitlistError {
  display: inline-flex;
  align-items: center;
  color: #b42318;
  font-weight: 600;
  background: #fef3f2;
  border: 1px solid #fecdca;
  padding: 4px 14px;
  border-radius: 999px;
}
.ctaDirectLinks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Footer Refinements & Clean Social Icon Links */
footer.site-footer.siteFooterV2 {
  display: block !important;
  max-width: 1180px !important;
  width: calc(100% - 48px) !important;
  margin: 0 auto !important;
  border-top: 1px solid #e2e8f0 !important;
  padding: 56px 0 28px !important;
}
.footerV2Grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr !important;
  gap: 48px !important;
  padding-bottom: 44px !important;
}
.footerV2Brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
}
.footerV2Brand img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
}
.footerV2Brand strong {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  color: #0f172a !important;
}
.footerV2Brand strong span {
  color: #0281c5 !important;
}
.footerV2Identity > p {
  color: #64748b !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  margin: 12px 0 16px !important;
  max-width: 260px !important;
}
.footerV2Contact {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #475569 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.footerV2Contact:hover {
  color: #0281c5 !important;
}
.footerV2Socials {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
}
.footerV2Socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  color: #64748b !important;
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease !important;
}
.footerV2Socials a:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  transform: translateY(-2px) !important;
  border: none !important;
  box-shadow: none !important;
}
.footerV2Socials a svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}
.footerV2Column > span {
  display: block !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #0f172a !important;
  margin-bottom: 18px !important;
}
.footerV2Column > a {
  display: block !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: #64748b !important;
  text-decoration: none !important;
  margin: 0 0 11px !important;
  transition: color 0.15s ease !important;
}
.footerV2Column > a:hover {
  color: #0281c5 !important;
}
.footerV2Base {
  border-top: 1px solid #e2e8f0 !important;
  padding-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}
.footerV2Base a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.15s ease !important;
}
.footerV2Base a:hover {
  color: #0281c5 !important;
}
@media (max-width: 768px) {
  .footerV2Grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* ============================================================
   HERO 4-STAGE DYNAMIC EVOLUTION (NO GLOW, CRISP VECTOR SaaS)
   Stage 1: Blue (#0281c5) - Girdi / Ham Veri
   Stage 2: Purple (#8b5cf6) - Entegrasyon & Eşleme
   Stage 3: Coral/Amber (#ea580c) - Optimizasyon & Test
   Stage 4: Emerald Green (#059669) - Zirve Büyüme & Artış
   ============================================================ */

.unifySource {
  border-width: 1.5px !important;
  border-style: solid !important;
  box-shadow: 0 4px 14px -3px rgba(15, 23, 42, 0.08) !important; /* NO GLOW */
  transition: border-color 0.35s ease, background-color 0.35s ease !important;
  background: #ffffff !important;
}

/* Card titles */
.unifySourceTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  position: relative !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 14px !important;
}
.unifySourceTitle > svg {
  width: 16px !important;
  height: 16px !important;
  stroke-width: 1.6 !important;
  transition: stroke 0.35s ease !important;
}
.unifySourceTitle > i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  margin-left: auto !important;
  transition: background-color 0.35s ease !important;
}

/* Crisp Clean Badges (NO GLOW) */
.unifyOptBadge {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 8.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  padding: 2px 6.5px !important;
  border-radius: 6px !important;
  border: 1px solid currentColor !important;
  box-shadow: none !important; /* NO GLOW */
  background: #f8fafc !important;
  margin-left: auto !important;
  margin-right: 6px !important;
  transition: color 0.35s ease, border-color 0.35s ease, background-color 0.35s ease !important;
}

/* Metric Gain Footer in Card */
.unifyMetricGain {
  margin-top: 10px !important;
  padding-top: 6px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-size: 10px !important;
  line-height: 1 !important;
  color: #64748b !important;
}
.unifyMetricGain .gain-val b {
  font-weight: 700 !important;
  font-size: 11px !important;
  transition: color 0.35s ease !important;
}
.unifyMetricGain .gain-sub {
  font-size: 8.5px !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

/* Central Core IQ Intelligence Engine (No monkey text!) */
.iqEnginePill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 999px !important;
  padding: 3.5px 10px !important;
  margin: 8px auto 6px !important;
  width: fit-content !important;
  transition: all 0.3s ease !important;
}
.iqGear {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  animation: iqSpin 4s linear infinite !important;
  flex-shrink: 0 !important;
}
@keyframes iqSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.iqEngineStatus {
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: #334155 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

/* 4-STAGE COLOR THEMING (STRICTLY NO GLOW) */
/* Stage 1: Blue (#0281c5) - Girdi & Ham Veri */
[data-hero-stage="1"] .unifySource {
  border-color: #93c5fd !important;
}
[data-hero-stage="1"] .unifySourceTitle > svg {
  stroke: #0281c5 !important;
}
[data-hero-stage="1"] .unifySourceTitle > i {
  background: #0281c5 !important;
}
[data-hero-stage="1"] .unifyOptBadge {
  color: #0281c5 !important;
  border-color: #bfdbfe !important;
  background: #eff6ff !important;
}
[data-hero-stage="1"] .unifyMetricGain .gain-val b {
  color: #0281c5 !important;
}
[data-hero-stage="1"] .iqEnginePill {
  border-color: #bfdbfe !important;
  color: #0281c5 !important;
}

/* Stage 2: Purple (#7c3aed) - Kanal Eşleme & Entegrasyon */
[data-hero-stage="2"] .unifySource {
  border-color: #c4b5fd !important;
}
[data-hero-stage="2"] .unifySourceTitle > svg {
  stroke: #7c3aed !important;
}
[data-hero-stage="2"] .unifySourceTitle > i {
  background: #7c3aed !important;
}
[data-hero-stage="2"] .unifyOptBadge {
  color: #7c3aed !important;
  border-color: #ddd6fe !important;
  background: #f5f3ff !important;
}
[data-hero-stage="2"] .unifyMetricGain .gain-val b {
  color: #7c3aed !important;
}
[data-hero-stage="2"] .iqEnginePill {
  border-color: #ddd6fe !important;
  color: #7c3aed !important;
}

/* Stage 3: Orange/Amber (#ea580c) - Optimizasyon & A/B Test */
[data-hero-stage="3"] .unifySource {
  border-color: #fdba74 !important;
}
[data-hero-stage="3"] .unifySourceTitle > svg {
  stroke: #ea580c !important;
}
[data-hero-stage="3"] .unifySourceTitle > i {
  background: #ea580c !important;
}
[data-hero-stage="3"] .unifyOptBadge {
  color: #ea580c !important;
  border-color: #fed7aa !important;
  background: #fff7ed !important;
}
[data-hero-stage="3"] .unifyMetricGain .gain-val b {
  color: #ea580c !important;
}
[data-hero-stage="3"] .iqEnginePill {
  border-color: #fed7aa !important;
  color: #ea580c !important;
}

/* Stage 4: Emerald Green (#059669) - Zirve Büyüme & Rekor Artış */
[data-hero-stage="4"] .unifySource {
  border-color: #34d399 !important;
  border-width: 2px !important;
}
[data-hero-stage="4"] .unifySourceTitle > svg {
  stroke: #059669 !important;
}
[data-hero-stage="4"] .unifySourceTitle > i {
  background: #10b981 !important;
}
[data-hero-stage="4"] .unifyOptBadge {
  color: #047857 !important;
  border-color: #a7f3d0 !important;
  background: #ecfdf5 !important;
}
[data-hero-stage="4"] .unifyMetricGain .gain-val b {
  color: #047857 !important;
}
[data-hero-stage="4"] .iqEnginePill {
  border-color: #a7f3d0 !important;
  color: #059669 !important;
}

/* Customer Crowd Progression (Real Profile Silhouettes with Head & Shoulders) */
.unifyCustomerCrowd {
  height: 36px !important;
  width: 100% !important;
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.crowdAvatars {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: var(--av-justify, space-between) !important;
  width: 100% !important;
  height: 100% !important;
  gap: var(--av-gap, 0px) !important;
}
.custAvatar {
  position: relative !important;
  width: var(--av-size, 20px) !important;
  height: var(--av-size, 20px) !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  overflow: hidden !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  transition: all 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}
.custAvatar::before {
  content: "" !important;
  position: absolute !important;
  top: 18% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 34% !important;
  height: 34% !important;
  border-radius: 50% !important;
  background: var(--stage-color, #0281c5) !important;
  transition: background-color 0.2s ease !important;
}
.custAvatar i {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 72% !important;
  height: 42% !important;
  border-radius: 50% 50% 0 0 !important;
  background: var(--stage-color, #0281c5) !important;
  transition: background-color 0.2s ease !important;
}

/* Progressive Chart Drawing (Draws smoothly from left to right) */
.unifyPeopleTrend {
  width: 100% !important;
  height: 32px !important;
  overflow: visible !important;
  display: block !important;
  margin-top: 5px !important;
}
.unifyPeopleTrend .trendLine {
  fill: none !important;
  stroke: var(--stage-color, #0281c5) !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 100 !important;
  stroke-dashoffset: 0 !important;
  transition: stroke 0.2s ease !important;
}
.unifyPeopleTrend.drawing .trendLine {
  animation: drawTrendCurve 0.25s cubic-bezier(0.2, 0.8, 0.25, 1) forwards !important;
}
@keyframes drawTrendCurve {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
.unifyPeopleTrend .trendPeak {
  fill: var(--stage-color, #0281c5) !important;
  transition: cx 0.25s ease, cy 0.25s ease, fill 0.2s ease, transform 0.2s ease !important;
}
.unifyPeopleTrend.drawing .trendPeak {
  animation: peakPulsePop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}
@keyframes peakPulsePop {
  0%, 50% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Marketplace Real Brand Logos & Live Sales Ticker */
.unifyMarketMarks {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin-bottom: 6px !important;
}
.unifyMarketMarks > span,
.unifyMarketMarks .mChip {
  width: auto !important;
  min-width: 0 !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3.5px !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  font-size: 8.5px !important;
  font-weight: 600 !important;
  color: #94a3b8 !important;
  transition: all 0.25s ease !important;
}
.unifyMarketMarks > span.active,
.unifyMarketMarks .mChip.active {
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
}
.unifyMarketMarks .mLogoImg {
  height: 11px !important;
  width: auto !important;
  max-width: 42px !important;
  object-fit: contain !important;
  display: block !important;
  filter: grayscale(0.9) opacity(0.35) !important;
  transition: filter 0.25s ease, opacity 0.25s ease !important;
}
.unifyMarketMarks .mChip.active .mLogoImg {
  filter: none !important;
  opacity: 1 !important;
}
.mChip b {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #10b981 !important;
  margin-left: 1px !important;
  opacity: 0 !important;
  transform: scale(0) !important;
  transition: all 0.25s ease !important;
}
.mChip.active b {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Card baseline styles - allows natural 3D tilt and smooth transitions */
.unifySource {
  transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
  will-change: transform, opacity;
}

/* Hide dashed lines per user request */
.unifyPackets {
  display: none !important;
}

/* Marketplace logos in interactive demo and module */
.chLogoImg {
  height: 14px;
  width: auto;
  max-width: 48px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
  display: inline-block;
}
.marketRowLogo {
  height: 17px;
  width: auto;
  max-width: 54px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}
.marketSalesRow {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 9.5px !important;
  color: #334155 !important;
  margin-top: 3px !important;
}
.salesPulse {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #10b981 !important;
  animation: salesBeat 1.4s infinite !important;
}
@keyframes salesBeat {
  0% { transform: scale(0.9); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0.6; }
}
.salesCount b {
  font-weight: 700 !important;
  font-size: 10px !important;
}
.salesSyncBadge {
  margin-left: auto !important;
  font-size: 7.5px !important;
  font-weight: 600 !important;
  padding: 1.5px 5px !important;
  border-radius: 4px !important;
  background: #f1f5f9 !important;
  color: #64748b !important;
}

/* Ads Bars Progressive Stage Fill (Smooth, no jitter/bounce) */
.unifyAdBars {
  height: 48px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  padding-bottom: 2px !important;
}
.unifyAdBars i {
  flex: 1 !important;
  max-width: 9px !important;
  border-radius: 3px 3px 0 0 !important;
  background: var(--stage-color, #93c5fd) !important;
  opacity: 0.9 !important;
  transform-origin: bottom !important;
  transition: height 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.2s ease !important;
}

/* Store Catalog Conversion Bar Growth */
.unifyProduct small,
.pconv {
  height: 4px !important;
  border-radius: 3px !important;
  background: var(--stage-color, #0281c5) !important;
  transition: width 0.6s cubic-bezier(0.34, 1.4, 0.64, 1), background-color 0.3s ease !important;
  display: block !important;
}
.unifyAdWinner {
  position: absolute !important;
  bottom: 2px !important;
  left: 2px !important;
  right: 2px !important;
  background: #10b981 !important;
  color: #fff !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-radius: 2px !important;
  padding: 1.5px 0 !important;
  opacity: 0 !important;
  transform: translateY(2px) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Capability Cards Showcase: Mascot on left, prominent title on right */
.capabilityGrid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
}
.capabilityCard {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 30px 28px !important;
  border-radius: 20px !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 20px -3px rgba(15, 23, 42, 0.05) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  text-decoration: none !important;
}
.capabilityCard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.09) !important;
  border-color: #cbd5e1 !important;
}

/* Header lockup: icon on left, title on right */
.capCardHeader {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}
.capCardHeader .capabilityIcon {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  border-radius: 20px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.05) !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px !important;
  overflow: visible !important;
  position: relative !important;
  flex-shrink: 0 !important;
}
.capMascotImg {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.06)) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.capabilityCard:hover .capMascotImg {
  transform: scale(1.08) translateY(-2px) !important;
}

.capCardHeader h3 {
  font-size: 21px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  color: #0f172a !important;
  flex: 1 !important;
}

.capabilityCard p {
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  color: #526071 !important;
  margin: 0 0 16px !important;
}

.capabilityCard .cardLink {
  margin-top: auto !important;
}

@media (min-width: 769px) {
  .islandLogoMark {
    display: none !important;
  }
}

/* Mobile Responsiveness Improvements */
@media (max-width: 768px) {
  .fixedBrandMark {
    display: none !important;
  }

  /* Fixed Clean Mobile Header */
  .nav.islandNav {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    position: sticky !important;
    z-index: 1000 !important;
    height: 56px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
  }
  .islandBrand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #0f172a !important;
    text-decoration: none !important;
  }
  .brandSpacer {
    display: none !important;
  }
  .islandLogoMark {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }
  .islandBrand strong {
    font-size: 20px !important;
    letter-spacing: -0.04em !important;
    font-weight: 700 !important;
  }
  .islandBrand strong span {
    color: #0281c5 !important;
  }
  .navlinks {
    display: none !important;
  }
  .headerActions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
  }
  .headerActions .navcta {
    display: none !important;
  }
  .languageToggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    cursor: pointer !important;
  }
  .islandMenuButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #f8fafc !important;
    font-size: 18px !important;
    color: #0f172a !important;
    cursor: pointer !important;
  }

  /* Mobile Hero Reorder: Animation First, Copy Below, Centered */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px 16px 36px !important;
    gap: 18px !important;
    text-align: center !important;
  }
  .heroArt {
    order: 1 !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto !important;
  }
  .heroCopy {
    order: 2 !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .heroCopy h1 {
    text-align: center !important;
    font-size: clamp(30px, 8vw, 38px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
    margin: 8px 0 10px !important;
  }
  .heroCopy > p {
    text-align: center !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    margin: 0 auto !important;
    max-width: 420px !important;
  }
  .heroCopy .actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 18px !important;
  }
  .heroCopy .actions .button {
    font-size: 13px !important;
    padding: 12px 18px !important;
  }

  /* Centered Headings for Other Sections */
  .sectionIntro, .storyHeading, .intelligenceHeading {
    text-align: center !important;
  }
  .sectionIntro .eyebrow, .intelligenceHeading .eyebrow {
    justify-content: center !important;
  }
  .sectionIntro h2, .intelligenceHeading h2 {
    text-align: center !important;
  }
  .sectionIntro p, .intelligenceHeading p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero Stage Compact Sizing */
  .unifyHeroStage {
    height: 380px !important;
    max-width: 390px !important;
    margin: 10px auto 0 !important;
  }
  .unifySource {
    width: 36% !important;
    min-height: 110px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }
  .unifySourceTitle {
    font-size: 9.5px !important;
    margin-bottom: 8px !important;
    gap: 4px !important;
  }
  .unifySourceTitle > svg {
    width: 12px !important;
    height: 12px !important;
  }
  .unifyOptBadge {
    font-size: 7.5px !important;
    padding: 1px 4px !important;
  }
  .unifyMetricGain {
    font-size: 8.5px !important;
    margin-top: 6px !important;
    padding-top: 4px !important;
  }
  .unifyMetricGain .gain-val b {
    font-size: 9px !important;
  }
  .unifyCore {
    width: 175px !important;
    min-width: 165px !important;
    min-height: 120px !important;
    padding: 14px 10px !important;
    border-radius: 18px !important;
  }

  /* Capability Cards Mobile */
  .capabilityGrid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .capabilityCard {
    padding: 22px 18px !important;
  }
  .capCardHeader {
    gap: 14px !important;
    margin-bottom: 12px !important;
  }
  .capCardHeader .capabilityIcon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    border-radius: 16px !important;
  }
  .capCardHeader h3 {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }

  /* Demo Grid Vertical Stack on Mobile */
  .demoGrid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .demoBottom {
    justify-content: center !important;
  }

  /* Screen Pinning / Sticky Locking for Content Blocks on Mobile */
  html.has-scroll-motion .moduleSection {
    height: 300vh !important;
  }
  html.has-scroll-motion .moduleSticky {
    height: 100vh !important;
    height: 100svh !important;
    position: sticky !important;
    top: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
  }
  html.has-scroll-motion .moduleViewport {
    height: 90vh !important;
    height: 90svh !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  html.has-scroll-motion .moduleTrack {
    display: flex !important;
    width: max-content !important;
    height: 100% !important;
  }
  html.has-scroll-motion .moduleTrack > .module {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100vw !important;
    flex: 0 0 100vw !important;
    height: 100% !important;
    padding: 16px 20px 32px !important;
    gap: 14px !important;
    box-sizing: border-box !important;
  }
  html.has-scroll-motion .moduleCopy {
    text-align: center !important;
  }
  html.has-scroll-motion .moduleCopy h2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
    line-height: 1.15 !important;
    margin: 6px 0 !important;
  }
  html.has-scroll-motion .moduleCopy p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 auto !important;
  }
  html.has-scroll-motion .moduleCopy .featureList {
    display: none !important;
  }
  html.has-scroll-motion .moduleVisual {
    height: 220px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  html.has-scroll-motion .moduleProgress {
    display: block !important;
    bottom: 12px !important;
  }
  html.has-scroll-motion .intelligenceSection {
    height: 280vh !important;
  }
  html.has-scroll-motion .intelligenceSticky {
    height: 100vh !important;
    height: 100svh !important;
    position: sticky !important;
    top: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  html.has-scroll-motion .intelligenceInner {
    display: flex !important;
    flex-direction: column !important;
    width: calc(100% - 32px) !important;
    height: auto !important;
    gap: 14px !important;
    text-align: center !important;
  }
  html.has-scroll-motion .intelligenceHeading {
    text-align: center !important;
  }
  html.has-scroll-motion .intelligenceHeading h2 {
    font-size: clamp(24px, 6.5vw, 30px) !important;
    margin: 6px 0 !important;
  }
  html.has-scroll-motion .intelligenceHeading p {
    font-size: 13px !important;
    margin: 0 auto !important;
  }
  html.has-scroll-motion .intelligenceDeck {
    height: 360px !important;
    position: relative !important;
    width: 100% !important;
  }
  html.has-scroll-motion .intelligenceCard {
    position: absolute !important;
    inset: 0 !important;
    padding: 20px !important;
    border-radius: 18px !important;
  }
  html.has-scroll-motion .intelligenceProgress {
    display: block !important;
  }
}