:root {
  --gradient-color-1: #ff7a45;
  --gradient-location-1: 0%;
  --gradient-color-2: #c05bd8;
  --gradient-location-2: 100%;

  --mint: #C3E3D2;
  --sand: #E3C693;
  --coral: #F28066;
  --pink: #E35796;
  --purple: #8F73C2;
  --brand-gradient: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  --brand-gradient-2: linear-gradient(90deg, #abd4dd 0%, #d7d4a6 15%, #f3b55c 30%, #f28b38 45%, #e8625f 60%, #c05fb1 75%, #7c5db4 90%, #5261a9 100%);
  --bg: #fffaf4;
  --text: #101014;
  --muted: #60636f;
  --line: rgba(16, 16, 20, .10);
  --card: rgba(255, 255, 255, .78);
  --shadow: 0 26px 80px rgba(17, 17, 18, .10);
  --radius: 30px;
  --max: 1240px;
}

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

html {
  scroll-behavior: auto
}

body {
  font-family: "DM Sans", system-ui, sans-serif;
  background: radial-gradient(circle at 8% 4%, rgba(195, 227, 210, .70), transparent 24%), radial-gradient(circle at 88% 3%, rgba(143, 115, 194, .25), transparent 25%), radial-gradient(circle at 50% 45%, rgba(242, 128, 102, .09), transparent 35%), var(--bg);
  color: var(--text);
  overflow-x: hidden
}

body.no-scroll {
  overflow: hidden
}

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

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

.container {
  width: min(100% - 32px, var(--max));
  margin: auto
}

.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

.mt-40 {
  margin-top: 40px
}

.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 0;
  background: var(--brand-gradient-2);
  z-index: 999
}

.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1000;
  border-radius: 50%
}

.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--coral)
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(242, 128, 102, .45);
  transition: .2s
}

.cursor-ring.hover {
  width: 62px;
  height: 62px;
  background: rgba(242, 128, 102, .1)
}

.mesh-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none
}

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  animation: orbFloat 10s ease-in-out infinite alternate
}

.orb.one {
  width: 360px;
  height: 360px;
  background: var(--mint);
  left: -80px;
  top: 80px
}

.orb.two {
  width: 440px;
  height: 440px;
  background: var(--pink);
  right: -120px;
  top: 180px;
  animation-delay: -2s
}

.orb.three {
  width: 360px;
  height: 360px;
  background: var(--sand);
  left: 42%;
  bottom: 4%;
  animation-delay: -4s
}

@keyframes orbFloat {
  to {
    transform: translate3d(40px, -45px, 0) scale(1.12)
  }
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 32px, var(--max));
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 20px 60px rgba(16, 16, 20, .08)
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px
}

.brand img {
  width: 158px;
  height: auto;
  display: block;
  object-fit: contain
}

.brand .fallback {
  display: none;
  font-weight: 900;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.nav {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 14px;
  font-weight: 900;
  color: #34343b
}

.nav a {
  transition: .25s
}

.nav a:hover,
.nav a.active {
  color: var(--coral)
}

.nav-cta {
  padding: 12px 20px;
  border-radius: 999px;
  background: #111;
  color: #fff !important;
  box-shadow: 0 12px 35px rgba(16, 16, 20, .15)
}

.menu-btn {
  display: none;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 0;
  color: #fff;
  background: #111;
  font-size: 18px;
  cursor: pointer
}

.floating-actions {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: grid;
  gap: 12px
}

.float-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #111;
  font-size: 22px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
  transition: .25s;
  background: var(--brand-gradient)
}

.whatsapp {
  background: #25D366;
  color: #fff
}

.float-btn:hover {
  transform: translateY(-5px) scale(1.04)
}

section {
  padding: 105px 0;
  position: relative
}

.hero {
  min-height: 100vh;
  padding: 168px 0 100px;
  display: flex;
  align-items: center
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 70px;
  align-items: center
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 12px 35px rgba(16, 16, 20, .05);
  color: #555762;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 28px
}

.eyebrow-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 7px rgba(242, 128, 102, .12)
}

h1,
h2,
h3,
h4 {
  font-family: "DM Sans", system-ui, sans-serif;
  letter-spacing: -.055em
}

h1 {
  font-size: clamp(48px, 7vw, 90px);
  line-height: .91;
  font-weight: 900
}

.hero p,
.page-hero p {
  margin-top: 28px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.75;
  max-width: 720px;
  font-weight: 600
}

.hero-actions {
  margin-top: 38px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap
}

.btn {
  border: 0;
  outline: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 25px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  transition: .28s
}

.btn-primary {
  background: var(--brand-gradient);
  color: #111;
  box-shadow: 0 18px 50px rgba(242, 128, 102, .24)
}

.btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(227, 87, 150, .27)
}

.btn-outline {
  background: rgba(255, 255, 255, .75);
  color: #111;
  border: 1px solid rgba(16, 16, 20, .12)
}

.btn-outline:hover {
  background: #111;
  color: #fff;
  transform: translateY(-4px)
}

.hero-badges {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.mini-badge,
.card,
.service-card,
.feature-card,
.project-card,
.stat-card,
.contact-card,
.form-card,
.price-card,
.keyword-card,
.dashboard-card,
.sticky-card,
.seo-planner,
.estimate-card {
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  border-radius: var(--radius);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07)
}

.mini-badge {
  padding: 18px
}

.mini-badge strong {
  display: block;
  margin-bottom: 6px
}

.mini-badge span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700
}

.showcase {
  min-height: 610px;
  position: relative;
  perspective: 1200px
}

.showcase-card {
  position: absolute;
  inset: 0;
  border-radius: 40px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  overflow: hidden;
  backdrop-filter: blur(18px);
  transform: rotateY(-8deg) rotateX(4deg) rotateZ(-1.2deg);
  transition: .4s
}

.showcase:hover .showcase-card {
  transform: rotateY(-3deg) rotateX(2deg) rotateZ(0)
}

.browser-top {
  height: 58px;
  background: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(16, 16, 20, .08);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9d4ca
}

.url {
  flex: 1;
  height: 32px;
  border-radius: 999px;
  background: #f0ece4;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #777;
  font-size: 12px;
  font-weight: 800;
  margin-left: 10px
}

.browser-body {
  padding: 28px
}

.mock-hero {
  height: 245px;
  border-radius: 30px;
  background: linear-gradient(rgba(0, 0, 0, .08), rgba(0, 0, 0, .18)), var(--brand-gradient-2);
  display: flex;
  align-items: end;
  padding: 30px;
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
  overflow: hidden;
  position: relative
}

.mock-hero:after {
  content: "";
  position: absolute;
  width: 270px;
  height: 270px;
  right: -80px;
  bottom: -110px;
  border-radius: 50%;
  border: 38px solid rgba(255, 255, 255, .35)
}

.mock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 18px
}

.mock-card {
  min-height: 155px;
  border-radius: 25px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 12px 32px rgba(16, 16, 20, .06);
  padding: 18px
}

.mock-icon {
  width: 45px;
  height: 45px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .8), rgba(242, 128, 102, .35), rgba(143, 115, 194, .35));
  margin-bottom: 22px
}

.mock-line {
  height: 11px;
  border-radius: 999px;
  background: #ece7df;
  margin-bottom: 11px
}

.mock-line.short {
  width: 58%
}

.floating-card {
  position: absolute;
  z-index: 2;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(16, 16, 20, .08);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 24px 64px rgba(16, 16, 20, .12);
  animation: floatY 4.5s ease-in-out infinite
}

.floating-card.one {
  width: 220px;
  right: -26px;
  top: 78px
}

.floating-card.two {
  width: 230px;
  left: -32px;
  bottom: 94px;
  animation-delay: -1.2s
}

.floating-card strong {
  display: block;
  font-size: 34px;
  letter-spacing: -.06em
}

.floating-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 7px;
  line-height: 1.45;
  font-weight: 700
}

@keyframes floatY {
  50% {
    transform: translateY(-16px)
  }
}

.ticker-section {
  padding: 34px 0;
  border-block: 1px solid rgba(16, 16, 20, .08);
  background: rgba(255, 255, 255, .48);
  overflow: hidden
}

.ticker-title {
  text-align: center;
  color: #777;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: 24px
}

.ticker {
  display: flex;
  width: max-content;
  gap: 44px;
  animation: tickerMove 34s linear infinite
}

.ticker span {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .03em;
  color: #b9b2a8;
  white-space: nowrap
}

@keyframes tickerMove {
  to {
    transform: translateX(-50%)
  }
}

.section-head {
  max-width: 850px;
  margin-bottom: 48px
}

.section-head.center {
  margin-inline: auto
}

.kicker {
  color: var(--coral);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 14px
}

.section-head h2 {
  font-size: clamp(36px, 5.5vw, 66px);
  line-height: .98;
  font-weight: 900
}

.section-head p {
  margin-top: 18px;
  color: var(--muted);
  line-height: 1.7;
  font-size: 17px;
  font-weight: 600
}

.page-hero {
  padding: 150px 0 70px
}

.hero-panel {
  padding: 58px;
  border-radius: 44px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden
}

.hero-panel:before {
  content: "";
  position: absolute;
  inset: auto -10% -70% -10%;
  height: 260px;
  background: var(--brand-gradient);
  opacity: .28;
  filter: blur(40px)
}

.hero-panel>* {
  position: relative
}

.breadcrumb {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #777;
  margin-bottom: 22px
}

.soft-section {
  background: rgba(255, 255, 255, .38);
  border-block: 1px solid rgba(16, 16, 20, .06)
}

.grid-3,
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.grid-4,
.feature-grid,
.keyword-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.card,
.service-card,
.feature-card,
.keyword-card {
  padding: 30px;
  transition: .3s;
  position: relative;
  overflow: hidden
}

.card:hover,
.service-card:hover,
.feature-card:hover,
.project-card:hover,
.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 85px rgba(16, 16, 20, .12)
}

.card h3,
.service-card h3,
.feature-card h3,
.project-card h3,
.keyword-card h3 {
  font-size: 27px;
  line-height: 1.1;
  margin-bottom: 12px
}

.card p,
.service-card p,
.feature-card p,
.project-card p,
.keyword-card p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 650
}

.service-card ul,
.price-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 900;
  color: #333
}

.service-card li:before,
.price-card li:before {
  content: "✓";
  color: var(--coral);
  margin-right: 8px
}

.num-box,
.icon-box {
  width: 60px;
  height: 60px;
  border-radius: 21px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 24px
}

.keyword-chip {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(242, 128, 102, .12);
  color: #b44932;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em
}

.split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 56px;
  align-items: center
}

.checklist {
  display: grid;
  gap: 14px
}

.check {
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(16, 16, 20, .08);
  font-weight: 850;
  box-shadow: 0 12px 32px rgba(16, 16, 20, .04)
}

.check:before {
  content: "✦";
  color: var(--coral);
  margin-right: 10px
}

.dashboard-card,
.sticky-card,
.seo-planner,
.estimate-card {
  padding: 34px;
  text-align: center
}

.dashboard-card h3,
.sticky-card h3,
.seo-planner h3,
.estimate-card h3 {
  font-size: 34px;
  margin-bottom: 18px
}

.score-ring {
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--coral), var(--pink), var(--purple), var(--mint));
  padding: 14px;
  margin: 20px auto;
  display: grid;
  place-items: center
}

.score-ring span {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -.07em
}

.dashboard-card p,
.sticky-card p,
.seo-planner p,
.estimate-card p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 650
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.stat-card {
  padding: 32px;
  text-align: center;
  position: relative;
  overflow: hidden
}

.stat-card:before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .55), rgba(242, 128, 102, .28), rgba(143, 115, 194, .26));
  filter: blur(30px)
}

.stat-number {
  position: relative;
  font-weight: 900;
  font-size: 52px;
  letter-spacing: -.07em;
  background: var(--brand-gradient);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text
}

.stat-card p {
  position: relative;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.45;
  font-weight: 900
}

.growth-panel {
  border-radius: 38px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  overflow: hidden
}

.growth-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px;
  border-bottom: 1px solid rgba(16, 16, 20, .08)
}

.growth-top h3 {
  font-size: 25px
}

.growth-status {
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(195, 227, 210, .6);
  color: #246245;
  font-size: 12px;
  font-weight: 900
}

.growth-body {
  padding: 30px
}

.bar-group {
  margin-bottom: 24px
}

.bar-label {
  display: flex;
  justify-content: space-between;
  color: #45464e;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  margin-bottom: 9px
}

.bar {
  height: 12px;
  background: #eee8de;
  border-radius: 999px;
  overflow: hidden
}

.bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-gradient);
  transition: width 1.6s cubic-bezier(.16, 1, .3, 1)
}

.visible .bar span,
.growth-panel.visible .bar span {
  width: var(--w)
}

.portfolio-toolbar {
  display: grid;
  gap: 18px;
  margin-bottom: 34px
}

.portfolio-filters {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap
}

.filter-btn {
  border: 1px solid rgba(16, 16, 20, .11);
  background: rgba(255, 255, 255, .75);
  border-radius: 999px;
  padding: 12px 18px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: .25s
}

.filter-btn.active,
.filter-btn:hover {
  background: #111;
  color: #fff;
  transform: translateY(-3px)
}

.portfolio-search {
  width: min(100%, 560px);
  margin: auto;
  display: block;
  border: 1px solid rgba(16, 16, 20, .10);
  background: #fff;
  border-radius: 999px;
  padding: 16px 20px;
  font-family: inherit;
  font-size: 15px;
  outline: none
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.project-card {
  overflow: hidden;
  transition: .32s
}

.project-card.hide {
  display: none
}

.project-img {
  height: 240px;
  background: var(--brand-gradient);
  overflow: hidden
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .55s
}

.project-card:hover .project-img img {
  transform: scale(1.08)
}

.project-content {
  padding: 24px
}

.project-tag {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(242, 128, 102, .12);
  color: #b44932;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 14px
}

.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid rgba(16, 16, 20, .08);
  padding-top: 16px;
  color: #3a3a40;
  font-weight: 900;
  font-size: 13px;
  margin-top: 16px
}

.project-btn {
  margin-top: 18px;
  width: 100%
}

.industry-cloud,
.keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

.industry-cloud {
  justify-content: center
}

.industry-cloud span,
.keyword-cloud span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 10px 28px rgba(16, 16, 20, .04)
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 16, 20, .48);
  backdrop-filter: blur(18px);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px
}

.modal.active {
  display: flex
}

.modal-box {
  width: min(100%, 800px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 34px;
  padding: 34px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .25);
  position: relative;
  animation: modalIn .34s
}

.modal-close {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f2eee7;
  font-size: 22px;
  cursor: pointer
}

.modal-project-img {
  height: 300px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px
}

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

.modal-box h3 {
  font-size: 38px;
  margin: 12px 0
}

.modal-box p {
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650;
  margin-bottom: 18px
}

.modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0
}

.modal-grid div {
  padding: 16px;
  border-radius: 20px;
  background: #f8f4ee
}

.modal-grid strong {
  display: block;
  margin-bottom: 6px
}

.modal-grid span {
  color: var(--muted);
  font-weight: 650;
  font-size: 14px
}

@keyframes modalIn {
  from {
    transform: translateY(20px) scale(.96);
    opacity: 0
  }
}

.timeline {
  display: grid;
  gap: 18px
}

.timeline-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .74);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 16px 44px rgba(16, 16, 20, .06)
}

.timeline-num {
  width: 62px;
  height: 62px;
  border-radius: 21px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  font-weight: 900
}

.timeline-item h3 {
  font-size: 25px;
  margin-bottom: 8px
}

.timeline-item p {
  color: var(--muted);
  line-height: 1.6;
  font-weight: 650
}

.sticky-card {
  position: sticky;
  top: 120px
}

.progress-list {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  text-align: left;
  background: #fff;
  border-radius: 24px;
  padding: 20px;
  margin: 18px 0
}

.progress-list span {
  font-weight: 900
}

.progress-list b {
  color: var(--coral)
}

.launch-checklist,
.feature-toggle-list,
.addon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center
}

.launch-checklist button,
.feature-toggle-list button,
.addon-list button {
  border: 1px solid rgba(16, 16, 20, .10);
  background: #fff;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  transition: .25s
}

.launch-checklist button.active,
.feature-toggle-list button.active,
.addon-list button.active {
  background: #111;
  color: #fff;
  transform: translateY(-3px)
}

.readiness {
  text-align: center;
  margin-top: 26px
}

.readiness span {
  font-size: 56px;
  font-weight: 900;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  color: transparent
}

.readiness p {
  font-weight: 900;
  color: var(--muted)
}

.matrix {
  overflow: auto;
  background: rgba(255, 255, 255, .78);
  border-radius: 28px;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 54px rgba(16, 16, 20, .07)
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px
}

th,
td {
  padding: 18px;
  text-align: left;
  border-bottom: 1px solid rgba(16, 16, 20, .08)
}

th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #555
}

td {
  color: #363740;
  font-weight: 700
}

.feature-toggle-list {
  justify-content: flex-start
}

.keyword-grid {
  grid-template-columns: repeat(2, 1fr)
}

.keyword-card h3 {
  font-size: 25px
}

.seo-planner select {
  width: 100%;
  border: 1px solid rgba(16, 16, 20, .10);
  border-radius: 18px;
  padding: 16px;
  margin: 18px 0;
  font-family: inherit;
  font-weight: 800
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.price-card {
  padding: 32px;
  position: relative;
  overflow: hidden
}

.price-card.featured {
  background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
  transform: translateY(-10px)
}

.price-card h3 {
  font-size: 30px;
  margin-bottom: 16px
}

.price {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -.06em
}

.price small {
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: 0
}

.price-card p {
  margin: 12px 0 24px;
  color: var(--muted);
  line-height: 1.6;
  font-weight: 650
}

.badge {
  position: absolute;
  right: 22px;
  top: 22px;
  border-radius: 999px;
  padding: 8px 12px;
  background: var(--brand-gradient);
  font-size: 12px;
  font-weight: 900
}

.estimate-card .price {
  font-size: 62px;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  color: transparent
}

.faq-wrap {
  max-width: 930px;
  margin: 0 auto;
  display: grid;
  gap: 14px
}

.faq-item {
  border-radius: 24px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .05);
  overflow: hidden
}

.faq-question {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  color: #111
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: .3s
}

.faq-answer p {
  padding: 0 24px 24px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650
}

.faq-item.active .faq-answer {
  max-height: 260px
}

.faq-item.active .faq-question span {
  transform: rotate(45deg)
}

.contact-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px
}

.contact-card,
.form-card {
  padding: 32px
}

.contact-card h3 {
  font-size: 38px;
  margin-bottom: 13px
}

.contact-card p {
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650;
  margin-bottom: 24px
}

.contact-detail {
  padding: 17px 0;
  border-top: 1px solid rgba(16, 16, 20, .08);
  font-weight: 900
}

.form-card {
  display: grid;
  gap: 14px
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

input,
textarea,
select {
  width: 100%;
  border: 1px solid rgba(16, 16, 20, .10);
  background: #fff;
  color: #111;
  border-radius: 18px;
  padding: 16px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: .22s
}

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

input:focus,
textarea:focus,
select:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 4px rgba(242, 128, 102, .13)
}

.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1)
}

.reveal {
  transform: translateY(44px) scale(.98)
}

.reveal-left {
  transform: translateX(-55px)
}

.reveal-right {
  transform: translateX(55px)
}

.visible {
  opacity: 1;
  transform: translate(0) scale(1)
}

footer {
  background: #101014;
  color: #ddd;
  padding: 72px 0 30px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr .8fr .9fr;
  gap: 42px;
  margin-bottom: 46px
}

.footer-logo img {
  width: 132px;
  margin-bottom: 16px
}

footer p {
  color: #aaa;
  line-height: 1.65;
  font-size: 14px
}

footer h4 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 18px
}

footer ul {
  list-style: none;
  display: grid;
  gap: 12px;
  color: #aaa;
  font-size: 14px
}

footer a:hover {
  color: var(--coral)
}

.footer-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px
}

.footer-pills span {
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px 10px;
  border-radius: 999px;
  color: #aaa;
  font-size: 12px
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  color: #888;
  font-size: 14px
}

@media(max-width:1060px) {

  .hero-grid,
  .split,
  .contact-grid {
    grid-template-columns: 1fr
  }

  .services-grid,
  .portfolio-grid,
  .pricing-grid,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr)
  }

  .grid-4,
  .feature-grid,
  .stats-grid,
  .footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .showcase {
    min-height: 560px
  }

  .price-card.featured {
    transform: none
  }

  .sticky-card {
    position: relative;
    top: 0
  }

  .keyword-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:760px) {

  .cursor-dot,
  .cursor-ring {
    display: none
  }

  .site-header {
    border-radius: 24px
  }

  .menu-btn {
    display: grid;
    place-items: center
  }

  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(16, 16, 20, .08);
    box-shadow: 0 20px 60px rgba(16, 16, 20, .12)
  }

  .nav.active {
    display: flex
  }

  .nav-cta {
    text-align: center
  }

  .hero {
    padding-top: 138px
  }

  .hero-badges,
  .services-grid,
  .portfolio-grid,
  .pricing-grid,
  .grid-3,
  .grid-4,
  .feature-grid,
  .stats-grid,
  .form-row,
  .footer-grid,
  .modal-grid {
    grid-template-columns: 1fr
  }

  .showcase {
    min-height: 490px
  }

  .showcase-card {
    transform: none
  }

  .floating-card {
    display: none
  }

  section {
    padding: 78px 0
  }

  .page-hero {
    padding-top: 128px
  }

  .hero-panel {
    padding: 32px;
    border-radius: 32px
  }

  .project-img {
    height: 240px
  }

  h1 {
    font-size: 43px
  }

  .section-head h2 {
    font-size: 36px
  }

  .btn {
    width: 100%
  }

  .browser-top .url {
    display: none
  }

  .floating-actions {
    right: 14px;
    bottom: 14px
  }

  .brand img {
    width: 132px
  }

  .timeline-item {
    grid-template-columns: 1fr
  }

  .modal-project-img {
    height: 220px
  }
}

/* ===== V3 EMPTY-SPACE FIX: dense interactive panels + live display animation ===== */
section {
  padding: 86px 0
}

.page-hero {
  padding: 138px 0 56px
}

.split {
  align-items: start
}

.right-stack {
  display: grid;
  gap: 18px;
  align-content: start
}

.right-stack.reveal-right {
  transition: opacity .75s ease, transform .75s cubic-bezier(.16, 1, .3, 1)
}

.growth-panel,
.dashboard-card,
.sticky-card,
.seo-planner,
.estimate-card {
  height: auto
}

.density-section {
  padding-top: 54px
}

.live-panel,
.preview-panel,
.portfolio-mini,
.serp-preview,
.roi-preview,
.sprint-board,
.feature-radar {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07)
}

.live-panel:before,
.preview-panel:before,
.serp-preview:before,
.roi-preview:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(242, 128, 102, .09), rgba(227, 87, 150, .08), transparent);
  transform: translateX(-100%);
  animation: panelScan 4.8s linear infinite;
  pointer-events: none
}

.live-panel>* {
  position: relative
}

.live-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px
}

.live-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 950;
  letter-spacing: -.03em
}

.live-title b {
  font-size: 20px
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 0 rgba(242, 128, 102, .45);
  animation: pulseDot 1.4s infinite
}

.live-time {
  font-size: 12px;
  font-weight: 950;
  color: #5d606b;
  padding: 8px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08)
}

.live-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px
}

.live-metric {
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07)
}

.live-metric span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 950;
  margin-bottom: 7px
}

.live-metric strong {
  font-size: 26px;
  letter-spacing: -.06em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.flow-list {
  display: grid;
  gap: 10px
}

.flow-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07);
  transition: .35s
}

.flow-row i {
  width: 28px;
  height: 28px;
  border-radius: 11px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  font-style: normal;
  font-weight: 950;
  color: #111;
  font-size: 12px
}

.flow-row span {
  font-weight: 900;
  color: #24242b
}

.flow-row small {
  color: var(--muted);
  font-weight: 900
}

.flow-row.is-active {
  border-color: rgba(242, 128, 102, .38);
  transform: translateX(4px);
  box-shadow: 0 14px 34px rgba(242, 128, 102, .12)
}

.mini-terminal {
  background: #101014;
  color: #fff;
  border-radius: 24px;
  padding: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08)
}

.mini-terminal .term-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 0;
  color: #d8d8df;
  font-size: 13px
}

.mini-terminal .term-line:last-child {
  border-bottom: 0
}

.term-good {
  color: #96f2c2;
  font-weight: 900
}

.term-warn {
  color: #ffd98a;
  font-weight: 900
}

.portfolio-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}

.portfolio-mini h3 {
  grid-column: 1/-1;
  font-size: 24px;
  margin-bottom: 2px
}

.portfolio-mini p {
  grid-column: 1/-1;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
  margin-bottom: 4px
}

.mini-shot {
  height: 112px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(16, 16, 20, .08)
}

.mini-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .45s
}

.mini-shot:hover img {
  transform: scale(1.08)
}

.mini-shot span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900
}

.serp-preview {
  display: grid;
  gap: 12px;
  text-align: left
}

.serp-preview h3,
.roi-preview h3,
.sprint-board h3,
.feature-radar h3 {
  font-size: 24px;
  margin-bottom: 2px
}

.serp-card {
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07)
}

.serp-card small {
  display: block;
  color: #228c62;
  font-weight: 850;
  margin-bottom: 7px
}

.serp-card strong {
  display: block;
  font-size: 17px;
  color: #1a0dab;
  margin-bottom: 6px
}

.serp-card p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  font-weight: 650
}

.roi-preview {
  display: grid;
  gap: 14px
}

.roi-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07);
  font-weight: 900
}

.roi-row b {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  color: transparent;
  font-size: 22px
}

.sprint-board {
  display: grid;
  gap: 12px
}

.sprint-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07)
}

.sprint-step span {
  font-weight: 900
}

.sprint-step em {
  font-style: normal;
  font-size: 12px;
  font-weight: 950;
  color: #4b4e56;
  background: #f4efe8;
  padding: 7px 9px;
  border-radius: 999px
}

.sprint-step:nth-child(2n) em {
  background: rgba(195, 227, 210, .55);
  color: #246245
}

.feature-radar {
  text-align: left
}

.radar-wrap {
  height: 230px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(195, 227, 210, .5) 0 2px, transparent 3px), radial-gradient(circle at center, transparent 0 24%, rgba(242, 128, 102, .14) 25% 26%, transparent 27% 49%, rgba(143, 115, 194, .16) 50% 51%, transparent 52%);
  background-size: 20px 20px, 100% 100%;
  position: relative;
  overflow: hidden
}

.radar-wrap:before {
  content: "";
  position: absolute;
  inset: 50% 0 0 50%;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, rgba(242, 128, 102, .85), transparent);
  transform-origin: left center;
  animation: radarSweep 3s linear infinite
}

.radar-pill {
  position: absolute;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 12px 28px rgba(16, 16, 20, .08)
}

.radar-pill.one {
  left: 18px;
  top: 26px
}

.radar-pill.two {
  right: 16px;
  top: 72px
}

.radar-pill.three {
  left: 72px;
  bottom: 24px
}

.live-wall {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 22px;
  align-items: stretch
}

.live-wall .preview-panel {
  min-height: 100%;
  display: grid;
  align-content: center
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.workflow-card {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .05);
  transition: .3s
}

.workflow-card:hover {
  transform: translateY(-8px)
}

.workflow-card b {
  display: block;
  font-size: 24px;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  color: transparent
}

.workflow-card span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  margin-top: 6px
}

.dense-portfolio-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 28px
}

.dense-portfolio-strip a {
  height: 140px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(16, 16, 20, .08);
  position: relative
}

.dense-portfolio-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s
}

.dense-portfolio-strip a:hover img {
  transform: scale(1.08)
}

.dense-portfolio-strip span {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-align: center
}

@keyframes panelScan {
  to {
    transform: translateX(100%)
  }
}

@keyframes pulseDot {
  70% {
    box-shadow: 0 0 0 12px rgba(242, 128, 102, 0)
  }
}

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

@media(max-width:1060px) {
  .live-wall {
    grid-template-columns: 1fr
  }

  .workflow-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .dense-portfolio-strip {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:760px) {
  section {
    padding: 70px 0
  }

  .page-hero {
    padding: 128px 0 42px
  }

  .live-grid,
  .portfolio-mini,
  .workflow-grid,
  .dense-portfolio-strip {
    grid-template-columns: 1fr
  }

  .mini-shot {
    height: 180px
  }

  .radar-wrap {
    height: 210px
  }
}


/* =========================================================
   Fluxo Homepage Interactive V4 Additions
   Purpose: replace static/dead homepage areas with useful interactivity
   ========================================================= */
.interactive-hero {
  overflow: hidden
}

.hero-bg-drift {
  position: absolute;
  inset: 100px 0 auto 0;
  height: 480px;
  pointer-events: none;
  z-index: -1;
  overflow: hidden
}

.hero-bg-drift span {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 40px;
  background: var(--brand-gradient);
  opacity: .12;
  filter: blur(2px);
  animation: driftShape 12s ease-in-out infinite alternate
}

.hero-bg-drift span:nth-child(1) {
  left: 7%;
  top: 18%;
  transform: rotate(12deg)
}

.hero-bg-drift span:nth-child(2) {
  right: 15%;
  top: 2%;
  width: 90px;
  height: 90px;
  animation-delay: -4s
}

.hero-bg-drift span:nth-child(3) {
  left: 48%;
  bottom: 5%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  animation-delay: -7s
}

@keyframes driftShape {
  to {
    transform: translate3d(28px, -22px, 0) rotate(35deg) scale(1.12)
  }
}

.float-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.float-btn {
  animation: floatPulse 2.6s ease-in-out infinite
}

.float-btn:hover {
  animation: floatBounce .55s ease;
  transform: translateY(-7px) scale(1.08)
}

@keyframes floatPulse {
  50% {
    box-shadow: 0 18px 45px rgba(242, 128, 102, .26)
  }
}

@keyframes floatBounce {
  45% {
    transform: translateY(-11px) scale(1.1)
  }

  75% {
    transform: translateY(-4px) scale(1.04)
  }
}

.live-preview-card {
  height: 330px;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  background: #111
}

.live-preview-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .35s ease, transform .8s ease
}

.interactive-browser:hover .live-preview-card img {
  transform: scale(1.04)
}

.preview-overlay {
  position: absolute;
  inset: auto 22px 22px 22px;
  padding: 22px;
  border-radius: 24px;
  color: #fff;
  background: linear-gradient(135deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .28));
  backdrop-filter: blur(10px)
}

.preview-overlay span {
  display: inline-flex;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 10px
}

.preview-overlay h3 {
  font-size: 32px;
  letter-spacing: -.06em
}

.preview-overlay p {
  margin-top: 7px;
  color: rgba(255, 255, 255, .86);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750
}

.preview-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0
}

.preview-tab {
  border: 1px solid rgba(16, 16, 20, .1);
  border-radius: 999px;
  padding: 9px 12px;
  background: #fff;
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
  transition: .25s
}

.preview-tab.active,
.preview-tab:hover {
  background: #111;
  color: #fff;
  transform: translateY(-2px)
}

.keyword-terminal {
  margin-top: 12px
}

.hover-explain {
  position: relative;
  overflow: hidden
}

.hover-explain em {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: #33343b;
  opacity: 0;
  transform: translateY(8px);
  transition: .25s;
  font-size: 12px;
  font-weight: 900
}

.hover-explain:hover em {
  opacity: 1;
  transform: translateY(0)
}

.scroll-bridge {
  padding: 12px 0 42px
}

.bridge-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: center
}

.bridge-line {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--coral), var(--pink), var(--purple), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: 1.2s cubic-bezier(.16, 1, .3, 1)
}

.bridge-wrap.visible .bridge-line {
  transform: scaleX(1)
}

.bridge-node {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .06);
  text-align: center;
  transition: .28s
}

.bridge-node:hover {
  transform: translateY(-7px)
}

.bridge-node b {
  display: block;
  font-size: 18px;
  letter-spacing: -.05em
}

.bridge-node span {
  display: block;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  margin-top: 5px
}

.compact-section {
  padding-top: 78px
}

.build-cards .card {
  min-height: 245px
}

.animated-connector {
  position: relative;
  margin: 36px auto 0;
  max-width: 960px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .13em
}

.animated-connector svg {
  width: 100%;
  height: 78px;
  display: block
}

.animated-connector path {
  fill: none;
  stroke: url(#none);
  stroke: var(--coral);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 12px 18px rgba(242, 128, 102, .18));
  transition: 1.4s cubic-bezier(.16, 1, .3, 1)
}

.animated-connector.visible path {
  stroke-dashoffset: 0
}

.keyword-planner-section {
  padding-top: 86px;
  padding-bottom: 86px
}

.planner-controls {
  display: grid;
  gap: 14px;
  max-width: 580px
}

.planner-controls label {
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #747680
}

.planner-output {
  padding: 28px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  min-height: 420px
}

.planner-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px
}

.planner-head h3 {
  font-size: 30px
}

.intent-group {
  margin-top: 18px
}

.intent-group h4 {
  font-size: 15px;
  letter-spacing: -.02em;
  margin-bottom: 10px;
  color: #3a3b42
}

.planner-keyword {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07);
  margin-bottom: 9px;
  animation: keywordIn .35s ease both
}

.planner-keyword span {
  font-weight: 900;
  color: #25262d
}

.difficulty-bar {
  height: 9px;
  border-radius: 999px;
  background: #eee8de;
  overflow: hidden
}

.difficulty-bar b {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand-gradient);
  width: var(--op)
}

.planner-cta {
  margin-top: 22px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .45), rgba(242, 128, 102, .18), rgba(143, 115, 194, .16));
  font-weight: 850;
  color: #34343a
}

.copy-note {
  font-size: 12px;
  font-weight: 900;
  color: #228c62;
  opacity: 0;
  transition: .25s
}

.copy-note.show {
  opacity: 1
}

@keyframes keywordIn {
  from {
    opacity: 0;
    transform: translateY(12px)
  }

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

.dual-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.tool-card {
  padding: 34px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07);
  overflow: hidden;
  position: relative
}

.tool-card h2 {
  font-size: 34px;
  line-height: 1.05;
  margin-bottom: 14px
}

.tool-card p {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.6
}

.quiz-step {
  display: none;
  margin-top: 22px
}

.quiz-step.active {
  display: block;
  animation: keywordIn .3s ease
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px
}

.quiz-options button,
.interactive-checklist .check {
  border: 1px solid rgba(16, 16, 20, .08);
  background: #fff;
  border-radius: 18px;
  padding: 14px;
  text-align: left;
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
  transition: .25s
}

.quiz-options button:hover,
.interactive-checklist .check:hover,
.interactive-checklist .check.active {
  transform: translateY(-3px);
  border-color: rgba(242, 128, 102, .35);
  box-shadow: 0 12px 28px rgba(242, 128, 102, .1)
}

.quiz-result {
  margin-top: 20px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(195, 227, 210, .36);
  border: 1px solid rgba(16, 16, 20, .08)
}

.quiz-result h3 {
  font-size: 22px;
  margin-bottom: 7px
}

.audit-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 18px
}

.audit-bars {
  display: grid;
  gap: 12px;
  margin-top: 20px
}

.audit-row {
  display: grid;
  grid-template-columns: 80px 1fr 48px;
  gap: 10px;
  align-items: center;
  font-weight: 900
}

.audit-row b {
  height: 12px;
  border-radius: 999px;
  background: var(--brand-gradient);
  width: var(--w);
  transition: 1s cubic-bezier(.16, 1, .3, 1)
}

.audit-row em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px
}

.audit-cta {
  display: inline-flex;
  margin-top: 18px;
  font-weight: 950;
  color: #111;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: .45;
  transition: .25s
}

.audit-cta.ready {
  opacity: 1;
  color: var(--coral)
}

.growth-split {
  align-items: center
}

.interactive-checklist {
  display: grid;
  gap: 12px
}

.interactive-checklist .check.active:before {
  content: '✓ ';
  color: var(--coral)
}

.interactive-dashboard {
  overflow: visible
}

.score-orbit {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 20px auto;
  display: grid;
  place-items: center
}

.score-orbit .score-ring {
  margin: 0;
  position: relative;
  z-index: 2
}

.score-orbit i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 8px rgba(242, 128, 102, .1);
  animation: orbit 6s linear infinite
}

.score-orbit i:nth-child(3) {
  animation-duration: 8s;
  background: var(--pink)
}

.score-orbit i:nth-child(4) {
  animation-duration: 10s;
  background: var(--purple)
}

.score-orbit i:nth-child(5) {
  animation-duration: 12s;
  background: var(--mint)
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(116px) rotate(0deg)
  }

  to {
    transform: rotate(360deg) translateX(116px) rotate(-360deg)
  }
}

.growth-loop {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 18px
}

.growth-loop span {
  padding: 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07);
  text-align: center;
  font-size: 12px;
  font-weight: 950;
  transition: .25s
}

.interactive-dashboard:hover .growth-loop span:nth-child(1) {
  background: rgba(195, 227, 210, .45)
}

.interactive-dashboard:hover .growth-loop span:nth-child(2) {
  background: rgba(227, 198, 147, .45)
}

.interactive-dashboard:hover .growth-loop span:nth-child(3) {
  background: rgba(242, 128, 102, .22)
}

.interactive-dashboard:hover .growth-loop span:nth-child(4) {
  background: rgba(143, 115, 194, .22)
}

.comparison-section {
  padding-top: 80px
}

.comparison-slider {
  height: 380px;
  border-radius: 36px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow);
  border: 1px solid rgba(16, 16, 20, .08);
  background: #fff
}

.compare-base,
.compare-top {
  position: absolute;
  inset: 0;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: end
}

.compare-base {
  background: linear-gradient(135deg, #f4efe8, #e9e3da);
  color: #111
}

.compare-top {
  background: var(--brand-gradient-2);
  color: #fff;
  clip-path: inset(0 50% 0 0);
  transition: clip-path .08s linear
}

.compare-base strong,
.compare-top strong {
  font-size: 36px;
  letter-spacing: -.06em
}

.compare-base span,
.compare-top span {
  margin-top: 8px;
  font-weight: 850
}

.comparison-slider input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  box-shadow: 0 0 0 999px transparent;
  pointer-events: none
}

.compare-handle:after {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 950;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .2)
}

.interactive-stats .stat-card {
  cursor: help
}

.stat-detail {
  position: relative;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  color: #45464e;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 750;
  transition: .3s
}

.stat-card:hover .stat-detail {
  max-height: 120px;
  opacity: 1;
  margin-top: 14px
}

.home-project-card .project-img {
  height: 260px
}

.hover-preview {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  transform: translateY(20px);
  opacity: 0;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  padding: 13px 14px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  transition: .3s;
  z-index: 2
}

.home-project-card:hover .hover-preview {
  opacity: 1;
  transform: translateY(0)
}

.home-project-card.is-filtered-out {
  display: none
}

.faq-section {
  padding-top: 84px
}

.faq-question span {
  transition: .25s
}

.faq-item.active .faq-question span {
  transform: rotate(45deg)
}

.industry-hook {
  margin: 18px 0;
  padding: 16px;
  border-radius: 20px;
  background: rgba(195, 227, 210, .35);
  color: #30313a;
  font-weight: 750;
  line-height: 1.55
}

.project-btn {
  width: 100%
}

.animated-footer {
  position: relative;
  overflow: hidden
}

.footer-mesh {
  position: absolute;
  inset: 0;
  opacity: .24;
  background: radial-gradient(circle at 10% 10%, var(--mint), transparent 26%), radial-gradient(circle at 80% 25%, var(--pink), transparent 28%), radial-gradient(circle at 50% 90%, var(--purple), transparent 30%);
  filter: blur(26px);
  animation: footerMesh 12s ease-in-out infinite alternate
}

.animated-footer .container {
  position: relative
}

.footer-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.footer-keyword-cloud a {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #ddd;
  font-size: 12px;
  font-weight: 900;
  transition: .25s
}

.footer-keyword-cloud a:hover {
  background: var(--brand-gradient);
  color: #111;
  transform: translateY(-3px)
}

@keyframes footerMesh {
  to {
    transform: translate3d(30px, -20px, 0) scale(1.08)
  }
}

.magnetic-btn {
  will-change: transform
}

.portfolio-section {
  background: rgba(255, 255, 255, .28)
}

@media(max-width:1060px) {
  .dual-tools {
    grid-template-columns: 1fr
  }

  .planner-output {
    min-height: auto
  }

  .bridge-wrap {
    grid-template-columns: repeat(2, 1fr)
  }

  .bridge-line {
    display: none
  }

  .audit-form {
    grid-template-columns: 1fr
  }

  .comparison-slider {
    height: 320px
  }
}

@media(max-width:760px) {
  .live-preview-card {
    height: 250px
  }

  .preview-overlay h3 {
    font-size: 26px
  }

  .preview-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .bridge-wrap,
  .quiz-options,
  .growth-loop {
    grid-template-columns: 1fr
  }

  .planner-head {
    display: block
  }

  .planner-keyword {
    grid-template-columns: 1fr
  }

  .comparison-slider {
    height: 300px
  }

  .audit-row {
    grid-template-columns: 1fr
  }

  .score-orbit {
    width: 210px;
    height: 210px
  }

  .score-orbit i {
    display: none
  }

  .home-project-card .project-img {
    height: 230px
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important
  }

  .cursor-dot,
  .cursor-ring {
    display: none
  }

  .bridge-line,
  .animated-connector path {
    transition: none;
    transform: none;
    stroke-dashoffset: 0
  }

  .compare-top {
    transition: none
  }
}


/* Footer Mega Fluxo Logo — large award-site style footer brand mark */
.footer-with-mega-logo {
  position: relative;
  overflow: hidden;
  padding-bottom: 0;
}

.footer-with-mega-logo::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 170px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
  pointer-events: none;
}

.footer-mega-logo {
  position: relative;
  z-index: 1;
  height: 245px;
  margin-top: 22px;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.footer-mega-logo::before {
  content: "";
  position: absolute;
  inset: 20% 12% auto 12%;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 40%, rgba(227, 87, 150, .28), transparent 36%), radial-gradient(circle at 70% 45%, rgba(143, 115, 194, .32), transparent 40%);
  filter: blur(34px);
  opacity: .88;
  animation: footerLogoGlow 8s ease-in-out infinite alternate;
}

.footer-mega-logo span {
  position: relative;
  display: block;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(118px, 24vw, 355px);
  font-weight: 900;
  letter-spacing: -.105em;
  line-height: .78;
  background: linear-gradient(90deg, #df8bac 0%, #c76cc8 48%, #8f39ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 80px rgba(143, 57, 239, .26);
  transform: translateY(34px);
  animation: footerLogoFloat 7s cubic-bezier(.16, 1, .3, 1) infinite alternate;
}

.footer-mega-logo span::after {
  content: "Fluxo";
  position: absolute;
  inset: 0;
  transform: translate(10px, 12px);
  background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .01));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  z-index: -1;
}

@keyframes footerLogoFloat {
  from {
    transform: translateY(42px) scale(1);
  }

  to {
    transform: translateY(22px) scale(1.018);
  }
}

@keyframes footerLogoGlow {
  from {
    transform: translateX(-32px) scale(.95);
    opacity: .58;
  }

  to {
    transform: translateX(32px) scale(1.08);
    opacity: .95;
  }
}

@media(max-width:760px) {
  .footer-mega-logo {
    height: 155px;
    margin-top: 12px
  }

  .footer-mega-logo span {
    font-size: clamp(88px, 30vw, 160px);
    transform: translateY(28px)
  }

  .footer-with-mega-logo::after {
    bottom: 110px
  }
}

@media(prefers-reduced-motion:reduce) {

  .footer-mega-logo span,
  .footer-mega-logo::before {
    animation: none !important
  }
}


/* =========================================================
   Fluxo V6 Multi-Page Interaction Additions
   Services tracker, process timeline, feature tabs, SEO planner,
   portfolio hover preview, pricing comparison, no-empty-space panels
   ========================================================= */
.float-btn svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round
}

.float-btn:hover {
  animation: floatPulse .65s ease
}

.whatsapp:hover {
  animation: whatsappBounce .7s ease
}

@keyframes floatPulse {
  50% {
    transform: translateY(-7px) scale(1.12)
  }
}

@keyframes whatsappBounce {

  0%,
  100% {
    transform: translateY(0)
  }

  35% {
    transform: translateY(-9px) scale(1.09)
  }

  70% {
    transform: translateY(-3px) scale(.98)
  }
}

.proof-section {
  padding-top: 70px
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px
}

.proof-shot {
  position: relative;
  min-height: 170px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 52px rgba(16, 16, 20, .08);
  border: 1px solid rgba(16, 16, 20, .08)
}

.proof-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .55s cubic-bezier(.16, 1, .3, 1)
}

.proof-shot:hover img {
  transform: scale(1.055)
}

.proof-shot span {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(14px);
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(16, 16, 20, .12)
}

.proof-shot span b {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
  letter-spacing: 0
}

.smart-split {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: 58px;
  align-items: start
}

.sticky-sidebar {
  position: sticky;
  top: 120px;
  align-self: start
}

.deliverable-list {
  display: grid;
  gap: 14px
}

.deliverable-row {
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: block;
  border: 0;
  font: inherit
}

.deliverable-row span {
  display: block;
  font-size: 18px;
  font-weight: 900
}

.deliverable-row em {
  display: inline-block;
  margin-top: 8px;
  font-style: normal;
  color: var(--coral);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 900
}

.deliverable-row p {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  color: var(--muted);
  line-height: 1.65;
  font-weight: 650;
  transition: max-height .35s ease, opacity .28s ease, margin .28s ease
}

.deliverable-row.active p {
  max-height: 140px;
  opacity: 1;
  margin-top: 12px
}

.service-progress-panel {
  position: relative;
  overflow: hidden
}

.scroll-tracker {
  position: relative;
  display: grid;
  gap: 12px;
  margin-bottom: 28px
}

.scroll-tracker::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(var(--coral), var(--purple));
  opacity: .18
}

.tracker-node {
  position: relative;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(16, 16, 20, .06);
  transition: .32s
}

.tracker-node i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eee8de;
  color: #555;
  font-style: normal;
  font-weight: 900;
  transition: .32s
}

.tracker-node span {
  font-weight: 900;
  color: #656774
}

.tracker-node.active {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 16px 42px rgba(16, 16, 20, .10);
  transform: translateX(6px)
}

.tracker-node.active i {
  background: var(--brand-gradient);
  color: #111;
  box-shadow: 0 0 0 8px rgba(242, 128, 102, .11)
}

.tracker-node.active span {
  color: #111
}

.ambient-dots {
  position: relative;
  height: 90px;
  margin-top: 18px;
  border-radius: 24px;
  background: radial-gradient(circle at 18% 40%, rgba(195, 227, 210, .42), transparent 30%), radial-gradient(circle at 80% 55%, rgba(227, 87, 150, .30), transparent 35%), rgba(255, 255, 255, .38);
  overflow: hidden
}

.ambient-dots span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 8px rgba(242, 128, 102, .12);
  animation: dotDrift 4.8s ease-in-out infinite
}

.ambient-dots span:nth-child(1) {
  left: 18%;
  top: 42%
}

.ambient-dots span:nth-child(2) {
  left: 55%;
  top: 25%;
  animation-delay: -1.6s;
  background: var(--purple)
}

.ambient-dots span:nth-child(3) {
  left: 78%;
  top: 62%;
  animation-delay: -3.2s;
  background: var(--sand)
}

@keyframes dotDrift {
  50% {
    transform: translate(24px, -18px) scale(1.25)
  }
}

.process-visual-grid {
  display: grid;
  grid-template-columns: 1fr .58fr;
  gap: 44px;
  align-items: end
}

.timeline-estimator,
.build-score-card,
.serp-builder,
.keyword-live-panel {
  padding: 30px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07)
}

.timeline-estimator select,
.seo-planner select,
.serp-builder input {
  width: 100%;
  border: 1px solid rgba(16, 16, 20, .12);
  border-radius: 18px;
  background: #fff;
  padding: 15px 16px;
  margin: 12px 0 18px;
  font: inherit;
  font-weight: 800
}

.estimate-output {
  padding: 22px;
  border-radius: 24px;
  background: var(--brand-gradient);
  color: #111
}

.estimate-output strong {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.06em;
  display: block
}

.estimate-output span {
  font-weight: 800
}

.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  min-height: 430px;
  align-items: end;
  margin-top: 44px
}

.timeline-svg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  z-index: 0;
  pointer-events: none
}

.timeline-svg path {
  fill: none;
  stroke: url(#none);
  stroke: rgba(242, 128, 102, .35);
  stroke-width: 4;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 1.4s cubic-bezier(.16, 1, .3, 1)
}

.process-timeline.visible .timeline-svg path {
  stroke-dashoffset: 0
}

.timeline-step {
  position: relative;
  z-index: 1;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .08);
  transition: .32s
}

.timeline-step:nth-of-type(even) {
  transform: translateY(46px)
}

.timeline-step img {
  height: 124px;
  width: 100%;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 16px;
  transition: .45s
}

.timeline-step:hover img {
  transform: scale(1.035)
}

.timeline-step span {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  font-weight: 900;
  margin-bottom: 12px
}

.timeline-step h3 {
  font-size: 22px
}

.timeline-step p {
  color: var(--muted);
  font-weight: 900;
  margin-top: 8px
}

.mini-live-feed {
  display: grid;
  gap: 10px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(16, 16, 20, .08);
  margin-top: 18px
}

.mini-live-feed b {
  font-size: 16px
}

.mini-live-feed span {
  padding: 11px 13px;
  border-radius: 16px;
  background: #fff;
  color: #555;
  font-weight: 850;
  position: relative
}

.mini-live-feed span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  margin-right: 8px;
  box-shadow: 0 0 0 6px rgba(242, 128, 102, .11)
}

.feature-tabs,
.pricing-toggle,
.compare-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0 0 34px
}

.feature-filter-grid .feature-card {
  transition: opacity .28s ease, transform .28s ease
}

.feature-tab-card img {
  height: 130px;
  width: 100%;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 18px;
  transition: .45s
}

.feature-tab-card:hover img {
  transform: scale(1.04)
}

.feature-tab-card.is-hidden {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  position: absolute
}

.feature-reveal {
  margin-top: 16px;
  padding: 15px;
  border-radius: 18px;
  background: rgba(242, 128, 102, .09);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: .35s
}

.feature-card:hover .feature-reveal {
  max-height: 150px;
  opacity: 1
}

.comparison-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 44px;
  align-items: center
}

.compare-toggle {
  justify-content: flex-start
}

.compare-toggle button,
.pricing-toggle button,
.project-toggle button,
.project-toggle a {
  border: 1px solid rgba(16, 16, 20, .12);
  background: rgba(255, 255, 255, .76);
  border-radius: 999px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 900;
  cursor: pointer
}

.compare-toggle button.active,
.pricing-toggle button.active,
.project-toggle .active {
  background: #111;
  color: #fff
}

.score-row {
  margin-bottom: 22px
}

.score-row>span {
  display: block;
  color: #555;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .1em
}

.score-row strong {
  display: block;
  font-size: 32px;
  margin: 6px 0;
  font-weight: 900
}

.score-summary {
  margin-top: 20px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .68);
  color: var(--muted);
  font-weight: 750;
  line-height: 1.6
}

.visual-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.visual-stack img {
  height: 190px;
  width: 100%;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 16px 44px rgba(16, 16, 20, .08);
  transition: .45s
}

.visual-stack img:first-child {
  grid-column: 1/-1;
  height: 260px
}

.visual-stack img:hover {
  transform: scale(1.035)
}

.seo-planner {
  padding: 34px
}

.serp-builder form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center
}

.serp-card {
  margin-top: 20px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .06)
}

.serp-card span {
  color: #2f7b50;
  font-size: 13px;
  font-weight: 850
}

.serp-card h4 {
  font-size: 23px;
  color: #1a0dab;
  margin: 9px 0;
  letter-spacing: -.03em
}

.serp-card p {
  color: #555;
  line-height: 1.55;
  font-weight: 650
}

.cluster-map {
  height: 420px;
  position: relative;
  border-radius: 38px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  overflow: hidden
}

.cluster-map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.cluster-map path {
  fill: none;
  stroke: rgba(242, 128, 102, .42);
  stroke-width: 3;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: 1.2s cubic-bezier(.16, 1, .3, 1)
}

.cluster-map.visible path {
  stroke-dashoffset: 0
}

.cluster-node {
  position: absolute;
  padding: 16px 19px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .09);
  font-weight: 900
}

.cluster-node.pillar {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--brand-gradient)
}

.cluster-node.n1 {
  left: 7%;
  top: 25%
}

.cluster-node.n2 {
  left: 6%;
  bottom: 24%
}

.cluster-node.n3 {
  right: 7%;
  top: 27%
}

.cluster-node.n4 {
  right: 6%;
  bottom: 26%
}

.keyword-live-panel {
  display: grid;
  gap: 14px
}

.keyword-live-panel .flow-row {
  background: #fff;
  border-radius: 18px;
  padding: 15px
}

.keyword-live-panel .flow-row small {
  color: var(--coral);
  font-weight: 900
}

.v6-project .project-img {
  position: relative
}

.hover-preview {
  position: absolute;
  inset: auto 14px 14px 14px;
  transform: translateY(14px);
  opacity: 0;
  padding: 14px;
  border-radius: 20px;
  background: rgba(16, 16, 20, .78);
  color: #fff;
  backdrop-filter: blur(14px);
  transition: .28s
}

.hover-preview b {
  display: block;
  margin-bottom: 5px
}

.hover-preview span {
  font-size: 13px;
  line-height: 1.45;
  color: #eee
}

.v6-project:hover .hover-preview {
  opacity: 1;
  transform: translateY(0)
}

.project-toggle {
  display: flex;
  gap: 8px;
  margin: 16px 0
}

.project-toggle a {
  display: inline-flex;
  align-items: center
}

.case-mini {
  padding: 14px;
  border-radius: 18px;
  background: rgba(242, 128, 102, .09);
  display: grid;
  gap: 4px
}

.case-mini span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800
}

.project-card.hide {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  position: absolute
}

.pricing-toggle button {
  transition: .25s
}

.plan-card li {
  transition: .25s;
  border-radius: 12px;
  padding: 4px
}

.price-number {
  display: inline-block;
  transition: .25s
}

.pricing-checklist .check {
  transition: .25s
}

.pricing-checklist .check.highlight {
  background: var(--brand-gradient);
  color: #111;
  transform: translateX(8px);
  box-shadow: 0 18px 50px rgba(242, 128, 102, .18)
}

.delivery-map .checklist {
  display: grid;
  gap: 12px
}

.homepage-upgrade-note .mini-live-feed {
  margin-top: 0
}

.footer-with-mega-logo .footer-mega-logo {
  display: flex
}

.footer-keyword-cloud a {
  transition: .25s
}

.footer-keyword-cloud a:hover {
  transform: translateY(-3px);
  background: var(--brand-gradient);
  color: #111
}

@media(max-width:1060px) {

  .smart-split,
  .process-visual-grid,
  .comparison-grid {
    grid-template-columns: 1fr
  }

  .sticky-sidebar {
    position: relative;
    top: auto
  }

  .proof-strip {
    grid-template-columns: repeat(2, 1fr)
  }

  .process-timeline {
    grid-template-columns: 1fr
  }

  .timeline-step:nth-of-type(even) {
    transform: none
  }

  .timeline-svg {
    display: none
  }

  .visual-stack {
    grid-template-columns: 1fr
  }

  .visual-stack img:first-child {
    height: 220px
  }

  .serp-builder form {
    grid-template-columns: 1fr
  }

  .cluster-map {
    height: 620px
  }

  .cluster-node {
    position: relative;
    display: block;
    width: max-content;
    max-width: 85%;
    margin: 14px auto;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important
  }

  .cluster-map svg {
    display: none
  }
}

@media(max-width:760px) {
  .proof-strip {
    grid-template-columns: 1fr
  }

  .proof-shot {
    min-height: 210px
  }

  .process-timeline {
    min-height: 0
  }

  .timeline-step img {
    height: 180px
  }

  .feature-tab-card.is-hidden,
  .project-card.hide {
    display: none;
    position: relative
  }

  .feature-tabs,
  .pricing-toggle,
  .compare-toggle {
    justify-content: flex-start
  }

  .sticky-sidebar {
    margin-top: 26px
  }
}

@media(prefers-reduced-motion:reduce) {

  .ambient-dots span,
  .timeline-svg path,
  .cluster-map path,
  .proof-shot img,
  .feature-tab-card img,
  .visual-stack img,
  .timeline-step img {
    animation: none !important;
    transition: none !important
  }

  .timeline-svg path,
  .cluster-map path {
    stroke-dashoffset: 0 !important
  }
}


/* =========================================================
   Fluxo V7 Xobin-Benchmarked Interaction Additions
   Static HTML/CSS/Vanilla JS only. Extends existing tokens.
   ========================================================= */
.xobin-deliver-section {
  overflow: hidden
}

.deliver-demo-grid {
  display: grid;
  grid-template-columns: .34fr .66fr;
  gap: 28px;
  align-items: stretch
}

.deliver-tabs {
  display: grid;
  gap: 12px
}

.deliver-tab,
.industry-cloud-tabs button,
.fit-buttons button,
.demo-switch button,
.numbered-filter-bar button,
.testimonial-controls button {
  border: 1px solid rgba(16, 16, 20, .1);
  background: rgba(255, 255, 255, .78);
  border-radius: 999px;
  padding: 14px 18px;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  transition: .28s ease;
  text-align: left
}

.deliver-tab {
  display: flex;
  align-items: center;
  gap: 12px
}

.deliver-tab span,
.numbered-filter-bar b {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #f2eee7;
  color: #555;
  font-size: 12px
}

.deliver-tab.active,
.industry-cloud-tabs button.active,
.fit-buttons button.active,
.demo-switch button.active,
.numbered-filter-bar button.active {
  background: #111;
  color: #fff;
  transform: translateX(5px)
}

.deliver-tab.active span,
.numbered-filter-bar button.active b {
  background: var(--brand-gradient);
  color: #111
}

.deliver-stage {
  border-radius: 38px;
  background: rgba(255, 255, 255, .76);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  overflow: hidden;
  min-height: 460px
}

.deliver-screen {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  padding: 28px
}

.deliver-copy span {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(242, 128, 102, .12);
  color: #b44932;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em
}

.deliver-copy h3 {
  font-size: 38px;
  line-height: .96;
  margin: 18px 0 12px
}

.deliver-copy p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 700
}

.deliver-mockup {
  position: relative;
  border-radius: 30px;
  background: #101014;
  color: #fff;
  min-height: 310px;
  overflow: hidden;
  padding: 24px
}

.deliver-mockup>div {
  position: absolute;
  inset: 24px;
  opacity: 0;
  pointer-events: none;
  transition: .45s ease;
  transform: translateY(18px)
}

.deliver-mockup>div.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

.design-lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.design-lines i,
.design-lines b {
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .8), rgba(242, 128, 102, .55), rgba(143, 115, 194, .6));
  animation: drawCard 2.4s ease infinite
}

.design-lines i:first-child {
  grid-column: 1/-1;
  height: 120px
}

.design-lines i {
  height: 70px
}

.design-lines b {
  height: 46px;
  background: rgba(255, 255, 255, .18)
}

@keyframes drawCard {

  0%,
  100% {
    transform: scale(.98);
    opacity: .78
  }

  50% {
    transform: scale(1);
    opacity: 1
  }
}

.serp-lines {
  display: grid;
  gap: 14px
}

.serp-lines em {
  color: #9ee4bd;
  font-style: normal
}

.serp-lines strong {
  color: #a9c7ff;
  font-size: 22px
}

.serp-lines p {
  color: #ddd;
  line-height: 1.55
}

.serp-lines span,
.code-lines code,
.care-feed span {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 12px;
  font-weight: 800
}

.code-lines,
.care-feed {
  display: grid;
  gap: 12px
}

.code-lines code {
  color: #d9fff0;
  font-family: ui-monospace, Menlo, monospace;
  animation: typePulse 2.6s ease infinite
}

.ad-dash {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.ad-dash div {
  border-radius: 20px;
  background: rgba(255, 255, 255, .1);
  padding: 18px
}

.ad-dash strong {
  font-size: 36px
}

.ad-dash small {
  display: block;
  color: #ddd;
  margin-top: 6px
}

.care-feed span {
  position: relative;
  padding-left: 34px
}

.care-feed span:before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 7px rgba(37, 211, 102, .12);
  transform: translateY(-50%)
}

@keyframes typePulse {
  50% {
    color: #fff;
    background: rgba(255, 255, 255, .16)
  }
}

.trusted-marquee-section {
  padding: 34px 0;
  overflow: hidden;
  border-block: 1px solid rgba(16, 16, 20, .08);
  background: rgba(255, 255, 255, .42)
}

.trusted-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: tickerMove 38s linear infinite
}

.trusted-track span {
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 12px 30px rgba(16, 16, 20, .05);
  font-weight: 900;
  white-space: nowrap;
  color: #444
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.result-card {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 20px 60px rgba(16, 16, 20, .08);
  transition: .3s
}

.result-card img {
  height: 230px;
  width: 100%;
  object-fit: cover;
  transition: .5s
}

.result-card:hover img {
  transform: scale(1.045)
}

.result-card div {
  padding: 26px
}

.result-card strong {
  font-size: 58px;
  line-height: .9;
  font-weight: 900;
  letter-spacing: -.07em;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.result-card h3 {
  font-size: 26px;
  margin: 12px 0 8px
}

.result-card p {
  color: var(--muted);
  line-height: 1.6;
  font-weight: 700
}

.result-card a {
  display: inline-flex;
  margin-top: 16px;
  font-weight: 900;
  color: #111;
  border-bottom: 2px solid var(--coral)
}

.testimonial-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 40px;
  align-items: center
}

.testimonial-card {
  padding: 42px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  transition: .35s;
  min-height: 360px
}

.testimonial-card.swap {
  transform: translateY(12px);
  opacity: .3
}

.avatar-ring {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  padding: 5px;
  background: var(--brand-gradient);
  margin-bottom: 26px
}

.avatar-ring span {
  height: 100%;
  border-radius: 50%;
  background: #111;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 24px
}

.testimonial-card blockquote {
  font-size: 34px;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: -.045em;
  margin: 0 0 24px
}

.testimonial-card h3 {
  font-size: 24px
}

.testimonial-card p {
  color: var(--muted);
  font-weight: 900
}

.testimonial-controls {
  display: flex;
  gap: 10px;
  margin-top: 26px
}

.testimonial-controls button {
  width: 54px;
  height: 54px;
  text-align: center;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 20px
}

.mini-terminal.xobin-terminal {
  background: #080914;
  color: #d9fff0;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow);
  overflow: hidden
}

.terminal-top {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .06)
}

.terminal-top span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f28066
}

.terminal-top span:nth-child(2) {
  background: #e3c693
}

.terminal-top span:nth-child(3) {
  background: #25d366
}

.terminal-top b {
  margin-left: 10px;
  color: #fff
}

.xobin-terminal pre {
  min-height: 250px;
  padding: 24px;
  font: 800 14px/1.8 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  color: #d9fff0
}

.service-live-demo-section .deliver-proof-combo {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: center
}

.service-demo-card,
.plan-fit-card {
  padding: 30px;
  border-radius: 34px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow)
}

.demo-switch,
.fit-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px
}

.demo-output h3,
.fit-output strong {
  font-size: 34px;
  letter-spacing: -.055em;
  display: block
}

.demo-output p,
.fit-output p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
  margin: 10px 0 18px
}

.demo-bars,
.fit-bars {
  display: grid;
  gap: 10px;
  margin-bottom: 18px
}

.demo-bars span,
.fit-bars span {
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #C3E3D2, #F28066, #8F73C2);
  width: var(--w);
  display: block
}

.process-benchmark-strip .step-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.step-metric {
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07)
}

.step-metric b {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--brand-gradient);
  margin-bottom: 18px
}

.step-metric strong {
  font-size: 38px;
  line-height: .9;
  display: block;
  letter-spacing: -.06em
}

.step-metric span {
  color: var(--muted);
  font-weight: 850
}

.inline-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.inline-stats span {
  font-size: 12px;
  font-weight: 900;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(242, 128, 102, .11);
  color: #9b3e2c
}

.feature-live-mockups .alternating-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: center;
  margin: 22px 0;
  padding: 26px;
  border-radius: 36px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(16, 16, 20, .08)
}

.alternating-feature h3 {
  font-size: 38px
}

.alternating-feature p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
  margin-top: 10px
}

.live-mock {
  min-height: 260px;
  border-radius: 30px;
  background: #101014;
  color: #fff;
  padding: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 52px rgba(16, 16, 20, .12)
}

.seo-mock {
  display: grid;
  gap: 14px
}

.seo-mock em {
  font-style: normal;
  background: rgba(255, 255, 255, .1);
  padding: 14px;
  border-radius: 14px;
  color: #d9fff0
}

.seo-mock b {
  height: 12px;
  border-radius: 999px;
  background: var(--brand-gradient);
  width: 70%;
  animation: mockGrow 2.5s ease infinite
}

.device-frame-resize {
  width: 62%;
  height: 220px;
  margin: auto;
  border-radius: 28px;
  background: #fff;
  color: #111;
  padding: 18px;
  display: grid;
  gap: 12px;
  animation: deviceResize 3.4s ease-in-out infinite
}

.device-frame-resize span {
  background: #f2eee7;
  border-radius: 14px;
  padding: 12px;
  font-weight: 900
}

.speed-ring {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin: 20px auto;
  background: conic-gradient(#25D366 0 90%, rgba(255, 255, 255, .12) 90%);
  display: grid;
  place-items: center
}

.speed-ring span {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #101014;
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 900
}

.speed-mock small {
  display: block;
  text-align: center;
  color: #ddd
}

.chat-mock {
  display: grid;
  gap: 12px
}

.chat-mock p {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  font-weight: 850;
  margin: 0;
  animation: chatFloat 3s ease-in-out infinite
}

.chat-mock p:nth-child(even) {
  margin-left: auto;
  background: rgba(195, 227, 210, .22)
}

@keyframes mockGrow {
  50% {
    width: 100%
  }
}

@keyframes deviceResize {
  50% {
    width: 86%
  }
}

@keyframes chatFloat {
  50% {
    transform: translateY(-4px)
  }
}

.industry-cloud-tabs {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px
}

.keyword-scroll-cloud {
  display: grid;
  gap: 16px;
  overflow: hidden
}

.keyword-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 20, .08);
  transition: .28s
}

.keyword-row.is-dim {
  opacity: .28;
  filter: grayscale(.4)
}

.keyword-row b {
  font-size: 18px
}

.keyword-row div {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: tickerMove 34s linear infinite
}

.keyword-row:nth-child(even) div {
  animation-direction: reverse
}

.keyword-row span {
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(16, 16, 20, .05)
}

.numbered-filter-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 20px
}

.numbered-filter-bar button {
  text-align: center
}

.portfolio-filters .filter-btn b {
  font-size: 11px;
  opacity: .6;
  margin-right: 6px
}

.pricing-fit-section .smart-split {
  align-items: center
}

.fit-output {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .56);
  border: 1px solid rgba(16, 16, 20, .08)
}

@media(max-width:1060px) {

  .deliver-demo-grid,
  .deliver-screen,
  .testimonial-grid,
  .service-live-demo-section .deliver-proof-combo,
  .feature-live-mockups .alternating-feature {
    grid-template-columns: 1fr
  }

  .results-grid,
  .process-benchmark-strip .step-metric-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .keyword-row {
    grid-template-columns: 1fr
  }

  .keyword-row div {
    animation-duration: 44s
  }

  .deliver-stage {
    min-height: auto
  }

  .deliver-mockup {
    min-height: 280px
  }
}

@media(max-width:760px) {

  .results-grid,
  .process-benchmark-strip .step-metric-grid {
    grid-template-columns: 1fr
  }

  .testimonial-card blockquote {
    font-size: 26px
  }

  .deliver-copy h3,
  .alternating-feature h3 {
    font-size: 30px
  }

  .trusted-track,
  .keyword-row div {
    animation: none;
    flex-wrap: wrap;
    width: auto
  }

  .deliver-tab,
  .industry-cloud-tabs button,
  .fit-buttons button,
  .demo-switch button,
  .numbered-filter-bar button {
    text-align: center
  }

  .xobin-terminal pre {
    font-size: 12px;
    min-height: 220px
  }
}

@media(prefers-reduced-motion:reduce) {

  .trusted-track,
  .keyword-row div,
  .design-lines i,
  .design-lines b,
  .code-lines code,
  .device-frame-resize,
  .seo-mock b,
  .chat-mock p {
    animation: none !important
  }

  .deliver-mockup>div,
  .testimonial-card,
  .result-card img {
    transition: none !important
  }
}


/* =========================================================
   Fluxo V8 Structural Homepage Mirror — Xobin-style blueprint
   Section numbers map to the user's 1–16 homepage structure.
   ========================================================= */

/* 1. Top announcement bar */
.x8-announcement {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #070814;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px;
  font-weight: 850;
  overflow: hidden
}

.x8-announcement-track {
  display: flex;
  align-items: center;
  gap: 14px;
  transition: .35s
}

.x8-announcement b {
  color: #f28066
}

.x8-announcement a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px
}

.x8-announcement button {
  position: absolute;
  right: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer
}

.x8-announcement.is-hidden {
  transform: translateY(-100%);
  transition: .35s
}

.x8-home .x8-header {
  top: 58px
}

.x8-home.announcement-closed .x8-header {
  top: 18px
}

/* 2. Sticky header with mega-menu */
.x8-nav {
  position: relative
}

.mega-item {
  position: relative;
  display: flex;
  align-items: center
}

.mega-menu {
  position: absolute;
  top: calc(100% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: min(760px, 90vw);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(22px);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 28px 80px rgba(16, 16, 20, .16);
  opacity: 0;
  pointer-events: none;
  transition: .25s;
  z-index: 130
}

.mega-menu.compact {
  grid-template-columns: repeat(3, 1fr);
  width: min(620px, 90vw)
}

.mega-item:hover .mega-menu,
.mega-item:focus-within .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0)
}

.mega-menu div {
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .28), rgba(242, 128, 102, .1), rgba(143, 115, 194, .12));
  border: 1px solid rgba(16, 16, 20, .06)
}

.mega-menu b {
  display: block;
  font-size: 16px;
  margin-bottom: 8px
}

.mega-menu span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700
}

.mega-menu a {
  display: inline-flex;
  margin-top: 12px;
  font-size: 12px;
  color: var(--coral) !important;
  font-weight: 950
}



.x8-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 62px;
  align-items: center
}

.trust-badge-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px
}

.trust-badge-row span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 10px 30px rgba(16, 16, 20, .05);
  font-size: 12px;
  font-weight: 900;
  color: #4a4b52
}

.trust-badge-row b {
  color: #111
}

.hero-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 34px
}

.hero-chip-row a {
  padding: 12px 15px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 10px 28px rgba(16, 16, 20, .05);
  font-weight: 950;
  font-size: 13px;
  transition: .25s
}

.hero-chip-row a:hover {
  transform: translateY(-3px);
  background: #111;
  color: #fff
}

.x8-hero-product {
  border-radius: 42px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative
}

.x8-live-header {
  height: 58px;
  background: rgba(255, 255, 255, .65);
  border-bottom: 1px solid rgba(16, 16, 20, .08);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px
}

.x8-live-header span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d9d4ca
}

.x8-live-header b {
  margin-left: 10px;
  font-size: 13px;
  color: #5b5d66
}

.x8-dashboard-tabs {
  display: flex;
  gap: 10px;
  padding: 18px 20px
}

.x8-dashboard-tabs button,
.x8-tab-buttons button,
.industry-cloud-tabs button {
  border: 1px solid rgba(16, 16, 20, .08);
  background: #fff;
  border-radius: 999px;
  padding: 11px 14px;
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
  transition: .25s
}

.x8-dashboard-tabs button.active,
.x8-tab-buttons button.active,
.industry-cloud-tabs button.active {
  background: #111;
  color: #fff;
  transform: translateY(-2px)
}

.x8-dashboard-screen {
  margin: 0 20px 20px;
  border-radius: 30px;
  overflow: hidden;
  min-height: 365px;
  position: relative;
  background: var(--brand-gradient)
}

.x8-dashboard-screen img {
  height: 365px;
  width: 100%;
  object-fit: cover;
  transition: .45s
}

.x8-dashboard-copy {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  border-radius: 22px;
  padding: 18px;
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(14px);
  color: #fff
}

.x8-dashboard-copy span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
  color: #ffe2c8
}

.x8-dashboard-copy h3 {
  font-size: 27px;
  margin: 4px 0
}

.x8-dashboard-copy p {
  font-size: 14px;
  color: #eee;
  font-weight: 700;
  margin: 0
}

.x8-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 0 20px 22px
}

.x8-dashboard-metrics div {
  padding: 15px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .07)
}

.x8-dashboard-metrics strong {
  font-size: 30px;
  letter-spacing: -.06em
}

.x8-dashboard-metrics small {
  display: block;
  color: var(--muted);
  font-weight: 900
}

.trusted-section {
      width: 100%;
      background: #ffffff;
      border-top: 1px solid #f4f4f5;
      border-bottom: 1px solid #f4f4f5;
      padding: 80px 0;
      overflow: hidden;
      position: relative;
      z-index: 10;
    }

    @media (min-width: 768px) {
      .trusted-section {
        padding: 96px 0;
      }
    }

    .trusted-header {
      max-width: 1200px;
      margin: 0 auto 48px;
      padding: 0 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    @media (min-width: 768px) {
      .trusted-header {
        margin-bottom: 56px;
      }
    }

    .trusted-header h2 {
      font-size: 2.25rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      color: #09090b;
      line-height: 1.1;
    }

    @media (min-width: 640px) {
      .trusted-header h2 {
        font-size: 3rem;
      }
    }

    .trusted-header h2 span {
      background: linear-gradient(135deg, #C3E3D2 0%, #E3C693 24%, #F28066 48%, #E35796 72%, #8F73C2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .marquee-wrapper {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    @media (min-width: 768px) {
      .marquee-wrapper {
        gap: 48px;
      }
    }

    .marquee-row {
      position: relative;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
      mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    }

    .marquee-track {
      display: flex;
      width: max-content;
      gap: 24px;
      align-items: center;
      padding-right: 24px;
    }

    @media (min-width: 768px) {
      .marquee-track {
        gap: 32px;
        padding-right: 32px;
      }
    }

    .marquee-track--forward {
      animation: marquee 45s linear infinite;
    }

    .marquee-track--reverse {
      animation: marquee-reverse 45s linear infinite;
    }

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

    @keyframes marquee-reverse {
      0%   { transform: translateX(-50%); }
      100% { transform: translateX(0); }
    }

    .logo-card {
      display: flex;
      height: 80px;
      width: 176px;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      border: 1px solid #e4e4e7;
      background: #ffffff;
      padding: 0 20px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      transition: box-shadow 0.3s ease, border-color 0.3s ease;
    }

    @media (min-width: 768px) {
      .logo-card {
        height: 96px;
        width: 208px;
      }
    }

    .logo-card:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      border-color: #d4d4d8;
    }

    .logo-card img {
      max-height: 48px;
      width: auto;
      max-width: 100%;
      object-fit: contain;
    }

    @media (min-width: 768px) {
      .logo-card img {
        max-height: 56px;
      }
    }
    /* TRUSTED BY GLOBAL LEADERS END */


/* 4 & 8. Auto-scroll marquees */
.x8-logo-marquee,
.x8-tech-marquee {
  padding: 34px 0;
  overflow: hidden;
  border-block: 1px solid rgba(16, 16, 20, .08);
  background: rgba(255, 255, 255, .42)
}

.x8-marquee-track {
  display: flex;
  width: max-content;
  gap: 16px;
  animation: x8Marquee 42s linear infinite
}

.x8-marquee-track.reverse {
  animation-direction: reverse
}

.x8-marquee-track span {
  padding: 14px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 12px 30px rgba(16, 16, 20, .05);
  font-weight: 950;
  white-space: nowrap;
  color: #444
}

@keyframes x8Marquee {
  to {
    transform: translateX(-50%)
  }
}

/* 5. Tabbed live-demo showcase */
.x8-tab-shell {
  border-radius: 42px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow);
  padding: 22px
}

.x8-tab-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 22px
}

.x8-deliver-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 22px
}

.x8-deliver-copy {
  padding: 32px;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .32), rgba(242, 128, 102, .12), rgba(143, 115, 194, .14));
  border: 1px solid rgba(16, 16, 20, .07)
}

.x8-deliver-copy span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 950;
  color: #7a6b69
}

.x8-deliver-copy h3 {
  font-size: 36px;
  margin: 12px 0
}

.x8-deliver-copy p {
  color: var(--muted);
  line-height: 1.65;
  font-weight: 750;
  margin-bottom: 22px
}

.x8-deliver-mockup {
  min-height: 430px;
  border-radius: 34px;
  background: #080914;
  color: #fff;
  padding: 28px;
  overflow: hidden;
  position: relative
}

.x8-browser-draw {
  display: grid;
  gap: 14px
}

.x8-browser-draw i,
.x8-browser-draw b {
  display: block;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .82), rgba(242, 128, 102, .55), rgba(143, 115, 194, .6));
  animation: x8Draw 2.8s ease-in-out infinite
}

.x8-browser-draw i:first-child {
  height: 150px
}

.x8-browser-draw i:nth-child(2),
.x8-browser-draw i:nth-child(3) {
  height: 74px
}

.x8-browser-draw b {
  height: 46px;
  width: 50%
}

.x8-browser-draw-content{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.x8-content-box{
    padding:24px;
    border-radius:20px;
    background:#111827;
    color:#d8fff1;
    font-size:16px;
    font-weight:700;
    line-height:1.4;
}

.x8-content-box.short{
    width:60%;
}

@media(max-width:768px){
    .x8-content-box{
        font-size:18px;
        padding:18px;
    }
}

.x8-serp-build {
  display: grid;
  gap: 14px
}

.x8-serp-build em,
.x8-code-lines code,
.x8-ad-card,
.x8-host-row {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 16px;
  font-style: normal;
  font-weight: 850
}

.x8-serp-build strong {
  font-size: 26px;
  color: #9ec3ff
}

.x8-code-lines {
  display: grid;
  gap: 12px
}

.x8-code-lines code {
  font-family: ui-monospace, Menlo, monospace;
  color: #d9fff0;
  animation: x8TypePulse 2.2s ease infinite
}

.x8-ad-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.x8-ad-card strong {
  font-size: 38px
}

.x8-host-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}

.x8-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 8px rgba(37, 211, 102, .13)
}

@keyframes x8Draw {
  50% {
    transform: scale(1.015);
    filter: saturate(1.15)
  }
}

@keyframes x8TypePulse {
  50% {
    background: rgba(255, 255, 255, .18);
    color: #fff
  }
}

/* 6. Alternating feature + mockup sections */
.x8-alt-row {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 34px;
  align-items: center;
  margin: 24px 0;
  padding: 30px;
  border-radius: 40px;
  background: rgba(255, 255, 255, .66);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 16px 44px rgba(16, 16, 20, .05)
}

.x8-alt-row.reverse>div:first-child {
  order: 2
}

.x8-alt-row h3 {
  font-size: 42px;
  line-height: 1.02;
  margin: 8px 0 12px
}

.x8-alt-row p {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.65
}

.x8-alt-row a {
  font-weight: 950;
  color: #111;
  border-bottom: 2px solid var(--coral);
  display: inline-flex;
  margin-top: 15px
}

.x8-num {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--brand-gradient);
  font-weight: 950
}

.x8-mini-demo {
  min-height: 280px;
  border-radius: 32px;
  background: #101014;
  color: #fff;
  padding: 28px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 52px rgba(16, 16, 20, .12)
}

.seo-demo {
  display: grid;
  gap: 12px
}

.seo-demo em {
  font-style: normal;
  background: rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 14px;
  color: #d9fff0
}

.seo-demo b {
  height: 12px;
  border-radius: 999px;
  background: var(--brand-gradient);
  animation: x8MockGrow 2.6s ease infinite
}

.seo-demo span {
  font-weight: 900;
  color: #ddd
}

.device-demo div {
  width: 58%;
  min-height: 220px;
  margin: auto;
  border-radius: 28px;
  background: #fff;
  color: #111;
  padding: 20px;
  display: grid;
  gap: 12px;
  animation: x8Device 3.2s ease-in-out infinite
}

.device-demo span {
  background: #f2eee7;
  border-radius: 14px;
  padding: 12px;
  font-weight: 950
}

.gauge {
  width: 185px;
  height: 185px;
  border-radius: 50%;
  margin: 20px auto;
  background: conic-gradient(#25D366 0 88%, rgba(255, 255, 255, .15) 88%);
  display: grid;
  place-items: center
}

.gauge span {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #101014;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-weight: 950
}

.gauge-demo small {
  text-align: center;
  display: block;
  color: #ddd;
  font-weight: 900
}

.chat-demo {
  display: grid;
  gap: 12px
}

.chat-demo p {
  padding: 13px 15px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  font-weight: 850;
  margin: 0;
  color: #fff !important;
  animation: x8Chat 3s ease-in-out infinite
}

.chat-demo p:nth-child(even) {
  margin-left: auto;
  background: rgba(195, 227, 210, .22)
}

@keyframes x8MockGrow {
  50% {
    width: 100%
  }
}

@keyframes x8Device {
  50% {
    width: 86%
  }
}

@keyframes x8Chat {
  50% {
    transform: translateY(-4px)
  }
}

/* 7. Numbered step flow with SVG connector */
.x8-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding-top: 50px
}

.x8-step-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 150px;
  z-index: 0;
  pointer-events: none
}

.x8-step-line path {
  fill: none;
  stroke: url(#dummy);
  stroke: rgba(242, 128, 102, .45);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1100;
  stroke-dashoffset: 1100;
  transition: stroke-dashoffset 1.4s cubic-bezier(.16, 1, .3, 1)
}

.x8-steps.visible .x8-step-line path {
  stroke-dashoffset: 0
}

.x8-steps article {
  position: relative;
  z-index: 2;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07)
}

.x8-steps article b {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--brand-gradient);
  margin-bottom: 18px
}

.x8-steps article h3 {
  font-size: 28px
}

.x8-steps article p {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
  margin: 9px 0 16px
}

.x8-steps article div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.x8-steps article span {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(242, 128, 102, .11);
  font-size: 12px;
  font-weight: 950;
  color: #9b3e2c
}

/* 9. Live system status terminal */
.x8-terminal {
  background: #080914;
  color: #d9fff0;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: var(--shadow);
  overflow: hidden
}

.x8-terminal pre {
  min-height: 300px;
  padding: 24px;
  font: 850 14px/1.8 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  color: #d9fff0;
  margin: 0
}

.x8-system .smart-split {
  align-items: center
}

/* 10. Categorized keyword/tag cloud */
.x8-keyword-cloud-wrap {
  display: grid;
  gap: 16px;
  overflow: hidden
}

.x8-keyword-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 16px 44px rgba(16, 16, 20, .05);
  transition: .28s
}

.x8-keyword-row b {
  font-size: 18px
}

.x8-keyword-row div {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: x8Marquee 34s linear infinite
}

.x8-keyword-row:nth-child(even) div {
  animation-direction: reverse
}

.x8-keyword-row span {
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  font-weight: 950;
  box-shadow: 0 8px 24px rgba(16, 16, 20, .05)
}

.x8-home-testimonials,
.x8-home-faq {
  overflow: hidden;
}

.x8-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.x8-home-testimonial-card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07);
  transition: .3s ease;
}

.x8-home-testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 85px rgba(16, 16, 20, .12);
}

.x8-home-testimonial-card.featured {
  background: linear-gradient(#fff, #fff) padding-box, var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
}

.x8-testimonial-stars {
  color: var(--coral);
  font-weight: 950;
  letter-spacing: .12em;
  margin-bottom: 18px;
}

.x8-home-testimonial-card p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 700;
  margin-bottom: 26px;
}

.x8-testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
}

.x8-testimonial-author span {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: #111;
  font-weight: 950;
}

.x8-testimonial-author strong,
.x8-testimonial-author small {
  display: block;
}

.x8-testimonial-author small {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 800;
}

@media(max-width:1060px) {
  .x8-testimonial-grid {
    grid-template-columns: 1fr;
  }
}

/* ===============================
   FLUXO TESTIMONIAL SECTION
================================ */

.fluxo-testimonial-section {
  padding: 90px 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(195, 227, 210, .55), transparent 28%),
    radial-gradient(circle at 90% 0%, rgba(227, 87, 150, .18), transparent 30%),
    rgba(255, 255, 255, .38);
  border-block: 1px solid rgba(16, 16, 20, .06);
  overflow: hidden;
}

.fluxo-section-head {
  max-width: 850px;
  margin: 0 auto 45px;
  text-align: center;
}

.fluxo-section-head h2 {
  font-size: clamp(36px, 5vw, 62px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.055em;
  color: var(--text);
}

.fluxo-testimonial-slider {
  position: relative;
  overflow: hidden;
}

.fluxo-testimonial-wrapper {
  width: 86%;
  margin: 0 auto;
  overflow: hidden;
  padding: 15px 0;
}

.fluxo-testimonial-track {
  display: flex;
  transition: transform .45s ease;
}

.fluxo-testimonial-card {
  min-width: calc(33.333% - 20px);
  margin: 0 10px;
  padding: 28px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 18px 52px rgba(16, 16, 20, .07);
  opacity: .45;
  transform: scale(.88);
  transition: .35s ease;
}

.fluxo-testimonial-card.active {
  opacity: 1;
  transform: scale(1);
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
}

.fluxo-testimonial-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.fluxo-quote {
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  color: rgba(242, 128, 102, .35);
}

.fluxo-stars {
  color: var(--coral);
  font-size: 14px;
  letter-spacing: .08em;
}

.fluxo-testimonial-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 650;
}

.fluxo-testimonial-user {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 16, 20, .08);
}

.fluxo-user-avatar{
    width:52px;
    height:52px;
    border-radius:50%;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(16,16,20,.08);
    display:flex;
    align-items:center;
    justify-content:center;
}

.fluxo-user-avatar img{
    width:80%;
    height:80%;
    object-fit:contain;
}

.fluxo-testimonial-user strong {
  display: block;
  color: var(--text);
  font-size: 15px;
}

.fluxo-testimonial-user span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  margin-top: 3px;
}

.fluxo-card-progress {
  width: 100%;
  height: 3px;
  background: rgba(16, 16, 20, .08);
  margin-top: 18px;
  border-radius: 999px;
  overflow: hidden;
}

.fluxo-card-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--brand-gradient);
}

.fluxo-testimonial-card.active .fluxo-card-progress span {
  width: 100%;
  transition: width 4s linear;
}

.fluxo-testimonial-arrow {
  position: absolute;
  top: 48%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(16, 16, 20, .10);
  background: rgba(255, 255, 255, .9);
  color: #111;
  font-size: 28px;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 12px 34px rgba(16, 16, 20, .12);
}

.fluxo-testimonial-arrow.prev {
  left: 4%;
}

.fluxo-testimonial-arrow.next {
  right: 4%;
}

.fluxo-testimonial-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 20px;
}

.fluxo-testimonial-dots span {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: rgba(16, 16, 20, .18);
  cursor: pointer;
  transition: .25s;
}

.fluxo-testimonial-dots span.active {
  width: 32px;
  background: var(--brand-gradient);
}


/* ===============================
   FLUXO FAQ SECTION
================================ */

.fluxo-faq-section {
  padding: 95px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(195, 227, 210, .45), transparent 28%),
    radial-gradient(circle at 90% 80%, rgba(143, 115, 194, .18), transparent 30%);
}

.fluxo-faq-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 48px;
  align-items: start;
}

.fluxo-faq-left {
  position: sticky;
  top: 120px;
}

.fluxo-faq-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: #111;
  font-size: 24px;
  font-weight: 950;
  margin-bottom: 24px;
}

.fluxo-faq-left h2 {
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.055em;
  color: var(--text);
  margin-bottom: 18px;
}

.fluxo-faq-left p {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 650;
  margin-bottom: 22px;
}

.fluxo-faq-left a {
  color: var(--coral);
  font-weight: 900;
}

.fluxo-faq-accordion {
  display: grid;
  gap: 16px;
}

.fluxo-faq-item {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 40px rgba(16, 16, 20, .05);
}

.fluxo-faq-item button {
  width: 100%;
  padding: 24px;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
}

.fluxo-faq-item button span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(242, 128, 102, .12);
  color: var(--coral);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: .25s;
}

.fluxo-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: .3s ease;
}

.fluxo-faq-answer p {
  padding: 0 24px 24px;
  color: var(--muted);
  line-height: 1.7;
  font-weight: 650;
}

.fluxo-faq-item.active {
  background:
    linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
}

.fluxo-faq-item.active .fluxo-faq-answer {
  max-height: 250px;
}

.fluxo-faq-item.active button span {
  transform: rotate(45deg);
  background: var(--brand-gradient);
  color: #111;
}

@media(max-width: 1060px) {
  .fluxo-testimonial-card {
    min-width: calc(50% - 20px);
  }

  .fluxo-faq-grid {
    grid-template-columns: 1fr;
  }

  .fluxo-faq-left {
    position: relative;
    top: 0;
  }
}

@media(max-width: 760px) {
  .fluxo-faq-section {
    padding: 75px 0;
  }
}

/* 14. Recognition/awards section intentionally omitted until verified awards exist. */

/* 15. Final CTA / consultation booking */
.x8-cta-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: center;
  padding: 48px;
  border-radius: 44px;
  background: linear-gradient(135deg, rgba(195, 227, 210, .55), rgba(242, 128, 102, .22), rgba(143, 115, 194, .18));
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: var(--shadow)
}

.x8-cta-grid h2 {
  font-size: clamp(36px, 5.2vw, 64px);
  line-height: .98
}

.x8-cta-grid ul {
  margin-top: 22px;
  display: grid;
  gap: 10px;
  list-style: none;
  font-weight: 900;
  color: #393a42
}

.x8-cta-grid li:before {
  content: '✦';
  color: var(--coral);
  margin-right: 8px
}

.x8-contact-form {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: 32px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(16, 16, 20, .08)
}

.form-status {
  font-size: 13px;
  color: #248f65;
  font-weight: 900;
  min-height: 18px
}

/* 16. Mega footer */
.x8-footer-grid {
  grid-template-columns: 1.3fr .75fr .75fr .75fr 1.05fr
}

.x8-footer .footer-logo {
  font-size: 32px
}

.x8-footer .footer-bottom {
  position: relative;
  z-index: 2
}

@media(max-width:1060px) {
  .x8-home .x8-header {
    top: 54px
  }

  .x8-hero-grid,
  .x8-deliver-grid,
  .x8-alt-row,
  .x8-cta-grid,
  .x8-testimonial-grid {
    grid-template-columns: 1fr
  }

  .x8-alt-row.reverse>div:first-child {
    order: 0
  }

  .x8-steps,
  .x8-case-grid,
  .x8-trust-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .mega-menu {
    left: auto;
    right: 0;
    transform: translateY(12px);
    grid-template-columns: repeat(2, 1fr)
  }

  .mega-item:hover .mega-menu,
  .mega-item:focus-within .mega-menu {
    transform: translateY(0)
  }

  .x8-footer-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:760px) {
  .x8-announcement {
    height: auto;
    min-height: 42px;
    padding: 8px 46px 8px 12px;
    text-align: center
  }

  .x8-home .x8-header {
    top: 62px
  }

  .x8-home.announcement-closed .x8-header {
    top: 18px
  }

  .x8-hero {
    padding-top: 158px
  }

  .x8-dashboard-metrics,
  .x8-steps,
  .x8-case-grid,
  .x8-trust-grid,
  .x8-footer-grid {
    grid-template-columns: 1fr
  }

  .x8-dashboard-screen,
  .x8-dashboard-screen img {
    height: 285px;
    min-height: 285px
  }

  .mega-item {
    display: block
  }

  .mega-menu {
    position: static;
    display: none;
    transform: none;
    width: 100%;
    box-shadow: none;
    margin-top: 10px
  }

  .mega-item:hover .mega-menu,
  .mega-item:focus-within .mega-menu {
    display: grid;
    transform: none
  }

  .x8-tab-buttons,
  .x8-dashboard-tabs,
  .industry-cloud-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .x8-keyword-row {
    grid-template-columns: 1fr
  }

  .x8-keyword-row div,
  .x8-marquee-track {
    animation: none;
    flex-wrap: wrap;
    width: auto
  }

  .x8-step-line {
    display: none
  }

  .x8-testimonial-card blockquote {
    font-size: 26px
  }

  .x8-alt-row h3 {
    font-size: 32px
  }
}

@media(prefers-reduced-motion:reduce) {

  .x8-marquee-track,
  .x8-keyword-row div,
  .x8-browser-draw i,
  .x8-browser-draw b,
  .x8-code-lines code,
  .device-demo div,
  .seo-demo b,
  .chat-demo p {
    animation: none !important
  }

  .x8-step-line path {
    stroke-dashoffset: 0 !important;
    transition: none !important
  }
}

/* =========================================================
   THEME TOGGLE — LIGHT / DARK MODE
   Added for top sun & moon control
   ========================================================= */
.theme-toggle {
  width: 66px;
  height: 38px;
  border: 1px solid rgba(16, 16, 20, .10);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 12px 28px rgba(16, 16, 20, .08);
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  padding: 4px;
  cursor: pointer;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease, transform .25s ease;
  flex: 0 0 auto;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(16, 16, 20, .12)
}

.theme-toggle-knob {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 8px 20px rgba(242, 128, 102, .26);
  transition: transform .32s cubic-bezier(.16, 1, .3, 1);
  z-index: 0;
}

.theme-icon {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color .28s ease, transform .28s ease, opacity .28s ease
}

.sun-icon {
  color: #111
}

.moon-icon {
  color: #8F73C2
}

html[data-theme="dark"] .theme-toggle-knob {
  transform: translateX(28px)
}

html[data-theme="dark"] .sun-icon {
  color: #f6c45a;
  opacity: .72
}

html[data-theme="dark"] .moon-icon {
  color: #fff;
  transform: rotate(-10deg)
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070710;
  --text: #f7f4ff;
  --muted: #c8c2d5;
  --line: rgba(255, 255, 255, .12);
  --card: rgba(16, 18, 30, .82);
  --shadow: 0 26px 80px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 4%, rgba(195, 227, 210, .16), transparent 24%),
    radial-gradient(circle at 88% 3%, rgba(143, 115, 194, .24), transparent 25%),
    radial-gradient(circle at 50% 45%, rgba(242, 128, 102, .10), transparent 35%),
    var(--bg);
  color: var(--text);
}

html[data-theme="dark"] .orb {
  opacity: .22;
  filter: blur(92px)
}

html[data-theme="dark"] .site-header,
html[data-theme="dark"] .x8-announcement,
html[data-theme="dark"] .mega-menu {
  background: rgba(9, 10, 22, .78);
  border-color: rgba(255, 255, 255, .10);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .42);
}

html[data-theme="dark"] .nav,
html[data-theme="dark"] .x8-nav,
html[data-theme="dark"] .bar-label,
html[data-theme="dark"] .project-meta,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .x8-trust-grid b,
html[data-theme="dark"] .x8-alt-row a,
html[data-theme="dark"] .x8-case-card a {
  color: #f5f2ff;
}

html[data-theme="dark"] .theme-toggle {
  background: rgba(16, 18, 30, .86);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32)
}

html[data-theme="dark"] .nav-cta,
html[data-theme="dark"] .btn-outline:hover,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .launch-checklist button.active,
html[data-theme="dark"] .feature-toggle-list button.active,
html[data-theme="dark"] .addon-list button.active {
  background: #fff;
  color: #111 !important;
}

html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .filter-btn,
html[data-theme="dark"] .launch-checklist button,
html[data-theme="dark"] .feature-toggle-list button,
html[data-theme="dark"] .addon-list button,
html[data-theme="dark"] .industry-cloud-tabs button,
html[data-theme="dark"] .x8-dashboard-tabs button,
html[data-theme="dark"] .x8-tab-buttons button {
  background: rgba(16, 18, 30, .72);
  color: #f5f2ff;
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .btn-outline:hover {
  border-color: #fff
}

html[data-theme="dark"] .eyebrow,
html[data-theme="dark"] .trust-badge-row span,
html[data-theme="dark"] .hero-chip-row a,
html[data-theme="dark"] .mini-badge,
html[data-theme="dark"] .card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .keyword-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .sticky-card,
html[data-theme="dark"] .seo-planner,
html[data-theme="dark"] .estimate-card,
html[data-theme="dark"] .hero-panel,
html[data-theme="dark"] .x8-hero-product,
html[data-theme="dark"] .x8-deliver-card,
html[data-theme="dark"] .x8-alt-row,
html[data-theme="dark"] .x8-steps article,
html[data-theme="dark"] .x8-testimonial-card,
html[data-theme="dark"] .x8-case-card,
html[data-theme="dark"] .x8-trust-grid div,
html[data-theme="dark"] .x8-cta-grid,
html[data-theme="dark"] .x8-contact-form,
html[data-theme="dark"] .x8-keyword-row,
html[data-theme="dark"] .growth-panel,
html[data-theme="dark"] .proof-shot,
html[data-theme="dark"] .deliverable-row,
html[data-theme="dark"] .progress-list,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .faq-item,
html[data-theme="dark"] .modal-box {
  background: rgba(16, 18, 30, .78);
  border-color: rgba(255, 255, 255, .11);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .soft-section,
html[data-theme="dark"] .ticker-section,
html[data-theme="dark"] .x8-testimonials,
html[data-theme="dark"] .x8-system,
html[data-theme="dark"] .x8-trust-badges {
  background: rgba(255, 255, 255, .025);
  border-color: rgba(255, 255, 255, .07);
}

html[data-theme="dark"] .mock-card,
html[data-theme="dark"] .growth-mini,
html[data-theme="dark"] .growth-top,
html[data-theme="dark"] .x8-keyword-row span,
html[data-theme="dark"] .industry-cloud span,
html[data-theme="dark"] .keyword-cloud span,
html[data-theme="dark"] .keyword-chip,
html[data-theme="dark"] .modal-grid div {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .10);
  color: #f5f2ff;
}

html[data-theme="dark"] .browser-top,
html[data-theme="dark"] .x8-live-header,
html[data-theme="dark"] .url,
html[data-theme="dark"] .portfolio-search,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .11);
  color: #f7f4ff;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(247, 244, 255, .55)
}

html[data-theme="dark"] .score-ring span {
  background: #10121e;
  color: #fff
}

html[data-theme="dark"] .bar {
  background: rgba(255, 255, 255, .12)
}

html[data-theme="dark"] .dot {
  background: rgba(255, 255, 255, .25)
}

html[data-theme="dark"] .x8-dashboard-copy,
html[data-theme="dark"] .x8-dashboard-screen:before {
  background: linear-gradient(0deg, rgba(0, 0, 0, .78), transparent)
}

html[data-theme="dark"] .price-card.featured {
  background: linear-gradient(#10121e, #10121e) padding-box, var(--brand-gradient) border-box
}

html[data-theme="dark"] .faq-question {
  color: #f7f4ff
}

html[data-theme="dark"] .footer-big-logo {
  opacity: .92;
  filter: drop-shadow(0 28px 80px rgba(143, 115, 194, .22))
}

html[data-theme="dark"] .x8-footer,
html[data-theme="dark"] footer {
  background: #04040c;
  color: #ddd
}

@media(max-width:760px) {
  .theme-toggle {
    width: 60px;
    height: 36px
  }

  .theme-toggle-knob {
    width: 26px;
    height: 26px
  }

  .theme-icon {
    width: 16px;
    height: 16px
  }

  html[data-theme="dark"] .theme-toggle-knob {
    transform: translateX(26px)
  }
}

@media(prefers-reduced-motion:reduce) {

  .theme-toggle,
  .theme-toggle-knob,
  .theme-icon {
    transition: none !important
  }
}


/* === Compact homepage hero fix === */
.x8-hero {
  min-height: 85vh !important;
  padding: 140px 0 10px !important;
}

.x8-hero-grid {
  align-items: center !important;
  gap: 24px !important;
}

.x8-hero-copy h1 {
  font-size: clamp(2.2rem, 4vw, 4rem) !important;
  line-height: 1.05 !important;
}

.x8-hero-copy p {
  margin-bottom: 14px !important;
}

.hero-chip-row {
  display: none !important;
}

.hero-actions {
  margin-top: 30px !important;
}

.x8-hero-product {
  transform: scale(.92);
  transform-origin: center;
}

@media (max-width:992px) {
  .x8-hero {
    min-height: auto !important;
    padding: 18px 0 !important;
  }

  .x8-hero-product {
    transform: scale(1) !important;
  }
}

/* Project application popup modal - adapted from service page audit popup */
.project-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(3, 5, 8, .92);
  backdrop-filter: blur(24px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease
}

.project-modal-overlay.active {
  opacity: 1;
  pointer-events: auto
}

.project-modal-card {
  width: min(100%, 720px);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  padding: 34px;
  border-radius: 28px;
  background: rgba(10, 13, 20, .88);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .42);
  transform: scale(.95);
  transition: transform .35s cubic-bezier(.175, .885, .32, 1.275);
  color: #fff
}

.project-modal-overlay.active .project-modal-card {
  transform: scale(1)
}

.project-modal-close {
  position: absolute;
  right: 22px;
  top: 20px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #c8cdd8;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: .25s
}

.project-modal-close:hover {
  background: rgba(255, 255, 255, .16);
  color: #fff
}

.project-progress-track {
  height: 8px;
  width: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  overflow: hidden;
  margin-bottom: 30px
}

.project-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--brand-gradient);
  transition: width .3s ease
}

.project-form-step {
  display: none;
  animation: projectStepIn .35s ease
}

.project-form-step.active {
  display: block
}

.project-form-step h3 {
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 24px;
  color: #fff
}

.project-form-stack {
  display: grid;
  gap: 16px
}

.project-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.project-form-step label {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: #a8b0c0;
  margin-bottom: 7px
}

.project-form-step input,
.project-form-step select {
  width: 100%;
  padding: 14px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font: inherit;
  outline: none;
  transition: .25s
}

.project-form-step input:focus,
.project-form-step select:focus {
  border-color: #F28066;
  box-shadow: 0 0 0 4px rgba(242, 128, 102, .12)
}

.project-form-step select option {
  background: #0a0d14;
  color: #fff
}

.project-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.project-option-grid.three {
  grid-template-columns: repeat(3, 1fr)
}

.project-option-grid label,
.project-option-list label {
  cursor: pointer;
  margin: 0
}

.project-option-grid input,
.project-option-list input {
  display: none
}

.project-option-grid span,
.project-option-list span {
  display: block;
  padding: 16px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
  color: #d7dbe5;
  font-weight: 850;
  transition: .25s
}

.project-option-list {
  display: grid;
  gap: 12px
}

.project-option-list span {
  text-align: left
}

.project-option-grid input:checked+span,
.project-option-list input:checked+span {
  border-color: #F28066;
  background: rgba(242, 128, 102, .13);
  color: #fff
}

.project-modal-next {
  width: 100%;
  margin-top: 28px
}

.project-modal-actions {
  display: flex;
  gap: 14px;
  margin-top: 28px
}

.project-modal-actions .btn {
  flex: 1
}

.project-success {
  text-align: center;
  padding: 30px 0
}

.project-success-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, .14);
  color: #22c55e;
  font-size: 42px;
  font-weight: 900
}

.project-success p {
  color: #a8b0c0;
  max-width: 420px;
  margin: 0 auto 24px;
  line-height: 1.7
}

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

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

html[data-theme="dark"] .project-modal-card {
  background: rgba(10, 13, 20, .92);
  border-color: rgba(255, 255, 255, .10)
}

@media(max-width:760px) {
  .project-modal-card {
    padding: 26px 20px;
    border-radius: 24px
  }

  .project-form-row,
  .project-option-grid,
  .project-option-grid.three {
    grid-template-columns: 1fr
  }

  .project-modal-actions {
    flex-direction: column
  }

  .project-form-step h3 {
    font-size: 24px
  }
}


/* Portfolio buttons and final shared refinements */
.project-btn.btn-black,
.btn-black.project-btn {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  box-shadow: 0 18px 42px rgba(16, 16, 20, .18);
}

.project-btn.btn-black:hover,
.btn-black.project-btn:hover {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  transform: translateY(-2px);
}

.project-btn.btn-black:focus-visible,
.btn-black.project-btn:focus-visible {
  outline: 3px solid rgba(255, 122, 99, .45);
  outline-offset: 3px;
}

.project-btn.btn-black::after,
.btn-black.project-btn::after {
  content: none !important;
  display: none !important;
}

.tech-icons span {
  display: inline-flex;
  align-items: center;
}

.tech-icons span i {
  margin-right: 8px;
  color: #ff7a59;
}

.marquee-track {
  animation-duration: 25s !important;
}

.tech-icons .tech-chip,
.x8-marquee-track.tech-icons .tech-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px 12px 12px !important;
}

.tech-icons .tech-chip::before,
.x8-marquee-track.tech-icons .tech-chip::before {
  content: attr(data-logo);
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  background: linear-gradient(135deg, #abd4dd 0%, #f3b55c 34%, #e8625f 60%, #7c5db4 100%);
  box-shadow: 0 8px 18px rgba(16, 16, 20, .12);
}

.tech-icons .tech-chip[data-logo="⚛"]::before,
.tech-icons .tech-chip[data-logo="⚡"]::before {
  font-size: 16px;
}

.tech-icons .tech-chip[data-logo="</>"]::before,
.tech-icons .tech-chip[data-logo="{}"]::before {
  font-size: 11px;
}

.x8-keyword-cloud-wrap {
  display: grid !important;
  gap: 18px !important;
  overflow: hidden !important;
}

.x8-keyword-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 78px !important;
  padding: 14px 18px !important;
  overflow: hidden !important;
  border-radius: 26px !important;
}

.x8-keyword-row::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 210px !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .98) 76%, rgba(255, 255, 255, .92) 88%, rgba(255, 255, 255, 0) 100%) !important;
}

.x8-keyword-row b {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 132px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 10px 24px rgba(16, 16, 20, .14) !important;
}

.x8-keyword-row div {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  width: max-content !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
  overflow: visible !important;
  animation: x8Marquee 34s linear infinite !important;
}

.x8-keyword-row:nth-child(even) div {
  animation-direction: reverse !important;
}

.x8-keyword-row span {
  flex: 0 0 auto !important;
}

html[data-theme="dark"] .x8-keyword-row::before {
  background: linear-gradient(90deg, rgba(18, 18, 24, .98) 0%, rgba(18, 18, 24, .98) 76%, rgba(18, 18, 24, .92) 88%, rgba(18, 18, 24, 0) 100%) !important;
}

@media (max-width: 760px) {
  .tech-icons .tech-chip::before,
  .x8-marquee-track.tech-icons .tech-chip::before {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }
}

/* =========================================================
   PHONE VIEW POLISH — mobile-only improvements
   Keeps desktop/tablet web view untouched.
   ========================================================= */
@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 0% 0%, rgba(195, 227, 210, .58), transparent 30%),
      radial-gradient(circle at 100% 8%, rgba(143, 115, 194, .20), transparent 32%),
      radial-gradient(circle at 50% 38%, rgba(242, 128, 102, .08), transparent 36%),
      var(--bg);
  }

  .container {
    width: min(100% - 24px, var(--max));
  }

  section {
    padding: 64px 0 !important;
  }

  .x8-announcement {
    min-height: 44px !important;
    padding: 7px 42px 7px 12px !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  .x8-announcement-track {
    justify-content: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .x8-announcement button {
    right: 10px !important;
    width: 26px !important;
    height: 26px !important;
  }

  .site-header,
  .x8-home .x8-header {
    top: 56px !important;
    width: calc(100% - 20px) !important;
    padding: 10px 10px 10px 14px !important;
    border-radius: 22px !important;
    gap: 10px !important;
  }

  .x8-home.announcement-closed .x8-header,
  body.announcement-closed .site-header {
    top: 10px !important;
  }

  .brand img {
    width: 118px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  .brand .fallback {
    font-size: 20px !important;
  }

  .menu-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 18px !important;
    position: relative !important;
    z-index: 3 !important;
  }

  .nav,
  .x8-nav {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    right: 0 !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    max-height: calc(100dvh - 132px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(16, 16, 20, .08) !important;
    box-shadow: 0 24px 70px rgba(16, 16, 20, .16) !important;
  }

  .nav.active,
  .x8-nav.active {
    display: flex !important;
  }

  .nav > a,
  .x8-nav > a,
  .x8-nav .mega-item > a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 44px !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(16, 16, 20, .035) !important;
  }

  .nav-cta {
    text-align: center !important;
    justify-content: center !important;
    background: #111 !important;
    color: #fff !important;
  }

  .mega-item {
    width: 100% !important;
    display: block !important;
  }

  .mega-menu,
  .mega-menu.compact {
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    gap: 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    background: rgba(16, 16, 20, .035) !important;
  }

  .mega-menu div {
    padding: 13px !important;
    border-radius: 16px !important;
  }

  .mega-menu span {
    font-size: 12px !important;
  }

  .floating-actions {
    right: 12px !important;
    bottom: 12px !important;
    gap: 9px !important;
  }

  .float-btn {
    width: 46px !important;
    height: 46px !important;
  }

  .float-btn svg {
    width: 22px !important;
    height: 22px !important;
  }

  .hero,
  .x8-hero {
    min-height: auto !important;
    padding: 134px 0 44px !important;
    align-items: flex-start !important;
  }

  .x8-home.announcement-closed .x8-hero,
  body.announcement-closed .x8-hero {
    padding-top: 92px !important;
  }

  .hero-grid,
  .x8-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .x8-hero-copy {
    text-align: left !important;
  }

  .eyebrow {
    max-width: 100% !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    margin-bottom: 18px !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  h1,
  .x8-hero-copy h1 {
    font-size: clamp(38px, 11vw, 48px) !important;
    line-height: .98 !important;
    letter-spacing: -.06em !important;
  }

  .hero p,
  .page-hero p,
  .x8-hero-copy p {
    margin-top: 18px !important;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
  }

  .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    margin-top: 24px !important;
  }

  .btn {
    width: 100% !important;
    min-height: 50px !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  .hero-chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 9px !important;
    margin-top: 18px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  .hero-chip-row::-webkit-scrollbar {
    display: none !important;
  }

  .hero-chip-row a {
    flex: 0 0 auto !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .x8-hero-product,
  .hero-panel,
  .x8-tab-shell,
  .timeline-estimator,
  .build-score-card,
  .serp-builder,
  .keyword-live-panel,
  .cluster-map,
  .x8-cta-grid,
  .x8-contact-form,
  .card,
  .service-card,
  .price-card,
  .project-card,
  .feature-card,
  .feature-tab-card {
    border-radius: 24px !important;
  }

  .x8-hero-product {
    transform: none !important;
    overflow: hidden !important;
  }

  .x8-live-header {
    height: 46px !important;
    padding: 0 14px !important;
  }

  .x8-live-header b {
    font-size: 12px !important;
  }

  .x8-dashboard-tabs,
  .x8-tab-buttons,
  .industry-cloud-tabs,
  .feature-tabs,
  .pricing-toggle,
  .compare-toggle {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
  }

  .x8-dashboard-tabs::-webkit-scrollbar,
  .x8-tab-buttons::-webkit-scrollbar,
  .industry-cloud-tabs::-webkit-scrollbar,
  .feature-tabs::-webkit-scrollbar,
  .pricing-toggle::-webkit-scrollbar,
  .compare-toggle::-webkit-scrollbar {
    display: none !important;
  }

  .x8-dashboard-tabs button,
  .x8-tab-buttons button,
  .industry-cloud-tabs button,
  .feature-tabs button,
  .pricing-toggle button,
  .compare-toggle button {
    flex: 0 0 auto !important;
    padding: 10px 13px !important;
    font-size: 12.5px !important;
  }

  .x8-dashboard-screen {
    margin: 0 12px 12px !important;
    height: 255px !important;
    min-height: 255px !important;
    border-radius: 22px !important;
  }

  .x8-dashboard-screen img {
    height: 255px !important;
    min-height: 255px !important;
  }

  .x8-dashboard-copy {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 13px !important;
    border-radius: 18px !important;
  }

  .x8-dashboard-copy h3 {
    font-size: 20px !important;
    line-height: 1.08 !important;
  }

  .x8-dashboard-copy p {
    font-size: 12px !important;
    line-height: 1.45 !important;
  }

  .x8-dashboard-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    padding: 0 12px 14px !important;
  }

  .x8-dashboard-metrics div {
    padding: 10px 8px !important;
    border-radius: 16px !important;
    text-align: center !important;
  }

  .x8-dashboard-metrics strong {
    font-size: 22px !important;
  }

  .x8-dashboard-metrics small {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  .trusted-section {
    padding: 56px 0 !important;
  }

  .trusted-header {
    margin-bottom: 28px !important;
    padding: 0 16px !important;
  }

  .trusted-header h2,
  .section-head h2,
  .fluxo-section-head h2,
  .page-hero h1,
  .x8-cta-grid h2 {
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.02 !important;
  }

  .marquee-wrapper {
    gap: 22px !important;
    padding: 0 12px !important;
  }

  .marquee-row {
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent) !important;
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent) !important;
  }

  .marquee-track {
    gap: 14px !important;
    padding-right: 14px !important;
    animation-duration: 34s !important;
  }

  .logo-card {
    width: 148px !important;
    height: 72px !important;
    padding: 0 16px !important;
    border-radius: 14px !important;
  }

  .logo-card img {
    max-height: 42px !important;
  }

  .x8-deliver-grid,
  .x8-alt-row,
  .x8-cta-grid,
  .smart-split,
  .process-visual-grid,
  .comparison-grid,
  .fluxo-faq-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .x8-tab-shell,
  .x8-deliver-copy,
  .x8-deliver-mockup,
  .seo-planner,
  .timeline-estimator,
  .build-score-card,
  .serp-builder,
  .keyword-live-panel {
    padding: 18px !important;
  }

  .x8-deliver-copy h3,
  .x8-alt-row h3 {
    font-size: 28px !important;
    line-height: 1.05 !important;
  }

  .x8-deliver-copy p,
  .x8-alt-row p,
  .section-head p,
  .fluxo-faq-left p,
  .x8-cta-grid ul,
  .project-content p,
  .price-card p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
  }

  .x8-deliver-mockup {
    min-height: 330px !important;
  }

  .x8-browser-draw,
  .x8-code-lines,
  .device-demo,
  .seo-demo,
  .chat-demo {
    max-width: 100% !important;
  }

  .x8-steps,
  .x8-dashboard-metrics,
  .x8-case-grid,
  .x8-trust-grid,
  .pricing-grid,
  .portfolio-grid,
  .grid-3,
  .grid-4,
  .feature-grid,
  .stats-grid,
  .form-row,
  .footer-grid,
  .x8-footer-grid,
  .project-form-row,
  .project-option-grid,
  .project-option-grid.three {
    grid-template-columns: 1fr !important;
  }

  .x8-steps article,
  .timeline-step,
  .deliverable-row,
  .plan-card,
  .price-card,
  .project-content,
  .fluxo-faq-item button {
    padding: 20px !important;
  }

  .x8-steps article h3,
  .timeline-step h3,
  .project-content h3,
  .price-card h3 {
    font-size: 23px !important;
    line-height: 1.12 !important;
  }

  .process-timeline {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    min-height: 0 !important;
    margin-top: 26px !important;
  }

  .timeline-step:nth-of-type(even) {
    transform: none !important;
  }

  .timeline-step img,
  .feature-tab-card img,
  .visual-stack img,
  .visual-stack img:first-child {
    height: 178px !important;
  }

  .proof-strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .proof-shot {
    min-height: 210px !important;
  }

  .cluster-map {
    height: auto !important;
    min-height: 0 !important;
    padding: 18px !important;
    display: grid !important;
    gap: 10px !important;
  }

  .cluster-map svg {
    display: none !important;
  }

  .cluster-node {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 18px !important;
  }

  .serp-builder form {
    grid-template-columns: 1fr !important;
  }

  .serp-card {
    padding: 18px !important;
    border-radius: 20px !important;
  }

  .serp-card h4 {
    font-size: 19px !important;
    line-height: 1.22 !important;
  }

  .portfolio-toolbar {
    gap: 14px !important;
    margin-bottom: 24px !important;
  }

  .portfolio-filters {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 8px !important;
    scrollbar-width: none !important;
  }

  .portfolio-filters::-webkit-scrollbar {
    display: none !important;
  }

  .filter-btn {
    flex: 0 0 auto !important;
    padding: 10px 14px !important;
    font-size: 12.5px !important;
  }

  .portfolio-search {
    border-radius: 18px !important;
    padding: 14px 16px !important;
  }

  .project-img {
    height: 218px !important;
  }

  .project-meta {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .project-toggle {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .price-card.featured {
    transform: none !important;
  }

  .price,
  .estimate-card .price {
    font-size: 36px !important;
  }

  .badge {
    position: static !important;
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 14px !important;
  }

  .fluxo-faq-left {
    position: relative !important;
    top: 0 !important;
  }

  .fluxo-faq-item button {
    font-size: 15px !important;
    line-height: 1.35 !important;
    align-items: flex-start !important;
  }

  .fluxo-faq-answer p {
    padding: 0 20px 20px !important;
    font-size: 14px !important;
  }

  .x8-cta-grid {
    padding: 22px !important;
  }

  .x8-contact-form {
    padding: 18px !important;
    gap: 12px !important;
  }

  input,
  select,
  textarea {
    min-height: 48px !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 110px !important;
  }

  .page-hero {
    padding-top: 118px !important;
    padding-bottom: 58px !important;
  }

  .page-hero .hero-panel,
  .hero-panel {
    padding: 24px !important;
  }

  .modal-card,
  .project-modal-card {
    width: min(100% - 18px, 520px) !important;
    max-height: calc(100dvh - 24px) !important;
    overflow-y: auto !important;
    border-radius: 24px !important;
    padding: 22px 18px !important;
  }

  .project-modal-overlay {
    padding: 12px !important;
  }

  .footer,
  .x8-footer {
    padding-bottom: 82px !important;
  }

  /* Mobile-only cleanup requested: hide the Tools and Keyword Planner sections. */
  .x8-tech-marquee,
  .x8-keyword-planner {
    display: none !important;
  }

  html[data-theme="dark"] .nav,
  html[data-theme="dark"] .x8-nav {
    background: rgba(12, 13, 20, .98) !important;
    border-color: rgba(255, 255, 255, .10) !important;
  }

  html[data-theme="dark"] .nav > a,
  html[data-theme="dark"] .x8-nav > a,
  html[data-theme="dark"] .x8-nav .mega-item > a,
  html[data-theme="dark"] .mega-menu {
    background: rgba(255, 255, 255, .06) !important;
  }

  .x8-hero-product .x8-dashboard-metrics {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .fluxo-testimonial-section {
    padding: 68px 0 74px !important;
    overflow: hidden !important;
  }

  .fluxo-testimonial-section .container {
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .fluxo-section-head {
    margin-bottom: 28px !important;
  }

  .fluxo-testimonial-slider {
    overflow: visible !important;
    padding-bottom: 54px !important;
  }

  .fluxo-testimonial-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
  }

  .fluxo-testimonial-track {
    display: flex !important;
    align-items: stretch !important;
    will-change: transform !important;
  }

  .fluxo-testimonial-card,
  .fluxo-testimonial-card.active {
    box-sizing: border-box !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 22px 20px !important;
    border-radius: 24px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .fluxo-testimonial-card p {
    min-height: 0 !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    text-align: left !important;
  }

  .fluxo-testimonial-user {
    align-items: center !important;
    gap: 12px !important;
  }

  .fluxo-user-avatar {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .fluxo-testimonial-dots {
    margin-top: 18px !important;
  }

  .fluxo-testimonial-arrow {
    top: auto !important;
    bottom: 2px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 22px !important;
    transform: none !important;
  }

  .fluxo-testimonial-arrow.prev {
    left: calc(50% - 112px) !important;
    right: auto !important;
  }

  .fluxo-testimonial-arrow.next {
    left: calc(50% + 76px) !important;
    right: auto !important;
  }

}

@media (max-width: 420px) {
  .container {
    width: calc(100% - 20px) !important;
  }

  .site-header,
  .x8-home .x8-header {
    width: calc(100% - 16px) !important;
  }

  .brand img {
    width: 108px !important;
  }

  h1,
  .x8-hero-copy h1 {
    font-size: clamp(34px, 10.5vw, 42px) !important;
  }

  .trusted-header h2,
  .section-head h2,
  .fluxo-section-head h2,
  .page-hero h1,
  .x8-cta-grid h2 {
    font-size: clamp(30px, 9vw, 38px) !important;
  }

  .x8-dashboard-screen,
  .x8-dashboard-screen img {
    height: 232px !important;
    min-height: 232px !important;
  }

  .x8-dashboard-metrics {
    gap: 6px !important;
  }

  .x8-dashboard-metrics div {
    padding: 9px 5px !important;
  }

  .x8-dashboard-metrics strong {
    font-size: 20px !important;
  }

  .x8-dashboard-metrics small {
    font-size: 9.5px !important;
  }

  .logo-card {
    width: 136px !important;
  }

  .project-img,
  .proof-shot {
    height: 200px !important;
    min-height: 200px !important;
  }

  .fluxo-testimonial-section .container {
    width: calc(100% - 20px) !important;
  }

  .fluxo-testimonial-card,
  .fluxo-testimonial-card.active {
    padding: 20px 18px !important;
  }

  .fluxo-testimonial-arrow.prev {
    left: calc(50% - 104px) !important;
  }

  .fluxo-testimonial-arrow.next {
    left: calc(50% + 68px) !important;
  }

}


/* =========================================================
   Fluxo About Us Page — SEO-focused agency page
   ========================================================= */
.about-page .site-header .nav a.active {
  color: var(--text);
  background: rgba(255,255,255,.72);
  box-shadow: 0 12px 34px rgba(16,16,20,.08);
}

.about-hero {
  padding: 150px 0 80px;
  position: relative;
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 54px;
  align-items: center;
}

.about-hero-copy h1 {
  font-size: clamp(46px, 7vw, 86px);
  letter-spacing: -.075em;
  line-height: .92;
  max-width: 920px;
  margin: 18px 0 24px;
}

.about-hero-copy p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
  font-weight: 650;
  max-width: 740px;
}

.about-trust-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.about-trust-row span {
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,16,20,.08);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.about-hero-visual {
  min-height: 560px;
  border-radius: 48px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 20%, rgba(195,227,210,.9), transparent 24%),
    radial-gradient(circle at 74% 18%, rgba(227,87,150,.42), transparent 28%),
    linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,250,244,.45));
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: var(--shadow);
}

.about-hero-visual:before,
.about-hero-visual:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .22;
  filter: blur(28px);
}

.about-hero-visual:before {
  width: 260px;
  height: 260px;
  left: -90px;
  bottom: 10%;
}

.about-hero-visual:after {
  width: 210px;
  height: 210px;
  right: -70px;
  top: 8%;
}

.about-orbit-card.main-card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(78%, 390px);
  padding: 34px;
  border-radius: 34px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 26px 85px rgba(16,16,20,.13);
  backdrop-filter: blur(20px);
  z-index: 2;
}

.about-orbit-card span,
.about-keyword-card span {
  display: inline-flex;
  color: #b44932;
  background: rgba(242,128,102,.12);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.about-orbit-card strong {
  display: block;
  font-size: clamp(28px, 4vw, 46px);
  line-height: .98;
  letter-spacing: -.055em;
}

.about-orbit-card small {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.55;
}

.about-orbit-ring {
  position: absolute;
  inset: 78px;
  border: 1px dashed rgba(16,16,20,.18);
  border-radius: 50%;
  animation: aboutSpin 22s linear infinite;
}

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

.about-orbit-chip {
  position: absolute;
  z-index: 3;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 14px 40px rgba(16,16,20,.10);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -.01em;
}

.chip-one { top: 78px; left: 70px; animation: chipFloat 5.2s ease-in-out infinite alternate; }
.chip-two { top: 115px; right: 55px; animation: chipFloat 6.1s ease-in-out infinite alternate-reverse; }
.chip-three { bottom: 120px; left: 50px; animation: chipFloat 5.6s ease-in-out infinite alternate; }
.chip-four { bottom: 78px; right: 72px; animation: chipFloat 6.5s ease-in-out infinite alternate-reverse; }

@keyframes chipFloat { from { transform: translateY(0); } to { transform: translateY(-18px); } }

.about-intro-section,
.about-values-section,
.about-expertise-section,
.about-proof-section,
.about-faq-section,
.about-final-cta,
.about-keyword-section,
.about-process-section {
  padding: 86px 0;
}

.about-collage {
  min-height: 560px;
  position: relative;
}

.collage-card {
  position: absolute;
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 28px 75px rgba(16,16,20,.12);
  border: 1px solid rgba(16,16,20,.08);
}

.collage-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collage-card span {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  border-radius: 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px);
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(16,16,20,.12);
}

.collage-card.large {
  width: 75%;
  height: 360px;
  left: 0;
  top: 28px;
}

.collage-card.small {
  width: 44%;
  height: 210px;
}

.collage-card.small.one { right: 0; top: 0; }
.collage-card.small.two { right: 6%; bottom: 18px; }

.about-mini-stats {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  margin-top: 26px;
}

.about-mini-stats div,
.about-keyword-card,
.seo-map-panel div,
.about-process-track article,
.about-cta-panel {
  border-radius: 26px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 18px 52px rgba(16,16,20,.07);
}

.about-mini-stats div {
  padding: 18px;
}

.about-mini-stats strong {
  display: block;
  font-size: 22px;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.about-mini-stats span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.about-keyword-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 36px;
}

.about-keyword-card {
  padding: 28px;
  min-height: 250px;
}

.about-keyword-card.primary {
  background: linear-gradient(145deg, rgba(16,16,20,.94), rgba(16,16,20,.78));
  color: #fff;
}

.about-keyword-card.primary p { color: rgba(255,255,255,.72); }

.about-keyword-card h3 {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -.05em;
  margin-bottom: 14px;
}

.about-keyword-card p {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.65;
}

.seo-map-panel {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  margin-top: 18px;
}

.seo-map-panel div {
  padding: 20px;
}

.seo-map-panel b {
  display: block;
  color: #b44932;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 10px;
}

.seo-map-panel span {
  color: var(--text);
  font-weight: 850;
  line-height: 1.38;
}

.about-values-grid .feature-card {
  min-height: 320px;
}

.about-process-track {
  position: relative;
  display: grid;
  gap: 16px;
}

.about-process-track:before {
  content: "";
  position: absolute;
  left: 30px;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: linear-gradient(var(--coral), var(--purple));
  opacity: .24;
}

.about-process-track article {
  position: relative;
  padding: 22px 24px 22px 82px;
}

.about-process-track b {
  position: absolute;
  left: 18px;
  top: 22px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: var(--text);
  font-size: 11px;
  font-weight: 1000;
}

.about-process-track h3 {
  font-size: 24px;
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.about-process-track p {
  color: var(--muted);
  line-height: 1.6;
  font-weight: 650;
}

.about-services-grid .service-card {
  min-height: 330px;
}

.about-proof-strip {
  margin-top: 34px;
}

.about-faq-section .faq-wrap {
  margin-top: 0;
}

.about-final-cta {
  padding-bottom: 110px;
}

.about-cta-panel {
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.about-cta-panel:before {
  content: "";
  position: absolute;
  right: -120px;
  top: -150px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .24;
  filter: blur(28px);
}

.about-cta-panel > * {
  position: relative;
  z-index: 1;
}

.about-cta-panel h2 {
  font-size: clamp(38px, 5vw, 70px);
  line-height: .92;
  letter-spacing: -.07em;
  margin: 12px 0 18px;
  max-width: 780px;
}

.about-cta-panel p {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.7;
  max-width: 720px;
}

.about-cta-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

html[data-theme="dark"] .about-page .site-header .nav a.active,
html[data-theme="dark"] .about-trust-row span,
html[data-theme="dark"] .about-orbit-card.main-card,
html[data-theme="dark"] .about-orbit-chip,
html[data-theme="dark"] .collage-card,
html[data-theme="dark"] .collage-card span,
html[data-theme="dark"] .about-mini-stats div,
html[data-theme="dark"] .about-keyword-card,
html[data-theme="dark"] .seo-map-panel div,
html[data-theme="dark"] .about-process-track article,
html[data-theme="dark"] .about-cta-panel,
html[data-theme="dark"] .about-hero-visual {
  background: rgba(25,25,30,.78);
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .about-keyword-card.primary {
  background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
}

html[data-theme="dark"] .seo-map-panel span,
html[data-theme="dark"] .about-trust-row span { color: #fff; }

@media (max-width: 1020px) {
  .about-hero-grid,
  .about-intro-grid,
  .about-process-section .smart-split,
  .about-faq-section .smart-split {
    grid-template-columns: 1fr;
  }
  .about-hero-visual { min-height: 500px; }
  .about-keyword-grid { grid-template-columns: repeat(2,1fr); }
  .seo-map-panel { grid-template-columns: repeat(2,1fr); }
  .about-cta-panel { grid-template-columns: 1fr; }
  .about-cta-actions { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .about-hero { padding: 126px 0 56px; }
  .about-hero-copy h1 { font-size: clamp(39px, 13vw, 54px); }
  .about-hero-copy p { font-size: 16px; }
  .about-hero-visual { min-height: 410px; border-radius: 34px; }
  .about-orbit-ring { inset: 46px; }
  .about-orbit-card.main-card { width: 82%; padding: 24px; border-radius: 26px; }
  .about-orbit-card strong { font-size: 30px; }
  .about-orbit-chip { font-size: 11px; padding: 10px 12px; border-radius: 14px; }
  .chip-one { top: 48px; left: 26px; }
  .chip-two { top: 84px; right: 20px; }
  .chip-three { bottom: 88px; left: 18px; }
  .chip-four { bottom: 45px; right: 26px; }
  .about-intro-section,
  .about-values-section,
  .about-expertise-section,
  .about-proof-section,
  .about-faq-section,
  .about-final-cta,
  .about-keyword-section,
  .about-process-section { padding: 58px 0; }
  .about-collage { min-height: auto; display: grid; gap: 16px; }
  .collage-card,
  .collage-card.large,
  .collage-card.small,
  .collage-card.small.one,
  .collage-card.small.two { position: relative; width: 100%; height: 220px; inset: auto; }
  .about-mini-stats,
  .about-keyword-grid,
  .seo-map-panel { grid-template-columns: 1fr; }
  .about-keyword-card { min-height: auto; }
  .about-process-track article { padding: 20px 20px 20px 70px; }
  .about-cta-panel { padding: 30px; border-radius: 30px; }
  .about-cta-panel h2 { font-size: 40px; }
  .about-trust-row span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-orbit-ring,
  .about-orbit-chip { animation: none !important; }
}

/* =========================================================
   Fluxo About Us — simplified agency style V2
   Cleaner public-facing copy, interactive planner, mobile-first.
   ========================================================= */
.about-lite-page .site-header .nav a.active {
  color: var(--coral);
}

.about-lite-hero {
  padding: 160px 0 72px;
  position: relative;
  overflow: hidden;
}

.about-lite-hero:before {
  content: "";
  position: absolute;
  inset: 84px 0 auto 0;
  height: 520px;
  background: radial-gradient(circle at 28% 35%, rgba(242,128,102,.18), transparent 30%), radial-gradient(circle at 72% 22%, rgba(143,115,194,.18), transparent 32%);
  pointer-events: none;
}

.about-lite-hero-grid,
.about-story-grid,
.selector-grid,
.seo-human-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.about-lite-copy h1 {
  max-width: 780px;
  font-size: clamp(54px, 8vw, 112px);
  line-height: .88;
  letter-spacing: -.08em;
  margin: 18px 0 26px;
}

.about-lite-copy p,
.story-copy p,
.about-lite-beliefs .section-head p,
.about-lite-work .section-head p,
.about-lite-team .section-head p,
.about-lite-faq .section-head p,
.seo-human-card p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.74;
  font-weight: 650;
}

.about-lite-stage {
  min-height: 590px;
  border-radius: 48px;
  padding: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(255,250,244,.44));
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.stage-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  right: -110px;
  top: -100px;
  background: var(--brand-gradient);
  opacity: .26;
  filter: blur(30px);
  z-index: -1;
  animation: aboutLitePulse 5s ease-in-out infinite alternate;
}

@keyframes aboutLitePulse {
  to { transform: translate3d(-20px, 40px, 0) scale(1.15); }
}

.mini-window {
  min-height: 360px;
  border-radius: 34px;
  background: rgba(16,16,20,.92);
  color: #fff;
  box-shadow: 0 36px 90px rgba(16,16,20,.22);
  overflow: hidden;
}

.mini-window-top {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.mini-window-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

.mini-window-body {
  padding: 38px;
}

.mini-kicker,
.solution-label {
  display: inline-flex;
  margin-bottom: 18px;
  border-radius: 999px;
  padding: 9px 12px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  font-size: 11px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .11em;
}

.mini-window h2 {
  font-size: clamp(40px, 5vw, 66px);
  line-height: .9;
  letter-spacing: -.07em;
  max-width: 420px;
}

.mini-window p {
  margin-top: 18px;
  max-width: 440px;
  color: rgba(255,255,255,.7);
  font-weight: 700;
  line-height: 1.65;
}

.stage-progress {
  height: 10px;
  margin-top: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  overflow: hidden;
}

.stage-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-gradient-2);
  transition: width .45s cubic-bezier(.2,.8,.2,1);
}

.stage-tabs {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  margin-top: 18px;
}

.stage-tabs button,
.need-buttons button {
  border: 0;
  border-radius: 999px;
  padding: 14px 16px;
  background: rgba(255,255,255,.76);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(16,16,20,.06);
  transition: .25s;
}

.stage-tabs button:hover,
.stage-tabs button.active,
.need-buttons button:hover,
.need-buttons button.active {
  transform: translateY(-3px);
  background: var(--text);
  color: #fff;
}

.about-lite-marquee {
  overflow: hidden;
  border-block: 1px solid rgba(16,16,20,.08);
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(16px);
}

.about-marquee-track {
  display: flex;
  width: max-content;
  gap: 18px;
  padding: 18px 0;
  animation: aboutMarquee 24s linear infinite;
}

.about-marquee-track span {
  white-space: nowrap;
  border-radius: 999px;
  padding: 12px 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,16,20,.07);
  color: var(--text);
  font-weight: 1000;
  letter-spacing: -.02em;
}

@keyframes aboutMarquee {
  to { transform: translateX(-50%); }
}

.about-lite-story,
.about-lite-beliefs,
.about-lite-selector,
.about-lite-process,
.about-lite-work,
.about-lite-seo,
.about-lite-team,
.about-lite-faq,
.about-lite-cta {
  padding: 88px 0;
}

.story-copy {
  padding: 36px;
  border-radius: 34px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 24px 64px rgba(16,16,20,.07);
}

.story-copy p + p { margin-top: 14px; }

.story-pills,
.solution-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.story-pills span,
.solution-tags span {
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(242,128,102,.12);
  color: #a13f2f;
  font-size: 12px;
  font-weight: 1000;
}

.belief-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  margin-top: 36px;
}

.belief-card,
.solution-panel,
.process-tile,
.seo-human-card,
.seo-checklist,
.about-lite-cta-panel {
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 20px 58px rgba(16,16,20,.07);
}

.belief-card {
  padding: 28px;
  border-radius: 30px;
  min-height: 260px;
}

.belief-card span,
.process-tile b,
.seo-checklist span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: var(--text);
  font-weight: 1000;
  margin-bottom: 28px;
}

.belief-card h3,
.process-tile h3,
.solution-panel h3 {
  font-size: 26px;
  line-height: 1.02;
  letter-spacing: -.05em;
  margin-bottom: 12px;
}

.belief-card p,
.process-tile p,
.solution-panel p {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.65;
}

.need-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.solution-panel {
  min-height: 420px;
  border-radius: 42px;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.solution-panel:before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  right: -90px;
  bottom: -90px;
  background: var(--brand-gradient);
  opacity: .2;
  filter: blur(20px);
}

.solution-panel > * { position: relative; z-index: 1; }
.solution-label { background: rgba(242,128,102,.12); color: #a13f2f; }
.solution-panel h3 { font-size: clamp(34px, 4vw, 58px); }
.solution-panel p { font-size: 17px; }

.process-lane {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-top: 36px;
  position: relative;
}

.process-lane:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 43px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(242,128,102,.5), rgba(143,115,194,.5), transparent);
}

.process-tile {
  border-radius: 28px;
  padding: 28px;
  min-height: 250px;
  position: relative;
}

.process-tile b { position: relative; z-index: 1; }

.about-work-strip {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.work-mini {
  display: block;
  min-height: 320px;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  background: #fff;
  box-shadow: 0 24px 70px rgba(16,16,20,.10);
  border: 1px solid rgba(16,16,20,.08);
}

.work-mini img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}

.work-mini:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(16,16,20,.76));
}

.work-mini span {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 1;
  color: #fff;
  font-weight: 1000;
  font-size: 18px;
}

.work-mini:hover img { transform: scale(1.06); }

.seo-human-card,
.seo-checklist {
  border-radius: 36px;
  padding: 38px;
}

.seo-human-card h2 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: .92;
  letter-spacing: -.07em;
  margin: 14px 0 20px;
}

.seo-checklist {
  display: grid;
  gap: 14px;
}

.seo-checklist div {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  color: var(--text);
  font-weight: 900;
}

.seo-checklist span {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  flex: 0 0 auto;
}

.about-lite-team {
  position: relative;
  overflow: hidden;
}

.about-lite-team:before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 8% 18%, rgba(242,128,102,.13), transparent 30%), radial-gradient(circle at 92% 76%, rgba(143,115,194,.12), transparent 32%);
  pointer-events: none;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 42px;
  position: relative;
  z-index: 1;
}

.team-card {
  border-radius: 34px;
  overflow: hidden;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 24px 70px rgba(16,16,20,.09);
  transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .34s cubic-bezier(.2,.8,.2,1);
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 38px 92px rgba(16,16,20,.14);
}

.team-photo {
  position: relative;
  height: 360px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.85), rgba(247,242,235,.7));
}

.team-photo:after {
  content: "✦";
  position: absolute;
  right: 18px;
  bottom: 16px;
  color: rgba(255,255,255,.92);
  font-size: 24px;
  text-shadow: 0 10px 22px rgba(16,16,20,.25);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .6s cubic-bezier(.2,.8,.2,1);
}

.team-card:hover .team-photo img {
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.04);
}

.team-copy {
  padding: 24px 24px 26px;
}

.team-copy h3 {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 8px;
}

.team-copy p {
  color: var(--muted);
  font-weight: 800;
  margin: 0;
}

.team-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(16,16,20,.08);
  color: var(--muted);
  font-weight: 650;
  line-height: 1.55;
  font-size: 14px;
}

.about-lite-faq .faq-wrap { margin-top: 0; }

.about-lite-cta { padding-bottom: 120px; }

.about-lite-cta-panel {
  border-radius: 42px;
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.about-lite-cta-panel:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -160px;
  top: -160px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .22;
  filter: blur(26px);
}

.about-lite-cta-panel > * { position: relative; z-index: 1; }

.about-lite-cta-panel h2 {
  max-width: 820px;
  margin: 12px 0 18px;
  font-size: clamp(38px, 6vw, 78px);
  line-height: .9;
  letter-spacing: -.075em;
}

.about-lite-cta-panel p {
  max-width: 680px;
  color: var(--muted);
  font-weight: 650;
  line-height: 1.7;
}

html[data-theme="dark"] .about-lite-stage,
html[data-theme="dark"] .story-copy,
html[data-theme="dark"] .belief-card,
html[data-theme="dark"] .solution-panel,
html[data-theme="dark"] .process-tile,
html[data-theme="dark"] .seo-human-card,
html[data-theme="dark"] .seo-checklist,
html[data-theme="dark"] .about-lite-cta-panel,
html[data-theme="dark"] .team-card,
html[data-theme="dark"] .about-marquee-track span,
html[data-theme="dark"] .stage-tabs button,
html[data-theme="dark"] .need-buttons button,
html[data-theme="dark"] .seo-checklist div {
  background: rgba(25,25,30,.78);
  border-color: rgba(255,255,255,.10);
}

html[data-theme="dark"] .stage-tabs button,
html[data-theme="dark"] .need-buttons button,
html[data-theme="dark"] .about-marquee-track span,
html[data-theme="dark"] .seo-checklist div { color: #fff; }

html[data-theme="dark"] .stage-tabs button.active,
html[data-theme="dark"] .need-buttons button.active,
html[data-theme="dark"] .stage-tabs button:hover,
html[data-theme="dark"] .need-buttons button:hover {
  background: #fff;
  color: var(--text);
}

html[data-theme="dark"] .story-pills span,
html[data-theme="dark"] .solution-tags span,
html[data-theme="dark"] .solution-label { color: #ffd0c5; }

@media (max-width: 1020px) {
  .about-lite-hero-grid,
  .about-story-grid,
  .selector-grid,
  .seo-human-grid { grid-template-columns: 1fr; }
  .belief-grid,
  .process-lane,
  .about-work-strip,
  .team-grid { grid-template-columns: repeat(2,1fr); }
  .about-lite-cta-panel { grid-template-columns: 1fr; }
  .process-lane:before { display: none; }
}

@media (max-width: 760px) {
  .about-lite-hero { padding: 128px 0 50px; }
  .about-lite-copy h1 { font-size: clamp(42px, 13vw, 62px); }
  .about-lite-copy p,
  .story-copy p,
  .about-lite-beliefs .section-head p,
  .about-lite-work .section-head p,
  .about-lite-team .section-head p,
  .about-lite-faq .section-head p,
  .seo-human-card p { font-size: 16px; }
  .about-lite-stage { min-height: auto; border-radius: 32px; padding: 18px; }
  .mini-window { min-height: 330px; border-radius: 24px; }
  .mini-window-body { padding: 28px; }
  .mini-window h2 { font-size: 38px; }
  .stage-tabs { grid-template-columns: repeat(2,1fr); }
  .stage-tabs button,
  .need-buttons button { font-size: 12px; padding: 12px 14px; }
  .about-lite-story,
  .about-lite-beliefs,
  .about-lite-selector,
  .about-lite-process,
  .about-lite-work,
  .about-lite-seo,
  .about-lite-team,
  .about-lite-faq,
  .about-lite-cta { padding: 58px 0; }
  .story-copy,
  .solution-panel,
  .seo-human-card,
  .seo-checklist,
  .about-lite-cta-panel { padding: 26px; border-radius: 28px; }
  .belief-grid,
  .process-lane,
  .about-work-strip,
  .team-grid { grid-template-columns: 1fr; }
  .belief-card,
  .process-tile { min-height: auto; }
  .work-mini,
  .work-mini img { min-height: 230px; }
  .team-photo { height: min(430px, 105vw); }
  .seo-human-card h2,
  .about-lite-cta-panel h2 { font-size: 40px; }
  .about-lite-cta { padding-bottom: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .stage-glow,
  .about-marquee-track { animation: none !important; }
}

/* =========================================================
   About Us final alignment patch
   Keeps the hero premium but prevents oversized desktop text.
   ========================================================= */
.about-lite-page .about-lite-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 132px 0 72px;
}

.about-lite-page .about-lite-hero-grid {
  grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
  gap: clamp(36px, 5vw, 72px);
}

.about-lite-page .about-lite-copy {
  max-width: 650px;
}

.about-lite-page .about-lite-copy h1 {
  max-width: 650px;
  font-size: clamp(46px, 5.3vw, 78px);
  line-height: .98;
  letter-spacing: -.065em;
  margin: 16px 0 20px;
  text-wrap: balance;
}

.about-lite-page .about-lite-copy p {
  max-width: 590px;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.62;
}

.about-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
}

.about-hero-points span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 12px 28px rgba(16,16,20,.05);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: -.01em;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.about-hero-points span:hover {
  transform: translateY(-4px);
  background: var(--text);
  color: #fff;
}

.about-lite-page .hero-actions {
  margin-top: 28px;
}

.about-lite-page .about-lite-stage {
  min-height: 500px;
  padding: 24px;
  align-self: center;
}

.about-lite-page .mini-window {
  min-height: 310px;
}

.about-lite-page .mini-window-body {
  padding: clamp(28px, 3vw, 38px);
}

.about-lite-page .mini-window h2 {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: .95;
}

.about-lite-page .mini-window p {
  font-size: 15.5px;
  line-height: 1.6;
}

.about-lite-page .stage-tabs {
  margin-top: 16px;
}

.about-lite-page .stage-tabs button {
  min-height: 50px;
}

html[data-theme="dark"] .about-hero-points span {
  background: rgba(25,25,30,.78);
  border-color: rgba(255,255,255,.10);
  color: #fff;
}

html[data-theme="dark"] .about-hero-points span:hover {
  background: #fff;
  color: var(--text);
}

@media (min-width: 1200px) {
  .about-lite-page .about-lite-copy h1 {
    font-size: 76px;
  }
}

@media (max-width: 1020px) {
  .about-lite-page .about-lite-hero {
    min-height: auto;
    align-items: flex-start;
    padding: 128px 0 58px;
  }
  .about-lite-page .about-lite-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .about-lite-page .about-lite-copy,
  .about-lite-page .about-lite-copy h1,
  .about-lite-page .about-lite-copy p {
    max-width: 780px;
  }
  .about-lite-page .about-lite-copy h1 {
    font-size: clamp(44px, 8.5vw, 76px);
  }
}

@media (max-width: 760px) {
  .about-lite-page .about-lite-hero {
    padding: 116px 0 46px;
  }
  .about-lite-page .about-lite-copy h1 {
    font-size: clamp(38px, 11vw, 56px);
    letter-spacing: -.055em;
    line-height: 1;
  }
  .about-lite-page .about-hero-points span {
    min-height: 38px;
    font-size: 11px;
    padding: 9px 12px;
  }
  .about-lite-page .about-lite-stage {
    padding: 16px;
    border-radius: 28px;
  }
  .about-lite-page .mini-window {
    min-height: 300px;
  }
}

/* =========================================================
   Fluxo Studio About Page - focused content update
   ========================================================= */
.studio-about-page .site-header .nav a.active{color:var(--coral);font-weight:900}
.studio-hero{padding:126px 0 82px;position:relative;overflow:hidden}
.studio-hero:before{content:"";position:absolute;inset:84px 4% 0;border-radius:54px;background:linear-gradient(135deg,rgba(195,227,210,.44),rgba(255,255,255,.68) 42%,rgba(227,87,150,.20));border:1px solid rgba(16,16,20,.06);z-index:-1}
.studio-hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1fr);gap:56px;align-items:start}
.studio-hero-copy h1{font-size:clamp(48px,6.2vw,86px);line-height:.93;letter-spacing:-.075em;margin:0 0 22px;max-width:780px}
.studio-hero-copy p{font-size:clamp(18px,1.8vw,24px);line-height:1.48;color:var(--muted);max-width:660px;font-weight:650}
.studio-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}.studio-visual-card{position:relative;min-height:620px;border-radius:42px;background:rgba(255,255,255,.70);border:1px solid rgba(16,16,20,.08);box-shadow:0 34px 95px rgba(16,16,20,.13);padding:22px;overflow:hidden}.studio-visual-card:before{content:"";position:absolute;width:380px;height:380px;right:-110px;top:-110px;border-radius:50%;background:var(--brand-gradient);filter:blur(54px);opacity:.38}.studio-visual-header{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.studio-visual-header b{color:var(--text);background:#fff;border-radius:999px;padding:8px 11px;border:1px solid var(--line)}.studio-image-frame{position:relative;height:460px;border-radius:34px;overflow:hidden;background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}.studio-image-frame img{width:100%;height:100%;object-fit:cover;transition:opacity .24s ease,transform .7s ease}.studio-image-frame:hover img{transform:scale(1.04)}.studio-image-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.70));pointer-events:none}.studio-image-overlay{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff}.studio-image-overlay h2{font-size:clamp(34px,4vw,58px);line-height:.95;letter-spacing:-.055em;margin:0 0 10px}.studio-image-overlay p{font-size:17px;line-height:1.45;font-weight:700;max-width:520px;color:rgba(255,255,255,.82)}.studio-visual-tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.studio-visual-tabs button,.studio-principles button{border:1px solid rgba(16,16,20,.10);background:rgba(255,255,255,.76);border-radius:999px;padding:15px 12px;font:inherit;font-weight:900;color:var(--text);cursor:pointer;transition:.24s}.studio-visual-tabs button:hover,.studio-visual-tabs button.active,.studio-principles button:hover,.studio-principles button.active{background:#101014;color:#fff;transform:translateY(-2px);box-shadow:0 14px 34px rgba(16,16,20,.16)}.studio-marquee{padding:18px 0;overflow:hidden;border-block:1px solid var(--line);background:rgba(255,255,255,.40);backdrop-filter:blur(18px)}.studio-marquee-track{display:flex;gap:16px;width:max-content;animation:studioMarquee 28s linear infinite}.studio-marquee span{padding:12px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:900;box-shadow:0 10px 30px rgba(16,16,20,.06);white-space:nowrap}@keyframes studioMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.studio-story,.studio-services,.studio-philosophy,.studio-split,.studio-process,.studio-final-cta{padding:88px 0}.studio-story-grid,.studio-philosophy-grid,.studio-split-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}.studio-story-title h2,.studio-split-copy h2,.studio-final-panel h2{font-size:clamp(38px,4.6vw,68px);line-height:.98;letter-spacing:-.065em}.studio-story-copy{display:grid;gap:20px}.studio-story-copy p,.studio-split-copy p{font-size:20px;line-height:1.75;color:var(--muted);font-weight:600}.studio-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.studio-service-card{position:relative;overflow:hidden;min-height:255px;padding:28px;border-radius:32px;background:rgba(255,255,255,.72);border:1px solid rgba(16,16,20,.08);box-shadow:0 24px 70px rgba(16,16,20,.08);transition:.28s}.studio-service-card:hover{transform:translateY(-8px);box-shadow:0 30px 90px rgba(16,16,20,.14)}.studio-service-card:after{content:"";position:absolute;right:-70px;bottom:-90px;width:210px;height:210px;border-radius:50%;background:var(--brand-gradient);opacity:.18;transition:.28s}.studio-service-card:hover:after{transform:scale(1.25);opacity:.28}.studio-service-card span,.studio-step b{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:#101014;color:#fff;font-weight:900;margin-bottom:28px}.studio-service-card h3,.studio-step h3{font-size:25px;letter-spacing:-.035em;margin-bottom:12px}.studio-service-card p,.studio-step p{color:var(--muted);line-height:1.6;font-weight:650}.studio-principle-panel{position:sticky;top:118px;border-radius:40px;background:#101014;color:#fff;min-height:430px;padding:34px;box-shadow:0 34px 100px rgba(16,16,20,.20);overflow:hidden}.studio-principle-panel:before{content:"";position:absolute;inset:auto -90px -120px auto;width:330px;height:330px;border-radius:50%;background:var(--brand-gradient);filter:blur(38px);opacity:.52}.studio-principle-panel>*{position:relative;z-index:1}.studio-principle-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:58px;color:rgba(255,255,255,.64);text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:900}.studio-principle-top b{font-size:20px;color:#fff}.studio-principle-panel h2{font-size:clamp(34px,4vw,58px);letter-spacing:-.055em;line-height:.98;margin-bottom:18px}.studio-principle-panel p{font-size:19px;line-height:1.65;color:rgba(255,255,255,.78);font-weight:650}.principle-meter{height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;margin-top:38px}.principle-meter i{display:block;height:100%;border-radius:inherit;background:var(--brand-gradient-2);transition:.34s}.studio-principles{display:grid;gap:15px;align-content:start}.studio-principles button{text-align:left;border-radius:26px;padding:22px 24px;font-size:20px}.studio-image-stack{position:relative;min-height:570px}.studio-image-stack img{position:absolute;width:64%;height:335px;object-fit:cover;border-radius:32px;box-shadow:0 30px 90px rgba(16,16,20,.17);border:10px solid rgba(255,255,255,.72)}.studio-image-stack img:nth-child(1){left:0;top:0}.studio-image-stack img:nth-child(2){right:0;top:140px}.studio-image-stack img:nth-child(3){left:10%;bottom:0}.studio-mini-quotes{display:grid;gap:12px;margin-top:28px}.studio-mini-quotes span{display:block;padding:16px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);font-size:18px;font-weight:900;box-shadow:0 14px 36px rgba(16,16,20,.06)}.studio-process-lane{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:42px}.studio-step{background:rgba(255,255,255,.70);border:1px solid var(--line);border-radius:30px;padding:28px;box-shadow:0 20px 60px rgba(16,16,20,.07);min-height:248px}.studio-final-cta{padding-bottom:120px}.studio-final-panel{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;border-radius:42px;padding:44px;background:linear-gradient(135deg,#101014,#24242b);color:#fff;position:relative;overflow:hidden;box-shadow:0 34px 95px rgba(16,16,20,.20)}.studio-final-panel:before{content:"";position:absolute;right:-90px;top:-120px;width:420px;height:420px;border-radius:50%;background:var(--brand-gradient);filter:blur(44px);opacity:.55}.studio-final-panel>*{position:relative;z-index:1}.studio-final-panel p{color:rgba(255,255,255,.72);font-size:18px;line-height:1.55;max-width:720px;margin-top:14px;font-weight:650}.studio-final-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}.studio-final-panel .btn-outline{border-color:rgba(255,255,255,.24);color:#fff;background:rgba(255,255,255,.08)}
html[data-theme="dark"] .studio-hero:before,html[data-theme="dark"] .studio-visual-card,html[data-theme="dark"] .studio-service-card,html[data-theme="dark"] .studio-step,html[data-theme="dark"] .studio-mini-quotes span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.10)}html[data-theme="dark"] .studio-visual-header b,html[data-theme="dark"] .studio-marquee span,html[data-theme="dark"] .studio-visual-tabs button,html[data-theme="dark"] .studio-principles button{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.10);color:#fff}html[data-theme="dark"] .studio-visual-tabs button.active,html[data-theme="dark"] .studio-principles button.active{background:#fff;color:#101014}
@media(max-width:1100px){.studio-hero-grid,.studio-story-grid,.studio-philosophy-grid,.studio-split-grid,.studio-final-panel{grid-template-columns:1fr}.studio-visual-card{min-height:auto}.studio-service-grid{grid-template-columns:repeat(2,1fr)}.studio-process-lane{grid-template-columns:repeat(2,1fr)}.studio-principle-panel{position:relative;top:auto}.studio-final-actions{justify-content:flex-start}}
@media(max-width:720px){.studio-hero{padding:112px 0 56px}.studio-hero:before{inset:86px 12px 0;border-radius:34px}.studio-hero-copy h1{font-size:clamp(42px,13vw,58px);letter-spacing:-.06em}.studio-hero-copy p{font-size:17px}.studio-visual-card{padding:16px;border-radius:30px;min-height:auto}.studio-image-frame{height:340px;border-radius:25px}.studio-visual-tabs{grid-template-columns:repeat(2,1fr)}.studio-story,.studio-services,.studio-philosophy,.studio-split,.studio-process,.studio-final-cta{padding:58px 0}.studio-story-title h2,.studio-split-copy h2,.studio-final-panel h2{font-size:38px}.studio-story-copy p,.studio-split-copy p{font-size:17px}.studio-service-grid,.studio-process-lane{grid-template-columns:1fr}.studio-image-stack{min-height:auto;display:grid;gap:14px}.studio-image-stack img{position:relative;width:100%;height:245px;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;border-width:6px}.studio-final-panel{padding:26px;border-radius:28px}.studio-final-actions,.studio-hero-actions{flex-direction:column}.studio-final-actions .btn,.studio-hero-actions .btn{width:100%;justify-content:center}.studio-principle-panel{padding:26px;border-radius:30px}.studio-principles button{font-size:17px;padding:18px}}


/* Balanced About results section with scroll-triggered counters */
.studio-results{
  position:relative;
  padding:96px 0;
  overflow:hidden;
}
.studio-results:before{
  content:"";
  position:absolute;
  inset:36px 3% 36px;
  border-radius:54px;
  background:linear-gradient(135deg,rgba(255,255,255,.74),rgba(195,227,210,.24),rgba(227,87,150,.12));
  border:1px solid rgba(16,16,20,.06);
  z-index:-1;
}
.results-intro{
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
}
.results-intro h2{
  font-size:clamp(38px,4.8vw,72px);
  line-height:.98;
  letter-spacing:-.065em;
  margin:10px 0 16px;
}
.results-intro p{
  font-size:19px;
  line-height:1.7;
  color:var(--muted);
  font-weight:650;
}
.results-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.result-card{
  position:relative;
  min-height:292px;
  padding:28px;
  border-radius:34px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(16,16,20,.08);
  box-shadow:0 26px 78px rgba(16,16,20,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.result-card:before{
  content:"";
  position:absolute;
  width:190px;
  height:190px;
  right:-80px;
  top:-80px;
  border-radius:50%;
  background:var(--brand-gradient);
  opacity:.16;
  filter:blur(2px);
  transition:.35s ease;
}
.result-card:hover{
  box-shadow:0 32px 94px rgba(16,16,20,.14);
  border-color:rgba(242,128,102,.22);
}
.result-card:hover:before{
  transform:scale(1.18);
  opacity:.25;
}
.result-index{
  width:42px;
  height:42px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#101014;
  color:#fff;
  font-weight:900;
  font-size:13px;
  position:relative;
  z-index:1;
}
.result-number{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:24px 0 14px;
  font-size:clamp(54px,7vw,104px);
  line-height:.82;
  letter-spacing:-.08em;
  font-weight:900;
  background:var(--brand-gradient-2);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.result-number em{
  font-style:normal;
  color:#101014;
  background:none;
  -webkit-text-fill-color:#101014;
  letter-spacing:-.06em;
}
.result-card h3{
  position:relative;
  z-index:1;
  font-size:clamp(20px,1.7vw,26px);
  line-height:1.12;
  letter-spacing:-.04em;
  max-width:360px;
  margin-bottom:10px;
}
.result-card p{
  position:relative;
  z-index:1;
  color:var(--muted);
  font-weight:650;
  line-height:1.55;
  font-size:15px;
  max-width:360px;
}
.result-line{
  position:relative;
  z-index:1;
  height:8px;
  border-radius:999px;
  background:rgba(16,16,20,.08);
  overflow:hidden;
  margin-top:22px;
}
.result-line i{
  display:block;
  width:var(--w);
  height:100%;
  border-radius:inherit;
  background:var(--brand-gradient-2);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.15s cubic-bezier(.16,1,.3,1) .12s;
}
.result-card.visible .result-line i{
  transform:scaleX(1);
}
html[data-theme="dark"] .studio-results:before,
html[data-theme="dark"] .result-card{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.10);
}
html[data-theme="dark"] .result-number em{
  color:#fff;
  -webkit-text-fill-color:#fff;
}
html[data-theme="dark"] .result-line{
  background:rgba(255,255,255,.12);
}
@media(max-width:1100px){
  .results-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:720px){
  .studio-results{padding:64px 0;}
  .studio-results:before{inset:24px 12px;border-radius:34px;}
  .results-intro{text-align:left;margin-bottom:26px;}
  .results-intro h2{font-size:40px;}
  .results-intro p{font-size:17px;}
  .results-grid{grid-template-columns:1fr;gap:14px;}
  .result-card{min-height:250px;padding:24px;border-radius:28px;}
  .result-number{font-size:70px;margin:22px 0 12px;}
}

/* Scoped fixes so older result-card styles do not affect the About impact cards */
.studio-results .result-card div{padding:0;}
.studio-results .result-card h3{margin:0 0 10px;}
.studio-results .result-card p{margin:0;}


/* =========================================================
   Compact laptop view update - About page results + philosophy
   ========================================================= */
.studio-about-page .studio-service-card,
.studio-about-page .studio-step,
.studio-about-page .studio-mini-quotes span,
.studio-about-page .result-card,
.studio-about-page .studio-principles button,
.studio-about-page .studio-visual-tabs button{
  background:linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,247,240,.72) 48%, rgba(255,236,246,.55));
  border-color:rgba(16,16,20,.075);
}
.studio-about-page .studio-principles button.active,
.studio-about-page .studio-principles button:hover,
.studio-about-page .studio-visual-tabs button.active,
.studio-about-page .studio-visual-tabs button:hover{
  background:linear-gradient(135deg,#101014,#24242b);
  color:#fff;
}

.studio-about-page .studio-philosophy{
  padding:58px 0;
}
.studio-about-page .studio-philosophy-grid{
  gap:42px;
  align-items:center;
}
.studio-about-page .studio-principle-panel{
  min-height:318px;
  padding:28px 30px;
  border-radius:34px;
  top:106px;
}
.studio-about-page .studio-principle-top{
  margin-bottom:34px;
  font-size:11px;
}
.studio-about-page .studio-principle-panel h2{
  font-size:clamp(30px,3.2vw,46px);
  margin-bottom:14px;
}
.studio-about-page .studio-principle-panel p{
  font-size:16px;
  line-height:1.55;
  max-width:520px;
}
.studio-about-page .principle-meter{
  height:9px;
  margin-top:26px;
}
.studio-about-page .studio-principles{
  gap:12px;
}
.studio-about-page .studio-principles button{
  min-height:62px;
  padding:16px 22px;
  border-radius:22px;
  font-size:18px;
}

.studio-about-page .studio-results{
  padding:56px 0;
}
.studio-about-page .studio-results:before{
  inset:18px 3% 18px;
  background:linear-gradient(135deg,rgba(195,227,210,.22),rgba(255,250,244,.70) 42%,rgba(227,87,150,.15));
}
.studio-about-page .results-intro{
  max-width:760px;
  margin:0 auto 22px;
}
.studio-about-page .results-intro h2{
  font-size:clamp(32px,3.7vw,52px);
  margin:8px 0 10px;
}
.studio-about-page .results-intro p{
  font-size:16px;
  line-height:1.55;
}
.studio-about-page .results-grid{
  gap:14px;
}
.studio-about-page .result-card{
  min-height:202px;
  padding:18px 20px;
  border-radius:26px;
  box-shadow:0 18px 52px rgba(16,16,20,.065);
}
.studio-about-page .result-card:before{
  width:150px;
  height:150px;
  right:-66px;
  top:-66px;
  opacity:.18;
}
.studio-about-page .result-index{
  width:32px;
  height:32px;
  font-size:11px;
}
.studio-about-page .result-number{
  font-size:clamp(42px,5.1vw,70px);
  margin:14px 0 10px;
  gap:4px;
}
.studio-about-page .result-card h3{
  font-size:clamp(17px,1.35vw,21px);
  line-height:1.08;
  margin-bottom:6px;
}
.studio-about-page .result-card p{
  font-size:13px;
  line-height:1.42;
}
.studio-about-page .result-line{
  height:6px;
  margin-top:14px;
}

@media (min-width: 1024px) and (max-width: 1440px){
  .studio-about-page .studio-results{padding:46px 0;}
  .studio-about-page .result-card{min-height:184px;padding:16px 18px;border-radius:24px;}
  .studio-about-page .result-number{font-size:clamp(40px,4.8vw,64px);margin:12px 0 8px;}
  .studio-about-page .result-card h3{font-size:19px;}
  .studio-about-page .result-card p{font-size:12.6px;}
  .studio-about-page .result-line{margin-top:12px;}
  .studio-about-page .studio-philosophy{padding:46px 0;}
  .studio-about-page .studio-principle-panel{min-height:292px;padding:24px 28px;}
  .studio-about-page .studio-principle-top{margin-bottom:26px;}
  .studio-about-page .studio-principle-panel h2{font-size:clamp(30px,3vw,42px);}
  .studio-about-page .studio-principle-panel p{font-size:15.5px;line-height:1.48;}
  .studio-about-page .studio-principles button{min-height:56px;padding:14px 20px;font-size:17px;}
}

@media(max-width:1100px){
  .studio-about-page .studio-philosophy-grid{gap:24px;}
  .studio-about-page .studio-principle-panel{position:relative;top:auto;}
}
@media(max-width:720px){
  .studio-about-page .studio-results{padding:50px 0;}
  .studio-about-page .results-grid{grid-template-columns:1fr;}
  .studio-about-page .result-card{min-height:auto;padding:22px;}
  .studio-about-page .result-number{font-size:58px;}
  .studio-about-page .studio-principle-panel{min-height:auto;}
}

/* =========================================================
   Uniform pastel card colour update for About page
   Reference: soft cream + peach/pink glass cards
   ========================================================= */
.studio-about-page .studio-visual-card,
.studio-about-page .studio-service-card,
.studio-about-page .studio-step,
.studio-about-page .result-card,
.studio-about-page .team-card,
.studio-about-page .studio-mini-quotes span,
.studio-about-page .studio-principles button:not(.active),
.studio-about-page .studio-visual-tabs button:not(.active){
  background:
    radial-gradient(circle at 92% 86%, rgba(255, 146, 153, .28) 0 22%, rgba(255, 146, 153, 0) 23%),
    radial-gradient(circle at 9% 8%, rgba(195, 227, 210, .26) 0 24%, rgba(195, 227, 210, 0) 25%),
    linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(255,251,242,.88) 48%, rgba(255,235,244,.74) 100%) !important;
  border-color: rgba(16,16,20,.075) !important;
  box-shadow: 0 22px 64px rgba(16,16,20,.075) !important;
}

.studio-about-page .studio-service-card,
.studio-about-page .studio-step,
.studio-about-page .result-card,
.studio-about-page .team-card{
  position: relative;
  overflow: hidden;
}

.studio-about-page .studio-service-card::before,
.studio-about-page .studio-step::before,
.studio-about-page .team-card::before{
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -72px;
  bottom: -80px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 155, 145, .30), rgba(227,87,150,.18) 54%, transparent 70%);
  pointer-events: none;
  transition: transform .35s ease, opacity .35s ease;
}

.studio-about-page .studio-service-card:hover::before,
.studio-about-page .studio-step:hover::before,
.studio-about-page .team-card:hover::before{
  transform: scale(1.16);
  opacity: .95;
}

.studio-about-page .studio-service-card > *,
.studio-about-page .studio-step > *,
.studio-about-page .team-card > *,
.studio-about-page .result-card > *{
  position: relative;
  z-index: 2;
}

.studio-about-page .studio-service-card:hover,
.studio-about-page .studio-step:hover,
.studio-about-page .result-card:hover,
.studio-about-page .team-card:hover{
  border-color: rgba(242,128,102,.22) !important;
  box-shadow: 0 28px 76px rgba(16,16,20,.12) !important;
}

.studio-about-page .studio-principles button:not(.active),
.studio-about-page .studio-visual-tabs button:not(.active){
  box-shadow: 0 14px 36px rgba(16,16,20,.055) !important;
}

.studio-about-page .studio-principles button.active,
.studio-about-page .studio-principles button:hover,
.studio-about-page .studio-visual-tabs button.active,
.studio-about-page .studio-visual-tabs button:hover{
  background: linear-gradient(135deg,#101014,#23232a) !important;
  color: #fff !important;
  border-color: rgba(16,16,20,.10) !important;
  box-shadow: 0 18px 42px rgba(16,16,20,.18) !important;
}

.studio-about-page .team-copy{
  background: transparent;
}

html[data-theme="dark"] .studio-about-page .studio-visual-card,
html[data-theme="dark"] .studio-about-page .studio-service-card,
html[data-theme="dark"] .studio-about-page .studio-step,
html[data-theme="dark"] .studio-about-page .result-card,
html[data-theme="dark"] .studio-about-page .team-card,
html[data-theme="dark"] .studio-about-page .studio-mini-quotes span,
html[data-theme="dark"] .studio-about-page .studio-principles button:not(.active),
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:not(.active){
  background:
    radial-gradient(circle at 92% 86%, rgba(255, 146, 153, .18) 0 22%, rgba(255, 146, 153, 0) 23%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05)) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* =========================================================
   Final compact laptop fit update - About page cards
   Makes service, process and result blocks fit cleanly in laptop view
   while keeping the pastel reference-card colour.
   ========================================================= */
@media (min-width: 1024px) {
  .studio-about-page .container{
    width:min(100% - 42px, 1200px);
  }

  .studio-about-page .studio-services,
  .studio-about-page .studio-process,
  .studio-about-page .studio-results,
  .studio-about-page .studio-philosophy{
    padding:34px 0 !important;
  }

  .studio-about-page .section-head{
    max-width:760px;
    margin-bottom:0;
  }
  .studio-about-page .section-head h2,
  .studio-about-page .results-intro h2{
    font-size:clamp(30px,3.2vw,46px) !important;
    line-height:.95 !important;
    letter-spacing:-.062em;
    margin:6px 0 10px !important;
  }
  .studio-about-page .section-head p,
  .studio-about-page .results-intro p{
    font-size:14.5px !important;
    line-height:1.45 !important;
    max-width:720px;
  }
  .studio-about-page .kicker{
    font-size:11px;
    letter-spacing:.18em;
  }

  .studio-about-page .studio-service-grid{
    gap:12px !important;
    margin-top:20px !important;
  }
  .studio-about-page .studio-service-card{
    min-height:152px !important;
    padding:18px 20px !important;
    border-radius:22px !important;
  }
  .studio-about-page .studio-service-card span,
  .studio-about-page .studio-step b{
    width:31px !important;
    height:31px !important;
    font-size:11px !important;
    margin-bottom:16px !important;
  }
  .studio-about-page .studio-service-card h3,
  .studio-about-page .studio-step h3{
    font-size:20px !important;
    line-height:1.05 !important;
    margin-bottom:8px !important;
  }
  .studio-about-page .studio-service-card p,
  .studio-about-page .studio-step p{
    font-size:13.4px !important;
    line-height:1.42 !important;
    font-weight:650;
  }
  .studio-about-page .studio-service-card::before,
  .studio-about-page .studio-step::before,
  .studio-about-page .team-card::before{
    width:150px !important;
    height:150px !important;
    right:-58px !important;
    bottom:-64px !important;
  }

  .studio-about-page .studio-process-lane{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:12px !important;
    margin-top:22px !important;
  }
  .studio-about-page .studio-step{
    min-height:158px !important;
    padding:18px 20px !important;
    border-radius:22px !important;
  }

  .studio-about-page .results-intro{
    max-width:760px !important;
    margin:0 auto 18px !important;
  }
  .studio-about-page .results-grid{
    gap:12px !important;
  }
  .studio-about-page .result-card{
    min-height:160px !important;
    padding:14px 16px !important;
    border-radius:22px !important;
  }
  .studio-about-page .result-index{
    width:28px !important;
    height:28px !important;
    font-size:10px !important;
  }
  .studio-about-page .result-number{
    font-size:clamp(38px,4.1vw,54px) !important;
    line-height:.82 !important;
    margin:8px 0 6px !important;
    gap:2px !important;
  }
  .studio-about-page .result-card h3{
    font-size:16px !important;
    line-height:1.05 !important;
    margin-bottom:5px !important;
    max-width:100% !important;
  }
  .studio-about-page .result-card p{
    font-size:11.4px !important;
    line-height:1.32 !important;
    max-width:100% !important;
  }
  .studio-about-page .result-line{
    height:5px !important;
    margin-top:8px !important;
  }
  .studio-about-page .result-card:before{
    width:118px !important;
    height:118px !important;
    right:-52px !important;
    top:-52px !important;
  }

  .studio-about-page .studio-philosophy-grid{
    gap:30px !important;
  }
  .studio-about-page .studio-principle-panel{
    min-height:252px !important;
    padding:22px 26px !important;
    border-radius:28px !important;
  }
  .studio-about-page .studio-principle-top{
    margin-bottom:20px !important;
    font-size:10px !important;
  }
  .studio-about-page .studio-principle-panel h2{
    font-size:clamp(26px,2.75vw,38px) !important;
    line-height:.98 !important;
    margin-bottom:10px !important;
  }
  .studio-about-page .studio-principle-panel p{
    font-size:13.8px !important;
    line-height:1.42 !important;
  }
  .studio-about-page .principle-meter{
    height:7px !important;
    margin-top:18px !important;
  }
  .studio-about-page .studio-principles{
    gap:10px !important;
  }
  .studio-about-page .studio-principles button{
    min-height:48px !important;
    padding:12px 18px !important;
    border-radius:18px !important;
    font-size:15px !important;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .studio-about-page .studio-services,
  .studio-about-page .studio-process,
  .studio-about-page .studio-results,
  .studio-about-page .studio-philosophy{
    padding:26px 0 !important;
  }
  .studio-about-page .section-head h2,
  .studio-about-page .results-intro h2{
    font-size:clamp(28px,3vw,40px) !important;
  }
  .studio-about-page .studio-service-card{
    min-height:140px !important;
    padding:16px 18px !important;
  }
  .studio-about-page .studio-step{
    min-height:146px !important;
    padding:16px 18px !important;
  }
  .studio-about-page .result-card{
    min-height:148px !important;
    padding:12px 15px !important;
  }
  .studio-about-page .result-number{
    font-size:clamp(34px,3.8vw,48px) !important;
  }
  .studio-about-page .result-card h3{
    font-size:15px !important;
  }
  .studio-about-page .result-card p{
    font-size:10.8px !important;
  }
}

/* =========================================================
   Final service section fit update
   Shows all six service cards neatly in one laptop view and
   keeps the next section below the fold.
   ========================================================= */
@media (min-width: 1024px) {
  .studio-about-page .studio-services{
    min-height: 100vh !important;
    padding: 52px 0 58px !important;
    display: flex !important;
    align-items: center !important;
  }
  .studio-about-page .studio-services .container{
    width: min(100% - 56px, 1210px) !important;
  }
  .studio-about-page .studio-services .section-head{
    max-width: 880px !important;
    margin: 0 auto !important;
  }
  .studio-about-page .studio-services .section-head .kicker{
    font-size: 11.5px !important;
    letter-spacing: .20em !important;
  }
  .studio-about-page .studio-services .section-head h2{
    font-size: clamp(38px, 3.75vw, 56px) !important;
    line-height: .95 !important;
    letter-spacing: -.065em !important;
    margin: 8px auto 0 !important;
    max-width: 860px !important;
  }
  .studio-about-page .studio-service-grid{
    gap: 18px !important;
    margin-top: 34px !important;
  }
  .studio-about-page .studio-service-card{
    min-height: 188px !important;
    padding: 24px 26px !important;
    border-radius: 28px !important;
  }
  .studio-about-page .studio-service-card span{
    width: 36px !important;
    height: 36px !important;
    font-size: 12px !important;
    margin-bottom: 22px !important;
  }
  .studio-about-page .studio-service-card h3{
    font-size: 24px !important;
    line-height: 1.03 !important;
    margin-bottom: 10px !important;
  }
  .studio-about-page .studio-service-card p{
    font-size: 15px !important;
    line-height: 1.42 !important;
    max-width: 96% !important;
  }
  .studio-about-page .studio-service-card::before{
    width: 176px !important;
    height: 176px !important;
    right: -66px !important;
    bottom: -76px !important;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .studio-about-page .studio-services{
    min-height: 100vh !important;
    padding: 38px 0 46px !important;
  }
  .studio-about-page .studio-services .section-head h2{
    font-size: clamp(34px, 3.45vw, 50px) !important;
  }
  .studio-about-page .studio-service-grid{
    gap: 16px !important;
    margin-top: 26px !important;
  }
  .studio-about-page .studio-service-card{
    min-height: 176px !important;
    padding: 22px 24px !important;
    border-radius: 26px !important;
  }
  .studio-about-page .studio-service-card span{
    width: 34px !important;
    height: 34px !important;
    margin-bottom: 18px !important;
  }
  .studio-about-page .studio-service-card h3{
    font-size: 22px !important;
  }
  .studio-about-page .studio-service-card p{
    font-size: 14.2px !important;
    line-height: 1.38 !important;
  }
}

/* =========================================================
   Our Approach section size + separation update
   Keeps the approach block as its own screen and pushes Our Impact lower.
   ========================================================= */
@media (min-width: 1024px) {
  .studio-about-page .studio-process{
    min-height: calc(100vh - 20px) !important;
    padding: 82px 0 96px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .studio-about-page .studio-process::before{
    content: "";
    position: absolute;
    inset: 0 3% 0;
    border-radius: 46px;
    background: linear-gradient(135deg, rgba(195,227,210,.18), rgba(255,250,244,.82) 44%, rgba(227,87,150,.20));
    border: 1px solid rgba(16,16,20,.055);
    z-index: -1;
  }

  .studio-about-page .studio-process .container{
    width: min(100% - 56px, 1220px) !important;
  }

  .studio-about-page .studio-process .section-head{
    max-width: 900px !important;
    margin: 0 auto !important;
  }

  .studio-about-page .studio-process .section-head .kicker{
    font-size: 12px !important;
    letter-spacing: .22em !important;
    margin-bottom: 12px !important;
  }

  .studio-about-page .studio-process .section-head h2{
    font-size: clamp(42px, 4.15vw, 64px) !important;
    line-height: .95 !important;
    letter-spacing: -.068em !important;
    margin: 8px auto 14px !important;
    max-width: 940px !important;
  }

  .studio-about-page .studio-process .section-head p{
    font-size: 17px !important;
    line-height: 1.5 !important;
    max-width: 820px !important;
    margin-inline: auto !important;
  }

  .studio-about-page .studio-process-lane{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 44px !important;
  }

  .studio-about-page .studio-step{
    min-height: 230px !important;
    padding: 30px 28px !important;
    border-radius: 30px !important;
  }

  .studio-about-page .studio-step b{
    width: 42px !important;
    height: 42px !important;
    font-size: 13px !important;
    margin-bottom: 26px !important;
  }

  .studio-about-page .studio-step h3{
    font-size: 27px !important;
    line-height: 1.02 !important;
    margin-bottom: 14px !important;
  }

  .studio-about-page .studio-step p{
    font-size: 15.8px !important;
    line-height: 1.5 !important;
  }

  .studio-about-page .studio-results{
    margin-top: 64px !important;
    padding-top: 78px !important;
  }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .studio-about-page .studio-process{
    min-height: 96vh !important;
    padding: 66px 0 78px !important;
  }

  .studio-about-page .studio-process .section-head h2{
    font-size: clamp(38px, 3.75vw, 56px) !important;
  }

  .studio-about-page .studio-process .section-head p{
    font-size: 16px !important;
  }

  .studio-about-page .studio-process-lane{
    gap: 16px !important;
    margin-top: 36px !important;
  }

  .studio-about-page .studio-step{
    min-height: 206px !important;
    padding: 26px 24px !important;
    border-radius: 28px !important;
  }

  .studio-about-page .studio-step b{
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 22px !important;
  }

  .studio-about-page .studio-step h3{
    font-size: 24px !important;
  }

  .studio-about-page .studio-step p{
    font-size: 14.5px !important;
    line-height: 1.45 !important;
  }

  .studio-about-page .studio-results{
    margin-top: 72px !important;
  }
}

@media (max-width: 720px) {
  .studio-about-page .studio-process{
    padding: 64px 0 76px !important;
  }
  .studio-about-page .studio-process-lane{
    margin-top: 28px !important;
  }
  .studio-about-page .studio-step{
    padding: 24px !important;
    min-height: auto !important;
  }
  .studio-about-page .studio-results{
    margin-top: 28px !important;
  }
}

/* Portfolio keyword planner refresh: fills right-side empty space and balances the Our Work page */
#keyword-planner.portfolio-keyword-section {
  position: relative;
  overflow: hidden;
  padding: 92px 0 115px;
  background:
    radial-gradient(circle at 5% 18%, rgba(195, 227, 210, .34), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(227, 87, 150, .24), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(248, 238, 229, .68));
  border-top: 1px solid rgba(16, 16, 20, .06);
}

#keyword-planner.portfolio-keyword-section::before {
  content: "";
  position: absolute;
  inset: 26px 3vw;
  border-radius: 44px;
  border: 1px solid rgba(16, 16, 20, .06);
  pointer-events: none;
}

.portfolio-planner-head {
  max-width: 930px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 34px;
}

.portfolio-planner-head h2 {
  font-size: clamp(38px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.075em;
}

.portfolio-planner-head p {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.portfolio-planner-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: 32px;
  align-items: start;
}

.portfolio-planner-card,
.portfolio-seo-lab > *,
.lab-glass-card,
.portfolio-flow-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(195, 227, 210, .38), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(242, 128, 102, .30), transparent 34%),
    radial-gradient(circle at 86% 78%, rgba(227, 87, 150, .20), transparent 27%),
    rgba(255, 255, 255, .84);
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 22px 70px rgba(16, 16, 20, .08);
}

.portfolio-planner-card {
  border-radius: 34px;
  padding: 30px;
}

.planner-topline {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.planner-topline > span {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0d0d12;
  color: #fff;
  font-weight: 950;
  letter-spacing: -.03em;
}

.planner-topline h3 {
  font-size: clamp(25px, 2.3vw, 34px);
  letter-spacing: -.055em;
  margin-bottom: 6px;
}

.planner-topline p {
  color: var(--muted);
  font-weight: 750;
  line-height: 1.55;
}

.portfolio-planner-card select {
  margin-top: 4px;
  background: rgba(255, 255, 255, .88);
}

.planner-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.portfolio-planner-card .planner-output {
  min-height: 0;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .64);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .52), 0 16px 44px rgba(16, 16, 20, .05);
}

.portfolio-planner-card .planner-head h3 {
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.03;
}

.portfolio-planner-card .planner-keyword {
  background: rgba(255, 255, 255, .82);
}

.portfolio-seo-lab {
  display: grid;
  gap: 18px;
}

.serp-lab-card {
  border-radius: 34px;
  padding: 28px;
}

.lab-card-label {
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 950;
  margin-bottom: 12px;
}

.serp-lab-card h3,
.lab-glass-card h3 {
  font-size: clamp(24px, 2.2vw, 32px);
  letter-spacing: -.055em;
  margin-bottom: 5px;
}

.serp-lab-card p,
.lab-glass-card p {
  color: var(--muted);
  line-height: 1.55;
  font-weight: 700;
}

.serp-lab-card form {
  margin-top: 14px;
}

.serp-lab-card .serp-card {
  background: rgba(255, 255, 255, .86);
}

.lab-glass-card {
  border-radius: 30px;
  padding: 24px;
}

.page-map-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.page-map-grid span {
  min-height: 50px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(16, 16, 20, .06);
  font-weight: 900;
  color: #24242b;
  transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.page-map-grid span:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 16, 20, .08);
}

.proof-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.proof-mini-grid img {
  width: 100%;
  aspect-ratio: 1.12 / .9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: 0 14px 34px rgba(16, 16, 20, .08);
  transition: transform .36s ease, filter .36s ease;
}

.proof-mini-grid img:hover {
  transform: translateY(-5px) scale(1.03);
  filter: saturate(1.08) contrast(1.04);
}

.portfolio-flow-card {
  border-radius: 30px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.flow-step {
  min-height: 120px;
  border-radius: 22px;
  padding: 18px;
  color: #fff;
  background: linear-gradient(145deg, #101015, #1c1c23 58%, rgba(242, 128, 102, .58));
  overflow: hidden;
  position: relative;
}

.flow-step::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -50px;
  bottom: -50px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .45;
}

.flow-step b,
.flow-step span {
  position: relative;
  z-index: 1;
}

.flow-step b {
  display: block;
  font-size: 18px;
  margin-bottom: 8px;
  letter-spacing: -.03em;
}

.flow-step span {
  display: block;
  color: rgba(255, 255, 255, .74);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 750;
}

html[data-theme="dark"] #keyword-planner.portfolio-keyword-section {
  background:
    radial-gradient(circle at 5% 18%, rgba(195, 227, 210, .16), transparent 30%),
    radial-gradient(circle at 92% 18%, rgba(227, 87, 150, .15), transparent 34%),
    linear-gradient(135deg, rgba(9, 9, 12, .94), rgba(20, 16, 20, .88));
}

html[data-theme="dark"] .portfolio-planner-card,
html[data-theme="dark"] .portfolio-seo-lab > *,
html[data-theme="dark"] .lab-glass-card,
html[data-theme="dark"] .portfolio-flow-card {
  background:
    radial-gradient(circle at 8% 0%, rgba(195, 227, 210, .10), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(242, 128, 102, .17), transparent 34%),
    rgba(18, 18, 24, .82);
  border-color: rgba(255, 255, 255, .08);
}

html[data-theme="dark"] .page-map-grid span,
html[data-theme="dark"] .portfolio-planner-card .planner-output,
html[data-theme="dark"] .portfolio-planner-card .planner-keyword,
html[data-theme="dark"] .serp-lab-card .serp-card {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .08);
  color: #fff;
}

@media (max-width: 1120px) {
  .portfolio-planner-stage {
    grid-template-columns: 1fr;
  }

  .portfolio-seo-lab {
    grid-template-columns: repeat(2, 1fr);
  }

  .serp-lab-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  #keyword-planner.portfolio-keyword-section {
    padding: 64px 0 78px;
  }

  #keyword-planner.portfolio-keyword-section::before {
    inset: 12px;
    border-radius: 28px;
  }

  .portfolio-planner-head h2 {
    font-size: clamp(36px, 12vw, 50px);
  }

  .portfolio-planner-card,
  .serp-lab-card,
  .lab-glass-card,
  .portfolio-flow-card {
    padding: 18px;
    border-radius: 24px;
  }

  .planner-topline,
  .portfolio-seo-lab,
  .portfolio-flow-card,
  .page-map-grid {
    grid-template-columns: 1fr;
  }

  .proof-mini-grid {
    grid-template-columns: 1fr;
  }

  .proof-mini-grid img {
    aspect-ratio: 16 / 9;
  }
}


/* =========================================================
   Fluxo services dropdown update
   Shows all 9 services from the navbar with a small arrow.
   ========================================================= */
.nav-service-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}
.nav-service-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  color:#34343b;
  font:inherit;
  font-weight:900;
  cursor:pointer;
  padding:0;
  transition:.25s ease;
}
.nav-service-toggle:hover,
.nav-service-toggle.active,
.nav-service-dropdown.open .nav-service-toggle{
  color:var(--coral);
}
.nav-service-arrow{
  display:inline-flex;
  width:17px;
  height:17px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  font-size:13px;
  line-height:1;
  background:linear-gradient(135deg,rgba(195,227,210,.55),rgba(242,128,102,.36),rgba(143,115,194,.30));
  color:#111;
  transform:translateY(-1px);
  transition:.25s ease;
}
.nav-service-dropdown.open .nav-service-arrow,
.nav-service-dropdown:hover .nav-service-arrow{
  transform:translateY(-1px) rotate(180deg);
}
.nav-service-panel{
  position:absolute;
  top:calc(100% + 22px);
  left:50%;
  transform:translateX(-50%) translateY(12px) scale(.98);
  width:min(720px,92vw);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:16px;
  border-radius:28px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(16,16,20,.08);
  box-shadow:0 28px 90px rgba(16,16,20,.16);
  opacity:0;
  pointer-events:none;
  z-index:220;
  transition:opacity .24s ease, transform .24s ease;
}
.nav-service-dropdown.open .nav-service-panel,
.nav-service-dropdown:hover .nav-service-panel,
.nav-service-dropdown:focus-within .nav-service-panel{
  opacity:1;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0) scale(1);
}
.nav-service-panel a{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:14px 15px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(195,227,210,.36),rgba(255,255,255,.78),rgba(242,128,102,.17),rgba(143,115,194,.12));
  border:1px solid rgba(16,16,20,.07);
  color:#101014!important;
  box-shadow:0 10px 28px rgba(16,16,20,.05);
  transition:.25s ease;
}
.nav-service-panel a span{
  font-size:13px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-.01em;
}
.nav-service-panel a:hover{
  transform:translateY(-3px);
  border-color:rgba(242,128,102,.35);
  box-shadow:0 18px 42px rgba(16,16,20,.12);
  color:var(--coral)!important;
}
html[data-theme="dark"] .nav-service-toggle{color:#fff;}
html[data-theme="dark"] .nav-service-toggle:hover,
html[data-theme="dark"] .nav-service-toggle.active,
html[data-theme="dark"] .nav-service-dropdown.open .nav-service-toggle{color:var(--coral);}
html[data-theme="dark"] .nav-service-panel{
  background:rgba(28,28,34,.96);
  border-color:rgba(255,255,255,.1);
}
html[data-theme="dark"] .nav-service-panel a{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(195,227,210,.13),rgba(255,255,255,.06),rgba(242,128,102,.14),rgba(143,115,194,.15));
  border-color:rgba(255,255,255,.09);
}
@media(max-width:760px){
  .nav-service-dropdown{
    width:100%!important;
    display:block!important;
  }
  .nav-service-toggle{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:44px!important;
    padding:12px 14px!important;
    border-radius:16px!important;
    background:rgba(16,16,20,.035)!important;
  }
  .nav-service-panel{
    position:static!important;
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    padding:8px!important;
    display:none!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    border-radius:18px!important;
    box-shadow:none!important;
    background:rgba(16,16,20,.035)!important;
  }
  .nav-service-dropdown.open .nav-service-panel{
    display:grid!important;
  }
  .nav-service-panel a{
    min-height:46px!important;
    padding:12px 13px!important;
    border-radius:15px!important;
  }
  .nav-service-panel a span{
    font-size:13px!important;
  }
}

/* =========================================================
   Our Work keyword planner alignment refinement
   Keeps the left planner and right proof column at the same visual height.
   ========================================================= */
@media (min-width: 1121px) {
  #keyword-planner.portfolio-keyword-section {
    padding-top: 82px;
    padding-bottom: 88px;
  }

  .portfolio-planner-head {
    margin-bottom: 26px;
  }

  .portfolio-planner-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 32px;
  }

  .portfolio-planner-card {
    height: 100%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    padding: 28px;
  }

  .portfolio-planner-card .planner-output {
    flex: 1;
  }

  .portfolio-seo-lab {
    height: 100%;
    min-height: 760px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "serp serp"
      "map proof"
      "flow flow";
    gap: 16px;
    align-content: stretch;
  }

  .serp-lab-card {
    grid-area: serp;
    padding: 24px;
  }

  .portfolio-page-map {
    grid-area: map;
  }

  .portfolio-proof-wall {
    grid-area: proof;
  }

  .lab-glass-card {
    padding: 20px;
  }

  .portfolio-flow-card {
    grid-area: flow;
    height: 100%;
    align-self: stretch;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 14px;
  }

  .flow-step {
    min-height: 112px;
    height: 100%;
    padding: 15px;
  }

  .flow-step b {
    font-size: 17px;
  }

  .flow-step span {
    font-size: 12px;
  }

  .page-map-grid {
    gap: 8px;
  }

  .page-map-grid span {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .proof-mini-grid {
    gap: 8px;
  }

  .proof-mini-grid img {
    aspect-ratio: 1.28 / .9;
  }
}

/* =========================================================
   Services dropdown hover-safe patch
   Keeps the dropdown open while moving the cursor from
   Services down into the panel by removing the hover gap.
   ========================================================= */
@media (min-width: 761px){
  .nav-service-dropdown{
    padding:14px 0;
    margin:-14px 0;
  }
  .nav-service-dropdown::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    width:min(780px,94vw);
    height:34px;
    background:transparent;
    pointer-events:auto;
    z-index:219;
  }
  .nav-service-panel{
    top:calc(100% + 8px)!important;
  }
  .nav-service-dropdown:hover .nav-service-panel,
  .nav-service-dropdown.open .nav-service-panel,
  .nav-service-dropdown:focus-within .nav-service-panel{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateX(-50%) translateY(0) scale(1)!important;
  }
}

/* =========================================================
   About page spacing + interactive story refresh
   Reduces large vertical gaps and adds a more engaging story panel.
   ========================================================= */
.studio-about-page .studio-story{
  position: relative;
  overflow: hidden;
  padding: 72px 0 76px !important;
  background:
    radial-gradient(circle at 10% 18%, rgba(195,227,210,.28), transparent 29%),
    radial-gradient(circle at 92% 20%, rgba(227,87,150,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,245,238,.55));
  border-top: 1px solid rgba(16,16,20,.055);
  border-bottom: 1px solid rgba(16,16,20,.055);
}
.studio-about-page .studio-story::before{
  content:"";
  position:absolute;
  inset:24px 3vw;
  border-radius:42px;
  border:1px solid rgba(16,16,20,.055);
  pointer-events:none;
}
.studio-about-page .studio-story-grid{
  position:relative;
  z-index:1;
  align-items:center !important;
  gap:54px !important;
}
.studio-about-page .studio-story-title{
  position:relative;
}
.studio-about-page .studio-story-title::after{
  content:"Clarity → Creativity → Conversion";
  display:inline-flex;
  margin-top:24px;
  padding:13px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.70);
  border:1px solid rgba(16,16,20,.08);
  box-shadow:0 18px 44px rgba(16,16,20,.07);
  font-size:13px;
  font-weight:900;
  color:var(--muted);
  letter-spacing:.02em;
}
.studio-about-page .studio-story-title h2{
  max-width:610px;
  font-size:clamp(42px,4.25vw,64px) !important;
}
.studio-about-page .studio-story-copy{
  gap:16px !important;
}
.studio-about-page .studio-story-copy p{
  font-size:18px !important;
  line-height:1.62 !important;
}
.story-interactive-card{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:14px;
  margin-top:14px;
  padding:14px;
  border-radius:30px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(16,16,20,.08);
  box-shadow:0 24px 70px rgba(16,16,20,.08);
  overflow:hidden;
}
.story-preview{
  position:relative;
  overflow:hidden;
  min-height:210px;
  padding:24px;
  border-radius:24px;
  background:linear-gradient(135deg,#101014,#23232a);
  color:#fff;
  transition:opacity .18s ease, transform .18s ease;
}
.story-preview::after{
  content:"";
  position:absolute;
  right:-60px;
  bottom:-80px;
  width:230px;
  height:230px;
  border-radius:50%;
  background:var(--brand-gradient);
  filter:blur(18px);
  opacity:.55;
}
.story-preview > *{
  position:relative;
  z-index:1;
}
.story-preview.is-changing{
  opacity:.72;
  transform:scale(.985);
}
.story-preview span{
  display:block;
  margin-bottom:28px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-weight:900;
}
.story-preview h3{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(26px,2.5vw,36px);
  line-height:1;
  letter-spacing:-.055em;
}
.story-preview p{
  color:rgba(255,255,255,.76) !important;
  font-size:14.5px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}
.story-preview-meter{
  position:absolute;
  left:24px;
  right:24px;
  bottom:24px;
  z-index:2;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.story-preview-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--brand-gradient-2);
  transition:width .28s ease;
}
.story-tabs{
  display:grid;
  gap:10px;
}
.story-tabs button{
  min-height:58px;
  padding:14px 16px;
  border:1px solid rgba(16,16,20,.08);
  border-radius:20px;
  background:
    radial-gradient(circle at 0 0, rgba(195,227,210,.34), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(227,87,150,.24), transparent 42%),
    rgba(255,255,255,.70);
  text-align:left;
  font:inherit;
  font-size:15px;
  font-weight:900;
  color:var(--text);
  cursor:pointer;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.story-tabs button:hover,
.story-tabs button.active{
  transform:translateY(-2px);
  color:#fff;
  background:#101014;
  box-shadow:0 18px 44px rgba(16,16,20,.14);
}

/* Remove the oversized blank gaps between the approach and impact sections. */
@media (min-width:1024px){
  .studio-about-page .studio-split{
    padding:68px 0 58px !important;
  }
  .studio-about-page .studio-process{
    min-height:auto !important;
    padding:72px 0 78px !important;
    display:block !important;
  }
  .studio-about-page .studio-process::before{
    inset:0 3% 0 !important;
    border-radius:42px !important;
  }
  .studio-about-page .studio-process .section-head h2{
    font-size:clamp(42px,4vw,60px) !important;
  }
  .studio-about-page .studio-process-lane{
    margin-top:36px !important;
    gap:18px !important;
  }
  .studio-about-page .studio-step{
    min-height:218px !important;
  }
  .studio-about-page .studio-results{
    margin-top:30px !important;
    padding-top:72px !important;
  }
}
@media (min-width:1024px) and (max-height:760px){
  .studio-about-page .studio-story{
    padding:58px 0 60px !important;
  }
  .studio-about-page .studio-story-grid{
    gap:42px !important;
  }
  .studio-about-page .studio-story-title h2{
    font-size:clamp(36px,3.8vw,54px) !important;
  }
  .studio-about-page .studio-story-copy p{
    font-size:16px !important;
    line-height:1.52 !important;
  }
  .story-interactive-card{
    grid-template-columns:1fr .78fr;
    padding:12px;
  }
  .story-preview{
    min-height:180px;
    padding:20px;
  }
  .story-preview span{
    margin-bottom:20px;
  }
  .story-preview h3{
    font-size:28px;
  }
  .story-tabs button{
    min-height:50px;
    padding:11px 14px;
  }
  .studio-about-page .studio-split{
    padding:52px 0 48px !important;
  }
  .studio-about-page .studio-process{
    min-height:auto !important;
    padding:58px 0 62px !important;
  }
  .studio-about-page .studio-process-lane{
    margin-top:30px !important;
  }
  .studio-about-page .studio-step{
    min-height:190px !important;
    padding:24px 22px !important;
  }
  .studio-about-page .studio-results{
    margin-top:18px !important;
    padding-top:58px !important;
  }
}
@media (max-width:900px){
  .story-interactive-card{
    grid-template-columns:1fr;
  }
  .studio-about-page .studio-story-grid{
    gap:30px !important;
  }
}
@media (max-width:720px){
  .studio-about-page .studio-story{
    padding:56px 0 !important;
  }
  .studio-about-page .studio-story-title h2{
    font-size:38px !important;
  }
  .story-preview{
    min-height:210px;
    padding:22px;
  }
  .story-tabs button{
    min-height:54px;
  }
}

/* =========================================================
   About Impact number colour update
   Uses the live-site reference: strong orange, coral, pink and purple
   gradient on only the numeric digits, with + and % kept in premium black.
   ========================================================= */
.studio-about-page .studio-results .result-number{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: border-box !important;
  color: inherit !important;
  -webkit-text-fill-color: initial !important;
}

.studio-about-page .studio-results .result-number .counter{
  display: inline-block;
  background: linear-gradient(90deg, #ff9b45 0%, #f57554 28%, #e85d93 58%, #8f73c2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 8px 18px rgba(227, 87, 150, .18));
}

.studio-about-page .studio-results .result-number em{
  background: none !important;
  color: #101014 !important;
  -webkit-text-fill-color: #101014 !important;
  filter: none !important;
}

html[data-theme="dark"] .studio-about-page .studio-results .result-number em{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   Premium dark-mode polish for About page
   Keeps the colourful Fluxo identity but improves readability,
   contrast and section depth in dark mode.
   ========================================================= */
html[data-theme="dark"] {
  --bg: #05050c;
  --text: #fffaf8;
  --muted: rgba(244, 239, 255, .78);
  --line: rgba(255,255,255,.14);
  --card: rgba(17, 18, 31, .82);
}

html[data-theme="dark"] body.studio-about-page {
  background:
    radial-gradient(circle at 8% 10%, rgba(195, 227, 210, .16), transparent 26%),
    radial-gradient(circle at 84% 10%, rgba(227, 87, 150, .20), transparent 28%),
    radial-gradient(circle at 62% 52%, rgba(242, 128, 102, .12), transparent 32%),
    linear-gradient(180deg, #05050c 0%, #0b0b16 46%, #06060d 100%) !important;
  color: var(--text) !important;
}

html[data-theme="dark"] .studio-about-page .page-progress {
  box-shadow: 0 0 22px rgba(232, 93, 147, .38);
}

html[data-theme="dark"] .studio-about-page .site-header {
  background: rgba(7, 8, 18, .86) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-about-page .nav {
  color: rgba(255,255,255,.90) !important;
}

html[data-theme="dark"] .studio-about-page .nav-service-arrow {
  background: rgba(255,155,69,.16) !important;
  color: #ffc3b6 !important;
  border-color: rgba(255,255,255,.16) !important;
}

html[data-theme="dark"] .studio-about-page .theme-toggle {
  background: linear-gradient(135deg, rgba(12,13,27,.95), rgba(37,29,44,.95)) !important;
  border-color: rgba(255,255,255,.24) !important;
}

html[data-theme="dark"] .studio-about-page .studio-hero:before,
html[data-theme="dark"] .studio-about-page .studio-story::before,
html[data-theme="dark"] .studio-about-page .studio-process::before,
html[data-theme="dark"] .studio-about-page .studio-results:before {
  background:
    radial-gradient(circle at 8% 12%, rgba(195, 227, 210, .18), transparent 30%),
    radial-gradient(circle at 92% 16%, rgba(227, 87, 150, .22), transparent 34%),
    linear-gradient(135deg, rgba(22,23,36,.94), rgba(13,14,25,.96) 48%, rgba(35,18,35,.88)) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 88px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .studio-about-page .studio-story {
  background:
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.028)),
    radial-gradient(circle at 8% 18%, rgba(195,227,210,.11), transparent 30%),
    radial-gradient(circle at 90% 22%, rgba(227,87,150,.16), transparent 32%) !important;
  border-color: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-about-page h1,
html[data-theme="dark"] .studio-about-page h2,
html[data-theme="dark"] .studio-about-page h3,
html[data-theme="dark"] .studio-about-page .section-head h2,
html[data-theme="dark"] .studio-about-page .results-intro h2 {
  color: #fffaf8 !important;
  text-shadow: 0 16px 44px rgba(0,0,0,.32);
}

html[data-theme="dark"] .studio-about-page .kicker {
  color: #ff8f72 !important;
  text-shadow: 0 0 18px rgba(242,128,102,.24);
}

html[data-theme="dark"] .studio-about-page p,
html[data-theme="dark"] .studio-about-page .section-head p,
html[data-theme="dark"] .studio-about-page .results-intro p,
html[data-theme="dark"] .studio-about-page .studio-story-copy p,
html[data-theme="dark"] .studio-about-page .studio-split-copy p,
html[data-theme="dark"] .studio-about-page .studio-service-card p,
html[data-theme="dark"] .studio-about-page .studio-step p,
html[data-theme="dark"] .studio-about-page .result-card p,
html[data-theme="dark"] .studio-about-page .team-copy p,
html[data-theme="dark"] .studio-about-page .team-note {
  color: rgba(244,239,255,.82) !important;
}

html[data-theme="dark"] .studio-about-page .studio-hero-copy p {
  color: rgba(255,248,244,.84) !important;
}

html[data-theme="dark"] .studio-about-page .studio-marquee {
  background: rgba(5,6,15,.78) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,255,255,.05);
}

html[data-theme="dark"] .studio-about-page .studio-marquee span,
html[data-theme="dark"] .studio-about-page .studio-story-title::after,
html[data-theme="dark"] .studio-about-page .studio-mini-quotes span,
html[data-theme="dark"] .studio-about-page .studio-principles button:not(.active),
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:not(.active),
html[data-theme="dark"] .studio-about-page .story-tabs button:not(.active) {
  background:
    radial-gradient(circle at 8% 6%, rgba(195,227,210,.16), transparent 38%),
    radial-gradient(circle at 92% 92%, rgba(227,87,150,.16), transparent 42%),
    rgba(18,19,32,.88) !important;
  border-color: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.90) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .studio-about-page .studio-visual-card,
html[data-theme="dark"] .studio-about-page .story-interactive-card,
html[data-theme="dark"] .studio-about-page .studio-service-card,
html[data-theme="dark"] .studio-about-page .studio-step,
html[data-theme="dark"] .studio-about-page .result-card,
html[data-theme="dark"] .studio-about-page .team-card {
  background:
    radial-gradient(circle at 10% 6%, rgba(195,227,210,.13), transparent 36%),
    radial-gradient(circle at 92% 90%, rgba(255,146,153,.18), transparent 36%),
    linear-gradient(135deg, rgba(25,26,40,.90), rgba(13,14,26,.94) 50%, rgba(36,22,39,.86)) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow: 0 26px 76px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html[data-theme="dark"] .studio-about-page .studio-visual-card:hover,
html[data-theme="dark"] .studio-about-page .studio-service-card:hover,
html[data-theme="dark"] .studio-about-page .studio-step:hover,
html[data-theme="dark"] .studio-about-page .result-card:hover,
html[data-theme="dark"] .studio-about-page .team-card:hover {
  border-color: rgba(255,155,69,.32) !important;
  box-shadow: 0 34px 96px rgba(0,0,0,.54), 0 0 0 1px rgba(227,87,150,.10), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .studio-about-page .story-preview,
html[data-theme="dark"] .studio-about-page .studio-principle-panel,
html[data-theme="dark"] .studio-about-page .studio-final-panel,
html[data-theme="dark"] .studio-about-page .studio-principles button.active,
html[data-theme="dark"] .studio-about-page .studio-principles button:hover,
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button.active,
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:hover,
html[data-theme="dark"] .studio-about-page .story-tabs button.active,
html[data-theme="dark"] .studio-about-page .story-tabs button:hover {
  background:
    radial-gradient(circle at 92% 88%, rgba(255,155,69,.28), transparent 32%),
    radial-gradient(circle at 12% 6%, rgba(143,115,194,.26), transparent 36%),
    linear-gradient(135deg, #0b0b13 0%, #171827 52%, #2b1c31 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 26px 78px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-about-page .studio-visual-header,
html[data-theme="dark"] .studio-about-page .studio-visual-header span,
html[data-theme="dark"] .studio-about-page .studio-principle-top,
html[data-theme="dark"] .studio-about-page .story-preview span {
  color: rgba(255,255,255,.68) !important;
}

html[data-theme="dark"] .studio-about-page .studio-visual-header b,
html[data-theme="dark"] .studio-about-page .result-index,
html[data-theme="dark"] .studio-about-page .studio-service-card span,
html[data-theme="dark"] .studio-about-page .studio-step b {
  background: #ffffff !important;
  color: #0b0b13 !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .studio-about-page .story-preview h3,
html[data-theme="dark"] .studio-about-page .story-preview p,
html[data-theme="dark"] .studio-about-page .studio-principle-panel h2,
html[data-theme="dark"] .studio-about-page .studio-principle-panel p,
html[data-theme="dark"] .studio-about-page .studio-final-panel p {
  color: rgba(255,255,255,.88) !important;
}

html[data-theme="dark"] .studio-about-page .story-preview-meter,
html[data-theme="dark"] .studio-about-page .principle-meter,
html[data-theme="dark"] .studio-about-page .result-line {
  background: rgba(255,255,255,.16) !important;
}

html[data-theme="dark"] .studio-about-page .story-preview-meter i,
html[data-theme="dark"] .studio-about-page .principle-meter i,
html[data-theme="dark"] .studio-about-page .result-line i {
  box-shadow: 0 0 22px rgba(232,93,147,.38);
}

html[data-theme="dark"] .studio-about-page .studio-image-stack img {
  border-color: rgba(255,255,255,.16) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-about-page .studio-results .result-number .counter {
  background: linear-gradient(90deg, #ffb055 0%, #ff7d59 30%, #ee5f9d 62%, #a58bff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 10px 26px rgba(232,93,147,.28)) !important;
}

html[data-theme="dark"] .studio-about-page .studio-results .result-number em {
  color: #fffaf8 !important;
  -webkit-text-fill-color: #fffaf8 !important;
  text-shadow: 0 10px 24px rgba(0,0,0,.42);
}

html[data-theme="dark"] .studio-about-page .team-photo {
  background: rgba(255,255,255,.08) !important;
}

html[data-theme="dark"] .studio-about-page .btn-outline {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: #fff !important;
}

html[data-theme="dark"] .studio-about-page .btn-outline:hover {
  background: #fff !important;
  color: #101014 !important;
}

/* =========================================================
   Final warm colour match update
   Reference matched to the homepage first screenshot:
   cream canvas, soft peach/pink glow, orange-pink-purple accents,
   clean white glass cards and strong readable black text.
   ========================================================= */
:root{
  --mint:#fff1e6;
  --sand:#ffd98f;
  --coral:#ff7658;
  --pink:#ef5f9b;
  --purple:#8f73c2;
  --brand-gradient: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  --brand-gradient-2:linear-gradient(90deg,#ffd56f 0%,#ff9b45 20%,#ff7658 42%,#ef5f9b 68%,#8f73c2 100%);
  --bg:#fff8f2;
  --text:#101014;
  --muted:#5f6270;
  --line:rgba(16,16,20,.085);
  --card:rgba(255,255,255,.86);
}

body{
  background:
    radial-gradient(circle at 7% 12%,rgba(255,242,230,.92),transparent 32%),
    radial-gradient(circle at 92% 16%,rgba(255,207,225,.70),transparent 34%),
    radial-gradient(circle at 50% 58%,rgba(255,217,143,.18),transparent 34%),
    linear-gradient(180deg,#fffaf4 0%,#fff7f1 48%,#fff3ee 100%) !important;
}

.site-header{
  background:rgba(255,255,255,.84) !important;
  border-color:rgba(16,16,20,.075) !important;
}

.nav a:hover,
.nav a.active,
.studio-about-page .site-header .nav a.active{
  color:#ff7658 !important;
}

.kicker,
.eyebrow,
.section-kicker{
  color:#ff7658 !important;
}

.btn-primary,
.nav-service-arrow,
.theme-toggle-knob,
.float-btn.calendar,
.page-progress{
  background:var(--brand-gradient-2) !important;
}

/* About page: all large colour surfaces follow the homepage warm palette */
body.studio-about-page,
html:not([data-theme="dark"]) body.studio-about-page{
  background:
    radial-gradient(circle at 7% 12%,rgba(255,242,230,.92),transparent 32%),
    radial-gradient(circle at 94% 14%,rgba(255,207,225,.72),transparent 34%),
    radial-gradient(circle at 48% 58%,rgba(255,213,111,.16),transparent 34%),
    linear-gradient(180deg,#fffaf4 0%,#fff8f2 52%,#fff4ee 100%) !important;
  color:#101014 !important;
}

.studio-about-page .studio-hero:before,
.studio-about-page .studio-story::before,
.studio-about-page .studio-process::before,
.studio-about-page .studio-results:before{
  background:
    radial-gradient(circle at 8% 12%,rgba(255,242,230,.84),transparent 34%),
    radial-gradient(circle at 92% 16%,rgba(255,204,224,.58),transparent 35%),
    radial-gradient(circle at 73% 82%,rgba(255,118,88,.12),transparent 30%),
    linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,247,239,.80) 50%,rgba(255,226,238,.55)) !important;
  border-color:rgba(16,16,20,.055) !important;
  box-shadow:0 28px 90px rgba(16,16,20,.045) !important;
}

.studio-about-page .soft-section,
.studio-about-page .studio-story,
.studio-about-page .studio-split,
.studio-about-page .studio-philosophy{
  background:
    radial-gradient(circle at 92% 14%,rgba(255,207,225,.42),transparent 32%),
    radial-gradient(circle at 8% 16%,rgba(255,244,232,.86),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.44),rgba(255,246,239,.68)) !important;
  border-color:rgba(16,16,20,.055) !important;
}

.studio-about-page h1,
.studio-about-page h2,
.studio-about-page h3,
.studio-about-page .section-head h2,
.studio-about-page .results-intro h2{
  color:#101014 !important;
}

.studio-about-page p,
.studio-about-page .section-head p,
.studio-about-page .results-intro p,
.studio-about-page .studio-story-copy p,
.studio-about-page .studio-split-copy p,
.studio-about-page .studio-service-card p,
.studio-about-page .studio-step p,
.studio-about-page .result-card p,
.studio-about-page .team-copy p,
.studio-about-page .team-note{
  color:#60636f !important;
}

/* Cards: clean homepage-style cream/white cards with peach-pink glow */
.studio-about-page .studio-visual-card,
.studio-about-page .story-interactive-card,
.studio-about-page .story-preview,
.studio-about-page .studio-service-card,
.studio-about-page .studio-step,
.studio-about-page .result-card,
.studio-about-page .team-card,
.studio-about-page .studio-mini-quotes span,
.studio-about-page .studio-principles button:not(.active),
.studio-about-page .studio-visual-tabs button:not(.active),
.studio-about-page .story-tabs button:not(.active){
  background:
    radial-gradient(circle at 92% 88%,rgba(255,146,153,.22) 0 22%,rgba(255,146,153,0) 23%),
    radial-gradient(circle at 10% 8%,rgba(255,241,230,.82) 0 24%,rgba(255,241,230,0) 25%),
    linear-gradient(135deg,rgba(255,255,255,.98) 0%,rgba(255,251,244,.92) 50%,rgba(255,237,245,.80) 100%) !important;
  border:1px solid rgba(16,16,20,.075) !important;
  color:#101014 !important;
  box-shadow:0 24px 70px rgba(16,16,20,.075) !important;
}

.studio-about-page .story-preview h3,
.studio-about-page .story-preview p,
.studio-about-page .studio-principle-panel h2,
.studio-about-page .studio-principle-panel p,
.studio-about-page .studio-principle-top,
.studio-about-page .story-preview span{
  color:#101014 !important;
}

.studio-about-page .story-preview p,
.studio-about-page .studio-principle-panel p,
.studio-about-page .story-preview span,
.studio-about-page .studio-principle-top{
  color:#60636f !important;
}

/* Number pills and active states now use the same gradient as the homepage cards */
.studio-about-page .studio-service-card span,
.studio-about-page .studio-step b,
.studio-about-page .result-index,
.studio-about-page .studio-principle-top b,
.planner-topline > span{
  background:var(--brand-gradient-2) !important;
  color:#101014 !important;
  border:1px solid rgba(255,255,255,.68) !important;
  box-shadow:0 12px 30px rgba(239,95,155,.22) !important;
}

.studio-about-page .studio-principles button.active,
.studio-about-page .studio-principles button:hover,
.studio-about-page .studio-visual-tabs button.active,
.studio-about-page .studio-visual-tabs button:hover,
.studio-about-page .story-tabs button.active,
.studio-about-page .story-tabs button:hover{
  background:var(--brand-gradient-2) !important;
  color:#101014 !important;
  border-color:rgba(255,118,88,.26) !important;
  box-shadow:0 18px 44px rgba(239,95,155,.20) !important;
}

.studio-about-page .studio-principle-panel,
.studio-about-page .studio-final-panel{
  background:
    radial-gradient(circle at 92% 88%,rgba(255,146,153,.25),transparent 35%),
    radial-gradient(circle at 8% 8%,rgba(255,213,111,.22),transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#fff8f0 52%,#ffeef6 100%) !important;
  color:#101014 !important;
  border:1px solid rgba(16,16,20,.075) !important;
  box-shadow:0 26px 76px rgba(16,16,20,.09) !important;
}

.studio-about-page .studio-final-panel .btn-outline{
  background:rgba(255,255,255,.68) !important;
  color:#101014 !important;
  border-color:rgba(16,16,20,.10) !important;
}

.studio-about-page .story-preview-meter,
.studio-about-page .principle-meter,
.studio-about-page .result-line{
  background:rgba(16,16,20,.08) !important;
}

.studio-about-page .story-preview-meter i,
.studio-about-page .principle-meter i,
.studio-about-page .result-line i{
  background:var(--brand-gradient-2) !important;
}

.studio-about-page .studio-service-card::before,
.studio-about-page .studio-step::before,
.studio-about-page .team-card::before,
.studio-about-page .result-card:before,
.studio-about-page .studio-visual-card:before,
.studio-about-page .studio-principle-panel:before,
.studio-about-page .studio-final-panel:before{
  background:radial-gradient(circle,rgba(255,155,69,.28),rgba(239,95,155,.22) 52%,transparent 70%) !important;
}

.studio-about-page .result-card:hover,
.studio-about-page .studio-service-card:hover,
.studio-about-page .studio-step:hover,
.studio-about-page .team-card:hover,
.studio-about-page .story-interactive-card:hover,
.studio-about-page .studio-visual-card:hover{
  border-color:rgba(255,118,88,.24) !important;
  box-shadow:0 30px 86px rgba(239,95,155,.13) !important;
}

.studio-about-page .studio-marquee span,
.about-marquee-track span,
.trust-badge-row span,
.keyword-chip,
.mini-badge{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(16,16,20,.08) !important;
  color:#101014 !important;
  box-shadow:0 14px 38px rgba(16,16,20,.055) !important;
}

/* Keep impact numbers vivid like the reference image */
.studio-about-page .studio-results .result-number .counter{
  background:linear-gradient(90deg,#ff9b45 0%,#ff7658 30%,#ef5f9b 62%,#8f73c2 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
}
.studio-about-page .studio-results .result-number em{
  color:#101014 !important;
  -webkit-text-fill-color:#101014 !important;
}

/* Dark mode: same identity colours, but readable and not grey/washed-out */
html[data-theme="dark"]{
  --bg:#070711;
  --text:#fff8f4;
  --muted:rgba(255,244,238,.76);
  --line:rgba(255,255,255,.13);
  --card:rgba(18,18,30,.86);
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 8% 10%,rgba(255,155,69,.12),transparent 28%),
    radial-gradient(circle at 88% 12%,rgba(239,95,155,.22),transparent 30%),
    radial-gradient(circle at 52% 58%,rgba(143,115,194,.10),transparent 34%),
    linear-gradient(180deg,#070711 0%,#10101c 52%,#080810 100%) !important;
  color:#fff8f4 !important;
}

html[data-theme="dark"] .site-header{
  background:rgba(9,9,18,.88) !important;
  border-color:rgba(255,255,255,.13) !important;
}

html[data-theme="dark"] .nav{
  color:rgba(255,255,255,.90) !important;
}

html[data-theme="dark"] .studio-about-page .studio-hero:before,
html[data-theme="dark"] .studio-about-page .studio-story::before,
html[data-theme="dark"] .studio-about-page .studio-process::before,
html[data-theme="dark"] .studio-about-page .studio-results:before{
  background:
    radial-gradient(circle at 10% 12%,rgba(255,155,69,.13),transparent 34%),
    radial-gradient(circle at 90% 12%,rgba(239,95,155,.24),transparent 36%),
    linear-gradient(135deg,rgba(20,20,34,.94),rgba(11,11,21,.96) 48%,rgba(33,20,37,.90)) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 28px 90px rgba(0,0,0,.34) !important;
}

html[data-theme="dark"] .studio-about-page .studio-visual-card,
html[data-theme="dark"] .studio-about-page .story-interactive-card,
html[data-theme="dark"] .studio-about-page .story-preview,
html[data-theme="dark"] .studio-about-page .studio-principle-panel,
html[data-theme="dark"] .studio-about-page .studio-service-card,
html[data-theme="dark"] .studio-about-page .studio-step,
html[data-theme="dark"] .studio-about-page .result-card,
html[data-theme="dark"] .studio-about-page .team-card,
html[data-theme="dark"] .studio-about-page .studio-mini-quotes span,
html[data-theme="dark"] .studio-about-page .studio-principles button:not(.active),
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:not(.active),
html[data-theme="dark"] .studio-about-page .story-tabs button:not(.active){
  background:
    radial-gradient(circle at 92% 88%,rgba(239,95,155,.18),transparent 36%),
    radial-gradient(circle at 8% 8%,rgba(255,155,69,.11),transparent 34%),
    linear-gradient(135deg,rgba(26,26,40,.92),rgba(13,14,26,.96) 52%,rgba(36,22,39,.88)) !important;
  color:#fff8f4 !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:0 26px 76px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html[data-theme="dark"] .studio-about-page h1,
html[data-theme="dark"] .studio-about-page h2,
html[data-theme="dark"] .studio-about-page h3,
html[data-theme="dark"] .studio-about-page .story-preview h3,
html[data-theme="dark"] .studio-about-page .studio-principle-panel h2{
  color:#fff8f4 !important;
}

html[data-theme="dark"] .studio-about-page p,
html[data-theme="dark"] .studio-about-page .section-head p,
html[data-theme="dark"] .studio-about-page .story-preview p,
html[data-theme="dark"] .studio-about-page .studio-principle-panel p,
html[data-theme="dark"] .studio-about-page .result-card p,
html[data-theme="dark"] .studio-about-page .studio-step p,
html[data-theme="dark"] .studio-about-page .studio-service-card p,
html[data-theme="dark"] .studio-about-page .team-copy p{
  color:rgba(255,244,238,.78) !important;
}

html[data-theme="dark"] .studio-about-page .studio-service-card span,
html[data-theme="dark"] .studio-about-page .studio-step b,
html[data-theme="dark"] .studio-about-page .result-index,
html[data-theme="dark"] .studio-about-page .studio-principle-top b{
  background:var(--brand-gradient-2) !important;
  color:#101014 !important;
  border-color:rgba(255,255,255,.30) !important;
}

html[data-theme="dark"] .studio-about-page .studio-principles button.active,
html[data-theme="dark"] .studio-about-page .studio-principles button:hover,
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button.active,
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:hover,
html[data-theme="dark"] .studio-about-page .story-tabs button.active,
html[data-theme="dark"] .studio-about-page .story-tabs button:hover{
  background:var(--brand-gradient-2) !important;
  color:#101014 !important;
}

html[data-theme="dark"] .studio-about-page .studio-results .result-number em{
  color:#fff8f4 !important;
  -webkit-text-fill-color:#fff8f4 !important;
}

/* ===== Plain white boxes update: remove decorative color shapes from About page cards ===== */
.studio-about-page .studio-visual-card,
.studio-about-page .story-interactive-card,
.studio-about-page .story-preview,
.studio-about-page .studio-service-card,
.studio-about-page .studio-step,
.studio-about-page .result-card,
.studio-about-page .team-card,
.studio-about-page .studio-mini-quotes span,
.studio-about-page .studio-principles button:not(.active),
.studio-about-page .studio-visual-tabs button:not(.active),
.studio-about-page .story-tabs button:not(.active),
.studio-about-page .studio-principle-panel,
.studio-about-page .studio-final-panel{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(16,16,20,.075) !important;
  box-shadow: 0 18px 52px rgba(16,16,20,.06) !important;
  color: #101014 !important;
}

.studio-about-page .studio-service-card::before,
.studio-about-page .studio-service-card::after,
.studio-about-page .studio-step::before,
.studio-about-page .studio-step::after,
.studio-about-page .result-card::before,
.studio-about-page .result-card::after,
.studio-about-page .team-card::before,
.studio-about-page .team-card::after,
.studio-about-page .story-interactive-card::before,
.studio-about-page .story-interactive-card::after,
.studio-about-page .story-preview::before,
.studio-about-page .story-preview::after,
.studio-about-page .studio-visual-card::before,
.studio-about-page .studio-visual-card::after,
.studio-about-page .studio-principle-panel::before,
.studio-about-page .studio-principle-panel::after,
.studio-about-page .studio-final-panel::before,
.studio-about-page .studio-final-panel::after{
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
}

.studio-about-page .studio-service-card > *,
.studio-about-page .studio-step > *,
.studio-about-page .result-card > *,
.studio-about-page .team-card > *,
.studio-about-page .story-interactive-card > *,
.studio-about-page .story-preview > *,
.studio-about-page .studio-visual-card > *,
.studio-about-page .studio-principle-panel > *,
.studio-about-page .studio-final-panel > *{
  position: relative;
  z-index: 1;
}

.studio-about-page .studio-service-card:hover,
.studio-about-page .studio-step:hover,
.studio-about-page .result-card:hover,
.studio-about-page .team-card:hover,
.studio-about-page .story-interactive-card:hover,
.studio-about-page .studio-visual-card:hover{
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(242,128,102,.20) !important;
  box-shadow: 0 24px 70px rgba(16,16,20,.09) !important;
}

.studio-about-page .studio-service-card p,
.studio-about-page .studio-step p,
.studio-about-page .result-card p,
.studio-about-page .team-copy p,
.studio-about-page .team-note,
.studio-about-page .story-preview p,
.studio-about-page .studio-principle-panel p,
.studio-about-page .studio-final-panel p,
.studio-about-page .studio-story-copy p,
.studio-about-page .studio-split-copy p,
.studio-about-page .section-head p,
.studio-about-page .results-intro p{
  color: #60636f !important;
}

.studio-about-page .studio-principle-panel h2,
.studio-about-page .studio-final-panel h2,
.studio-about-page .story-preview h3,
.studio-about-page .studio-service-card h3,
.studio-about-page .studio-step h3,
.studio-about-page .result-card h3,
.studio-about-page .team-card h3{
  color: #101014 !important;
}

.studio-about-page .studio-service-card span,
.studio-about-page .studio-step b,
.studio-about-page .result-index,
.studio-about-page .studio-principle-top b{
  background: var(--brand-gradient) !important;
  color: #101014 !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: 0 10px 24px rgba(239,95,155,.18) !important;
}

.studio-about-page .studio-principles button.active,
.studio-about-page .studio-visual-tabs button.active,
.studio-about-page .story-tabs button.active{
  background: var(--brand-gradient) !important;
  color: #101014 !important;
  border-color: rgba(255,118,88,.28) !important;
}

.studio-about-page .studio-principles button:not(.active):hover,
.studio-about-page .studio-visual-tabs button:not(.active):hover,
.studio-about-page .story-tabs button:not(.active):hover{
  background: #ffffff !important;
  border-color: rgba(242,128,102,.18) !important;
}

.studio-about-page .studio-final-panel .btn-outline{
  background: #ffffff !important;
  color: #101014 !important;
  border-color: rgba(16,16,20,.10) !important;
}

.studio-about-page .story-preview-meter,
.studio-about-page .principle-meter,
.studio-about-page .result-line{
  background: rgba(16,16,20,.08) !important;
}

.studio-about-page .story-preview-meter i,
.studio-about-page .principle-meter i,
.studio-about-page .result-line i{
  background: var(--brand-gradient) !important;
}

/* Also keep the homepage step boxes plain white for consistency */
.x8-steps article,
.timeline-step,
.deliver-stage,
.testimonial-card,
.timeline-estimator,
.build-score-card,
.serp-builder,
.keyword-live-panel{
  background: #ffffff !important;
  background-image: none !important;
}

/* Dark mode stays readable but the decorative shapes are still removed */
html[data-theme="dark"] .studio-about-page .studio-visual-card,
html[data-theme="dark"] .studio-about-page .story-interactive-card,
html[data-theme="dark"] .studio-about-page .story-preview,
html[data-theme="dark"] .studio-about-page .studio-service-card,
html[data-theme="dark"] .studio-about-page .studio-step,
html[data-theme="dark"] .studio-about-page .result-card,
html[data-theme="dark"] .studio-about-page .team-card,
html[data-theme="dark"] .studio-about-page .studio-mini-quotes span,
html[data-theme="dark"] .studio-about-page .studio-principles button:not(.active),
html[data-theme="dark"] .studio-about-page .studio-visual-tabs button:not(.active),
html[data-theme="dark"] .studio-about-page .story-tabs button:not(.active),
html[data-theme="dark"] .studio-about-page .studio-principle-panel,
html[data-theme="dark"] .studio-about-page .studio-final-panel{
  background: #ffffff !important;
  background-image: none !important;
  color: #101014 !important;
  border-color: rgba(255,255,255,.18) !important;
}

html[data-theme="dark"] .studio-about-page .studio-service-card h3,
html[data-theme="dark"] .studio-about-page .studio-step h3,
html[data-theme="dark"] .studio-about-page .result-card h3,
html[data-theme="dark"] .studio-about-page .team-card h3,
html[data-theme="dark"] .studio-about-page .studio-principle-panel h2,
html[data-theme="dark"] .studio-about-page .studio-final-panel h2,
html[data-theme="dark"] .studio-about-page .story-preview h3{
  color: #101014 !important;
}

html[data-theme="dark"] .studio-about-page .studio-service-card p,
html[data-theme="dark"] .studio-about-page .studio-step p,
html[data-theme="dark"] .studio-about-page .result-card p,
html[data-theme="dark"] .studio-about-page .team-card p,
html[data-theme="dark"] .studio-about-page .team-note,
html[data-theme="dark"] .studio-about-page .studio-principle-panel p,
html[data-theme="dark"] .studio-about-page .studio-final-panel p,
html[data-theme="dark"] .studio-about-page .story-preview p{
  color: #60636f !important;
}

html[data-theme="dark"] .studio-about-page .studio-results .result-number em{
  color:#101014 !important;
  -webkit-text-fill-color:#101014 !important;
}

/* ===== Extra spacing between white boxes on About page ===== */
.studio-about-page .studio-service-grid,
.studio-about-page .results-grid,
.studio-about-page .studio-process-lane,
.studio-about-page .team-grid,
.studio-about-page .studio-principles{
  gap: 24px !important;
}

.studio-about-page .studio-philosophy-grid,
.studio-about-page .studio-story-grid,
.studio-about-page .studio-split-grid{
  gap: 28px !important;
}

@media (max-width: 1100px){
  .studio-about-page .studio-service-grid,
  .studio-about-page .results-grid,
  .studio-about-page .studio-process-lane,
  .studio-about-page .team-grid,
  .studio-about-page .studio-principles{
    gap: 20px !important;
  }
}

@media (max-width: 720px){
  .studio-about-page .studio-service-grid,
  .studio-about-page .results-grid,
  .studio-about-page .studio-process-lane,
  .studio-about-page .team-grid,
  .studio-about-page .studio-principles{
    gap: 16px !important;
  }
}

/* ===== Results section fit/alignment improvement ===== */
.studio-about-page .studio-results .container{
  width: min(100% - 44px, 1288px) !important;
}

.studio-about-page .studio-results{
  padding: 64px 0 !important;
}

.studio-about-page .results-intro{
  max-width: 860px !important;
  margin: 0 auto 26px !important;
}

.studio-about-page .results-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
}

.studio-about-page .result-card{
  min-height: 232px !important;
  padding: 20px 18px 16px !important;
  border-radius: 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.studio-about-page .result-index{
  width: 34px !important;
  height: 34px !important;
  font-size: 11px !important;
}

.studio-about-page .result-number{
  font-size: clamp(48px, 5vw, 74px) !important;
  margin: 16px 0 12px !important;
  line-height: .9 !important;
}

.studio-about-page .result-card h3{
  font-size: clamp(18px, 1.4vw, 24px) !important;
  line-height: 1.1 !important;
  margin-bottom: 8px !important;
}

.studio-about-page .result-card p{
  font-size: 14px !important;
  line-height: 1.48 !important;
}

.studio-about-page .result-line{
  height: 6px !important;
  margin-top: auto !important;
}

@media (max-width: 1200px){
  .studio-about-page .studio-results .container{
    width: min(100% - 34px, 1180px) !important;
  }
  .studio-about-page .results-grid{
    gap: 22px !important;
  }
  .studio-about-page .result-card{
    min-height: 220px !important;
  }
}

@media (max-width: 900px){
  .studio-about-page .results-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}

@media (max-width: 720px){
  .studio-about-page .studio-results .container{
    width: min(100% - 24px, 100%) !important;
  }
  .studio-about-page .results-grid{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .studio-about-page .result-card{
    min-height: auto !important;
    padding: 20px 16px !important;
  }
}

/* ===== Remove result-card load/progress bars ===== */
.studio-about-page .results-grid .result-line,
.studio-about-page .results-grid .result-line i,
.studio-about-page .result-card .result-line,
.studio-about-page .result-card .result-line i{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ===== Team section description removed and cards realigned ===== */
.studio-about-page .about-lite-team .section-head p{
  display:none !important;
}
.studio-about-page .team-note{
  display:none !important;
}
.studio-about-page .team-card{
  min-height:auto !important;
}
.studio-about-page .team-copy{
  padding-bottom:24px !important;
}
.studio-about-page .team-copy h3{
  margin-bottom:6px !important;
}
.studio-about-page .team-copy p{
  margin-bottom:0 !important;
}
.studio-about-page .team-copy hr,
.studio-about-page .team-copy:after{
  display:none !important;
}

/* ===== Final story progress alignment fix ===== */
.studio-about-page .story-preview{
  display: flex !important;
  flex-direction: column !important;
  min-height: 255px !important;
  padding: 24px 24px 22px !important;
}

.studio-about-page .story-preview p{
  margin: 0 0 22px !important;
  max-width: 100% !important;
}

.studio-about-page .story-preview-meter{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  margin-top: auto !important;
  display: block !important;
  clear: both !important;
}

@media (max-width: 720px){
  .studio-about-page .story-preview{
    min-height: 240px !important;
    padding: 22px 20px !important;
  }
}


/* ===== Final spacing update for What We Create service boxes ===== */
.studio-about-page .studio-service-grid{
  column-gap: 34px !important;
  row-gap: 30px !important;
}

@media (max-width: 1100px){
  .studio-about-page .studio-service-grid{
    column-gap: 24px !important;
    row-gap: 24px !important;
  }
}

@media (max-width: 720px){
  .studio-about-page .studio-service-grid{
    row-gap: 18px !important;
  }
}


/* ===== Hero visual overlay readability fix ===== */
.studio-about-page .studio-image-frame{
  position: relative !important;
}

.studio-about-page .studio-image-frame::after{
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 46% !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.58) 38%,
    rgba(0,0,0,.88) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.studio-about-page .studio-image-overlay{
  position: absolute !important;
  left: 28px !important;
  right: 28px !important;
  bottom: 24px !important;
  z-index: 3 !important;
  padding: 20px 22px !important;
  border-radius: 24px !important;
  background: rgba(8, 8, 14, .74) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(10px) !important;
}

.studio-about-page .studio-image-overlay h2,
.studio-about-page .studio-image-overlay p{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.75) !important;
}

.studio-about-page .studio-image-overlay h2{
  font-size: clamp(34px, 3vw, 52px) !important;
  line-height: .92 !important;
  margin: 0 0 10px !important;
}

.studio-about-page .studio-image-overlay p{
  font-size: 16px !important;
  line-height: 1.42 !important;
  font-weight: 800 !important;
  opacity: .96 !important;
  margin: 0 !important;
}

@media (max-width: 720px){
  .studio-about-page .studio-image-overlay{
    left: 16px !important;
    right: 16px !important;
    bottom: 16px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .studio-about-page .studio-image-overlay h2{
    font-size: 30px !important;
  }
  .studio-about-page .studio-image-overlay p{
    font-size: 14px !important;
  }
}


/* ===== Hero image text transparent overlay fix ===== */
.studio-about-page .studio-image-frame::after{
  content: "" !important;
  position: absolute !important;
  inset: auto 0 0 0 !important;
  height: 48% !important;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.34) 42%,
    rgba(0,0,0,.68) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.studio-about-page .studio-image-overlay{
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  left: 34px !important;
  right: 34px !important;
  bottom: 36px !important;
  border-radius: 0 !important;
}

.studio-about-page .studio-image-overlay h2,
.studio-about-page .studio-image-overlay p{
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 3px 20px rgba(0,0,0,.88), 0 1px 3px rgba(0,0,0,.95) !important;
}

.studio-about-page .studio-image-overlay h2{
  margin-bottom: 10px !important;
}

.studio-about-page .studio-image-overlay p{
  max-width: 92% !important;
  font-weight: 850 !important;
}

@media (max-width:720px){
  .studio-about-page .studio-image-overlay{
    left: 20px !important;
    right: 20px !important;
    bottom: 24px !important;
  }
  .studio-about-page .studio-image-overlay p{
    max-width: 100% !important;
  }
}


/* =========================================================
   Dream Effects style top menu for Fluxo
   Full-width white header, red CTA, WhatsApp and call buttons.
   ========================================================= */
.x8-announcement{
  display:none !important;
}
.site-header.dream-menu-header,
.x8-home .site-header.dream-menu-header.x8-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  transform:none !important;
  width:100% !important;
  max-width:none !important;
  height:88px !important;
  min-height:88px !important;
  padding:12px 34px 12px 42px !important;
  border-radius:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:30px !important;
  background:#ffffff !important;
  border:0 !important;
  border-bottom:1px solid rgba(16,16,20,.08) !important;
  box-shadow:0 9px 30px rgba(16,16,20,.08) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  z-index:140 !important;
}
.x8-home.announcement-closed .site-header.dream-menu-header.x8-header,
body.announcement-closed .site-header.dream-menu-header{
  top:0 !important;
}
.brand.dream-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:1px !important;
  min-width:265px !important;
  text-decoration:none !important;
  flex:0 0 auto !important;
}
.dream-logo-box{
  display:block !important;
  line-height:1 !important;
}
.brand.dream-brand img{
  display:block !important;
  width:205px !important;
  max-width:205px !important;
  max-height:48px !important;
  height:auto !important;
  object-fit:contain !important;
}
.brand.dream-brand .fallback{
  display:none;
  font-size:34px !important;
  font-weight:950 !important;
  letter-spacing:-.05em !important;
}
.dream-brand-tagline{
  display:block !important;
  margin-top:-3px !important;
  margin-left:6px !important;
  color:#8b8b92 !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:.055em !important;
  white-space:nowrap !important;
}
.nav.dream-nav,
.nav.dream-nav.x8-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:26px !important;
  margin-left:auto !important;
  color:#161616 !important;
  font-size:16px !important;
  font-weight:850 !important;
  line-height:1 !important;
  position:relative !important;
}
.nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn),
.nav.dream-nav .nav-service-toggle{
  min-height:52px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#181818 !important;
  font-size:16px !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  text-decoration:none !important;
  transition:color .22s ease, transform .22s ease !important;
  box-shadow:none !important;
}
.nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn):hover,
.nav.dream-nav > a.active:not(.dream-contact-btn):not(.nav-icon-btn),
.nav.dream-nav .nav-service-toggle:hover,
.nav.dream-nav .nav-service-toggle.active,
.nav.dream-nav .nav-service-dropdown.open .nav-service-toggle{
  color:#e7282d !important;
  transform:translateY(-1px) !important;
}
.nav.dream-nav .nav-with-caret span{
  font-size:16px !important;
  line-height:1 !important;
  color:currentColor !important;
  transform:translateY(-1px) !important;
}
.nav.dream-nav .nav-service-arrow{
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  color:currentColor !important;
  box-shadow:none !important;
  font-size:16px !important;
  border-radius:0 !important;
  transform:translateY(-1px) !important;
}
.nav.dream-nav .nav-service-dropdown.open .nav-service-arrow,
.nav.dream-nav .nav-service-dropdown:hover .nav-service-arrow{
  transform:translateY(-1px) rotate(180deg) !important;
}
.nav.dream-nav .nav-service-panel{
  top:calc(100% + 12px) !important;
  width:min(760px,88vw) !important;
  border-radius:18px !important;
  border:1px solid rgba(16,16,20,.08) !important;
  box-shadow:0 22px 55px rgba(16,16,20,.15) !important;
}
.nav.dream-nav .dream-contact-btn,
.nav.dream-nav .nav-cta.dream-contact-btn{
  min-height:58px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 27px !important;
  border-radius:7px !important;
  background:#e7282d !important;
  color:#ffffff !important;
  font-size:16px !important;
  font-weight:900 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease !important;
}
.nav.dream-nav .dream-contact-btn:hover{
  background:#c91f24 !important;
  transform:translateY(-2px) !important;
  box-shadow:0 14px 28px rgba(231,40,45,.22) !important;
}
.nav.dream-nav .nav-icon-btn{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  color:#ffffff !important;
  box-shadow:none !important;
  transition:transform .22s ease, box-shadow .22s ease !important;
}
.nav.dream-nav .nav-icon-btn:hover{
  transform:translateY(-2px) scale(1.04) !important;
  box-shadow:0 14px 26px rgba(16,16,20,.16) !important;
}
.nav.dream-nav .nav-icon-btn svg{
  width:24px !important;
  height:24px !important;
  display:block !important;
}
.nav.dream-nav .nav-whatsapp{background:#21c75a !important;}
.nav.dream-nav .nav-phone{background:#d9292d !important;}
.dream-menu-btn{
  background:#e7282d !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:none !important;
}

@media(max-width:1240px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    padding-left:26px !important;
    padding-right:22px !important;
    gap:18px !important;
  }
  .brand.dream-brand{min-width:215px !important;}
  .brand.dream-brand img{width:175px !important;max-width:175px !important;}
  .dream-brand-tagline{font-size:11.5px !important;}
  .nav.dream-nav{gap:17px !important;font-size:15px !important;}
  .nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn),
  .nav.dream-nav .nav-service-toggle{font-size:15px !important;}
  .nav.dream-nav .dream-contact-btn{padding:0 21px !important;min-height:54px !important;}
  .nav.dream-nav .nav-icon-btn{width:52px !important;height:52px !important;min-width:52px !important;min-height:52px !important;}
}

@media(max-width:980px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    height:78px !important;
    min-height:78px !important;
    padding:10px 18px !important;
    border-radius:0 !important;
  }
  .brand.dream-brand{min-width:auto !important;}
  .brand.dream-brand img{width:158px !important;max-width:158px !important;max-height:42px !important;}
  .dream-brand-tagline{font-size:10.5px !important;margin-left:4px !important;}
  .menu-btn.dream-menu-btn{
    display:grid !important;
    place-items:center !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    border-radius:50% !important;
    font-size:20px !important;
    position:relative !important;
    z-index:4 !important;
  }
  .nav.dream-nav,
  .nav.dream-nav.x8-nav{
    position:absolute !important;
    top:calc(100% + 0px) !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:9px !important;
    max-height:calc(100dvh - 78px) !important;
    overflow-y:auto !important;
    margin:0 !important;
    padding:16px 18px 20px !important;
    border-radius:0 0 22px 22px !important;
    background:#ffffff !important;
    border:0 !important;
    border-top:1px solid rgba(16,16,20,.08) !important;
    box-shadow:0 18px 34px rgba(16,16,20,.12) !important;
  }
  .nav.dream-nav.active,
  .nav.dream-nav.x8-nav.active{
    display:flex !important;
  }
  .nav.dream-nav > a:not(.nav-icon-btn),
  .nav.dream-nav .nav-service-toggle{
    width:100% !important;
    min-height:48px !important;
    justify-content:space-between !important;
    padding:0 16px !important;
    border-radius:12px !important;
    background:rgba(16,16,20,.035) !important;
  }
  .nav.dream-nav .nav-service-dropdown{
    width:100% !important;
    display:block !important;
  }
  .nav.dream-nav .nav-service-panel{
    position:static !important;
    width:100% !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    transform:none !important;
    opacity:1 !important;
    pointer-events:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    padding:8px !important;
    border-radius:12px !important;
    box-shadow:none !important;
    background:rgba(16,16,20,.035) !important;
  }
  .nav.dream-nav .nav-service-dropdown.open .nav-service-panel{
    display:grid !important;
  }
  .nav.dream-nav .dream-contact-btn{
    border-radius:12px !important;
    min-height:52px !important;
  }
  .nav.dream-nav .nav-icon-btn{
    width:100% !important;
    height:50px !important;
    min-width:100% !important;
    border-radius:12px !important;
  }
  .x8-home .x8-hero{
    padding-top:132px !important;
  }
}

@media(max-width:420px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    width:100% !important;
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .brand.dream-brand img{width:138px !important;max-width:138px !important;}
  .dream-brand-tagline{font-size:9.5px !important;letter-spacing:.035em !important;}
}

/* =========================================================
   Fluxo custom header variation
   Keeps the requested layout, but avoids an exact lookalike by using
   a soft floating glass bar, Fluxo gradient CTA, and subtler action icons.
   ========================================================= */
.site-header.dream-menu-header,
.x8-home .site-header.dream-menu-header.x8-header{
  top:16px !important;
  left:50% !important;
  right:auto !important;
  transform:translateX(-50%) !important;
  width:min(94vw,1500px) !important;
  height:82px !important;
  min-height:82px !important;
  padding:12px 22px 12px 30px !important;
  border-radius:28px !important;
  background:linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,248,244,.90)) !important;
  border:1px solid rgba(255,107,93,.14) !important;
  box-shadow:0 18px 45px rgba(32,24,42,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
  backdrop-filter:blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.2) !important;
}
.site-header.dream-menu-header::before,
.x8-home .site-header.dream-menu-header.x8-header::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:radial-gradient(circle at 10% 50%, rgba(255,183,88,.16), transparent 24%), radial-gradient(circle at 95% 50%, rgba(181,102,202,.12), transparent 24%) !important;
}
.brand.dream-brand{
  min-width:245px !important;
  position:relative !important;
  z-index:1 !important;
}
.brand.dream-brand img{
  width:190px !important;
  max-width:190px !important;
}
.dream-brand-tagline{
  margin-left:4px !important;
  color:#777780 !important;
  letter-spacing:.075em !important;
}
.nav.dream-nav,
.nav.dream-nav.x8-nav{
  gap:18px !important;
  position:relative !important;
  z-index:1 !important;
}
.nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn),
.nav.dream-nav .nav-service-toggle{
  min-height:44px !important;
  padding:0 10px !important;
  border-radius:999px !important;
}
.nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn):hover,
.nav.dream-nav > a.active:not(.dream-contact-btn):not(.nav-icon-btn),
.nav.dream-nav .nav-service-toggle:hover,
.nav.dream-nav .nav-service-toggle.active,
.nav.dream-nav .nav-service-dropdown.open .nav-service-toggle{
  color:#ff5b4b !important;
  background:rgba(255,91,75,.08) !important;
  transform:translateY(-1px) !important;
}
.nav.dream-nav .dream-contact-btn,
.nav.dream-nav .nav-cta.dream-contact-btn{
  min-height:52px !important;
  padding:0 25px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#ffb44f 0%,#ff5b4b 48%,#a85ed7 100%) !important;
  box-shadow:0 14px 28px rgba(255,91,75,.22) !important;
}
.nav.dream-nav .dream-contact-btn:hover{
  background:linear-gradient(135deg,#ffc46c 0%,#ff4f58 46%,#9557d8 100%) !important;
  box-shadow:0 18px 34px rgba(168,94,215,.24) !important;
}
.nav.dream-nav .nav-icon-btn{
  width:50px !important;
  height:50px !important;
  min-width:50px !important;
  min-height:50px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(16,16,20,.08) !important;
  box-shadow:0 10px 24px rgba(32,24,42,.08) !important;
}
.nav.dream-nav .nav-whatsapp{
  color:#19bd55 !important;
}
.nav.dream-nav .nav-phone{
  color:#ff4f58 !important;
}
.nav.dream-nav .nav-icon-btn:hover{
  background:#ffffff !important;
  transform:translateY(-2px) scale(1.03) !important;
  box-shadow:0 16px 28px rgba(32,24,42,.13) !important;
}
.nav.dream-nav .nav-service-panel{
  top:calc(100% + 16px) !important;
  border-radius:24px !important;
  border:1px solid rgba(255,107,93,.14) !important;
  box-shadow:0 26px 60px rgba(32,24,42,.15) !important;
}
.x8-home .x8-hero{
  padding-top:150px !important;
}

@media(max-width:1240px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    width:min(96vw,1180px) !important;
    padding-left:22px !important;
    padding-right:18px !important;
  }
  .brand.dream-brand{min-width:215px !important;}
  .brand.dream-brand img{width:168px !important;max-width:168px !important;}
  .nav.dream-nav{gap:10px !important;}
  .nav.dream-nav > a:not(.dream-contact-btn):not(.nav-icon-btn),
  .nav.dream-nav .nav-service-toggle{padding:0 8px !important;font-size:14.5px !important;}
  .nav.dream-nav .dream-contact-btn{padding:0 20px !important;}
}

@media(max-width:980px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    top:10px !important;
    width:calc(100% - 20px) !important;
    height:74px !important;
    min-height:74px !important;
    padding:10px 16px !important;
    border-radius:22px !important;
  }
  .nav.dream-nav,
  .nav.dream-nav.x8-nav{
    left:0 !important;
    right:0 !important;
    width:100% !important;
    top:calc(100% + 10px) !important;
    border-radius:22px !important;
    border:1px solid rgba(255,107,93,.12) !important;
  }
  .nav.dream-nav .nav-icon-btn{
    width:100% !important;
    height:50px !important;
    min-width:100% !important;
    border-radius:14px !important;
  }
  .x8-home .x8-hero{
    padding-top:132px !important;
  }
}

@media(max-width:420px){
  .site-header.dream-menu-header,
  .x8-home .site-header.dream-menu-header.x8-header{
    width:calc(100% - 14px) !important;
    border-radius:18px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .brand.dream-brand img{width:138px !important;max-width:138px !important;}
}

/* =========================================================
   Polished WhatsApp button update
   Makes the header WhatsApp CTA match the premium green-circle style.
   ========================================================= */
.nav.dream-nav .nav-whatsapp,
.nav.dream-nav.x8-nav .nav-whatsapp{
  background:linear-gradient(135deg,#25d366 0%,#19bd55 100%) !important;
  color:#ffffff !important;
  border-color:rgba(255,255,255,.72) !important;
  border-radius:50% !important;
  box-shadow:0 12px 26px rgba(37,211,102,.24), inset 0 1px 0 rgba(255,255,255,.34) !important;
}
.nav.dream-nav .nav-whatsapp svg,
.nav.dream-nav.x8-nav .nav-whatsapp svg{
  width:25px !important;
  height:25px !important;
  color:#ffffff !important;
  stroke:#ffffff !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.10)) !important;
}
.nav.dream-nav .nav-whatsapp:hover,
.nav.dream-nav.x8-nav .nav-whatsapp:hover{
  background:linear-gradient(135deg,#31dc70 0%,#12b84e 100%) !important;
  transform:translateY(-2px) scale(1.05) !important;
  box-shadow:0 16px 34px rgba(37,211,102,.32), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

@media(max-width:980px){
  .nav.dream-nav .nav-whatsapp,
  .nav.dream-nav.x8-nav .nav-whatsapp{
    width:100% !important;
    min-width:100% !important;
    border-radius:14px !important;
  }
}

/* =========================================================
   Final Services Dropdown: vertical plain white list
   Requested update: single-column services, clean white background.
   ========================================================= */
.nav-service-dropdown,
.nav.dream-nav .nav-service-dropdown{
  position:relative !important;
}

.nav-service-dropdown::after,
.nav.dream-nav .nav-service-dropdown::after{
  content:"" !important;
  position:absolute !important;
  left:-18px !important;
  right:-18px !important;
  top:100% !important;
  height:18px !important;
  background:transparent !important;
  pointer-events:auto !important;
}

.nav-service-panel,
.nav.dream-nav .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-panel{
  position:absolute !important;
  top:calc(100% + 14px) !important;
  left:50% !important;
  right:auto !important;
  width:360px !important;
  min-width:360px !important;
  max-width:calc(100vw - 32px) !important;
  display:flex !important;
  grid-template-columns:none !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:0 !important;
  padding:8px 0 !important;
  border-radius:20px !important;
  background:#ffffff !important;
  background-image:none !important;
  border:1px solid rgba(16,16,20,.10) !important;
  box-shadow:0 22px 55px rgba(16,16,20,.13) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateX(-50%) translateY(10px) !important;
  z-index:999 !important;
  overflow:hidden !important;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
}

.nav-service-dropdown:hover .nav-service-panel,
.nav-service-dropdown:focus-within .nav-service-panel,
.nav-service-dropdown.open .nav-service-panel,
.nav.dream-nav .nav-service-dropdown:hover .nav-service-panel,
.nav.dream-nav .nav-service-dropdown:focus-within .nav-service-panel,
.nav.dream-nav .nav-service-dropdown.open .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown:hover .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown:focus-within .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown.open .nav-service-panel{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateX(-50%) translateY(0) !important;
}

.nav-service-panel a,
.nav.dream-nav .nav-service-panel a,
.nav.dream-nav.x8-nav .nav-service-panel a{
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  padding:15px 20px !important;
  margin:0 !important;
  border-radius:0 !important;
  border:0 !important;
  border-bottom:1px solid rgba(16,16,20,.08) !important;
  background:#ffffff !important;
  background-image:none !important;
  color:#101014 !important;
  box-shadow:none !important;
  text-align:left !important;
  transform:none !important;
  transition:background .2s ease, color .2s ease, padding-left .2s ease !important;
}

.nav-service-panel a:last-child,
.nav.dream-nav .nav-service-panel a:last-child,
.nav.dream-nav.x8-nav .nav-service-panel a:last-child{
  border-bottom:0 !important;
}

.nav-service-panel a span,
.nav.dream-nav .nav-service-panel a span,
.nav.dream-nav.x8-nav .nav-service-panel a span{
  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:850 !important;
  letter-spacing:-.01em !important;
  color:inherit !important;
}

.nav-service-panel a:hover,
.nav.dream-nav .nav-service-panel a:hover,
.nav.dream-nav.x8-nav .nav-service-panel a:hover{
  background:#fff6f3 !important;
  color:#ff5b4b !important;
  padding-left:24px !important;
  border-color:rgba(16,16,20,.08) !important;
  box-shadow:none !important;
  transform:none !important;
}

html[data-theme="dark"] .nav-service-panel,
html[data-theme="dark"] .nav.dream-nav .nav-service-panel,
html[data-theme="dark"] .nav.dream-nav.x8-nav .nav-service-panel{
  background:#ffffff !important;
  background-image:none !important;
  border-color:rgba(16,16,20,.10) !important;
}

html[data-theme="dark"] .nav-service-panel a,
html[data-theme="dark"] .nav.dream-nav .nav-service-panel a,
html[data-theme="dark"] .nav.dream-nav.x8-nav .nav-service-panel a{
  background:#ffffff !important;
  color:#101014 !important;
  border-bottom-color:rgba(16,16,20,.08) !important;
}

html[data-theme="dark"] .nav-service-panel a:hover,
html[data-theme="dark"] .nav.dream-nav .nav-service-panel a:hover,
html[data-theme="dark"] .nav.dream-nav.x8-nav .nav-service-panel a:hover{
  background:#fff6f3 !important;
  color:#ff5b4b !important;
}

@media(max-width:980px){
  .nav-service-dropdown::after,
  .nav.dream-nav .nav-service-dropdown::after{
    display:none !important;
  }

  .nav-service-panel,
  .nav.dream-nav .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-panel{
    position:static !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:8px 0 0 !important;
    padding:6px 0 !important;
    border-radius:16px !important;
    display:none !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    box-shadow:none !important;
    border:1px solid rgba(16,16,20,.08) !important;
    background:#ffffff !important;
    overflow:hidden !important;
  }

  .nav-service-dropdown.open .nav-service-panel,
  .nav-service-dropdown:focus-within .nav-service-panel,
  .nav.dream-nav .nav-service-dropdown.open .nav-service-panel,
  .nav.dream-nav .nav-service-dropdown:focus-within .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-dropdown.open .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-dropdown:focus-within .nav-service-panel{
    display:flex !important;
    flex-direction:column !important;
    transform:none !important;
  }

  .nav-service-panel a,
  .nav.dream-nav .nav-service-panel a,
  .nav.dream-nav.x8-nav .nav-service-panel a{
    padding:13px 16px !important;
    background:#ffffff !important;
  }
}


/* =========================================================
   Clean normal Services arrow
   ========================================================= */
.nav-service-arrow,
.nav.dream-nav .nav-service-arrow,
.nav.dream-nav.x8-nav .nav-service-arrow{
  display:inline-block !important;
  width:0 !important;
  height:0 !important;
  margin-left:4px !important;
  border-left:4px solid transparent !important;
  border-right:4px solid transparent !important;
  border-top:5px solid currentColor !important;
  background:transparent !important;
  background-image:none !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
  opacity:.85 !important;
  transform:none !important;
  transition:opacity .2s ease !important;
}
.nav-service-dropdown:hover .nav-service-arrow,
.nav-service-dropdown.open .nav-service-arrow,
.nav-service-dropdown:focus-within .nav-service-arrow,
.nav.dream-nav .nav-service-dropdown:hover .nav-service-arrow,
.nav.dream-nav .nav-service-dropdown.open .nav-service-arrow,
.nav.dream-nav .nav-service-dropdown:focus-within .nav-service-arrow,
.nav.dream-nav.x8-nav .nav-service-dropdown:hover .nav-service-arrow,
.nav.dream-nav.x8-nav .nav-service-dropdown.open .nav-service-arrow,
.nav.dream-nav.x8-nav .nav-service-dropdown:focus-within .nav-service-arrow{
  transform:none !important;
  opacity:1 !important;
}


/* =========================================================
   Services hover precision fix
   The dropdown now opens only when the cursor touches the
   actual Services button. Removed the invisible hover bridge
   and blocked wide-area hover triggering on desktop.
   ========================================================= */
.nav-service-dropdown::after,
.nav.dream-nav .nav-service-dropdown::after,
.nav.dream-nav.x8-nav .nav-service-dropdown::after{
  display:none !important;
  pointer-events:none !important;
  width:0 !important;
  height:0 !important;
}

@media(min-width:981px){
  .nav-service-dropdown:not(.open):hover .nav-service-panel,
  .nav.dream-nav .nav-service-dropdown:not(.open):hover .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-dropdown:not(.open):hover .nav-service-panel{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateX(-50%) translateY(10px) !important;
  }

  .nav-service-toggle{
    cursor:pointer !important;
  }
}

/* =========================================================
   Web Design & Development service page model
   Added for Fluxo service content page.
   ========================================================= */
.webdev-page{overflow:hidden}.webdev-page section{position:relative}.webdev-page .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(16,16,20,.08);box-shadow:0 18px 50px rgba(16,16,20,.08);font-weight:900;color:var(--coral);font-size:14px}.webdev-page .eyebrow-dot{width:12px;height:12px;border-radius:50%;background:var(--brand-gradient);box-shadow:0 0 0 6px rgba(242,128,102,.12)}.wd-hero{padding:165px 0 86px}.wd-hero:before{content:"";position:absolute;inset:105px 3vw 0;border-radius:52px;background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(255,240,230,.72),rgba(255,185,214,.38));border:1px solid rgba(255,255,255,.7);box-shadow:0 40px 140px rgba(16,16,20,.08);z-index:-1}.wd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}.wd-hero-copy h1{font-size:clamp(50px,6.4vw,92px);line-height:.92;letter-spacing:-.075em;margin-top:28px;max-width:850px}.wd-hero-copy p{margin-top:24px;color:var(--muted);font-size:20px;line-height:1.65;font-weight:650;max-width:720px}.wd-hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}.wd-trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.wd-trust-row span{display:block;padding:15px 16px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(16,16,20,.08);color:var(--muted);font-size:13px;font-weight:750}.wd-trust-row b{display:block;color:var(--text);font-size:16px}.wd-browser-card{border-radius:38px;padding:18px;background:rgba(255,255,255,.78);border:1px solid rgba(16,16,20,.08);box-shadow:0 38px 120px rgba(16,16,20,.16);transform-style:preserve-3d}.wd-browser-top{height:48px;border-radius:24px;background:rgba(16,16,20,.92);color:rgba(255,255,255,.70);display:flex;align-items:center;gap:8px;padding:0 16px;font-size:12px;font-weight:800}.wd-browser-top span{width:10px;height:10px;border-radius:50%;background:var(--brand-gradient)}.wd-browser-top b{margin-left:auto;font-weight:800}.wd-dashboard-stage{margin-top:16px;min-height:380px;border-radius:30px;background:radial-gradient(circle at 20% 10%,rgba(195,227,210,.86),transparent 30%),radial-gradient(circle at 80% 25%,rgba(227,87,150,.24),transparent 30%),linear-gradient(135deg,#fff,#fff7f1);display:grid;grid-template-columns:1fr 180px;gap:18px;padding:24px;align-items:center;overflow:hidden;position:relative}.wd-dashboard-stage:after{content:"";position:absolute;right:-70px;bottom:-80px;width:260px;height:260px;border-radius:50%;background:var(--brand-gradient);filter:blur(30px);opacity:.34}.wd-page-wire{position:relative;z-index:1;display:grid;gap:16px}.wd-page-wire i{display:block;border-radius:22px;background:rgba(255,255,255,.88);border:1px solid rgba(16,16,20,.08);box-shadow:0 20px 55px rgba(16,16,20,.08)}.wd-page-wire i:nth-child(1){height:92px;width:92%}.wd-page-wire i:nth-child(2){height:62px;width:72%}.wd-page-wire i:nth-child(3){height:118px;width:100%}.wd-page-wire i:nth-child(4){height:58px;width:86%}.wd-live-score{position:relative;z-index:1;border-radius:28px;background:rgba(16,16,20,.92);color:#fff;padding:24px;box-shadow:0 20px 60px rgba(16,16,20,.2)}.wd-live-score small{display:block;color:rgba(255,255,255,.68);font-weight:850;text-transform:uppercase;letter-spacing:.1em;font-size:11px}.wd-live-score strong{display:block;font-size:55px;line-height:1;margin-top:18px;letter-spacing:-.05em}.wd-mini-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.wd-mini-kpis div{border-radius:22px;background:#fff;border:1px solid rgba(16,16,20,.08);padding:18px}.wd-mini-kpis strong{font-size:26px;display:block}.wd-mini-kpis span{display:block;color:var(--muted);font-weight:850;font-size:12px;margin-top:4px}.wd-overview,.wd-strategy,.wd-process,.wd-services-all{padding:90px 0}.wd-overview-grid,.wd-strategy-grid,.wd-deliverables-grid,.wd-faq-grid,.wd-contact-panel{display:grid;grid-template-columns:.95fr 1.05fr;gap:54px;align-items:center}.wd-build-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.wd-build-card,.wd-blueprint-grid article,.wd-process-lane article,.wd-all-service-grid article,.wd-industry-grid article{background:rgba(255,255,255,.78);border:1px solid rgba(16,16,20,.08);border-radius:30px;padding:26px;box-shadow:0 18px 54px rgba(16,16,20,.07);transition:.28s;position:relative;overflow:hidden}.wd-build-card:hover,.wd-blueprint-grid article:hover,.wd-process-lane article:hover,.wd-all-service-grid article:hover,.wd-industry-grid article:hover{transform:translateY(-8px);box-shadow:0 28px 86px rgba(16,16,20,.12)}.wd-build-card span,.wd-process-lane span,.wd-all-service-grid span{display:inline-flex;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:#101014;color:#fff;font-weight:900;margin-bottom:22px}.wd-build-card h3,.wd-blueprint-grid h3,.wd-process-lane h3,.wd-all-service-grid h3,.wd-industry-grid h3{font-size:24px;letter-spacing:-.035em;line-height:1.08;margin-bottom:10px}.wd-build-card p,.wd-blueprint-grid p,.wd-process-lane p,.wd-all-service-grid p,.wd-industry-grid p,.wd-goal-panel p,.wd-faq-item p,.wd-contact-panel p{color:var(--muted);line-height:1.65;font-weight:650}.wd-blueprint,.wd-deliverables,.wd-industries,.wd-faq-section,.wd-contact{padding:92px 0}.wd-blueprint-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.wd-blueprint-grid b{display:inline-flex;margin-bottom:20px;padding:8px 12px;border-radius:999px;background:rgba(242,128,102,.12);color:#b44932;font-weight:950;font-size:12px;letter-spacing:.1em;text-transform:uppercase}.wd-strategy-copy h2{font-size:clamp(38px,4.9vw,68px);line-height:.96;letter-spacing:-.06em;margin-bottom:18px}.wd-strategy-copy p{font-size:18px;line-height:1.7;color:var(--muted);font-weight:650}.wd-goal-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.wd-goal-tabs button{border:0;border-radius:999px;background:#fff;border:1px solid rgba(16,16,20,.1);padding:13px 16px;font-family:inherit;font-weight:900;cursor:pointer;transition:.25s}.wd-goal-tabs button.active,.wd-goal-tabs button:hover{background:#101014;color:#fff;transform:translateY(-3px)}.wd-goal-panel{min-height:440px;border-radius:38px;background:#101014;color:#fff;padding:38px;box-shadow:0 34px 100px rgba(16,16,20,.22);position:relative;overflow:hidden}.wd-goal-panel:before{content:"";position:absolute;right:-100px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:var(--brand-gradient);filter:blur(38px);opacity:.45}.wd-goal-panel>*{position:relative;z-index:1}.wd-goal-tag{display:inline-flex;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.72);font-size:12px;text-transform:uppercase;letter-spacing:.13em;font-weight:900;margin-bottom:28px}.wd-goal-panel h3{font-size:clamp(34px,4vw,54px);line-height:1;letter-spacing:-.055em;margin-bottom:18px}.wd-goal-panel p{color:rgba(255,255,255,.76);font-size:18px}.wd-goal-panel ul{list-style:none;display:grid;gap:13px;margin-top:30px}.wd-goal-panel li{font-weight:850;color:#fff}.wd-goal-panel li:before{content:"✓";color:#ffd280;margin-right:10px}.wd-check-panel{border-radius:38px;background:rgba(255,255,255,.78);border:1px solid rgba(16,16,20,.08);box-shadow:0 28px 90px rgba(16,16,20,.1);padding:28px;display:grid;gap:12px}.wd-check-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.wd-check-top span{font-weight:950;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);font-size:12px}.wd-check-top b{font-size:42px;letter-spacing:-.05em}.wd-check-panel .check{cursor:pointer;text-align:left;border:0}.wd-check-panel .check.active{background:#101014;color:#fff}.wd-deliverable-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.wd-deliverable-tags span{display:inline-flex;padding:11px 14px;border-radius:999px;background:#fff;border:1px solid rgba(16,16,20,.08);font-weight:900;color:#30323a}.wd-process-lane{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}.wd-process-lane article{min-height:240px}.wd-industries .section-head{margin-bottom:34px}.wd-industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.wd-industry-grid img{width:100%;height:170px;object-fit:cover;border-radius:22px;margin-bottom:20px;box-shadow:0 16px 42px rgba(16,16,20,.1)}.wd-all-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.wd-all-service-grid article{min-height:220px}.wd-all-service-grid .active-service{background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(255,222,197,.72));border-color:rgba(242,128,102,.25)}.wd-faq-list{display:grid;gap:12px}.wd-faq-item{border-radius:26px;background:rgba(255,255,255,.78);border:1px solid rgba(16,16,20,.08);box-shadow:0 18px 54px rgba(16,16,20,.06);overflow:hidden}.wd-faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;border:0;background:transparent;padding:22px 24px;font-family:inherit;font-size:18px;font-weight:950;cursor:pointer;color:var(--text)}.wd-faq-item button span{font-size:24px;color:var(--coral);transition:.25s}.wd-faq-item p{display:none;padding:0 24px 24px}.wd-faq-item.active p{display:block}.wd-faq-item.active button span{transform:rotate(45deg)}.wd-contact{padding-bottom:120px}.wd-contact-panel{align-items:start;border-radius:42px;background:linear-gradient(135deg,#101014,#24242b);color:#fff;padding:42px;box-shadow:0 34px 100px rgba(16,16,20,.22);overflow:hidden;position:relative}.wd-contact-panel:before{content:"";position:absolute;right:-120px;top:-150px;width:460px;height:460px;border-radius:50%;background:var(--brand-gradient);filter:blur(46px);opacity:.52}.wd-contact-panel>*{position:relative;z-index:1}.wd-contact-panel h2{font-size:clamp(36px,4.8vw,64px);line-height:.96;letter-spacing:-.06em}.wd-contact-panel p{color:rgba(255,255,255,.76);font-size:18px;margin-top:16px}.wd-contact-panel form{background:rgba(255,255,255,.92);border-radius:30px;padding:24px;display:grid;gap:14px}.wd-contact-panel .form-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.wd-contact-panel input,.wd-contact-panel select,.wd-contact-panel textarea{width:100%;border:1px solid rgba(16,16,20,.1);border-radius:18px;padding:16px 17px;font:inherit;font-weight:750;color:#101014;background:#fff;outline:0}.wd-contact-panel textarea{min-height:120px;resize:vertical}.wd-contact-panel .form-status{color:#147d51;font-size:14px;margin:0}.webdev-page [id]{scroll-margin-top:125px}
@media(max-width:980px){.wd-hero-grid,.wd-overview-grid,.wd-strategy-grid,.wd-deliverables-grid,.wd-faq-grid,.wd-contact-panel{grid-template-columns:1fr}.wd-blueprint-grid,.wd-all-service-grid{grid-template-columns:repeat(2,1fr)}.wd-process-lane,.wd-industry-grid{grid-template-columns:repeat(2,1fr)}.wd-dashboard-stage{grid-template-columns:1fr}.wd-trust-row{grid-template-columns:1fr}}
@media(max-width:640px){.wd-hero{padding:122px 0 56px}.wd-hero:before{inset:82px 12px 0;border-radius:34px}.wd-hero-copy h1{font-size:clamp(42px,13vw,58px);letter-spacing:-.06em}.wd-hero-copy p{font-size:17px}.wd-hero-actions{flex-direction:column}.wd-hero-actions .btn{width:100%}.wd-build-grid,.wd-blueprint-grid,.wd-process-lane,.wd-industry-grid,.wd-all-service-grid{grid-template-columns:1fr}.wd-browser-card{border-radius:28px;padding:12px}.wd-dashboard-stage{min-height:auto;padding:16px;border-radius:24px}.wd-live-score strong{font-size:42px}.wd-mini-kpis{grid-template-columns:1fr}.wd-overview,.wd-strategy,.wd-blueprint,.wd-deliverables,.wd-process,.wd-industries,.wd-services-all,.wd-faq-section,.wd-contact{padding:58px 0}.wd-contact-panel{padding:26px;border-radius:30px}.wd-contact-panel .form-row{grid-template-columns:1fr}.wd-goal-panel{min-height:auto;padding:28px;border-radius:30px}.wd-check-panel{border-radius:28px;padding:20px}.wd-industry-grid img{height:210px}.webdev-page .eyebrow{font-size:12px}}

/* =========================================================
   Service dropdown thumbnails + visual service cards
   Update: make Services click/dropdown less plain by adding
   small photo previews from existing Fluxo work images.
   ========================================================= */
.nav-service-panel,
.nav.dream-nav .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-panel{
  width:455px !important;
  min-width:455px !important;
  padding:10px !important;
  border-radius:24px !important;
  background:rgba(255,255,255,.98) !important;
}

.nav-service-panel a,
.nav.dream-nav .nav-service-panel a,
.nav.dream-nav.x8-nav .nav-service-panel a{
  gap:13px !important;
  padding:10px 12px !important;
  min-height:66px !important;
  border-radius:16px !important;
  border-bottom:0 !important;
  margin:0 0 4px !important;
  background:#fff !important;
  box-shadow:inset 0 0 0 1px rgba(16,16,20,.055) !important;
  overflow:hidden !important;
}

.nav-service-panel a:last-child,
.nav.dream-nav .nav-service-panel a:last-child,
.nav.dream-nav.x8-nav .nav-service-panel a:last-child{
  margin-bottom:0 !important;
}

.service-thumb,
.nav-service-panel .service-thumb,
.nav.dream-nav .nav-service-panel .service-thumb,
.nav.dream-nav.x8-nav .nav-service-panel .service-thumb{
  width:58px !important;
  height:42px !important;
  min-width:58px !important;
  border-radius:14px !important;
  overflow:hidden !important;
  display:block !important;
  background:linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
  box-shadow:0 10px 22px rgba(16,16,20,.10) !important;
  position:relative !important;
}

.service-thumb::after,
.nav-service-panel .service-thumb::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,0)) !important;
  pointer-events:none !important;
}

.service-thumb img,
.nav-service-panel .service-thumb img,
.nav.dream-nav .nav-service-panel .service-thumb img,
.nav.dream-nav.x8-nav .nav-service-panel .service-thumb img{
  width:100% !important;
  height:100% !important;
  display:block !important;
  object-fit:cover !important;
  transform:scale(1.03) !important;
  transition:transform .28s ease !important;
}

.nav-service-panel a:hover,
.nav.dream-nav .nav-service-panel a:hover,
.nav.dream-nav.x8-nav .nav-service-panel a:hover{
  background:#fff6f3 !important;
  padding-left:12px !important;
  transform:translateY(-1px) !important;
  box-shadow:inset 0 0 0 1px rgba(255,91,75,.16),0 12px 24px rgba(255,91,75,.08) !important;
}

.nav-service-panel a:hover .service-thumb img,
.nav.dream-nav .nav-service-panel a:hover .service-thumb img,
.nav.dream-nav.x8-nav .nav-service-panel a:hover .service-thumb img{
  transform:scale(1.10) !important;
}

.nav-service-panel a .service-name,
.nav.dream-nav .nav-service-panel a .service-name,
.nav.dream-nav.x8-nav .nav-service-panel a .service-name{
  flex:1 !important;
  font-size:14px !important;
  line-height:1.18 !important;
  font-weight:900 !important;
}

.wd-all-service-grid article{
  min-height:315px !important;
  padding:16px 16px 24px !important;
}

.wd-service-card-image{
  width:100%;
  height:132px;
  border-radius:24px;
  overflow:hidden;
  margin-bottom:18px;
  background:#fff6f3;
  box-shadow:0 18px 42px rgba(16,16,20,.10);
  position:relative;
}

.wd-service-card-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(16,16,20,.12));
  pointer-events:none;
}

.wd-service-card-image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}

.wd-all-service-grid article:hover .wd-service-card-image img{
  transform:scale(1.08);
}

.wd-all-service-grid article > span{
  margin-bottom:16px !important;
}

@media(max-width:980px){
  .nav-service-panel,
  .nav.dream-nav .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-panel{
    width:100% !important;
    min-width:0 !important;
    padding:8px !important;
  }
  .nav-service-panel a,
  .nav.dream-nav .nav-service-panel a,
  .nav.dream-nav.x8-nav .nav-service-panel a{
    min-height:62px !important;
    padding:9px 10px !important;
  }
  .service-thumb,
  .nav-service-panel .service-thumb{
    width:50px !important;
    min-width:50px !important;
    height:42px !important;
  }
}

@media(max-width:640px){
  .wd-all-service-grid article{min-height:auto !important;}
  .wd-service-card-image{height:170px;}
}


/* =========================================================
   Premium 2-column Services dropdown
   Bigger matching thumbnails + service descriptions + hover motion
   ========================================================= */
@media(min-width:981px){
  .nav-service-panel,
  .nav.dream-nav .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-panel{
    width:760px !important;
    min-width:760px !important;
    max-width:calc(100vw - 44px) !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    flex-direction:unset !important;
    align-items:stretch !important;
    gap:12px !important;
    padding:14px !important;
    border-radius:30px !important;
    background:rgba(255,255,255,.96) !important;
    box-shadow:0 30px 80px rgba(16,16,20,.16), inset 0 1px 0 rgba(255,255,255,.75) !important;
    overflow:visible !important;
  }

  .nav-service-panel a,
  .nav.dream-nav .nav-service-panel a,
  .nav.dream-nav.x8-nav .nav-service-panel a{
    min-height:94px !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:15px !important;
    padding:13px 14px !important;
    margin:0 !important;
    border-radius:22px !important;
    background:linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
    border:1px solid rgba(16,16,20,.07) !important;
    box-shadow:0 10px 28px rgba(16,16,20,.055) !important;
    overflow:hidden !important;
    color:#111116 !important;
    transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
  }

  .nav-service-panel a:nth-child(9),
  .nav.dream-nav .nav-service-panel a:nth-child(9),
  .nav.dream-nav.x8-nav .nav-service-panel a:nth-child(9){
    grid-column:1 / -1 !important;
  }

  .nav-service-panel .service-thumb,
  .nav.dream-nav .nav-service-panel .service-thumb,
  .nav.dream-nav.x8-nav .nav-service-panel .service-thumb{
    width:96px !important;
    min-width:96px !important;
    height:68px !important;
    border-radius:18px !important;
    box-shadow:0 14px 34px rgba(16,16,20,.14) !important;
  }

  .nav-service-panel .service-copy,
  .nav.dream-nav .nav-service-panel .service-copy,
  .nav.dream-nav.x8-nav .nav-service-panel .service-copy{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    flex:1 !important;
    min-width:0 !important;
  }

  .nav-service-panel a .service-name,
  .nav.dream-nav .nav-service-panel a .service-name,
  .nav.dream-nav.x8-nav .nav-service-panel a .service-name{
    display:block !important;
    font-size:15px !important;
    line-height:1.14 !important;
    font-weight:950 !important;
    letter-spacing:-.025em !important;
    color:#101014 !important;
  }

  .nav-service-panel a .service-desc,
  .nav.dream-nav .nav-service-panel a .service-desc,
  .nav.dream-nav.x8-nav .nav-service-panel a .service-desc{
    display:block !important;
    font-size:12px !important;
    line-height:1.35 !important;
    font-weight:750 !important;
    letter-spacing:-.01em !important;
    color:#676b78 !important;
  }

  .nav-service-panel a::after,
  .nav.dream-nav .nav-service-panel a::after,
  .nav.dream-nav.x8-nav .nav-service-panel a::after{
    content:"→" !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    border-radius:999px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
    color:#fff !important;
    font-weight:900 !important;
    opacity:0 !important;
    transform:translateX(-10px) scale(.86) !important;
    transition:opacity .28s ease, transform .28s ease !important;
  }

  .nav-service-panel a:hover,
  .nav-service-panel a:focus-visible,
  .nav.dream-nav .nav-service-panel a:hover,
  .nav.dream-nav .nav-service-panel a:focus-visible,
  .nav.dream-nav.x8-nav .nav-service-panel a:hover,
  .nav.dream-nav.x8-nav .nav-service-panel a:focus-visible{
    background:linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
    border-color:rgba(255,91,75,.24) !important;
    box-shadow:0 22px 44px rgba(255,91,75,.14), inset 0 0 0 1px rgba(255,255,255,.65) !important;
    transform:translateY(-4px) !important;
    padding-left:14px !important;
    color:#101014 !important;
  }

  .nav-service-panel a:hover .service-thumb img,
  .nav-service-panel a:focus-visible .service-thumb img,
  .nav.dream-nav .nav-service-panel a:hover .service-thumb img,
  .nav.dream-nav .nav-service-panel a:focus-visible .service-thumb img,
  .nav.dream-nav.x8-nav .nav-service-panel a:hover .service-thumb img,
  .nav.dream-nav.x8-nav .nav-service-panel a:focus-visible .service-thumb img{
    transform:scale(1.13) !important;
  }

  .nav-service-panel a:hover::after,
  .nav-service-panel a:focus-visible::after,
  .nav.dream-nav .nav-service-panel a:hover::after,
  .nav.dream-nav .nav-service-panel a:focus-visible::after,
  .nav.dream-nav.x8-nav .nav-service-panel a:hover::after,
  .nav.dream-nav.x8-nav .nav-service-panel a:focus-visible::after{
    opacity:1 !important;
    transform:translateX(0) scale(1) !important;
  }
}

@media(max-width:980px){
  .nav-service-panel,
  .nav.dream-nav .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-panel{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .nav-service-panel a,
  .nav.dream-nav .nav-service-panel a,
  .nav.dream-nav.x8-nav .nav-service-panel a{
    gap:12px !important;
    min-height:78px !important;
    border-radius:16px !important;
  }

  .nav-service-panel .service-copy,
  .nav.dream-nav .nav-service-panel .service-copy,
  .nav.dream-nav.x8-nav .nav-service-panel .service-copy{
    display:flex !important;
    flex-direction:column !important;
    gap:4px !important;
  }

  .nav-service-panel a .service-name,
  .nav.dream-nav .nav-service-panel a .service-name,
  .nav.dream-nav.x8-nav .nav-service-panel a .service-name{
    font-size:14px !important;
    line-height:1.16 !important;
    font-weight:900 !important;
  }

  .nav-service-panel a .service-desc,
  .nav.dream-nav .nav-service-panel a .service-desc,
  .nav.dream-nav.x8-nav .nav-service-panel a .service-desc{
    display:block !important;
    font-size:11px !important;
    line-height:1.3 !important;
    font-weight:700 !important;
    color:#6d7079 !important;
  }
}

/* === Services dropdown: compact vertical version - no plain empty space === */
.nav-service-dropdown .nav-service-panel,
.nav .nav-service-dropdown .nav-service-panel,
.nav.dream-nav .nav-service-dropdown .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel{
  width: 355px !important;
  min-width: 355px !important;
  max-width: min(355px, calc(100vw - 28px)) !important;
  padding: 7px !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.nav-service-dropdown .nav-service-panel a,
.nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a{
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-radius: 11px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16,16,20,.065) !important;
  box-shadow: none !important;
  transform: none !important;
  background: transparent !important;
}

.nav-service-dropdown .nav-service-panel a:last-child,
.nav .nav-service-dropdown .nav-service-panel a:last-child,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a:last-child,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a:last-child{
  border-bottom: 0 !important;
}

.nav-service-dropdown .nav-service-panel .service-thumb,
.nav .nav-service-dropdown .nav-service-panel .service-thumb,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-thumb,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-thumb{
  width: 42px !important;
  height: 31px !important;
  min-width: 42px !important;
  border-radius: 8px !important;
  box-shadow: 0 5px 12px rgba(16,16,20,.10) !important;
  overflow: hidden !important;
}

.nav-service-dropdown .nav-service-panel .service-thumb img,
.nav .nav-service-dropdown .nav-service-panel .service-thumb img,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-thumb img,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.02) !important;
  transition: transform .25s ease !important;
}

.nav-service-dropdown .nav-service-panel .service-copy,
.nav .nav-service-dropdown .nav-service-panel .service-copy,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-copy,
.nav.dream-nav.x8-nav .nav-service-dropdown .service-copy{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  max-width: 245px !important;
}

.nav-service-dropdown .nav-service-panel .service-name,
.nav .nav-service-dropdown .nav-service-panel .service-name,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-name,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-name{
  display: block !important;
  font-size: 12.3px !important;
  line-height: 1.08 !important;
  font-weight: 900 !important;
  color: #101014 !important;
  white-space: normal !important;
}

.nav-service-dropdown .nav-service-panel .service-desc,
.nav .nav-service-dropdown .nav-service-panel .service-desc,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-desc,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-desc{
  display: block !important;
  font-size: 10.5px !important;
  line-height: 1.16 !important;
  font-weight: 700 !important;
  color: rgba(16,16,20,.56) !important;
  margin-top: 2px !important;
  white-space: normal !important;
}

.nav-service-dropdown .nav-service-panel .service-go,
.nav .nav-service-dropdown .nav-service-panel .service-go,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-go,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-go{
  margin-left: 4px !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 11px !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  background: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
  color: #fff !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.nav-service-dropdown .nav-service-panel a:hover,
.nav .nav-service-dropdown .nav-service-panel a:hover,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a:hover,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a:hover{
  background: #fff7f3 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(255,91,75,.08) !important;
  border-bottom-color: transparent !important;
}

.nav-service-dropdown .nav-service-panel a:hover .service-thumb img,
.nav .nav-service-dropdown .nav-service-panel a:hover .service-thumb img,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a:hover .service-thumb img,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a:hover .service-thumb img{
  transform: scale(1.10) !important;
}

.nav-service-dropdown .nav-service-panel a:hover .service-go,
.nav .nav-service-dropdown .nav-service-panel a:hover .service-go,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a:hover .service-go,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a:hover .service-go{
  opacity: 1 !important;
  transform: translateX(0) !important;
}

@media (max-width: 760px){
  .nav-service-dropdown .nav-service-panel,
  .nav .nav-service-dropdown .nav-service-panel,
  .nav.dream-nav .nav-service-dropdown .nav-service-panel,
  .nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel{
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 6px !important;
  }
  .nav-service-dropdown .nav-service-panel a,
  .nav .nav-service-dropdown .nav-service-panel a,
  .nav.dream-nav .nav-service-dropdown .nav-service-panel a,
  .nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a{
    min-height: 46px !important;
    padding: 6px 7px !important;
  }
  .nav-service-dropdown .nav-service-panel .service-thumb,
  .nav .nav-service-dropdown .nav-service-panel .service-thumb{
    width: 40px !important;
    height: 30px !important;
    min-width: 40px !important;
  }
}

/* === Services dropdown mouse-gap fix === */
.nav-service-dropdown,
.nav.dream-nav .nav-service-dropdown,
.nav.dream-nav.x8-nav .nav-service-dropdown{
  position: relative !important;
  padding-bottom: 22px !important; /* invisible bridge area below Services */
  margin-bottom: -22px !important;
}

.nav-service-dropdown::after,
.nav.dream-nav .nav-service-dropdown::after,
.nav.dream-nav.x8-nav .nav-service-dropdown::after{
  content: "" !important;
  position: absolute !important;
  left: -42px !important;
  right: -42px !important;
  top: 100% !important;
  height: 36px !important;
  display: block !important;
  background: transparent !important;
  pointer-events: auto !important;
  z-index: 9998 !important;
}

.nav-service-dropdown .nav-service-panel,
.nav .nav-service-dropdown .nav-service-panel,
.nav.dream-nav .nav-service-dropdown .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel{
  top: calc(100% + 0px) !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

.nav-service-dropdown:hover .nav-service-panel,
.nav-service-dropdown:focus-within .nav-service-panel,
.nav-service-dropdown.open .nav-service-panel,
.nav.dream-nav .nav-service-dropdown:hover .nav-service-panel,
.nav.dream-nav .nav-service-dropdown:focus-within .nav-service-panel,
.nav.dream-nav .nav-service-dropdown.open .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown:hover .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown:focus-within .nav-service-panel,
.nav.dream-nav.x8-nav .nav-service-dropdown.open .nav-service-panel{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

@media (max-width: 760px){
  .nav-service-dropdown,
  .nav.dream-nav .nav-service-dropdown,
  .nav.dream-nav.x8-nav .nav-service-dropdown{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .nav-service-dropdown::after,
  .nav.dream-nav .nav-service-dropdown::after,
  .nav.dream-nav.x8-nav .nav-service-dropdown::after{
    display: none !important;
  }
}

/* === Services dropdown: remove pink arrow buttons and keep plain style === */
.nav-service-panel .service-go,
.nav-service-dropdown .service-go,
.nav.dream-nav .nav-service-panel .service-go,
.nav.dream-nav.x8-nav .nav-service-panel .service-go{
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav-service-dropdown .nav-service-panel a,
.nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a{
  padding-right: 8px !important;
}

.nav-service-dropdown .nav-service-panel a:hover,
.nav .nav-service-dropdown .nav-service-panel a:hover,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a:hover,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a:hover{
  background: #fff8f5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 18px rgba(16,16,20,.06) !important;
}

/* === Final fix: remove all pink arrows from Services dropdown === */
.nav-service-panel .service-go,
.nav-service-dropdown .service-go,
.nav-service-panel a::after,
.nav-service-panel a::before,
.nav-service-dropdown .nav-service-panel a::after,
.nav-service-dropdown .nav-service-panel a::before,
.nav.dream-nav .nav-service-panel a::after,
.nav.dream-nav .nav-service-panel a::before,
.nav.dream-nav.x8-nav .nav-service-panel a::after,
.nav.dream-nav.x8-nav .nav-service-panel a::before{
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.nav-service-dropdown .nav-service-panel a,
.nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav .nav-service-dropdown .nav-service-panel a,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel a{
  padding-right: 8px !important;
  justify-content: flex-start !important;
}

.nav-service-dropdown .nav-service-panel .service-copy,
.nav .nav-service-dropdown .nav-service-panel .service-copy,
.nav.dream-nav .nav-service-dropdown .nav-service-panel .service-copy,
.nav.dream-nav.x8-nav .nav-service-dropdown .nav-service-panel .service-copy{
  max-width: none !important;
  padding-right: 0 !important;
  margin-right: 0 !important;
}


/* === Fluxo instant content mode: no scroll reveal / refresh transitions === */
html{scroll-behavior:auto!important;}
.reveal,
.reveal-left,
.reveal-right,
.growth-panel,
.fx-reveal{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
.visible,
.fx-reveal.in{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}
.bar span,
.visible .bar span,
.growth-panel.visible .bar span{
  width:var(--w,100%)!important;
  transition:none!important;
}
.bridge-line,
.bridge-wrap.visible .bridge-line{
  transform:scaleX(1)!important;
  transition:none!important;
}
.animated-connector path,
.animated-connector.visible path,
.timeline-svg path,
.process-timeline.visible .timeline-svg path,
.cluster-map path,
.cluster-map.visible path,
.x8-step-line path,
.x8-steps.visible .x8-step-line path{
  stroke-dashoffset:0!important;
  transition:none!important;
}


/* Brand marquee cleanup: larger real client logos, no unverified external logos */
body.x8-home .trusted-section {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

body.x8-home .trusted-header {
  margin-bottom: 42px !important;
}

body.x8-home .logo-card {
  width: 232px !important;
  height: 108px !important;
  padding: 14px 22px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 14px 34px rgba(16, 16, 20, 0.07) !important;
  overflow: hidden !important;
}

body.x8-home .logo-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(242, 128, 102, 0.34) !important;
  box-shadow: 0 20px 46px rgba(16, 16, 20, 0.11) !important;
}

body.x8-home .logo-card img {
  max-width: 96% !important;
  max-height: 82px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block !important;
  transform: scale(1.08);
  transform-origin: center;
}

body.x8-home .marquee-track {
  gap: 28px !important;
  padding-right: 28px !important;
}

@media (max-width: 768px) {
  body.x8-home .trusted-section {
    padding-top: 46px !important;
    padding-bottom: 46px !important;
  }

  body.x8-home .logo-card {
    width: 172px !important;
    height: 88px !important;
    padding: 12px 16px !important;
    border-radius: 16px !important;
  }

  body.x8-home .logo-card img {
    max-height: 64px !important;
    max-width: 98% !important;
    transform: scale(1.08);
  }
}

/* Fluxo homepage process section upgrade - more natural, image-led, and interactive */
.x8-deliver .section-head p {
  max-width: 820px;
}

.x8-tab-shell {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, .9);
}

.x8-tab-shell::before {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -110px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 116, .34), rgba(227, 87, 150, .20), transparent 70%);
  pointer-events: none;
}

.x8-tab-shell::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -100px;
  bottom: -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95, 198, 255, .20), transparent 72%);
  pointer-events: none;
}

.x8-tab-buttons,
.x8-deliver-grid {
  position: relative;
  z-index: 1;
}

.x8-tab-buttons button {
  border: 1px solid rgba(16, 16, 20, .08);
  background: rgba(255, 255, 255, .82);
  color: #101014;
  border-radius: 999px;
  padding: 14px 20px;
  font-family: inherit;
  font-weight: 950;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}

.x8-tab-buttons button:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(16, 16, 20, .12);
}

.x8-tab-buttons button.active {
  background: #101014;
  color: #fff;
  box-shadow: 0 18px 42px rgba(16, 16, 20, .22);
}

.x8-deliver-grid {
  grid-template-columns: .68fr 1.32fr;
  align-items: stretch;
}

.x8-deliver-copy {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 238, 229, .82), rgba(250, 223, 244, .52));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 22px 70px rgba(16, 16, 20, .07);
}

.x8-deliver-copy::before {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  right: -64px;
  top: -60px;
  border-radius: 50%;
  background: var(--brand-gradient);
  filter: blur(26px);
  opacity: .30;
}

.x8-deliver-copy span,
.x8-deliver-copy h3,
.x8-deliver-copy p,
.x8-deliver-copy a {
  position: relative;
  z-index: 1;
}

.x8-deliver-copy h3 {
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.x8-deliver-copy p {
  font-size: 17px;
}

.x8-deliver-mockup {
  min-height: 500px;
  padding: 0;
  background:
    radial-gradient(circle at calc(var(--mx, 50%) * 1) calc(var(--my, 50%) * 1), rgba(255, 255, 255, .72), transparent 28%),
    linear-gradient(135deg, #ffffff, #fff4ed 44%, #fff0f7 100%);
  color: #101014;
  border: 1px solid rgba(16, 16, 20, .08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 24px 85px rgba(16, 16, 20, .14);
  transition: transform .28s ease, box-shadow .28s ease;
}

.x8-deliver-mockup:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 34px 110px rgba(16, 16, 20, .18);
}

.x8-process-board {
  min-height: 500px;
  padding: 28px;
  position: relative;
  isolation: isolate;
}

.x8-process-board::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 28px;
  background: rgba(255, 255, 255, .54);
  border: 1px solid rgba(16, 16, 20, .07);
  box-shadow: 0 20px 70px rgba(16, 16, 20, .08);
  z-index: -1;
}

.x8-board-top {
  height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-radius: 22px;
  background: rgba(16, 16, 20, .92);
  color: rgba(255, 255, 255, .72);
  margin-bottom: 22px;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  font-weight: 950;
}

.x8-board-top span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff7a59;
}

.x8-board-top span:nth-child(2) { background: #ffd166; }
.x8-board-top span:nth-child(3) { background: #25d366; }
.x8-board-top b { margin-left: auto; }

.x8-website-preview,
.x8-search-preview,
.x8-device,
.x8-campaign-grid article,
.x8-launch-score,
.x8-launch-list div,
.x8-maintenance-card,
.x8-calendar-card,
.x8-chat-bubble {
  border: 1px solid rgba(16, 16, 20, .08);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 18px 48px rgba(16, 16, 20, .08);
}

.x8-preview-hero {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 20px;
  align-items: center;
  padding: 18px;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(16, 16, 20, .94), rgba(42, 42, 52, .92));
  color: #fff;
  overflow: hidden;
}

.x8-preview-hero img,
.creative-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 22px 52px rgba(16, 16, 20, .32);
  transition: transform .35s ease;
}

.x8-preview-hero:hover img,
.creative-card:hover img {
  transform: scale(1.055) rotate(-1deg);
}

.x8-preview-hero small,
.x8-search-preview small {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 950;
  color: #ffc48a;
  margin-bottom: 10px;
}

.x8-preview-hero strong {
  display: block;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.x8-preview-hero p {
  color: rgba(255, 255, 255, .74);
  margin-top: 10px;
  font-weight: 750;
}

.x8-wire-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.x8-wire-sections article {
  border-radius: 24px;
  padding: 20px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(16, 16, 20, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}

.x8-wire-sections article:hover,
.x8-device:hover,
.x8-campaign-grid article:hover,
.x8-launch-list div:hover,
.x8-maintenance-card:hover,
.x8-calendar-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 26px 70px rgba(16, 16, 20, .13);
}

.x8-wire-sections i {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #101014;
  color: #fff;
  font-style: normal;
  font-weight: 950;
  margin-bottom: 16px;
}

.x8-wire-sections b,
.x8-campaign-grid b,
.x8-launch-list b,
.x8-maintenance-card b {
  display: block;
  font-size: 20px;
  letter-spacing: -.025em;
}

.x8-wire-sections span,
.x8-campaign-grid span,
.x8-launch-list span,
.x8-maintenance-card span,
.x8-calendar-card span {
  display: block;
  color: var(--muted);
  font-weight: 750;
  margin-top: 6px;
}

.x8-heat-path {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(16, 16, 20, .08);
  position: relative;
  overflow: hidden;
}

.x8-heat-path::before {
  content: "";
  position: absolute;
  left: 8%;
  top: 50%;
  width: 74%;
  height: 3px;
  background: var(--brand-gradient);
  transform: translateY(-50%);
  opacity: .58;
}

.x8-heat-path span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  background: #fff;
  border: 1px solid rgba(16, 16, 20, .08);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 950;
}

.x8-search-preview {
  border-radius: 28px;
  padding: 24px;
}

.x8-search-preview strong {
  display: block;
  color: #174ea6;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.x8-search-preview p {
  color: #3c4043;
  font-weight: 700;
  margin-top: 12px;
  line-height: 1.5;
}

.x8-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0;
}

.x8-keyword-cloud button {
  border: 0;
  border-radius: 999px;
  padding: 13px 16px;
  background: #101014;
  color: #fff;
  font-family: inherit;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(16, 16, 20, .13);
  animation: x8FloatSoft 4.5s ease-in-out infinite;
}

.x8-keyword-cloud button:nth-child(2n) { animation-delay: .6s; background: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)); }
.x8-keyword-cloud button:nth-child(3n) { animation-delay: 1.1s; background: #fff; color: #101014; border: 1px solid rgba(16, 16, 20, .08); }

.x8-funnel-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.x8-funnel-map div {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(16, 16, 20, .08);
}

.x8-funnel-map b,
.x8-funnel-map span {
  display: block;
}

.x8-funnel-map b { font-size: 20px; }
.x8-funnel-map span { color: var(--muted); font-weight: 750; margin-top: 5px; }

.x8-device-lab {
  display: grid;
  grid-template-columns: 1.1fr .82fr .56fr;
  gap: 16px;
  align-items: end;
}

.x8-device {
  border-radius: 30px;
  padding: 20px;
  min-height: 270px;
  position: relative;
  overflow: hidden;
}

.x8-device em {
  display: block;
  height: 150px;
  border-radius: 22px;
  background:
    linear-gradient(90deg, rgba(16, 16, 20, .10) 40%, transparent 40%),
    linear-gradient(135deg, rgba(255, 181, 84, .62), rgba(227, 87, 150, .42), rgba(96, 180, 255, .36));
  margin-bottom: 18px;
  animation: x8ScreenShine 3.5s ease infinite;
}

.x8-device.tablet { min-height: 245px; }
.x8-device.tablet em { height: 128px; }
.x8-device.phone { min-height: 220px; border-radius: 36px; }
.x8-device.phone em { height: 116px; border-radius: 28px; }
.x8-device strong { display: block; font-size: 22px; }
.x8-device p { color: var(--muted); font-weight: 750; margin-top: 7px; line-height: 1.45; }

.x8-build-checks,
.x8-launch-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.x8-build-checks span {
  border-radius: 18px;
  padding: 14px;
  background: rgba(16, 16, 20, .92);
  color: #fff;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}

.x8-campaign-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 15px;
}

.x8-campaign-grid article {
  min-height: 190px;
  border-radius: 28px;
  padding: 20px;
  overflow: hidden;
}

.x8-campaign-grid article p {
  margin: 12px 0 0;
  color: #30323a;
  line-height: 1.45;
  font-weight: 850;
}

.creative-card img {
  height: 120px;
  margin-bottom: 16px;
}

.x8-bar-chart {
  height: 92px;
  display: flex;
  align-items: end;
  gap: 9px;
  margin: 18px 0;
}

.x8-bar-chart i {
  flex: 1;
  border-radius: 14px 14px 5px 5px;
  background: var(--brand-gradient);
  min-height: 36%;
  animation: x8BarLift 2.6s ease-in-out infinite;
}

.x8-bar-chart i:nth-child(2) { min-height: 68%; animation-delay: .2s; }
.x8-bar-chart i:nth-child(3) { min-height: 86%; animation-delay: .4s; }
.x8-bar-chart i:nth-child(4) { min-height: 52%; animation-delay: .6s; }

.x8-launch-score {
  border-radius: 30px;
  padding: 28px;
  background: linear-gradient(135deg, #101014, #2c2c36);
  color: #fff;
  margin-bottom: 16px;
}

.x8-launch-score strong {
  display: block;
  font-size: clamp(48px, 7vw, 82px);
  letter-spacing: -.07em;
  line-height: .92;
}

.x8-launch-score span { color: rgba(255, 255, 255, .72); font-weight: 800; }

.x8-launch-list {
  grid-template-columns: repeat(2, 1fr);
}

.x8-launch-list div {
  border-radius: 26px;
  padding: 22px;
}

.x8-launch-list i {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 8px rgba(37, 211, 102, .13);
  margin-bottom: 18px;
  position: relative;
}

.x8-launch-list i::after {
  content: "✓";
  color: #fff;
  font-weight: 950;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.x8-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.x8-chat-bubble {
  border-radius: 26px;
  padding: 18px 20px;
  font-weight: 850;
  line-height: 1.45;
}

.x8-chat-bubble.right {
  background: #101014;
  color: #fff;
  transform: translateY(30px);
}

.x8-maintenance-card {
  border-radius: 28px;
  padding: 22px;
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.x8-maintenance-card span {
  padding: 11px 13px;
  border-radius: 15px;
  background: rgba(255, 133, 86, .13);
  margin-top: 0;
}

.x8-calendar-card {
  border-radius: 32px;
  padding: 26px;
  text-align: center;
  margin-top: 54px;
  background: linear-gradient(145deg, #fff, #fff3e7);
}

.x8-calendar-card strong {
  display: block;
  font-size: 74px;
  line-height: .9;
  letter-spacing: -.07em;
}

@keyframes x8FloatSoft {
  50% { transform: translateY(-7px); }
}

@keyframes x8ScreenShine {
  50% { filter: saturate(1.2) brightness(1.05); transform: scale(1.01); }
}

@keyframes x8BarLift {
  50% { transform: scaleY(.72); opacity: .72; }
}

@media (max-width: 980px) {
  .x8-deliver-grid,
  .x8-preview-hero,
  .x8-campaign-grid,
  .x8-support-grid {
    grid-template-columns: 1fr;
  }

  .x8-device-lab,
  .x8-build-checks,
  .x8-wire-sections,
  .x8-funnel-map {
    grid-template-columns: 1fr 1fr;
  }

  .x8-deliver-mockup,
  .x8-process-board {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .x8-tab-shell { padding: 16px; border-radius: 30px; }
  .x8-tab-buttons { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .x8-tab-buttons button { white-space: nowrap; padding: 12px 15px; }
  .x8-deliver-copy { padding: 24px; border-radius: 26px; }
  .x8-deliver-mockup { border-radius: 26px; }
  .x8-process-board { padding: 16px; }
  .x8-process-board::before { inset: 8px; border-radius: 22px; }
  .x8-board-top { border-radius: 18px; margin-bottom: 14px; }
  .x8-preview-hero img { height: 130px; }
  .x8-device-lab,
  .x8-build-checks,
  .x8-wire-sections,
  .x8-funnel-map,
  .x8-launch-list {
    grid-template-columns: 1fr;
  }
  .x8-heat-path {
    border-radius: 22px;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }
  .x8-heat-path::before { display: none; }
  .x8-chat-bubble.right,
  .x8-calendar-card { transform: none; margin-top: 0; }
}

/* Fluxo laptop fit patch: compact the interactive process section for 13–15 inch laptop screens */
@media (min-width: 981px) and (max-width: 1500px) {
  body.x8-home #deliver {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  body.x8-home #deliver .container {
    max-width: 1180px;
  }

  body.x8-home #deliver .section-head {
    margin-bottom: 18px;
  }

  body.x8-home #deliver .section-head .kicker {
    font-size: 11px;
    margin-bottom: 8px;
  }

  body.x8-home #deliver .section-head h2 {
    max-width: 880px;
    font-size: clamp(36px, 3.25vw, 50px) !important;
    line-height: 1.02 !important;
  }

  body.x8-home #deliver .section-head p {
    max-width: 760px;
    font-size: 14.5px;
    line-height: 1.45;
  }

  body.x8-home #deliver .x8-tab-shell {
    max-width: 1110px;
    margin: 0 auto;
    padding: 16px;
    border-radius: 32px;
  }

  body.x8-home #deliver .x8-tab-buttons {
    gap: 8px;
    margin-bottom: 14px;
  }

  body.x8-home #deliver .x8-tab-buttons button {
    padding: 10px 17px;
    font-size: 13px;
  }

  body.x8-home #deliver .x8-deliver-grid {
    grid-template-columns: .58fr 1.42fr;
    gap: 16px;
  }

  body.x8-home #deliver .x8-deliver-copy {
    padding: 22px;
    border-radius: 26px;
  }

  body.x8-home #deliver .x8-deliver-copy span {
    font-size: 10px;
    letter-spacing: .16em;
  }

  body.x8-home #deliver .x8-deliver-copy h3 {
    font-size: clamp(26px, 2.35vw, 36px) !important;
    line-height: 1.04;
    margin: 10px 0;
  }

  body.x8-home #deliver .x8-deliver-copy p {
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 18px;
  }

  body.x8-home #deliver .x8-deliver-copy .btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 13px;
  }

  body.x8-home #deliver .x8-deliver-mockup {
    min-height: 360px;
    border-radius: 28px;
  }

  body.x8-home #deliver .x8-process-board {
    min-height: 360px;
    padding: 18px;
  }

  body.x8-home #deliver .x8-process-board::before {
    inset: 12px;
    border-radius: 24px;
  }

  body.x8-home #deliver .x8-board-top {
    height: 36px;
    margin-bottom: 12px;
    padding: 0 14px;
    border-radius: 18px;
    font-size: 9px;
  }

  body.x8-home #deliver .x8-board-top span {
    width: 8px;
    height: 8px;
  }

  body.x8-home #deliver .x8-preview-hero {
    grid-template-columns: 150px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-preview-hero img,
  body.x8-home #deliver .creative-card img {
    height: 96px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-preview-hero small,
  body.x8-home #deliver .x8-search-preview small {
    font-size: 9px;
    margin-bottom: 6px;
  }

  body.x8-home #deliver .x8-preview-hero strong {
    font-size: clamp(21px, 2vw, 28px);
  }

  body.x8-home #deliver .x8-preview-hero p {
    font-size: 13px;
    margin-top: 6px;
  }

  body.x8-home #deliver .x8-wire-sections,
  body.x8-home #deliver .x8-funnel-map {
    gap: 10px;
    margin-top: 12px;
  }

  body.x8-home #deliver .x8-wire-sections article,
  body.x8-home #deliver .x8-funnel-map div {
    padding: 13px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-wire-sections i {
    width: 28px;
    height: 28px;
    margin-bottom: 10px;
    font-size: 12px;
  }

  body.x8-home #deliver .x8-wire-sections b,
  body.x8-home #deliver .x8-campaign-grid b,
  body.x8-home #deliver .x8-launch-list b,
  body.x8-home #deliver .x8-maintenance-card b,
  body.x8-home #deliver .x8-funnel-map b {
    font-size: 16px;
  }

  body.x8-home #deliver .x8-wire-sections span,
  body.x8-home #deliver .x8-campaign-grid span,
  body.x8-home #deliver .x8-launch-list span,
  body.x8-home #deliver .x8-maintenance-card span,
  body.x8-home #deliver .x8-calendar-card span,
  body.x8-home #deliver .x8-funnel-map span {
    font-size: 12.5px;
    line-height: 1.35;
  }

  body.x8-home #deliver .x8-heat-path {
    margin-top: 12px;
    padding: 10px 12px;
  }

  body.x8-home #deliver .x8-heat-path span {
    padding: 6px 9px;
    font-size: 10.5px;
  }

  body.x8-home #deliver .x8-search-preview {
    padding: 17px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-search-preview strong {
    font-size: 21px;
  }

  body.x8-home #deliver .x8-search-preview p {
    font-size: 13px;
    margin-top: 8px;
  }

  body.x8-home #deliver .x8-keyword-cloud {
    gap: 8px;
    margin: 12px 0;
  }

  body.x8-home #deliver .x8-keyword-cloud button {
    padding: 9px 11px;
    font-size: 11.5px;
  }

  body.x8-home #deliver .x8-device-lab {
    gap: 12px;
  }

  body.x8-home #deliver .x8-device {
    min-height: 190px;
    padding: 14px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-device.tablet { min-height: 178px; }
  body.x8-home #deliver .x8-device.phone { min-height: 165px; border-radius: 28px; }

  body.x8-home #deliver .x8-device em {
    height: 92px;
    margin-bottom: 12px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-device.tablet em { height: 82px; }
  body.x8-home #deliver .x8-device.phone em { height: 72px; border-radius: 20px; }

  body.x8-home #deliver .x8-device strong {
    font-size: 18px;
  }

  body.x8-home #deliver .x8-device p {
    font-size: 12px;
    margin-top: 4px;
  }

  body.x8-home #deliver .x8-build-checks,
  body.x8-home #deliver .x8-launch-list {
    gap: 8px;
    margin-top: 12px;
  }

  body.x8-home #deliver .x8-build-checks span {
    padding: 10px 8px;
    border-radius: 14px;
    font-size: 11px;
  }

  body.x8-home #deliver .x8-campaign-grid {
    gap: 10px;
  }

  body.x8-home #deliver .x8-campaign-grid article {
    min-height: 132px;
    padding: 14px;
    border-radius: 20px;
  }

  body.x8-home #deliver .x8-campaign-grid article p {
    font-size: 13px;
    margin-top: 8px;
  }

  body.x8-home #deliver .creative-card img {
    height: 74px;
    margin-bottom: 10px;
  }

  body.x8-home #deliver .x8-bar-chart {
    height: 54px;
    margin: 10px 0;
  }

  body.x8-home #deliver .x8-launch-score {
    padding: 17px 22px;
    margin-bottom: 10px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-launch-score strong {
    font-size: clamp(42px, 4.9vw, 58px);
  }

  body.x8-home #deliver .x8-launch-score span {
    font-size: 13px;
  }

  body.x8-home #deliver .x8-launch-list div {
    padding: 14px 16px;
    border-radius: 20px;
    min-height: 86px;
  }

  body.x8-home #deliver .x8-launch-list i {
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 6px rgba(37, 211, 102, .13);
    margin-bottom: 10px;
  }

  body.x8-home #deliver .x8-support-grid {
    gap: 10px;
  }

  body.x8-home #deliver .x8-chat-bubble {
    padding: 13px 15px;
    border-radius: 20px;
    font-size: 13px;
  }

  body.x8-home #deliver .x8-chat-bubble.right {
    transform: translateY(18px);
  }

  body.x8-home #deliver .x8-maintenance-card {
    margin-top: 14px;
    padding: 15px;
    border-radius: 22px;
    gap: 7px;
  }

  body.x8-home #deliver .x8-maintenance-card span {
    padding: 8px 10px;
    border-radius: 12px;
  }

  body.x8-home #deliver .x8-calendar-card {
    margin-top: 34px;
    padding: 18px;
    border-radius: 24px;
  }

  body.x8-home #deliver .x8-calendar-card strong {
    font-size: 54px;
  }
}

@media (min-width: 981px) and (max-width: 1500px) and (max-height: 820px) {
  body.x8-home #deliver .section-head h2 {
    font-size: clamp(32px, 3vw, 44px) !important;
  }

  body.x8-home #deliver .section-head p {
    font-size: 13.5px;
    line-height: 1.38;
  }

  body.x8-home #deliver .x8-deliver-mockup,
  body.x8-home #deliver .x8-process-board {
    min-height: 340px;
  }

  body.x8-home #deliver .x8-deliver-copy h3 {
    font-size: clamp(25px, 2.2vw, 33px) !important;
  }

  body.x8-home #deliver .x8-deliver-copy p {
    font-size: 13.5px;
  }
}

/* Fluxo update: sharper project photos and cleaner copy wrapping in interactive process section */
body.x8-home #deliver .x8-device img {
  width: 100%;
  height: 150px;
  display: block;
  object-fit: contain;
  object-position: center;
  background: rgba(255,255,255,.96);
  border-radius: 22px;
  margin-bottom: 18px;
  box-shadow: 0 18px 46px rgba(16, 16, 20, .16);
  transition: transform .35s ease, filter .35s ease;
}

body.x8-home #deliver .x8-device:hover img,
body.x8-home #deliver .creative-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.03);
}

body.x8-home #deliver .x8-lead-route p {
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: -.02em;
}

body.x8-home #deliver .x8-campaign-grid article p {
  overflow-wrap: normal;
  word-break: normal;
}

body.x8-home #deliver .creative-card img {
  object-position: center;
}

body.x8-home #deliver .x8-cta-test {
  background:
    radial-gradient(circle at 70% 18%, rgba(242, 128, 102, .20), transparent 36%),
    rgba(255,255,255,.82);
}

@media (min-width: 981px) and (max-width: 1500px) {
  body.x8-home #deliver .x8-device img {
    height: 92px;
    border-radius: 18px;
    margin-bottom: 12px;
  }

  body.x8-home #deliver .x8-device.phone img {
    height: 72px;
    border-radius: 20px;
  }

  body.x8-home #deliver .x8-device.tablet img {
    height: 82px;
  }

  body.x8-home #deliver .x8-lead-route p {
    font-size: 12.5px;
    white-space: nowrap;
  }
}

@media (max-width: 980px) {
  body.x8-home #deliver .x8-device img {
    height: 160px;
  }
  body.x8-home #deliver .x8-lead-route p {
    white-space: normal;
  }
}

/* Fluxo update: laptop-fit Hosting tab and improved Contact Fluxo support tab */
body.x8-home #deliver .x8-host-board .x8-launch-score {
  padding: 20px 24px;
  margin-bottom: 12px;
  border-radius: 26px;
}

body.x8-home #deliver .x8-host-board .x8-launch-score strong {
  font-size: clamp(42px, 5.4vw, 66px);
}

body.x8-home #deliver .x8-host-board .x8-launch-list {
  gap: 12px;
}

body.x8-home #deliver .x8-host-board .x8-launch-list div {
  min-height: 112px;
  padding: 18px 20px;
  border-radius: 24px;
}

body.x8-home #deliver .x8-host-board .x8-launch-list i {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
}

body.x8-home #deliver .x8-host-board .x8-launch-list b {
  font-size: 20px;
}

body.x8-home #deliver .x8-contact-flow {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 16px;
  align-items: stretch;
}

body.x8-home #deliver .x8-chat-thread,
body.x8-home #deliver .x8-contact-actions {
  border: 1px solid rgba(16,16,20,.08);
  background: rgba(255,255,255,.82);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 48px rgba(16,16,20,.08);
}

body.x8-home #deliver .x8-chat-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.x8-home #deliver .x8-chat-thread .x8-chat-bubble {
  width: fit-content;
  max-width: 86%;
  min-height: auto;
  padding: 14px 16px;
  border-radius: 22px;
  font-size: 14.5px;
  line-height: 1.35;
  font-weight: 850;
}

body.x8-home #deliver .x8-chat-thread .x8-chat-bubble.right {
  align-self: flex-end;
  background: #101014;
  color: #fff;
}

body.x8-home #deliver .x8-chat-thread .x8-chat-bubble.left {
  align-self: flex-start;
  background: #fff4ed;
  color: #101014;
}

body.x8-home #deliver .x8-contact-actions {
  display: grid;
  gap: 12px;
}

body.x8-home #deliver .x8-contact-actions article {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(16,16,20,.07);
}

body.x8-home #deliver .x8-contact-actions i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: var(--brand-gradient);
  color: #101014;
  font-weight: 950;
  font-style: normal;
}

body.x8-home #deliver .x8-contact-actions b {
  font-size: 18px;
  letter-spacing: -.02em;
}

body.x8-home #deliver .x8-contact-actions span {
  grid-column: 2;
  color: #5d6170;
  font-size: 13px;
  font-weight: 800;
  margin-top: 2px;
}

@media (min-width: 981px) and (max-width: 1500px) {
  body.x8-home #deliver .x8-host-board .x8-launch-score {
    padding: 16px 22px;
    border-radius: 24px;
  }

  body.x8-home #deliver .x8-host-board .x8-launch-score strong {
    font-size: clamp(36px, 4.4vw, 54px);
  }

  body.x8-home #deliver .x8-host-board .x8-launch-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.x8-home #deliver .x8-host-board .x8-launch-list div {
    min-height: 88px;
    padding: 14px 16px;
    border-radius: 20px;
  }

  body.x8-home #deliver .x8-host-board .x8-launch-list i {
    width: 34px;
    height: 34px;
    margin-bottom: 8px;
  }

  body.x8-home #deliver .x8-host-board .x8-launch-list b {
    font-size: 16px;
  }

  body.x8-home #deliver .x8-host-board .x8-launch-list span {
    font-size: 12.5px;
  }

  body.x8-home #deliver .x8-contact-flow {
    gap: 12px;
  }

  body.x8-home #deliver .x8-chat-thread,
  body.x8-home #deliver .x8-contact-actions {
    padding: 14px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-chat-thread .x8-chat-bubble {
    font-size: 12.5px;
    padding: 11px 13px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-contact-actions article {
    padding: 10px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-contact-actions i {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  body.x8-home #deliver .x8-contact-actions b {
    font-size: 15px;
  }

  body.x8-home #deliver .x8-contact-actions span {
    font-size: 11.5px;
  }
}

@media (max-width: 980px) {
  body.x8-home #deliver .x8-contact-flow {
    grid-template-columns: 1fr;
  }

  body.x8-home #deliver .x8-chat-thread .x8-chat-bubble {
    max-width: 100%;
  }
}

/* Fluxo update: cleaner Support tab text alignment */
body.x8-home #deliver .x8-contact-flow-clean {
  grid-template-columns: 1.08fr .92fr;
  gap: 16px;
  align-items: stretch;
}

body.x8-home #deliver .x8-fluxo-chat-card,
body.x8-home #deliver .x8-contact-steps-clean {
  border: 1px solid rgba(16,16,20,.08);
  background: rgba(255,255,255,.86);
  border-radius: 28px;
  padding: 18px;
  box-shadow: 0 18px 48px rgba(16,16,20,.08);
}

body.x8-home #deliver .x8-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 14px;
  border-radius: 20px;
  background: #101014;
  color: #fff;
  margin-bottom: 14px;
}

body.x8-home #deliver .x8-chat-head strong,
body.x8-home #deliver .x8-chat-head span {
  line-height: 1.2;
}

body.x8-home #deliver .x8-chat-head strong {
  font-size: 15px;
  letter-spacing: -.01em;
}

body.x8-home #deliver .x8-chat-head span {
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

body.x8-home #deliver .x8-message-row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: 20px;
  margin-bottom: 10px;
  border: 1px solid rgba(16,16,20,.07);
}

body.x8-home #deliver .x8-message-row:last-child {
  margin-bottom: 0;
}

body.x8-home #deliver .x8-message-row small {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1;
}

body.x8-home #deliver .x8-message-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 850;
  color: #101014;
  text-align: left;
}

body.x8-home #deliver .x8-message-row.visitor {
  background: #fff4ed;
}

body.x8-home #deliver .x8-message-row.visitor small {
  background: rgba(255, 124, 85, .16);
  color: #df5f47;
}

body.x8-home #deliver .x8-message-row.fluxo {
  background: #f8f6ff;
}

body.x8-home #deliver .x8-message-row.fluxo small {
  background: rgba(178, 93, 215, .16);
  color: #9146c9;
}

body.x8-home #deliver .x8-contact-steps-clean {
  display: grid;
  gap: 12px;
}

body.x8-home #deliver .x8-contact-steps-clean article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px;
  min-height: 94px;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,16,20,.07);
}

body.x8-home #deliver .x8-contact-steps-clean i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-gradient);
  color: #101014;
  font-style: normal;
  font-weight: 950;
}

body.x8-home #deliver .x8-contact-steps-clean b,
body.x8-home #deliver .x8-contact-steps-clean span {
  display: block;
  text-align: left;
  line-height: 1.25;
}

body.x8-home #deliver .x8-contact-steps-clean b {
  font-size: 19px;
  letter-spacing: -.025em;
}

body.x8-home #deliver .x8-contact-steps-clean span {
  margin-top: 5px;
  color: #5d6170;
  font-size: 13px;
  font-weight: 800;
}

@media (min-width: 981px) and (max-width: 1500px) {
  body.x8-home #deliver .x8-contact-flow-clean {
    gap: 12px;
  }

  body.x8-home #deliver .x8-fluxo-chat-card,
  body.x8-home #deliver .x8-contact-steps-clean {
    padding: 14px;
    border-radius: 22px;
  }

  body.x8-home #deliver .x8-chat-head {
    padding: 11px 12px;
    border-radius: 16px;
    margin-bottom: 10px;
  }

  body.x8-home #deliver .x8-chat-head strong {
    font-size: 13px;
  }

  body.x8-home #deliver .x8-chat-head span {
    font-size: 10.5px;
  }

  body.x8-home #deliver .x8-message-row {
    grid-template-columns: 54px 1fr;
    padding: 10px 11px;
    gap: 8px;
    border-radius: 16px;
    margin-bottom: 8px;
  }

  body.x8-home #deliver .x8-message-row small {
    min-height: 23px;
    font-size: 9px;
  }

  body.x8-home #deliver .x8-message-row p {
    font-size: 12.2px;
    line-height: 1.3;
  }

  body.x8-home #deliver .x8-contact-steps-clean {
    gap: 10px;
  }

  body.x8-home #deliver .x8-contact-steps-clean article {
    grid-template-columns: 38px 1fr;
    gap: 11px;
    padding: 12px;
    min-height: 76px;
    border-radius: 18px;
  }

  body.x8-home #deliver .x8-contact-steps-clean i {
    width: 38px;
    height: 38px;
    font-size: 12px;
  }

  body.x8-home #deliver .x8-contact-steps-clean b {
    font-size: 15.5px;
  }

  body.x8-home #deliver .x8-contact-steps-clean span {
    font-size: 11.5px;
    margin-top: 3px;
  }
}

@media (max-width: 980px) {
  body.x8-home #deliver .x8-contact-flow-clean {
    grid-template-columns: 1fr;
  }

  body.x8-home #deliver .x8-message-row {
    grid-template-columns: 1fr;
  }
}


/* Fluxo update: tighter conversation spacing without overlap */
body.x8-home #deliver .x8-fluxo-chat-card {
  display: flex;
  flex-direction: column;
}

body.x8-home #deliver .x8-message-row {
  grid-template-columns: 1fr;
  gap: 5px;
  width: 84%;
  padding: 10px 12px;
  margin-bottom: 6px;
}

body.x8-home #deliver .x8-message-row small {
  justify-self: start;
  min-height: 22px;
  padding: 0 10px;
}

body.x8-home #deliver .x8-message-row.visitor {
  align-self: flex-start;
}

body.x8-home #deliver .x8-message-row.fluxo {
  align-self: flex-end;
}

body.x8-home #deliver .x8-message-row p {
  font-size: 13.5px;
  line-height: 1.32;
}

@media (min-width: 981px) and (max-width: 1500px) {
  body.x8-home #deliver .x8-message-row {
    width: 86%;
    gap: 4px;
    padding: 9px 11px;
    margin-bottom: 5px;
  }

  body.x8-home #deliver .x8-message-row small {
    min-height: 20px;
    padding: 0 8px;
  }

  body.x8-home #deliver .x8-message-row p {
    font-size: 11.8px;
    line-height: 1.28;
  }
}

@media (max-width: 980px) {
  body.x8-home #deliver .x8-message-row {
    width: 100%;
  }
}

/* Fluxo SEO keyword planning homepage update */
.x8-keyword-map-section {
  padding: 92px 0;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 124, 85, .12), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(178, 93, 215, .12), transparent 34%),
    linear-gradient(180deg, #fff, #fff7f2);
}

.x8-keyword-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.x8-keyword-map-grid article,
.x8-seo-note,
.x8-keyword-table-wrap {
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 22px 70px rgba(16,16,20,.08);
}

.x8-keyword-map-grid article {
  padding: 24px;
  border-radius: 28px;
  min-height: 230px;
  transition: transform .24s ease, box-shadow .24s ease;
}

.x8-keyword-map-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 86px rgba(16,16,20,.12);
}

.x8-keyword-map-grid article span {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: 11px;
  font-weight: 950;
  color: #f06d4f;
  margin-bottom: 18px;
}

.x8-keyword-map-grid article h3 {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 14px;
}

.x8-keyword-map-grid article p {
  margin: 0;
  color: #5d6170;
  font-weight: 750;
  line-height: 1.55;
}

.x8-keyword-table-wrap {
  margin-top: 30px;
  border-radius: 30px;
  overflow: hidden;
  overflow-x: auto;
}

.x8-keyword-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.x8-keyword-table th,
.x8-keyword-table td {
  text-align: left;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(16,16,20,.07);
  vertical-align: top;
}

.x8-keyword-table th {
  background: #101014;
  color: #fff;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.x8-keyword-table td {
  color: #20222a;
  font-size: 14px;
  line-height: 1.42;
  font-weight: 760;
}

.x8-keyword-table td:first-child,
.x8-keyword-table td:nth-child(2) {
  font-weight: 950;
}

.x8-seo-note {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 24px;
  color: #4b4f5d;
  font-weight: 780;
  line-height: 1.55;
}

.x8-seo-note strong {
  color: #101014;
}

.x8-seo-intro {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 44px;
  padding: 18px 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(16,16,20,.07);
  color: #5d6170;
  font-weight: 760;
  line-height: 1.55;
  box-shadow: 0 16px 48px rgba(16,16,20,.06);
}

@media (max-width: 1100px) {
  .x8-keyword-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .x8-keyword-map-section {
    padding: 64px 0;
  }

  .x8-keyword-map-grid {
    grid-template-columns: 1fr;
  }

  .x8-keyword-map-grid article {
    min-height: auto;
  }
}

/* Final Fluxo homepage update: client-friendly SEO section */
.x8-rank-convert-section {
  padding: 96px 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 124, 85, .13), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(178, 93, 215, .12), transparent 36%),
    linear-gradient(180deg, #fff, #fff7f3 55%, #fff);
}

.x8-rank-convert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 36px;
}

.x8-rank-convert-grid article {
  min-height: 255px;
  padding: 24px;
  border-radius: 30px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 22px 70px rgba(16,16,20,.08);
  transition: transform .24s ease, box-shadow .24s ease;
}

.x8-rank-convert-grid article:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 86px rgba(16,16,20,.13);
}

.x8-rank-convert-grid i {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brand-gradient);
  color: #101014;
  font-style: normal;
  font-weight: 950;
  margin-bottom: 20px;
}

.x8-rank-convert-grid h3 {
  font-size: 24px;
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 14px;
}

.x8-rank-convert-grid p {
  margin: 0;
  color: #5d6170;
  font-weight: 760;
  line-height: 1.55;
}

.x8-google-understands-card {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: center;
  padding: 30px;
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(16,16,20,.96), rgba(42,42,52,.92)),
    #101014;
  color: #fff;
  box-shadow: 0 30px 90px rgba(16,16,20,.16);
  overflow: hidden;
  position: relative;
}

.x8-google-understands-card::after {
  content: "";
  position: absolute;
  inset: auto -70px -100px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: var(--brand-gradient);
  opacity: .22;
  filter: blur(10px);
}

.x8-google-understands-card span {
  position: relative;
  z-index: 1;
}

.x8-google-understands-card > div:first-child span {
  display: inline-flex;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
  font-weight: 950;
  color: #ffc48a;
  margin-bottom: 14px;
}

.x8-google-understands-card h3 {
  position: relative;
  z-index: 1;
  font-size: clamp(32px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.06em;
  margin: 0 0 16px;
}

.x8-google-understands-card p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.72);
  font-weight: 760;
  line-height: 1.6;
  margin: 0;
}

.x8-google-signal-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.x8-google-signal-list span {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 13px;
  font-weight: 850;
  color: rgba(255,255,255,.86);
}

.visually-hidden-seo {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 1100px) {
  .x8-rank-convert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .x8-google-understands-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .x8-rank-convert-section {
    padding: 68px 0;
  }

  .x8-rank-convert-grid {
    grid-template-columns: 1fr;
  }

  .x8-rank-convert-grid article {
    min-height: auto;
  }

  .x8-google-understands-card {
    padding: 22px;
    border-radius: 26px;
  }

  .x8-google-signal-list {
    grid-template-columns: 1fr;
  }
}

/* Fluxo final update: remove pricing and style Our Works CTA */
.portfolio-card a,
.work-card a,
.project-card a,
.case-card a,
.portfolio-card .btn,
.work-card .btn,
.project-card .btn,
.case-card .btn,
a[href*="portfolio"],
a[href*="our-work"] {
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.portfolio-card a[href],
.work-card a[href],
.project-card a[href],
.case-card a[href],
.portfolio-grid a[href],
.works-grid a[href] {
  background: var(--brand-gradient) !important;
  color: #101014 !important;
  border: 0 !important;
  box-shadow: 0 18px 42px rgba(242, 98, 98, .24) !important;
}

.portfolio-card a[href]:hover,
.work-card a[href]:hover,
.project-card a[href]:hover,
.case-card a[href]:hover,
.portfolio-grid a[href]:hover,
.works-grid a[href]:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 58px rgba(178, 93, 215, .28) !important;
}

.work-arrow {
  display: inline-block;
  margin-left: 8px;
  font-size: 1.1em;
  line-height: 1;
  transition: transform .22s ease;
}

a:hover .work-arrow,
button:hover .work-arrow {
  transform: translateX(4px);
}

/* Keep portfolio buttons visually consistent */
.portfolio-card a[href],
.work-card a[href],
.project-card a[href],
.case-card a[href] {
  font-weight: 950 !important;
  border-radius: 999px !important;
}

/* Fluxo services + contact pages */
.fluxo-inner-page {
  background:
    radial-gradient(circle at 12% 4%, rgba(255, 122, 69, .16), transparent 28%),
    radial-gradient(circle at 88% 0%, rgba(192, 91, 216, .16), transparent 30%),
    linear-gradient(180deg, #fff7f1 0%, #fff 44%, #fff7f1 100%);
}

.nav-service-toggle.active {
  background: rgba(255, 122, 69, .12);
  color: #ff6453;
}

.all-service-thumb {
  display: grid;
  place-items: center;
  font-weight: 950;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  color: #101014;
}

/* Services listing page */
.service-list-main {
  overflow: hidden;
}

.service-list-wrap,
.contact-wrap {
  width: min(1320px, calc(100% - 72px));
  margin: 0 auto;
}

.service-list-hero {
  padding: 190px 0 70px;
  background:
    radial-gradient(circle at 20% 24%, rgba(255, 122, 69, .20), transparent 32%),
    radial-gradient(circle at 82% 16%, rgba(192, 91, 216, .18), transparent 34%),
    #050117;
  color: #fff;
}

.service-list-hero .service-list-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 470px;
  gap: 60px;
  align-items: center;
}

.service-list-eyebrow,
.service-list-head span,
.contact-eyebrow,
.contact-flow-card > div > span,
.contact-form-card > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffbda6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.service-list-hero h1 {
  margin: 20px 0 20px;
  font-size: clamp(46px, 5vw, 82px);
  line-height: .94;
  letter-spacing: -.075em;
  font-weight: 950;
  max-width: 980px;
}

.service-list-hero p {
  margin: 0;
  max-width: 780px;
  color: rgba(255,255,255,.72);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.58;
  font-weight: 760;
}

.service-list-actions,
.contact-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 34px;
}

.service-list-primary,
.contact-primary,
.contact-submit,
.service-list-bottom-card > a {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 25px;
  font-weight: 950;
  color: #101014;
  text-decoration: none;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  box-shadow: 0 18px 52px rgba(192, 91, 216, .24);
}

.service-list-secondary,
.contact-secondary {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 25px;
  font-weight: 950;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.service-list-visual {
  min-height: 470px;
  border-radius: 42px;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.13), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 110px rgba(0,0,0,.26);
  overflow: hidden;
}

.service-list-visual::before,
.service-list-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  filter: blur(4px);
  opacity: .66;
}

.service-list-visual::before { width: 260px; height: 260px; left: -80px; top: -60px; }
.service-list-visual::after { width: 320px; height: 320px; right: -120px; bottom: -120px; }

.service-orbit-core {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 42px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #fff;
  color: #101014;
  font-size: 48px;
  font-weight: 950;
  line-height: .86;
  z-index: 2;
  box-shadow: 0 26px 80px rgba(0,0,0,.22);
}
.service-orbit-core span { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

.service-orbit-card {
  position: absolute;
  z-index: 2;
  padding: 13px 16px;
  border-radius: 999px;
  color: #fff;
  font-weight: 950;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(12px);
  animation: serviceFloat 5.2s ease-in-out infinite;
}

.service-orbit-card.one { left: 38px; top: 90px; }
.service-orbit-card.two { right: 42px; top: 118px; animation-delay: .8s; }
.service-orbit-card.three { left: 60px; bottom: 118px; animation-delay: 1.3s; }
.service-orbit-card.four { right: 82px; bottom: 86px; animation-delay: 1.8s; }

@keyframes serviceFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.service-list-section {
  padding: 82px 0 98px;
  background: #050117;
}

.service-list-head {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 32px;
  align-items: end;
  margin-bottom: 38px;
  color: #fff;
}

.service-list-head span {
  width: max-content;
}

.service-list-head h2 {
  margin: 0;
  font-size: clamp(34px, 3.6vw, 62px);
  line-height: .98;
  letter-spacing: -.06em;
  font-weight: 950;
}

.service-list-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.service-list-card {
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .26s ease, box-shadow .26s ease;
}

.service-list-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 100px rgba(0,0,0,.28);
}

.service-list-img {
  padding: 14px 14px 0;
}

.service-list-img img {
  width: 100%;
  height: 255px;
  display: block;
  object-fit: cover;
  border-radius: 22px;
}

.service-list-body {
  padding: 24px 26px 28px;
}

.service-list-count {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  color: #101014;
  font-weight: 950;
  margin-bottom: 16px;
}

.service-list-card h2 {
  font-size: clamp(24px, 2vw, 33px);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 0 0 14px;
  color: #101014;
}

.service-list-card p {
  margin: 0;
  color: #5d6170;
  font-size: 15.5px;
  line-height: 1.58;
  font-weight: 720;
}

.service-list-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 22px;
}

.service-list-tags span {
  border-radius: 999px;
  background: #fff1ec;
  color: #e26551;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 8px 10px;
}

.service-list-cta {
  min-height: 54px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 8px;
  background: #101014;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  transition: background .24s ease, transform .24s ease;
}

.service-list-cta:hover {
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  color: #101014;
  transform: translateY(-2px);
}

.service-list-bottom-cta {
  padding: 0 0 90px;
  background: #050117;
}

.service-list-bottom-card {
  padding: 36px;
  border-radius: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
}

.service-list-bottom-card span {
  color: #ffbda6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}
.service-list-bottom-card h2 {
  margin: 10px 0 12px;
  font-size: clamp(30px, 3.4vw, 56px);
  line-height: .98;
  letter-spacing: -.06em;
}
.service-list-bottom-card p {
  color: rgba(255,255,255,.72);
  margin: 0;
  font-weight: 760;
}

/* Contact page */
.contact-page-main {
  overflow: hidden;
}

.contact-hero-section {
  padding: 190px 0 80px;
  background:
    radial-gradient(circle at 16% 14%, rgba(255, 122, 69, .18), transparent 30%),
    radial-gradient(circle at 82% 10%, rgba(192, 91, 216, .15), transparent 32%),
    linear-gradient(180deg, #fff7f1, #fff);
}

.contact-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 58px;
  align-items: center;
}

.contact-eyebrow,
.contact-form-card > span,
.contact-flow-card > div > span {
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(16,16,20,.08);
  color: #f05f53;
}

.contact-hero-copy h1 {
  margin: 20px 0 20px;
  font-size: clamp(46px, 5vw, 82px);
  line-height: .94;
  letter-spacing: -.075em;
  font-weight: 950;
  color: #101014;
}

.contact-hero-copy p {
  margin: 0;
  color: #5d6170;
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.58;
  font-weight: 760;
}

.contact-secondary {
  color: #101014;
  background: #fff;
  border-color: rgba(16,16,20,.10);
  box-shadow: 0 16px 44px rgba(16,16,20,.06);
}

.contact-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 28px;
}

.contact-quick-chips span {
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,16,20,.08);
  color: #555b69;
  font-size: 11px;
  font-weight: 900;
}

.contact-form-card {
  padding: 30px;
  border-radius: 34px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 30px 90px rgba(16,16,20,.12);
}

.contact-form-card h2 {
  margin: 16px 0 20px;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.045em;
  color: #101014;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.contact-form-card label {
  display: grid;
  gap: 8px;
  color: #555b69;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}

.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea {
  width: 100%;
  border: 1px solid rgba(16,16,20,.10);
  border-radius: 18px;
  min-height: 52px;
  padding: 0 15px;
  background: #fff;
  color: #101014;
  font: inherit;
  font-size: 15px;
  font-weight: 760;
  outline: none;
}

.contact-form-card textarea {
  padding: 14px 15px;
  resize: vertical;
}

.contact-submit {
  width: 100%;
  margin-top: 4px;
}

.contact-info-section,
.contact-flow-section {
  padding: 78px 0;
  background: #fff;
}

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-info-grid article {
  padding: 28px;
  border-radius: 30px;
  border: 1px solid rgba(16,16,20,.08);
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 70px rgba(16,16,20,.08);
}

.contact-info-grid i {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  font-style: normal;
  font-size: 24px;
  margin-bottom: 20px;
}

.contact-info-grid h3 {
  margin: 0 0 10px;
  font-size: 26px;
  letter-spacing: -.04em;
}

.contact-info-grid p {
  color: #5d6170;
  font-weight: 740;
  line-height: 1.52;
  margin: 0 0 16px;
}

.contact-info-grid a {
  color: #101014;
  font-weight: 950;
  text-decoration: none;
}

.contact-flow-section {
  padding-top: 0;
}

.contact-flow-card {
  padding: 34px;
  border-radius: 36px;
  background: #101014;
  color: #fff;
  box-shadow: 0 30px 90px rgba(16,16,20,.20);
}

.contact-flow-card h2 {
  margin: 14px 0 26px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: .98;
  letter-spacing: -.06em;
}

.contact-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.contact-flow-steps article {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 26px;
  padding: 24px;
}

.contact-flow-steps b {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  color: #101014;
  margin-bottom: 18px;
}

.contact-flow-steps h3 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.contact-flow-steps p {
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.52;
  font-weight: 740;
}

@media (max-width: 1180px) {
  .service-list-wrap,
  .contact-wrap {
    width: min(100% - 40px, 1120px);
  }

  .service-list-hero .service-list-wrap,
  .contact-hero-grid {
    grid-template-columns: 1fr;
  }

  .service-list-visual {
    min-height: 380px;
  }

  .service-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-list-head {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 780px) {
  .service-list-wrap,
  .contact-wrap {
    width: min(100% - 28px, 720px);
  }

  .service-list-hero,
  .contact-hero-section {
    padding-top: 150px;
  }

  .service-list-grid,
  .contact-info-grid,
  .contact-flow-steps,
  .contact-form-grid {
    grid-template-columns: 1fr;
  }

  .service-list-img img {
    height: 210px;
  }

  .service-list-bottom-card {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .service-list-visual {
    display: none;
  }
}

/* Final update: Services nav item opens the dedicated services page */
.nav-service-toggle[href="services.html"] {
  text-decoration: none;
  cursor: pointer;
}

.nav-service-dropdown:hover .nav-service-panel,
.nav-service-dropdown:focus-within .nav-service-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Fluxo redesigned Contact Us page with address */
.contato-premium,
.fluxo-contact-main {
  background:
    radial-gradient(circle at 14% 2%, rgba(255, 122, 69, .18), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(192, 91, 216, .16), transparent 34%),
    linear-gradient(180deg, #fff7f1 0%, #fff 44%, #fff7f1 100%);
}

.contact-premium-wrap {
  width: min(1280px, calc(100% - 72px));
  margin: 0 auto;
}

.fluxo-contact-hero {
  padding: 192px 0 78px;
  position: relative;
  overflow: hidden;
}

.fluxo-contact-hero::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  right: -190px;
  top: 70px;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  opacity: .18;
  filter: blur(8px);
}

.contact-premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) 500px;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.contact-premium-eyebrow,
.contact-form-card > span,
.fluxo-request-form > span,
.contact-service-selector > span,
.contact-map-copy > span,
.contact-flow-premium-card > div > span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(16,16,20,.08);
  color: #f05f53;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.contact-premium-copy h1 {
  margin: 20px 0 22px;
  font-size: clamp(48px, 5.5vw, 88px);
  line-height: .92;
  letter-spacing: -.085em;
  color: #101014;
  font-weight: 950;
}

.contact-premium-copy p {
  max-width: 820px;
  margin: 0;
  color: #5d6170;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.58;
  font-weight: 760;
}

.contact-premium-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 34px 0 24px;
}

.contact-premium-primary,
.contact-premium-secondary,
.contact-panel-whatsapp,
.fluxo-request-form button,
.contact-map-copy a {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 25px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-weight: 950;
  color: #101014;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  box-shadow: 0 18px 52px rgba(192, 91, 216, .24);
  transition: transform .24s ease, box-shadow .24s ease;
}

.contact-premium-primary:hover,
.contact-premium-secondary:hover,
.contact-panel-whatsapp:hover,
.fluxo-request-form button:hover,
.contact-map-copy a:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 64px rgba(192, 91, 216, .30);
}

.contact-premium-secondary {
  color: #101014;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,16,20,.10);
  box-shadow: 0 16px 44px rgba(16,16,20,.06);
}

.contact-address-pill {
  display: grid;
  gap: 7px;
  max-width: 760px;
  padding: 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 18px 56px rgba(16,16,20,.07);
}

.contact-address-pill strong {
  color: #101014;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contact-address-pill span {
  color: #5d6170;
  font-weight: 760;
  line-height: 1.48;
}

.contact-premium-panel {
  border-radius: 38px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 34px 100px rgba(16,16,20,.14);
  overflow: hidden;
}

.contact-panel-top {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 24px;
  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(16,16,20,.07);
}

.contact-panel-top span {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff7a45;
}

.contact-panel-top span:nth-child(2) { background: #ffd166; }
.contact-panel-top span:nth-child(3) { background: #25d366; }

.contact-panel-top b {
  margin-left: auto;
  color: #5d6170;
  font-size: 13px;
  letter-spacing: .09em;
}

.contact-panel-body {
  padding: 28px;
}

.contact-panel-stat {
  min-height: 170px;
  padding: 26px;
  border-radius: 30px;
  background: #101014;
  color: #fff;
  display: grid;
  align-content: center;
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.contact-panel-stat::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  right: -50px;
  bottom: -70px;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  opacity: .28;
}

.contact-panel-stat strong {
  font-size: 82px;
  letter-spacing: -.08em;
  line-height: .8;
}

.contact-panel-stat span {
  color: rgba(255,255,255,.72);
  max-width: 260px;
  margin-top: 12px;
  font-weight: 820;
}

.contact-panel-route {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.contact-panel-route div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(16,16,20,.07);
}

.contact-panel-route i {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  font-style: normal;
  font-weight: 950;
}

.contact-panel-route span {
  font-weight: 850;
  color: #30323a;
}

.contact-panel-whatsapp {
  width: 100%;
}

.contact-premium-info,
.contact-premium-request,
.contact-premium-map-section,
.contact-premium-flow {
  padding: 78px 0;
}

.contact-info-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.contact-info-cards article,
.fluxo-request-form,
.contact-service-selector,
.contact-map-card,
.contact-flow-premium-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 24px 80px rgba(16,16,20,.08);
}

.contact-info-cards article {
  padding: 28px;
  border-radius: 30px;
}

.contact-info-cards i {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  font-style: normal;
  font-size: 24px;
  margin-bottom: 20px;
}

.contact-info-cards h2 {
  margin: 0 0 12px;
  font-size: 26px;
  letter-spacing: -.04em;
}

.contact-info-cards p {
  margin: 0 0 16px;
  color: #5d6170;
  font-weight: 760;
  line-height: 1.55;
}

.contact-info-cards a {
  color: #101014;
  font-weight: 950;
  text-decoration: none;
}

.request-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 28px;
  align-items: stretch;
}

.fluxo-request-form,
.contact-service-selector {
  border-radius: 34px;
  padding: 30px;
}

.fluxo-request-form h2,
.contact-service-selector h2,
.contact-map-copy h2,
.contact-flow-premium-card h2 {
  margin: 16px 0 14px;
  color: #101014;
  font-size: clamp(32px, 3.6vw, 58px);
  line-height: .98;
  letter-spacing: -.06em;
}

.fluxo-request-form p,
.contact-service-selector p,
.contact-map-copy p {
  margin: 0 0 22px;
  color: #5d6170;
  font-weight: 760;
  line-height: 1.55;
}

.request-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.fluxo-request-form label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: #555b69;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fluxo-request-form input,
.fluxo-request-form select,
.fluxo-request-form textarea {
  width: 100%;
  border: 1px solid rgba(16,16,20,.10);
  border-radius: 18px;
  min-height: 54px;
  padding: 0 15px;
  background: #fff;
  color: #101014;
  font: inherit;
  font-size: 15px;
  font-weight: 760;
  outline: none;
}

.fluxo-request-form textarea {
  padding: 14px 15px;
  resize: vertical;
}

.fluxo-request-form button {
  width: 100%;
  margin-top: 4px;
}

.contact-service-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.contact-service-chips span {
  padding: 10px 12px;
  border-radius: 999px;
  background: #fff1ec;
  color: #e26551;
  border: 1px solid rgba(226,101,81,.12);
  font-size: 12px;
  font-weight: 950;
}

.contact-map-card {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 24px;
  padding: 26px;
  border-radius: 36px;
  overflow: hidden;
}

.contact-map-copy {
  padding: 12px 6px 12px 8px;
  align-self: center;
}

.contact-map-visual {
  min-height: 430px;
  border-radius: 30px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,122,69,.20), rgba(192,91,216,.18)),
    #fff;
  border: 1px solid rgba(16,16,20,.08);
}

.contact-map-visual iframe {
  width: 100%;
  height: 100%;
  min-height: 430px;
  border: 0;
  display: block;
}

.contact-flow-premium-card {
  padding: 34px;
  border-radius: 36px;
  background: #101014;
  color: #fff;
}

.contact-flow-premium-card h2 {
  color: #fff;
}

.contact-flow-premium-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.contact-flow-premium-steps article {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.contact-flow-premium-steps b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  color: #101014;
  margin-bottom: 16px;
}

.contact-flow-premium-steps h3 {
  margin: 0 0 10px;
  font-size: 24px;
  letter-spacing: -.035em;
}

.contact-flow-premium-steps p {
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.55;
  font-weight: 740;
}

@media (max-width: 1180px) {
  .contact-premium-wrap {
    width: min(100% - 40px, 980px);
  }

  .contact-premium-grid,
  .request-grid,
  .contact-map-card {
    grid-template-columns: 1fr;
  }

  .contact-info-cards,
  .contact-flow-premium-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .contact-premium-wrap {
    width: min(100% - 28px, 620px);
  }

  .fluxo-contact-hero {
    padding-top: 150px;
  }

  .request-form-row {
    grid-template-columns: 1fr;
  }

  .contact-premium-copy h1 {
    font-size: clamp(40px, 14vw, 62px);
  }

  .contact-premium-panel {
    border-radius: 28px;
  }

  .contact-panel-body,
  .fluxo-request-form,
  .contact-service-selector,
  .contact-flow-premium-card {
    padding: 22px;
  }

  .contact-map-card {
    padding: 18px;
  }

  .contact-map-visual,
  .contact-map-visual iframe {
    min-height: 320px;
  }
}

/* Final Services nav: hover lists services, click opens services.html */
.nav-service-dropdown {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.nav-service-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.nav-service-toggle.active {
  background: rgba(255, 122, 69, .12) !important;
  color: #ff6453 !important;
}

.nav-service-arrow {
  display: inline-flex !important;
  font-size: .78em !important;
  line-height: 1 !important;
  transition: transform .24s ease !important;
}

.nav-service-dropdown:hover .nav-service-arrow,
.nav-service-dropdown:focus-within .nav-service-arrow {
  transform: rotate(180deg);
}

.nav-service-panel {
  display: grid !important;
  position: absolute !important;
  top: calc(100% + 16px) !important;
  left: 50% !important;
  transform: translate(-50%, 10px) !important;
  width: min(460px, 92vw) !important;
  max-height: min(72vh, 680px) !important;
  overflow-y: auto !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .92) !important;
  border: 1px solid rgba(16, 16, 20, .08) !important;
  box-shadow: 0 28px 90px rgba(16, 16, 20, .16) !important;
  backdrop-filter: blur(18px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 9999 !important;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
}

.nav-service-dropdown:hover .nav-service-panel,
.nav-service-dropdown:focus-within .nav-service-panel {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.nav-service-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
}

.nav-service-panel a {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  color: #101014 !important;
  text-decoration: none !important;
  border: 1px solid rgba(16,16,20,.06) !important;
  background: rgba(255,255,255,.72) !important;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
}

.nav-service-panel a + a {
  margin-top: 7px !important;
}

.nav-service-panel a:hover {
  transform: translateX(4px) !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(16,16,20,.08) !important;
}

.nav-service-panel .service-thumb {
  width: 52px !important;
  height: 46px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
}

.nav-service-panel .service-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.nav-service-panel .service-name {
  display: block !important;
  color: #101014 !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
  letter-spacing: -.02em !important;
}

.nav-service-panel .service-desc {
  display: block !important;
  color: #6a6e7d !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
  margin-top: 3px !important;
}

.nav-service-panel .all-service-thumb {
  color: #101014 !important;
  font-weight: 950 !important;
}

@media (max-width: 900px) {
  .nav-service-dropdown {
    width: 100% !important;
    display: grid !important;
  }

  .nav-service-toggle {
    justify-content: space-between !important;
    width: 100% !important;
  }

  .nav-service-panel {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    margin-top: 10px !important;
    box-shadow: none !important;
  }
}

/* Clean altered Contact Us page */
.contact-minimal-page,
.clean-contact-main {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,69,.14), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(192,91,216,.14), transparent 34%),
    linear-gradient(180deg, #fff8f3 0%, #fff 50%, #fff8f3 100%);
}

.clean-contact-wrap {
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto;
}

.clean-contact-hero {
  padding: 188px 0 54px;
  text-align: center;
}

.clean-contact-kicker,
.clean-form-copy > span,
.clean-location-copy > span,
.clean-card-grid article > span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(16,16,20,.08);
  color: #f05f53;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.clean-contact-hero h1 {
  margin: 20px auto 18px;
  max-width: 920px;
  color: #101014;
  font-size: clamp(46px, 6.5vw, 92px);
  line-height: .92;
  letter-spacing: -.085em;
  font-weight: 950;
}

.clean-contact-hero p {
  max-width: 850px;
  margin: 0 auto;
  color: #5d6170;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.58;
  font-weight: 760;
}

.clean-contact-actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
}

.clean-primary,
.clean-secondary,
.clean-contact-form button {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  padding: 0 24px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-weight: 950;
  color: #101014;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  box-shadow: 0 18px 52px rgba(192,91,216,.22);
  transition: transform .24s ease, box-shadow .24s ease;
}

.clean-primary:hover,
.clean-secondary:hover,
.clean-contact-form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 64px rgba(192,91,216,.30);
}

.clean-secondary {
  background: #fff;
  border: 1px solid rgba(16,16,20,.10);
  box-shadow: 0 16px 44px rgba(16,16,20,.06);
}

.clean-contact-strip,
.clean-contact-form-section,
.clean-location-section {
  padding: 54px 0;
}

.clean-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.clean-card-grid article,
.clean-contact-form,
.clean-form-copy,
.clean-location-card {
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,16,20,.08);
  box-shadow: 0 22px 70px rgba(16,16,20,.08);
}

.clean-card-grid article {
  padding: 24px;
  border-radius: 28px;
}

.clean-card-grid article i {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  font-style: normal;
  font-size: 23px;
  margin-bottom: 16px;
}

.clean-card-grid article > span {
  min-height: 30px;
  font-size: 10px;
  margin-bottom: 12px;
}

.clean-card-grid h2 {
  margin: 0 0 10px;
  color: #101014;
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.clean-card-grid p {
  margin: 0 0 14px;
  color: #5d6170;
  font-size: 14px;
  line-height: 1.52;
  font-weight: 740;
}

.clean-card-grid a {
  color: #101014;
  text-decoration: none;
  font-weight: 950;
}

.clean-form-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
}

.clean-form-copy,
.clean-contact-form {
  padding: 30px;
  border-radius: 32px;
}

.clean-form-copy h2,
.clean-location-copy h2 {
  margin: 18px 0 14px;
  color: #101014;
  font-size: clamp(34px, 4vw, 62px);
  line-height: .98;
  letter-spacing: -.065em;
}

.clean-form-copy p,
.clean-location-copy p {
  margin: 0 0 22px;
  color: #5d6170;
  font-size: 16px;
  line-height: 1.58;
  font-weight: 760;
}

.clean-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.clean-service-tags span {
  padding: 9px 11px;
  border-radius: 999px;
  background: #fff1ec;
  border: 1px solid rgba(226,101,81,.12);
  color: #e26551;
  font-size: 11px;
  font-weight: 950;
}

.clean-contact-form label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  color: #555b69;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.clean-contact-form input,
.clean-contact-form select,
.clean-contact-form textarea {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(16,16,20,.10);
  border-radius: 18px;
  padding: 0 15px;
  background: #fff;
  color: #101014;
  outline: none;
  font: inherit;
  font-size: 15px;
  font-weight: 760;
}

.clean-contact-form textarea {
  padding: 14px 15px;
  resize: vertical;
}

.clean-contact-form button {
  width: 100%;
}

.clean-location-section {
  padding-bottom: 88px;
}

.clean-location-card {
  border-radius: 34px;
  padding: 24px;
  display: grid;
  grid-template-columns: 390px 1fr;
  gap: 24px;
  align-items: stretch;
}

.clean-location-copy {
  align-self: center;
  padding: 10px;
}

.clean-primary.small {
  min-height: 50px;
  padding: 0 20px;
}

.clean-map {
  min-height: 390px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(16,16,20,.08);
  background: #fff;
}

.clean-map iframe {
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
  border: 0;
}

@media (max-width: 1120px) {
  .clean-contact-wrap {
    width: min(100% - 40px, 940px);
  }

  .clean-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .clean-form-grid,
  .clean-location-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .clean-contact-wrap {
    width: min(100% - 28px, 620px);
  }

  .clean-contact-hero {
    padding-top: 150px;
  }

  .clean-contact-hero h1 {
    font-size: clamp(40px, 14vw, 62px);
  }

  .clean-card-grid {
    grid-template-columns: 1fr;
  }

  .clean-form-copy,
  .clean-contact-form,
  .clean-location-card {
    padding: 20px;
    border-radius: 26px;
  }

  .clean-map,
  .clean-map iframe {
    min-height: 310px;
  }
}

/* FIXED: Services arrow dropdown with unique classes */
.site-header,
.dream-menu-header,
.x8-header,
.x8-nav,
.dream-nav {
  overflow: visible !important;
  z-index: 9990 !important;
}

.x8-nav,
.dream-nav {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

.fx-service-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: visible !important;
}

.fx-service-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.fx-service-link:hover,
.fx-service-link.active {
  background: rgba(255, 122, 69, .12) !important;
  color: #ff6453 !important;
}

.fx-service-arrow {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  cursor: pointer !important;
  background: rgba(255, 122, 69, .11) !important;
  color: #101014 !important;
  font: inherit !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  z-index: 10001 !important;
}

.fx-service-menu.fx-open .fx-service-arrow {
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
  transform: rotate(180deg) !important;
}

.fx-service-dropdown {
  position: absolute !important;
  top: calc(100% + 14px) !important;
  left: 50% !important;
  width: min(470px, 92vw) !important;
  max-height: min(72vh, 680px) !important;
  overflow-y: auto !important;
  padding: 14px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .98) !important;
  border: 1px solid rgba(16, 16, 20, .08) !important;
  box-shadow: 0 28px 90px rgba(16, 16, 20, .20) !important;
  backdrop-filter: blur(18px) !important;
  display: grid !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, 10px) !important;
  z-index: 100000 !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.fx-service-menu.fx-open .fx-service-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, 0) !important;
}

.fx-service-dropdown a {
  display: grid !important;
  grid-template-columns: 52px 1fr !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 62px !important;
  padding: 8px !important;
  border-radius: 16px !important;
  color: #101014 !important;
  text-decoration: none !important;
  border: 1px solid rgba(16,16,20,.06) !important;
  background: rgba(255,255,255,.84) !important;
  transition: transform .18s ease, background .18s ease !important;
}

.fx-service-dropdown a + a {
  margin-top: 7px !important;
}

.fx-service-dropdown a:hover {
  background: #fff !important;
  transform: translateX(4px) !important;
}

.fx-menu-thumb {
  width: 52px !important;
  height: 46px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
}

.fx-menu-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fx-menu-name {
  display: block !important;
  color: #101014 !important;
  font-size: 14px !important;
  line-height: 1.12 !important;
  font-weight: 950 !important;
}

.fx-menu-desc {
  display: block !important;
  color: #6a6e7d !important;
  font-size: 11.5px !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
  margin-top: 3px !important;
}

.fx-menu-all {
  color: #101014 !important;
  font-weight: 950 !important;
}

@media (max-width: 900px) {
  .fx-service-menu {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 42px !important;
  }

  .fx-service-link {
    justify-content: flex-start !important;
  }

  .fx-service-dropdown {
    grid-column: 1 / -1 !important;
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    transform: none !important;
    margin-top: 10px !important;
    box-shadow: none !important;
  }

  .fx-service-menu.fx-open .fx-service-dropdown {
    transform: none !important;
  }
}

/* Reference-style services page using the provided pictures and content */
.services-ref-main {
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 122, 69, .12), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(192, 91, 216, .13), transparent 30%),
    #040014 !important;
  color: #fff !important;
  min-height: 100vh;
}

.services-ref-wrap {
  width: min(1450px, calc(100% - 110px));
  margin: 0 auto;
}

.services-ref-hero {
  padding: 210px 0 96px;
  text-align: center;
}

.services-ref-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  color: #ffbda6;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.services-ref-hero h1 {
  margin: 24px auto 18px;
  max-width: 1080px;
  font-size: clamp(52px, 6.2vw, 112px);
  line-height: .88;
  letter-spacing: -.085em;
  font-weight: 950;
  color: #fff;
}

.services-ref-hero p {
  max-width: 900px;
  margin: 0 auto;
  color: rgba(255,255,255,.70);
  font-size: clamp(18px, 1.3vw, 22px);
  line-height: 1.58;
  font-weight: 760;
}

.services-ref-section {
  padding: 0 0 86px;
}

.services-ref-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 38px;
}

.services-ref-card {
  background: #fff;
  color: #101014;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 28px 90px rgba(0,0,0,.22);
  transition: transform .24s ease, box-shadow .24s ease;
}

.services-ref-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 38px 110px rgba(0,0,0,.34);
}

.services-ref-image {
  display: block;
  padding: 14px 14px 0;
  text-decoration: none;
}

.services-ref-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 12px;
}

.services-ref-content {
  padding: 34px 22px 38px;
}

.services-ref-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #101014;
  font-weight: 950;
  font-size: 13px;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
}

.services-ref-content h2 {
  margin: 0 0 22px;
  font-size: clamp(26px, 2.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -.045em;
  color: #050507;
  font-weight: 900;
}

.services-ref-content p {
  margin: 0;
  color: #555967;
  font-size: 17px;
  line-height: 1.58;
  font-weight: 500;
}

.services-ref-bottom {
  padding: 0 0 95px;
}

.services-ref-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  padding: 42px;
  border-radius: 32px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
}

.services-ref-cta span {
  color: #ffbda6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.services-ref-cta h2 {
  margin: 10px 0 10px;
  color: #fff;
  font-size: clamp(34px, 4vw, 64px);
  line-height: .95;
  letter-spacing: -.07em;
}

.services-ref-cta p {
  margin: 0;
  max-width: 760px;
  color: rgba(255,255,255,.68);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
}

.services-ref-cta a {
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0 26px;
  color: #101014;
  text-decoration: none;
  font-weight: 950;
  background-image: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2));
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .services-ref-wrap {
    width: min(100% - 44px, 980px);
  }

  .services-ref-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-ref-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .services-ref-wrap {
    width: min(100% - 28px, 640px);
  }

  .services-ref-hero {
    padding-top: 150px;
  }

  .services-ref-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .services-ref-image img {
    height: 240px;
  }

  .services-ref-content {
    padding: 26px 20px 30px;
  }
}

/* FINAL: Services page background matched with all other Fluxo pages */
body:has(.services-ref-main),
.services-ref-main {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 122, 69, .14), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(192, 91, 216, .16), transparent 34%),
    linear-gradient(180deg, #fff8f3 0%, #ffffff 46%, #fff8f3 100%) !important;
  color: #101014 !important;
}

.services-ref-hero {
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 122, 69, .18), transparent 32%),
    radial-gradient(circle at 86% 8%, rgba(192, 91, 216, .16), transparent 34%),
    linear-gradient(180deg, #fff8f3 0%, #ffffff 100%) !important;
  color: #101014 !important;
}

.services-ref-eyebrow {
  color: #f05f53 !important;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(16,16,20,.08) !important;
}

.services-ref-hero h1,
.services-ref-content h2,
.services-ref-cta h2 {
  color: #101014 !important;
}

.services-ref-hero p,
.services-ref-content p,
.services-ref-cta p {
  color: #5d6170 !important;
}

.services-ref-section {
  background:
    linear-gradient(180deg, #ffffff 0%, #fff8f3 100%) !important;
}

.services-ref-card {
  background: rgba(255,255,255,.92) !important;
  color: #101014 !important;
  border: 1px solid rgba(16,16,20,.08) !important;
  box-shadow: 0 24px 80px rgba(16,16,20,.08) !important;
}

.services-ref-card:hover {
  box-shadow: 0 34px 100px rgba(16,16,20,.14) !important;
}

.services-ref-image img {
  box-shadow: none !important;
}

.services-ref-bottom {
  background:
    linear-gradient(180deg, #fff8f3 0%, #ffffff 100%) !important;
}

.services-ref-cta {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,122,69,.14), transparent 32%),
    radial-gradient(circle at 92% 10%, rgba(192,91,216,.16), transparent 34%),
    rgba(255,255,255,.90) !important;
  border: 1px solid rgba(16,16,20,.08) !important;
  box-shadow: 0 28px 90px rgba(16,16,20,.10) !important;
}

.services-ref-cta span {
  color: #f05f53 !important;
}

/* Keep the Services arrow close to the Services text */
.fx-service-menu {
  gap: 1px !important;
}

.fx-service-link {
  padding-right: 6px !important;
}

.fx-service-arrow {
  margin-left: -2px !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.services-light-page {
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 122, 69, .14), transparent 32%),
    radial-gradient(circle at 88% 0%, rgba(192, 91, 216, .16), transparent 34%),
    linear-gradient(180deg, #fff8f3 0%, #ffffff 46%, #fff8f3 100%) !important;
}

/* Final fix: make full Services cards clickable */
a.services-ref-card {
  display: block !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

a.services-ref-card,
a.services-ref-card:visited,
a.services-ref-card:hover,
a.services-ref-card:active {
  color: inherit !important;
}

a.services-ref-card .services-ref-image {
  display: block !important;
  text-decoration: none !important;
}

a.services-ref-card .services-ref-content {
  display: block !important;
}

a.services-ref-card h2,
a.services-ref-card p,
a.services-ref-card span {
  text-decoration: none !important;
}

a.services-ref-card:focus-visible {
  outline: 3px solid rgba(255, 122, 69, .45) !important;
  outline-offset: 6px !important;
}

/* About Us hero picture replacement only */
.about-hero-replaced-image,
.about-us-page .hero img[src*="fluxo-about-hero-system"],
.about-page .hero img[src*="fluxo-about-hero-system"],
img[src*="fluxo-about-hero-system"] {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: inherit !important;
}

/* About hero visual: matching Intention / Creativity / Clarity / Growth graphics */
.studio-image-frame img[src*="fluxo-about-"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* About results: count from 0 on scroll up/down */
.result-card .counter {
  min-width: .72em;
}

.result-card .result-line i {
  transform: scaleX(0) !important;
}

.result-card.is-counting .result-line i {
  transform: scaleX(1) !important;
}

/* About hero tab visuals: each tab uses a unique visual */
.studio-image-frame img[src*="fluxo-about-"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: opacity .16s ease !important;
}

/* Hide accidental dark text inside old SVG overlays by keeping the visual clean and letting HTML overlay handle titles */
.studio-image-frame {
  overflow: hidden !important;
}

/* Result counters animate on scroll */
.result-card .counter {
  min-width: .72em;
}

.result-card .result-line i {
  transform: scaleX(0) !important;
}

.result-card.is-counting .result-line i {
  transform: scaleX(1) !important;
}


/* Final complete Services dropdown: photo thumbnail for every service */
.fx-service-dropdown {
  width: min(540px, 92vw) !important;
  padding: 14px !important;
}

.fx-service-dropdown a {
  grid-template-columns: 68px 1fr !important;
  min-height: 76px !important;
  gap: 14px !important;
}

.fx-menu-thumb {
  width: 68px !important;
  height: 56px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff4ee !important;
  box-shadow: inset 0 0 0 1px rgba(16,16,20,.07) !important;
}

.fx-menu-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fx-menu-name {
  font-size: 14.5px !important;
  line-height: 1.12 !important;
}

.fx-menu-desc {
  font-size: 11.8px !important;
  line-height: 1.28 !important;
}

.fx-view-all-services .fx-menu-name::after {
  content: ' →';
}

/* Nayagi Fireworks replacement */
img[src*="nayagi-fireworks"] {
  object-fit: cover !important;
}
.x8-dashboard-screen img[src*="nayagi-fireworks"],
.project-card img[src*="nayagi-fireworks"],
.work-card img[src*="nayagi-fireworks"],
.portfolio-card img[src*="nayagi-fireworks"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Clean Nayagi project image fit */
img[src*="nayagi-fireworks"] {
  object-fit: cover !important;
  object-position: center !important;
}

.project-card .project-img img[src*="nayagi-fireworks"],
.work-card img[src*="nayagi-fireworks"],
.portfolio-card img[src*="nayagi-fireworks"],
.x8-dashboard-screen img[src*="nayagi-fireworks"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* FINAL OUR WORKS CARD ALIGNMENT — all cards in a row match neatly */
.portfolio-grid,
.projects-grid,
.work-grid,
.works-grid {
  align-items: stretch !important;
}

/* Make every project card a clean equal-height flex card */
.project-card,
.work-card,
.portfolio-card,
.case-card {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Same image area for all Our Works cards */
.project-card .project-img,
.work-card .project-img,
.portfolio-card .project-img,
.case-card .project-img {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  flex: 0 0 300px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

.project-card .project-img img,
.work-card .project-img img,
.portfolio-card .project-img img,
.case-card .project-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Same content rhythm below image */
.project-card .project-content,
.work-card .project-content,
.portfolio-card .project-content,
.case-card .project-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 28px 28px 26px !important;
  min-height: 350px !important;
}

/* Same tag space */
.project-card .project-tag,
.work-card .project-tag,
.portfolio-card .project-tag,
.case-card .project-tag {
  min-height: 34px !important;
  width: fit-content !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Same title block height so 1-line, 2-line and 3-line titles align */
.project-card .project-content h3,
.work-card .project-content h3,
.portfolio-card .project-content h3,
.case-card .project-content h3 {
  min-height: 76px !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: flex-start !important;
}

/* Same description block height */
.project-card .project-content p,
.work-card .project-content p,
.portfolio-card .project-content p,
.case-card .project-content p {
  min-height: 116px !important;
  margin-bottom: 22px !important;
}

/* Button always sits at the bottom */
.project-card .project-btn,
.work-card .project-btn,
.portfolio-card .project-btn,
.case-card .project-btn,
.project-card .btn,
.work-card .btn,
.portfolio-card .btn,
.case-card .btn {
  margin-top: auto !important;
  align-self: stretch !important;
}

/* Nayagi title is shortened but keeps the same title space as nearby cards */
.project-card[data-title="nayagi fireworks"] .project-content h3,
.project-card:has(img[src*="nayagi-fireworks"]) .project-content h3 {
  min-height: 76px !important;
}

/* Laptop view: keep the cards balanced like the reference row */
@media (min-width: 1024px) and (max-width: 1500px) {
  .project-card .project-img,
  .work-card .project-img,
  .portfolio-card .project-img,
  .case-card .project-img {
    height: 285px !important;
    min-height: 285px !important;
    max-height: 285px !important;
    flex-basis: 285px !important;
  }

  .project-card .project-content,
  .work-card .project-content,
  .portfolio-card .project-content,
  .case-card .project-content {
    min-height: 335px !important;
  }
}

/* Nayagi second image final fit */
.project-card img[src*="nayagi-fireworks"],
.portfolio-card img[src*="nayagi-fireworks"],
.work-card img[src*="nayagi-fireworks"],
.x8-dashboard-screen img[src*="nayagi-fireworks"] {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: linear-gradient(270deg, var(--gradient-color-1) var(--gradient-location-1), var(--gradient-color-2) var(--gradient-location-2)) !important;
}

/* Keep the Our Works card row aligned after using contain fit */
.project-card,
.work-card,
.portfolio-card,
.case-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.project-card .project-img,
.work-card .project-img,
.portfolio-card .project-img,
.case-card .project-img {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
  flex: 0 0 300px !important;
  overflow: hidden !important;
}

.project-card .project-content,
.work-card .project-content,
.portfolio-card .project-content,
.case-card .project-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 350px !important;
}

.project-card .project-content h3,
.work-card .project-content h3,
.portfolio-card .project-content h3,
.case-card .project-content h3 {
  min-height: 76px !important;
}

.project-card .project-content p,
.work-card .project-content p,
.portfolio-card .project-content p,
.case-card .project-content p {
  min-height: 116px !important;
}

.project-card .project-btn,
.work-card .project-btn,
.portfolio-card .project-btn,
.case-card .project-btn,
.project-card .btn,
.work-card .btn,
.portfolio-card .btn,
.case-card .btn {
  margin-top: auto !important;
  align-self: stretch !important;
}

/* WhatsApp visibility + new-tab behavior support
   Uses inline SVG icons so the logo stays visible on every page, even when Font Awesome is not loaded. */
.nav-whatsapp svg,
.float-btn.whatsapp svg,
.tmp-whatsapp svg,
.play-whatsapp svg{
  display:block !important;
  fill:currentColor !important;
}
.nav-whatsapp svg{
  width:25px !important;
  height:25px !important;
}
.float-btn.whatsapp svg{
  width:28px !important;
  height:28px !important;
}

/* FINAL FIX: Keep the Services arrow visually close to the Services text */
@media (min-width: 901px) {
  .nav.dream-nav.x8-nav .fx-service-menu,
  .nav.dream-nav .fx-service-menu,
  .fx-service-menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-link,
  .nav.dream-nav .fx-service-link,
  .fx-service-link {
    padding-left: 14px !important;
    padding-right: 2px !important;
    margin-right: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-arrow,
  .nav.dream-nav .fx-service-arrow,
  .fx-service-arrow {
    width: 24px !important;
    height: 34px !important;
    min-width: 24px !important;
    min-height: 34px !important;
    margin-left: -3px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-menu.fx-open .fx-service-arrow,
  .nav.dream-nav .fx-service-menu.fx-open .fx-service-arrow,
  .fx-service-menu.fx-open .fx-service-arrow {
    background: transparent !important;
    color: #ff5b4b !important;
    transform: rotate(180deg) !important;
  }
}

/* =========================================================
   FINAL OVERRIDE: Services arrow close alignment
   Keeps the dropdown arrow visually attached to the Services text
   across all pages without changing the rest of the navbar.
   ========================================================= */
@media (min-width: 901px) {
  .nav.dream-nav.x8-nav .fx-service-menu,
  .nav.dream-nav .fx-service-menu,
  .fx-service-menu {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-link,
  .nav.dream-nav .fx-service-link,
  .fx-service-link {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-arrow,
  .nav.dream-nav .fx-service-arrow,
  .fx-service-arrow {
    width: 16px !important;
    min-width: 16px !important;
    height: 34px !important;
    min-height: 34px !important;
    margin-left: -7px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: currentColor !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transform: translateY(-1px) !important;
  }

  .nav.dream-nav.x8-nav .fx-service-menu.fx-open .fx-service-arrow,
  .nav.dream-nav .fx-service-menu.fx-open .fx-service-arrow,
  .fx-service-menu.fx-open .fx-service-arrow {
    background: transparent !important;
    color: #ff5b4b !important;
    transform: translateY(-1px) rotate(180deg) !important;
  }
}

@media (max-width: 900px) {
  .nav.dream-nav.x8-nav .fx-service-menu,
  .nav.dream-nav .fx-service-menu,
  .fx-service-menu {
    grid-template-columns: max-content 30px minmax(0, 1fr) !important;
    gap: 0 !important;
    column-gap: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-link,
  .nav.dream-nav .fx-service-link,
  .fx-service-link {
    padding-right: 4px !important;
    margin-right: 0 !important;
  }

  .nav.dream-nav.x8-nav .fx-service-arrow,
  .nav.dream-nav .fx-service-arrow,
  .fx-service-arrow {
    width: 30px !important;
    min-width: 30px !important;
    margin-left: -8px !important;
  }
}